natty
/
misskey-awawa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make timeline widget flexible (#5788)

This commit is contained in:
tamaina 2020-01-30 18:32:09 +09:00 committed by GitHub
parent 9107895754
commit f6987c72ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/app.vue
View File

@ -924,7 +924,7 @@ export default Vue.extend({
> div { > div {
position: sticky; position: sticky;
top: calc(#{$header-height} + var(--margin)); top: calc(#{$header-height} + var(--margin));
height: calc(100vh - #{$header-height} - var(--margin)); height: calc(100vh - #{$header-height} - var(--margin) * 2);
&.edit { &.edit {
overflow: auto; overflow: auto;

53
src/client/widgets/timeline.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mkw-timeline"> <div class="mkw-timeline" :style="`flex-basis: ${basis}%; height: ${previewHeight}px;`">
<mk-container :show-header="!props.compact"> <mk-container :show-header="!props.compact" class="container">
<template #header> <template #header>
<button @click="choose" class="_button"> <button @click="choose" class="_button">
<fa v-if="props.src === 'home'" :icon="faHome"/> <fa v-if="props.src === 'home'" :icon="faHome"/>
@ -14,7 +14,7 @@
</button> </button>
</template> </template>
<div style="height: 300px; padding: 8px; overflow: auto; background: var(--bg);"> <div class="tl">
<x-timeline :key="props.src === 'list' ? `list:${props.list.id}` : props.src === 'antenna' ? `antenna:${props.antenna.id}` : props.src" :src="props.src" :list="props.list" :antenna="props.antenna"/> <x-timeline :key="props.src === 'list' ? `list:${props.list.id}` : props.src === 'antenna' ? `antenna:${props.antenna.id}` : props.src" :src="props.src" :list="props.list" :antenna="props.antenna"/>
</div> </div>
</mk-container> </mk-container>
@ -29,12 +29,16 @@ import XTimeline from '../components/timeline.vue';
import define from './define'; import define from './define';
import i18n from '../i18n'; import i18n from '../i18n';
const basisSteps = [25, 50, 75, 100]
const previewHeights = [200, 300, 400, 500]
export default define({ export default define({
name: 'timeline', name: 'timeline',
props: () => ({ props: () => ({
src: 'home', src: 'home',
list: null, list: null,
compact: false compact: false,
basisStep: 0
}) })
}).extend({ }).extend({
i18n, i18n,
@ -51,9 +55,25 @@ export default define({
}; };
}, },
computed: {
basis(): number {
return basisSteps[this.props.basisStep] || 25
},
previewHeight(): number {
return previewHeights[this.props.basisStep] || 300
}
},
methods: { methods: {
func() { func() {
if (this.props.basisStep === basisSteps.length - 1) {
this.props.basisStep = 0
this.props.compact = !this.props.compact; this.props.compact = !this.props.compact;
} else {
this.props.basisStep += 1
}
this.save(); this.save();
}, },
@ -111,3 +131,28 @@ export default define({
} }
}); });
</script> </script>
<style lang="scss">
.mkw-timeline {
flex-grow: 1;
flex-shrink: 0;
.container {
display: flex;
flex-direction: column;
height: 100%;
> div {
overflow: auto;
flex-grow: 1;
}
}
.tl {
height: 100%;
padding: 8px;
background: var(--bg);
box-sizing: border-box;
}
}
</style>