Improve deck

2020-12-26 18:33:54 +09:00
parent 94598ab555
commit 78598a92f9
7 changed files with 123 additions and 98 deletions
--- a/src/client/ui/deck/column-core.vue
+++ b/src/client/ui/deck/column-core.vue
@@ -1,6 +1,7 @@
 <template>
 <!-- TODO: リファクタの余地がありそう -->
-<XWidgetsColumn v-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" @parent-focus="$emit('parent-focus', $event)"/>
+<XMainColumn v-if="column.type === 'main'" :column="column" :is-stacked="isStacked" @parent-focus="$emit('parent-focus', $event)"/>
+<XWidgetsColumn v-else-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" @parent-focus="$emit('parent-focus', $event)"/>
 <XNotificationsColumn v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" @parent-focus="$emit('parent-focus', $event)"/>
 <XTlColumn v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" @parent-focus="$emit('parent-focus', $event)"/>
 <XListColumn v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" @parent-focus="$emit('parent-focus', $event)"/>
@@ -12,6 +13,7 @@

 <script lang="ts">
 import { defineComponent } from 'vue';
+import XMainColumn from './main-column.vue';
 import XTlColumn from './tl-column.vue';
 import XAntennaColumn from './antenna-column.vue';
 import XListColumn from './list-column.vue';
