From 1da3777bfb24fcff92950627add447e17e221918 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 28 Dec 2020 11:56:42 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=87=E3=83=83=E3=82=AD=E5=91=A8=E3=82=8A?=
 =?UTF-8?q?=E6=94=B9=E4=BF=AE=E3=81=AA=E3=81=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/pages/scratchpad.vue             | 17 +++++-----
 src/client/ui/deck/antenna-column.vue       | 10 +-----
 src/client/ui/deck/column.vue               | 20 +++---------
 src/client/ui/deck/direct-column.vue        |  3 +-
 src/client/ui/deck/list-column.vue          | 10 +-----
 src/client/ui/deck/mentions-column.vue      |  3 +-
 src/client/ui/deck/notifications-column.vue | 35 +++++++++------------
 src/client/ui/deck/tl-column.vue            | 11 +------
 src/client/ui/deck/widgets-column.vue       | 17 +++-------
 src/docs/ja-JP/deck.md                      | 17 ++++++++++
 10 files changed, 56 insertions(+), 87 deletions(-)
 create mode 100644 src/docs/ja-JP/deck.md

diff --git a/src/client/pages/scratchpad.vue b/src/client/pages/scratchpad.vue
index d55910e9d..e070f477b 100644
--- a/src/client/pages/scratchpad.vue
+++ b/src/client/pages/scratchpad.vue
@@ -1,20 +1,20 @@
 <template>
-<div class="">
-	<div class="_panel iltifgqe">
+<div class="iltifgqe">
+	<div class="editor _panel _vMargin">
 		<PrismEditor class="_code code" v-model="code" :highlight="highlighter" :line-numbers="false"/>
 		<MkButton style="position: absolute; top: 8px; right: 8px;" @click="run()" primary><Fa :icon="faPlay"/></MkButton>
 	</div>
 
-	<MkContainer :body-togglable="true">
+	<MkContainer :body-togglable="true" class="_vMargin">
 		<template #header><Fa fixed-width/>{{ $ts.output }}</template>
 		<div class="bepmlvbi">
 			<div v-for="log in logs" class="log" :key="log.id" :class="{ print: log.print }">{{ log.text }}</div>
 		</div>
 	</MkContainer>
 
-	<section class="_section" style="margin-top: var(--margin);">
-		<div class="_content">{{ $ts.scratchpadDescription }}</div>
-	</section>
+	<div class="_vMargin">
+		{{ $ts.scratchpadDescription }}
+	</div>
 </div>
 </template>
 
