From ad4d2cec914bcdb640d945be20c2ace24390bf10 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 3 Jul 2022 23:13:41 +0900
Subject: [PATCH] enhance(client): tweak deck

---
 locales/ja-JP.yml               |   2 +
 packages/client/src/ui/deck.vue | 114 ++++++++++++++++++--------------
 2 files changed, 65 insertions(+), 51 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 13b9fcfd4..496613400 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1729,6 +1729,8 @@ _deck:
   stackLeft: "左に重ねる"
   popRight: "右に出す"
   profile: "プロファイル"
+  introduction: "カラムを組み合わせて自分だけのインターフェイスを作りましょう！"
+  introduction2: "画面の右にある + を押して、いつでもカラムを追加できます。"
 
   _columns:
     main: "メイン"
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 88fc39061..53e76ea14 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -6,31 +6,34 @@
 
 	<div class="main">
 		<XStatusBars class="statusbars"/>
-		<div class="columnsWrapper">
-			<div ref="columnsEl" class="columns" :class="deckStore.reactiveState.columnAlign.value" @contextmenu.self.prevent="onContextmenu">
-				<template v-for="ids in layout">
-					<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-					<section
-						v-if="ids.length > 1"
-						class="folder column"
-						:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { 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)"/>
-					</section>
-					<DeckColumnCore
-						v-else
-						:ref="ids[0]"
-						:key="ids[0]"
-						class="column"
-						:column="columns.find(c => c.id === ids[0])"
-						:is-stacked="false"
-						:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
-						@parent-focus="moveFocus(ids[0], $event)"
-					/>
-				</template>
+		<div ref="columnsEl" class="columns" :class="deckStore.reactiveState.columnAlign.value" @contextmenu.self.prevent="onContextmenu">
+			<template v-for="ids in layout">
+				<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
+				<section
+					v-if="ids.length > 1"
+					class="folder column"
+					:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { 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)"/>
+				</section>
+				<DeckColumnCore
+					v-else
+					:ref="ids[0]"
+					:key="ids[0]"
+					class="column"
+					:column="columns.find(c => c.id === ids[0])"
+					:is-stacked="false"
+					:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
+					@parent-focus="moveFocus(ids[0], $event)"
+				/>
+			</template>
+			<div v-if="layout.length === 0" class="intro _panel">
+				<div>{{ i18n.ts._deck.introduction }}</div>
+				<MkButton primary class="add" @click="addColumn">{{ i18n.ts._deck.addColumn }}</MkButton>
+				<div>{{ i18n.ts._deck.introduction2 }}</div>
 			</div>
 			<div class="sideMenu">
-				<button class="_button button" @click="addColumn"><i class="fas fa-plus"></i></button>
+				<button v-tooltip="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="fas fa-plus"></i></button>
 			</div>
 		</div>
 	</div>
@@ -67,6 +70,7 @@ import { deckStore, addColumn as addColumnToStore, loadDeck } from './deck/deck-
 import DeckColumnCore from '@/ui/deck/column-core.vue';
 import XSidebar from '@/ui/_common_/sidebar.vue';
 import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue';
+import MkButton from '@/components/ui/button.vue';
 import { getScrollContainer } from '@/scripts/scroll';
 import * as os from '@/os';
 import { menuDef } from '@/menu';
@@ -206,47 +210,55 @@ function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
 		display: flex;
 		flex-direction: column;
 
-		> .columnsWrapper {
+		> .columns {
 			flex: 1;
 			display: flex;
-			flex-direction: row;
+			overflow-x: auto;
+			overflow-y: clip;
 
-			> .columns {
-				flex: 1;
-				display: flex;
-				overflow-x: auto;
-				overflow-y: clip;
-
-				&.center {
-					> .column:first-of-type {
-						margin-left: auto;
-					}
-
-					> .column:last-of-type {
-						margin-right: auto;
-					}
+			&.center {
+				> .column:first-of-type {
+					margin-left: auto;
 				}
 
-				> .column {
-					flex-shrink: 0;
-					border-right: solid var(--deckDividerThickness) var(--deckDivider);
+				> .column:last-of-type {
+					margin-right: auto;
+				}
+			}
 
-					&:first-child {
-						border-left: solid var(--deckDividerThickness) var(--deckDivider);
-					}
+			> .column {
+				flex-shrink: 0;
+				border-right: solid var(--deckDividerThickness) var(--deckDivider);
 
-					&.folder {
-						display: flex;
-						flex-direction: column;
+				&:first-of-type {
+					border-left: solid var(--deckDividerThickness) var(--deckDivider);
+				}
 
-						> *:not(:last-child) {
-							border-bottom: solid var(--deckDividerThickness) var(--deckDivider);
-						}
+				&.folder {
+					display: flex;
+					flex-direction: column;
+
+					> *:not(:last-of-type) {
+						border-bottom: solid var(--deckDividerThickness) var(--deckDivider);
 					}
 				}
 			}
 
+			> .intro {
+				padding: 32px;
+				height: min-content;
+				text-align: center;
+				margin: auto;
+
+				> .add {
+					margin: 1em auto;
+				}
+			}
+
 			> .sideMenu {
+				flex-shrink: 0;
+				margin-right: 0;
+				margin-left: auto;
 				display: flex;
 				flex-direction: column;
 				justify-content: center;