@@ -22,6 +24,7 @@ import XDirectColumn from './direct-column.vue';

 export default defineComponent({
 	components: {
+		XMainColumn,
 		XTlColumn,
 		XAntennaColumn,
 		XListColumn,
--- a/src/client/ui/deck/column.vue
+++ b/src/client/ui/deck/column.vue
@@ -5,7 +5,6 @@
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"
 	v-hotkey="keymap"
-	:style="{ width: `${width}px` }"
 >
 	<header :class="{ indicated }"
 		draggable="true"
@@ -14,7 +13,7 @@
 		@dragend="onDragend"
 		@contextmenu.prevent.stop="onContextmenu"
 	>
-		<button class="toggleActive _button" @click="toggleActive" v-if="isStacked">
+		<button class="toggleActive _button" @click="toggleActive" v-if="isStacked && !isMainColumn">
 			<template v-if="active"><Fa :icon="faAngleUp"/></template>
 			<template v-else><Fa :icon="faAngleDown"/></template>
 		</button>
@@ -35,7 +34,7 @@ import { defineComponent } from 'vue';
 import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
 import * as os from '@/os';
-import { renameColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from './deck-store';
+import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from './deck-store';

 export default defineComponent({
 	props: {
@@ -78,11 +77,7 @@ export default defineComponent({

 	computed: {
 		isMainColumn(): boolean {
-			return this.column == null;
-		},
-
-		width(): number {
-			return this.isMainColumn ? 350 : this.column.width;
+			return this.column.type === 'main';
 		},

 		keymap(): any {
@@ -106,17 +101,13 @@ export default defineComponent({
 	},

 	mounted() {
-		if (!this.isMainColumn) {
-			os.deckGlobalEvents.on('column.dragStart', this.onOtherDragStart);
-			os.deckGlobalEvents.on('column.dragEnd', this.onOtherDragEnd);
-		}
+		os.deckGlobalEvents.on('column.dragStart', this.onOtherDragStart);
+		os.deckGlobalEvents.on('column.dragEnd', this.onOtherDragEnd);
 	},

 	beforeUnmount() {
-		if (!this.isMainColumn) {
-			os.deckGlobalEvents.off('column.dragStart', this.onOtherDragStart);
-			os.deckGlobalEvents.off('column.dragEnd', this.onOtherDragEnd);
-		}
+		os.deckGlobalEvents.off('column.dragStart', this.onOtherDragStart);
+		os.deckGlobalEvents.off('column.dragEnd', this.onOtherDragEnd);
 	},

 	methods: {
@@ -136,18 +127,27 @@ export default defineComponent({
 		getMenu() {
 			const items = [{
 				icon: faPencilAlt,
-				text: this.$ts.rename,
-				action: () => {
-					os.dialog({
-						title: this.$ts.rename,
-						input: {
-							default: this.column.name,
-							allowEmpty: false
+				text: this.$ts.edit,
+				action: async () => {
+					const { canceled, result } = await os.form(this.column.name, {
+						name: {
+							type: 'string',
+							label: this.$ts.name,
+							default: this.column.name
+						},
+						width: {
+							type: 'number',
+							label: this.$ts.width,
+							default: this.column.width
+						},
+						flexible: {
+							type: 'boolean',
+							label: this.$ts.flexible,
+							default: this.column.flexible
 						}
-					}).then(({ canceled, result: name }) => {
-						if (canceled) return;
-						renameColumn(this.column.id, name);
 					});
+					if (canceled) return;
+					updateColumn(this.column.id, result);
 				}
 			}, null, {
 				icon: faArrowLeft,
@@ -203,8 +203,7 @@ export default defineComponent({
 		},

 		onContextmenu(e) {
-			if (this.isMainColumn) return;
-			this.showMenu();
+			os.contextMenu(this.getMenu(), e);
 		},

 		showMenu() {
@@ -219,12 +218,6 @@ export default defineComponent({
 		},

 		onDragstart(e) {
-			// メインカラムはドラッグさせない
-			if (this.isMainColumn) {
-				e.preventDefault();
-				return;
-			}
-
 			e.dataTransfer.effectAllowed = 'move';
 			e.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, this.column.id);
 			this.dragging = true;
@@ -235,12 +228,6 @@ export default defineComponent({
 		},

 		onDragover(e) {
-			// メインカラムにはドロップさせない
-			if (this.isMainColumn) {
-				e.dataTransfer.dropEffect = 'none';
-				return;
-			}
-
 			// 自分自身がドラッグされている場合
 			if (this.dragging) {
 				// 自分自身にはドロップさせない
--- a/src/client/ui/deck/deck-store.ts
+++ b/src/client/ui/deck/deck-store.ts
@@ -36,10 +36,6 @@ export const deckStore = markRaw(new Storage('deck', {
 		where: 'deviceAccount',
 		default: true
 	},
-	mainColumnPlace: {
-		where: 'deviceAccount',
-		default: 'left' as 'left' | 'right'
-	},
 	navWindow: {
 		where: 'deviceAccount',
 		default: true
@@ -200,16 +196,6 @@ export function updateColumnWidget(id: Column['id'], widgetId: string, data: any
 	deckStore.set('columns', columns);
 }

-export function renameColumn(id: Column['id'], name: Column['name']) {
-	const columns = copy(deckStore.state.columns);
-	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
-	const column = copy(deckStore.state.columns[columnIndex]);
-	if (column == null) return;
-	column.name = name;
-	columns[columnIndex] = column;
-	deckStore.set('columns', columns);
-}
-
 export function updateColumn(id: Column['id'], column: Partial<Column>) {
 	const columns = copy(deckStore.state.columns);
 	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
--- a/src/client/ui/deck/main-column.vue
+++ b/src/client/ui/deck/main-column.vue
@@ -0,0 +1,59 @@
+<template>
+<XColumn v-if="deckStore.state.alwaysShowMainColumn || $route.name !== 'index'" :column="column" :is-stacked="isStacked">
+	<template #header>
+		<XHeader :info="pageInfo"/>
+	</template>
+
+	<router-view v-slot="{ Component }">
+		<transition>
+			<keep-alive :include="['timeline']">
+				<component :is="Component" :ref="changePage"/>
+			</keep-alive>
+		</transition>
+	</router-view>
+</XColumn>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XColumn from './column.vue';
+import XNotes from '@/components/notes.vue';
+import XHeader from '@/ui/_common_/header.vue';
+import { deckStore } from '@/ui/deck/deck-store';
+
+export default defineComponent({
+	components: {
+		XColumn,
+		XHeader,
+		XNotes
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			deckStore,
+			pageInfo: null,
+			pageKey: 0,
+		}
+	},
+
+	methods: {
+		changePage(page) {
+			if (page == null) return;
+			if (page.INFO) {
+				this.pageInfo = page.INFO;
+			}
+		},
+	}
+});
+</script>