Deck (#6504)

* wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip
2020-07-11 10:13:11 +09:00
parent 5b28d7bf90
commit cf3fc97202
56 changed files with 2695 additions and 907 deletions
--- a/src/client/widgets/timeline.vue
+++ b/src/client/widgets/timeline.vue
@@ -1,24 +1,22 @@
 <template>
-<div class="mkw-timeline" :style="`flex-basis: calc(${basis}% - var(--margin)); 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"/>
-				<fa v-if="props.src === 'local'" :icon="faComments"/>
-				<fa v-if="props.src === 'social'" :icon="faShareAlt"/>
-				<fa v-if="props.src === 'global'" :icon="faGlobe"/>
-				<fa v-if="props.src === 'list'" :icon="faListUl"/>
-				<fa v-if="props.src === 'antenna'" :icon="faSatellite"/>
-				<span style="margin-left: 8px;">{{ props.src === 'list' ? props.list.name : props.src === 'antenna' ? props.antenna.name : $t('_timelines.' + props.src) }}</span>
-				<fa :icon="menuOpened ? faAngleUp : faAngleDown" style="margin-left: 8px;"/>
-			</button>
-		</template>
+<mk-container :show-header="props.showHeader" :style="`height: ${props.height}px;`" :scrollable="true">
+	<template #header>
+		<button @click="choose" class="_button">
+			<fa v-if="props.src === 'home'" :icon="faHome"/>
+			<fa v-if="props.src === 'local'" :icon="faComments"/>
+			<fa v-if="props.src === 'social'" :icon="faShareAlt"/>
+			<fa v-if="props.src === 'global'" :icon="faGlobe"/>
+			<fa v-if="props.src === 'list'" :icon="faListUl"/>
+			<fa v-if="props.src === 'antenna'" :icon="faSatellite"/>
+			<span style="margin-left: 8px;">{{ props.src === 'list' ? props.list.name : props.src === 'antenna' ? props.antenna.name : $t('_timelines.' + props.src) }}</span>
+			<fa :icon="menuOpened ? faAngleUp : faAngleDown" style="margin-left: 8px;"/>
+		</button>
+	</template>

-		<div>
-			<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>
-</div>
+	<div>
+		<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 ? props.list.id : null" :antenna="props.antenna ? props.antenna.id : null"/>
+	</div>
+</mk-container>
 </template>

 <script lang="ts">
@@ -28,19 +26,25 @@ import MkContainer from '../components/ui/container.vue';
 import XTimeline from '../components/timeline.vue';
 import define from './define';

-const basisSteps = [25, 50, 75, 100]
-const previewHeights = [200, 300, 400, 500]
-
 export default define({
 	name: 'timeline',
 	props: () => ({
-		src: 'home',
-		list: null,
-		compact: false,
-		basisStep: 0
+		showHeader: {
+			type: 'boolean',
+			default: true,
+		},
+		src: {
+			type: 'string',
+			default: 'home',
+			hidden: true,
+		},
+		list: {
+			type: 'object',
+			default: null,
+			hidden: true,
+		},
 	})
 }).extend({
-	
 	components: {
 		MkContainer,
 		XTimeline,
@@ -53,28 +57,7 @@ export default define({
 		};
 	},

-	computed: {
-		basis(): number {
-			return basisSteps[this.props.basisStep] || 25
-		},
-
-		previewHeight(): number {
-			return previewHeights[this.props.basisStep] || 200
-		}
-	},
-
 	methods: {
-		func() {
-			if (this.props.basisStep === basisSteps.length - 1) {
-				this.props.basisStep = 0
-				this.props.compact = !this.props.compact;
-			} else {
-				this.props.basisStep += 1
-			}
-
-			this.save();
-		},
-
 		async choose(ev) {
 			this.menuOpened = true;
 			const [antennas, lists] = await Promise.all([
@@ -129,22 +112,3 @@ export default define({
 	}
 });
 </script>
-
-<style lang="scss">
-.mkw-timeline {
-	flex-grow: 1;
-	flex-shrink: 0;
-	min-height: 0; // https://www.gwtcenter.com/min-height-required-on-firefox-flexbox
-
-	.container {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-
-		> div {
-			overflow: auto;
-			flex-grow: 1;
-		}
-	}
-}
-</style>