モバイル版でもデッキを使えるように (#4366)

* wip * wip * wip * wip * wip * wip * wip * wip * Fix bug * wip * Update notifications.vue * Update user-menu.vue * deck settings * indicate
2019-02-25 19:45:00 +09:00
parent 3654f247c4
commit c0a60260c2
53 changed files with 711 additions and 666 deletions
--- a/src/client/app/common/views/deck/deck.tl-column.vue
+++ b/src/client/app/common/views/deck/deck.tl-column.vue
@ -0,0 +1,101 @@
+<template>
+<x-column :menu="menu" :name="name" :column="column" :is-stacked="isStacked">
+	<template #header>
+		<fa v-if="column.type == 'home'" icon="home"/>
+		<fa v-if="column.type == 'local'" :icon="['far', 'comments']"/>
+		<fa v-if="column.type == 'hybrid'" icon="share-alt"/>
+		<fa v-if="column.type == 'global'" icon="globe"/>
+		<fa v-if="column.type == 'list'" icon="list"/>
+		<fa v-if="column.type == 'hashtag'" icon="hashtag"/>
+		<span>{{ name }}</span>
+	</template>
+
+	<div class="editor" style="padding:12px" v-if="edit">
+		<ui-switch v-model="column.isMediaOnly" @change="onChangeSettings">{{ $t('is-media-only') }}</ui-switch>
+	</div>
+
+	<x-list-tl v-if="column.type == 'list'"
+		:list="column.list"
+		:media-only="column.isMediaOnly"
+		ref="tl"
+	/>
+	<x-hashtag-tl v-else-if="column.type == 'hashtag'"
+		:tag-tl="$store.state.settings.tagTimelines.find(x => x.id == column.tagTlId)"
+		:media-only="column.isMediaOnly"
+		ref="tl"
+	/>
+	<x-tl v-else
+		:src="column.type"
+		:media-only="column.isMediaOnly"
+		ref="tl"
+	/>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import XColumn from './deck.column.vue';
+import XTl from './deck.tl.vue';
+import XListTl from './deck.list-tl.vue';
+import XHashtagTl from './deck.hashtag-tl.vue';
+
+export default Vue.extend({
+	i18n: i18n('deck/deck.tl-column.vue'),
+	components: {
+		XColumn,
+		XTl,
+		XListTl,
+		XHashtagTl
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			edit: false,
+			menu: [{
+				icon: 'cog',
+				text: this.$t('edit'),
+				action: () => {
+					this.edit = !this.edit;
+				}
+			}]
+		}
+	},
+
+	computed: {
+		name(): string {
+			if (this.column.name) return this.column.name;
+
+			switch (this.column.type) {
+				case 'home': return this.$t('@deck.home');
+				case 'local': return this.$t('@deck.local');
+				case 'hybrid': return this.$t('@deck.hybrid');
+				case 'global': return this.$t('@deck.global');
+				case 'list': return this.column.list.title;
+				case 'hashtag': return this.$store.state.settings.tagTimelines.find(x => x.id == this.column.tagTlId).title;
+			}
+		}
+	},
+
+	methods: {
+		onChangeSettings(v) {
+			this.$store.commit('device/updateDeckColumn', this.column);
+		},
+
+		focus() {
+			this.$refs.tl.focus();
+		}
+	}
+});
+</script>