yume/yumechi-no-kuni
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

Make timeline widget flexible (#5788)

Browse source
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 {
position: sticky;
top: calc(#{$header-height} + var(--margin));
height: calc(100vh - #{$header-height} - var(--margin));
height: calc(100vh - #{$header-height} - var(--margin) * 2);
&.edit {
overflow: auto;

55
src/client/widgets/timeline.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="mkw-timeline">
<mk-container :show-header="!props.compact">
<div class="mkw-timeline" :style="`flex-basis: ${basis}%; height: ${previewHeight}px;`">
<mk-container :show-header="!props.compact" class="container">
<template #header>
<button @click="choose" class="_button">
<fa v-if="props.src === 'home'" :icon="faHome"/>
@ -14,7 +14,7 @@
</button>
</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"/>
</div>
</mk-container>
@ -29,12 +29,16 @@ import XTimeline from '../components/timeline.vue';
import define from './define';
import i18n from '../i18n';
const basisSteps = [25, 50, 75, 100]
const previewHeights = [200, 300, 400, 500]
export default define({
name: 'timeline',
props: () => ({
src: 'home',
list: null,
compact: false
compact: false,
basisStep: 0
})
}).extend({
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: {
func() {
this.props.compact = !this.props.compact;
if (this.props.basisStep === basisSteps.length - 1) {
this.props.basisStep = 0
this.props.compact = !this.props.compact;
} else {
this.props.basisStep += 1
}
this.save();
},
@ -111,3 +131,28 @@ export default define({
}
});
</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>