Improve deck

src/client/ui/deck.vue

@@ -1,31 +1,25 @@
 <template>
-<div class="mk-deck" :class="`${deckStore.state.columnAlign}`" v-hotkey.global="keymap">
+<div class="mk-deck" :class="`${deckStore.state.columnAlign}`" v-hotkey.global="keymap" @contextmenu.self.prevent="onContextmenu">
 	<XSidebar ref="nav"/>
 
-	<!-- TODO: deckMainColumnPlace を見て位置変える -->
-	<DeckColumn class="column" v-if="deckStore.state.alwaysShowMainColumn || $route.name !== 'index'">
-		<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>
-	</DeckColumn>
-
 	<template v-for="ids in layout">
-		<div v-if="ids.length > 1" class="folder column">
+		<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
+		<section v-if="ids.length > 1"
+			class="folder column"
+			:style="{ width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
+		>
 			<DeckColumnCore v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
-		</div>
-		<DeckColumnCore v-else class="column" :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id === ids[0])" @parent-focus="moveFocus(ids[0], $event)"/>
+		</section>
+		<DeckColumnCore v-else
+			class="column"
+			:ref="ids[0]"
+			:key="ids[0]"
+			:column="columns.find(c => c.id === ids[0])"
+			@parent-focus="moveFocus(ids[0], $event)"
+			:style="columns.find(c => c.id === ids[0]).flexible ? { flex: 1 } : { width: columns.find(c => c.id === ids[0]).width + 'px' }"
+		/>
 	</template>
 
-	<button @click="addColumn" class="_button add"><Fa :icon="faPlus"/></button>
-
 	<button v-if="$i" class="nav _button" @click="showNav()"><Fa :icon="faBars"/><i v-if="navIndicated"><Fa :icon="faCircle"/></i></button>
 	<button v-if="$i" class="post _buttonPrimary" @click="post()"><Fa :icon="faPencilAlt"/></button>
 
@@ -41,9 +35,7 @@ import { v4 as uuid } from 'uuid';
 import { host } from '@/config';
 import { search } from '@/scripts/search';
 import DeckColumnCore from '@/ui/deck/column-core.vue';
-import DeckColumn from '@/ui/deck/column.vue';
 import XSidebar from '@/components/sidebar.vue';
-import XHeader from './_common_/header.vue';
 import { getScrollContainer } from '@/scripts/scroll';
 import * as os from '@/os';
 import { sidebarDef } from '@/sidebar';
@@ -54,8 +46,6 @@ export default defineComponent({
 	components: {
 		XCommon,
 		XSidebar,
-		XHeader,
-		DeckColumn,
 		DeckColumnCore,
 	},
 
@@ -63,8 +53,6 @@ export default defineComponent({
 		return {
 			deckStore,
 			host: host,
-			pageInfo: null,
-			pageKey: 0,
 			menuDef: sidebarDef,
 			wallpaper: localStorage.getItem('wallpaper') != null,
 			faPlus, faPencilAlt, faChevronLeft, faBars, faCircle
@@ -95,12 +83,6 @@ export default defineComponent({
 		},
 	},
 
-	watch: {
-		$route(to, from) {
-			this.pageKey++;
-		},
-	},
-
 	created() {
 		document.documentElement.style.overflowY = 'hidden';
 		document.documentElement.style.scrollBehavior = 'auto';
@@ -111,13 +93,6 @@ export default defineComponent({
 	},
 
 	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page.INFO) {
-				this.pageInfo = page.INFO;
-			}
-		},
-
 		onWheel(e) {
 			if (getScrollContainer(e.target) == null) {
 				document.documentElement.scrollLeft += e.deltaY > 0 ? 96 : -96;
@@ -138,6 +113,7 @@ export default defineComponent({
 
 		async addColumn(ev) {
 			const columns = [
+				'main',
 				'widgets',
 				'notifications',
 				'tl',
@@ -166,6 +142,14 @@ export default defineComponent({
 				width: 330,
 			});
 		},
+
+		onContextmenu(e) {
+			os.contextMenu([{
+				text: this.$ts._deck.addColumn,
+				icon: null,
+				action: this.addColumn
+			}], e);
+		},
 	}
 });
 </script>
@@ -175,7 +159,7 @@ export default defineComponent({
 	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
 
 	// TODO: この値を設定で変えられるようにする？
-	$columnMargin: 12px;
+	$columnMargin: 32px;
 
 	$deckMargin: $columnMargin;
 
@@ -186,14 +170,14 @@ export default defineComponent({
 	height: calc(var(--vh, 1vh) * 100);
 	box-sizing: border-box;
 	flex: 1;
-	padding: $deckMargin 0 $deckMargin $deckMargin;
+	padding: $deckMargin;
 
 	&.center {
 		> .column:first-of-type {
 			margin-left: auto;
 		}
 
-		> .add {
+		> .column:last-of-type {
 			margin-right: auto;
 		}
 	}