Improve deck

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) {
 				// 自分自身にはドロップさせない