@@ -130,9 +130,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .iltifgqe {
-	position: relative;
+	padding: 16px;
 
-	> .code {
+	> .editor {
+		position: relative;
 	}
 }
 
diff --git a/src/client/ui/deck/antenna-column.vue b/src/client/ui/deck/antenna-column.vue
index 0b3ae3af5..c6aa201e4 100644
--- a/src/client/ui/deck/antenna-column.vue
+++ b/src/client/ui/deck/antenna-column.vue
@@ -1,5 +1,5 @@
 <template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked">
+<XColumn :func="{ handler: setAntenna, title: $ts.selectAntenna }" :column="column" :is-stacked="isStacked">
 	<template #header>
 		<Fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
@@ -45,14 +45,6 @@ export default defineComponent({
 		}
 	},
 
-	created() {
-		this.menu = [{
-			icon: faCog,
-			text: this.$ts.selectAntenna,
-			action: this.setAntenna
-		}];
-	},
-
 	mounted() {
 		if (this.column.antennaId == null) {
 			this.setAntenna();
diff --git a/src/client/ui/deck/column.vue b/src/client/ui/deck/column.vue
index 1dc990127..f8e4c3e0b 100644
--- a/src/client/ui/deck/column.vue
+++ b/src/client/ui/deck/column.vue
@@ -22,7 +22,7 @@
 			<slot name="action"></slot>
 		</div>
 		<span class="header"><slot name="header"></slot></span>
-		<button v-if="!isMainColumn" class="menu _button" ref="menu" @click.stop="showMenu"><Fa :icon="faCaretDown"/></button>
+		<button v-if="func" class="menu _button" ref="menu" @click.stop="func.handler"><Fa :icon="func.icon || faCog"/></button>
 	</header>
 	<div ref="body" v-show="active">
 		<slot></slot>
@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRight, faArrowLeft, faPencilAlt, faCog } from '@fortawesome/free-solid-svg-icons';
 import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
 import * as os from '@/os';
 import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from './deck-store';
@@ -50,8 +50,8 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
-		menu: {
-			type: Array,
+		func: {
+			type: Object,
 			required: false,
 			default: null
 		},
@@ -74,7 +74,7 @@ export default defineComponent({
 			dragging: false,
 			draghover: false,
 			dropready: false,
-			faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown,
+			faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faCog,
 		};
 	},
 
@@ -196,12 +196,6 @@ export default defineComponent({
 				}
 			}];
 
-			if (this.menu) {
-				for (const i of this.menu.reverse()) {
-					items.unshift(i);
-				}
-			}
-
 			return items;
 		},
 
@@ -209,10 +203,6 @@ export default defineComponent({
 			os.contextMenu(this.getMenu(), e);
 		},
 
-		showMenu() {
-			os.modalMenu(this.getMenu(), this.$refs.menu);
-		},
-
 		goTop() {
 			this.$refs.body.scrollTo({
 				top: 0,
diff --git a/src/client/ui/deck/direct-column.vue b/src/client/ui/deck/direct-column.vue
index 874a55ba0..2ffbed562 100644
--- a/src/client/ui/deck/direct-column.vue
+++ b/src/client/ui/deck/direct-column.vue
@@ -1,5 +1,5 @@
 <template>
-<XColumn :name="name" :column="column" :is-stacked="isStacked" :menu="menu">
+<XColumn :column="column" :is-stacked="isStacked">
 	<template #header><Fa :icon="faEnvelope" style="margin-right: 8px;"/>{{ column.name }}</template>
 
 	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
@@ -33,7 +33,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			menu: null,
 			pagination: {
 				endpoint: 'notes/mentions',
 				limit: 10,
diff --git a/src/client/ui/deck/list-column.vue b/src/client/ui/deck/list-column.vue
index 364d8265e..32807aabc 100644
--- a/src/client/ui/deck/list-column.vue
+++ b/src/client/ui/deck/list-column.vue
@@ -1,5 +1,5 @@
 <template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked">
+<XColumn :func="{ handler: setList, title: $ts.selectList }" :column="column" :is-stacked="isStacked">
 	<template #header>
 		<Fa :icon="faListUl"/><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
@@ -45,14 +45,6 @@ export default defineComponent({
 		}
 	},
 
-	created() {
-		this.menu = [{
-			icon: faCog,
-			text: this.$ts.selectList,
-			action: this.setList
-		}];
-	},
-
 	mounted() {
 		if (this.column.listId == null) {
 			this.setList();
diff --git a/src/client/ui/deck/mentions-column.vue b/src/client/ui/deck/mentions-column.vue
index 3ba4f4e6a..e79a9eb24 100644
--- a/src/client/ui/deck/mentions-column.vue
+++ b/src/client/ui/deck/mentions-column.vue
@@ -1,5 +1,5 @@
 <template>
-<XColumn :column="column" :is-stacked="isStacked" :menu="menu">
+<XColumn :column="column" :is-stacked="isStacked">
 	<template #header><Fa :icon="faAt" style="margin-right: 8px;"/>{{ column.name }}</template>
 
 	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
@@ -33,7 +33,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			menu: null,
 			pagination: {
 				endpoint: 'notes/mentions',
 				limit: 10,
diff --git a/src/client/ui/deck/notifications-column.vue b/src/client/ui/deck/notifications-column.vue
index 0c7f72d9f..5feab8bab 100644
--- a/src/client/ui/deck/notifications-column.vue
+++ b/src/client/ui/deck/notifications-column.vue
@@ -1,5 +1,5 @@
 <template>
-<XColumn :column="column" :is-stacked="isStacked" :menu="menu">
+<XColumn :column="column" :is-stacked="isStacked" :func="{ handler: func, title: $ts.notificationSetting }">
 	<template #header><Fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template>
 
 	<XNotifications :include-types="column.includingTypes"/>
@@ -34,28 +34,23 @@ export default defineComponent({
 
 	data() {
 		return {
-			menu: null,
 			faBell
 		}
 	},
 
-	created() {
-		this.menu = [{
-			icon: faCog,
-			text: this.$ts.notificationSetting,
-			action: () => {
-				os.popup(import('@/components/notification-setting-window.vue'), {
-					includingTypes: this.column.includingTypes,
-				}, {
-					done: async (res) => {
-						const { includingTypes } = res;
-						updateColumn(this.column.id, {
-							includingTypes: includingTypes
-						});
-					},
-				}, 'closed');
-			}
-		}];
-	},
+	methods: {
+		func() {
+			os.popup(import('@/components/notification-setting-window.vue'), {
+				includingTypes: this.column.includingTypes,
+			}, {
+				done: async (res) => {
+					const { includingTypes } = res;
+					updateColumn(this.column.id, {
+						includingTypes: includingTypes
+					});
+				},
+			}, 'closed');
+		}
+	}
 });
 </script>
diff --git a/src/client/ui/deck/tl-column.vue b/src/client/ui/deck/tl-column.vue
index 45b4c72fb..02af6a331 100644
--- a/src/client/ui/deck/tl-column.vue
+++ b/src/client/ui/deck/tl-column.vue
@@ -1,5 +1,5 @@
 <template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
+<XColumn :func="{ handler: setType, title: $ts.timeline }" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
 	<template #header>
 		<Fa v-if="column.tl === 'home'" :icon="faHome"/>
 		<Fa v-else-if="column.tl === 'local'" :icon="faComments"/>
@@ -46,7 +46,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			menu: null,
 			disabled: false,
 			indicated: false,
 			columnActive: true,
@@ -60,14 +59,6 @@ export default defineComponent({
 		}
 	},
 
-	created() {
-		this.menu = [{
-			icon: faCog,
-			text: this.$ts.timeline,
-			action: this.setType
-		}];
-	},
-
 	mounted() {
 		if (this.column.tl == null) {
 			this.setType();
diff --git a/src/client/ui/deck/widgets-column.vue b/src/client/ui/deck/widgets-column.vue
index 39d7dc1cb..32dab4d86 100644
--- a/src/client/ui/deck/widgets-column.vue
+++ b/src/client/ui/deck/widgets-column.vue
@@ -1,5 +1,5 @@
 <template>
-<XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked">
+<XColumn :func="{ handler: func, title: $ts.editWidgets }" :naked="true" :column="column" :is-stacked="isStacked">
 	<template #header><Fa :icon="faWindowMaximize" style="margin-right: 8px;"/>{{ column.name }}</template>
 
 	<div class="wtdtxvec">
@@ -62,7 +62,6 @@ export default defineComponent({
 	data() {
 		return {
 			edit: false,
-			menu: null,
 			widgetAdderSelected: null,
 			widgets,
 			settings: {},
@@ -81,16 +80,6 @@ export default defineComponent({
 		}
 	},
 
-	created() {
-		this.menu = [{
-			icon: faCog,
-			text: this.$ts.edit,
-			action: () => {
-				this.edit = !this.edit;
-			}
-		}];
-	},
-
 	methods: {
 		widgetFunc(id) {
 			this.settings[id]();
@@ -114,6 +103,10 @@ export default defineComponent({
 
 		saveWidget(id, data) {
 			updateColumnWidget(this.column.id, id, data);
+		},
+
+		func() {
+			this.edit = !this.edit;
 		}
 	}
 });
diff --git a/src/docs/ja-JP/deck.md b/src/docs/ja-JP/deck.md
new file mode 100644
index 000000000..3e551d6cf
--- /dev/null
+++ b/src/docs/ja-JP/deck.md
@@ -0,0 +1,17 @@
+# デッキ
+
+デッキは利用可能なUIのひとつです。「カラム」と呼ばれるビューを複数並べて表示させることで、カスタマイズ性が高く、情報量の多いUIが構築できることが特徴です。
+
+## カラムの追加
+デッキの背景を右クリックし、「カラムを追加」して任意のカラムを追加できます。
+
+## カラムの移動
+カラムは、ドラッグアンドドロップで他のカラムと位置を入れ替えることが出来るほか、カラムメニュー(カラムのヘッダー右クリック)から位置を移動させることもできます。
+
+## カラムの水平分割
+カラムは左右だけでなく、上下に並べることもできます。
+カラムメニューを開き、「左に重ねる」を選択すると、左のカラムの下に現在のカラムが移動します。
+上下分割を解除するには、カラムメニューの「右に出す」を選択します。
+
+## カラムの設定
+カラムメニューの「編集」を選択するとカラムの設定を編集できます。カラムの名前を変えたり、幅を変えたりできます。