Improve deck

locales/ja-JP.yml

@@ -665,6 +665,10 @@ makeExplorable: "アカウントを見つけやすくする"
 makeExplorableDescription: "オフにすると、「みつける」にアカウントが載らなくなります。"
 showGapBetweenNotesInTimeline: "タイムラインのノートを離して表示"
 duplicate: "複製"
+left: "左"
+center: "中央"
+wide: "広い"
+narrow: "狭い"
 
 _aboutMisskey:
   about: "Misskeyはsyuiloによって2014年から開発されている、オープンソースのソフトウェアです。"
@@ -1515,6 +1519,8 @@ _notification:
 _deck:
   alwaysShowMainColumn: "常にメインカラムを表示"
   columnAlign: "カラムの寄せ"
+  columnMargin: "カラム間のマージン"
+  columnHeaderHeight: "カラムのヘッダー幅"
   addColumn: "カラムを追加"
   swapLeft: "左に移動"
   swapRight: "右に移動"

src/client/pages/settings/deck.vue

@@ -1,53 +1,48 @@
 <template>
 <FormBase>
+	<FormGroup>
+		<template #label>{{ $ts.defaultNavigationBehaviour }}</template>
+		<FormSwitch v-model:value="navWindow">{{ $ts.openInWindow }}</FormSwitch>
+	</FormGroup>
 
-	<section class="_card _vMargin">
+	<FormSwitch v-model:value="alwaysShowMainColumn">{{ $ts._deck.alwaysShowMainColumn }}</FormSwitch>
-		<div class="_title"><Fa :icon="faColumns"/> </div>
-		<div class="_content">
-			<div>{{ $ts.defaultNavigationBehaviour }}</div>
-			<MkSwitch v-model:value="navWindow">{{ $ts.openInWindow }}</MkSwitch>
-		</div>
-		<div class="_content">
-			<MkSwitch v-model:value="alwaysShowMainColumn">
-				{{ $ts._deck.alwaysShowMainColumn }}
-			</MkSwitch>
-		</div>
-		<div class="_content">
-			<div>{{ $ts._deck.columnAlign }}</div>
-			<MkRadio v-model="columnAlign" value="left">{{ $ts.left }}</MkRadio>
-			<MkRadio v-model="columnAlign" value="center">{{ $ts.center }}</MkRadio>
-		</div>
-	</section>
 
+	<FormRadios v-model="columnAlign">
+		<template #desc>{{ $ts._deck.columnAlign }}</template>
+		<option value="left">{{ $ts.left }}</option>
+		<option value="center">{{ $ts.center }}</option>
+	</FormRadios>
+
+	<FormRadios v-model="columnHeaderHeight">
+		<template #desc>{{ $ts._deck.columnHeaderHeight }}</template>
+		<option :value="42">{{ $ts.narrow }}</option>
+		<option :value="45">{{ $ts.medium }}</option>
+		<option :value="48">{{ $ts.wide }}</option>
+	</FormRadios>
+
+	<FormInput v-model:value="columnMargin" type="number">
+		<span>{{ $ts._deck.columnMargin }}</span>
+		<template #suffix>px</template>
+	</FormInput>
 </FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faImage, faCog, faColumns } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '@/components/ui/button.vue';
-import MkSwitch from '@/components/ui/switch.vue';
-import MkSelect from '@/components/ui/select.vue';
-import MkRadio from '@/components/ui/radio.vue';
-import MkRadios from '@/components/ui/radios.vue';
-import MkRange from '@/components/ui/range.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormSelect from '@/components/form/select.vue';
 import FormRadios from '@/components/form/radios.vue';
+import FormInput from '@/components/form/input.vue';
 import FormBase from '@/components/form/base.vue';
 import FormGroup from '@/components/form/group.vue';
 import { deckStore } from '@/ui/deck/deck-store';
 
 export default defineComponent({
 	components: {
-		MkButton,
-		MkSwitch,
-		MkSelect,
-		MkRadio,
-		MkRadios,
-		MkRange,
 		FormSwitch,
 		FormSelect,
+		FormInput,
 		FormRadios,
 		FormBase,
 		FormGroup,
@@ -69,6 +64,8 @@ export default defineComponent({
 		navWindow: deckStore.makeGetterSetter('navWindow'),
 		alwaysShowMainColumn: deckStore.makeGetterSetter('alwaysShowMainColumn'),
 		columnAlign: deckStore.makeGetterSetter('columnAlign'),
+		columnMargin: deckStore.makeGetterSetter('columnMargin'),
+		columnHeaderHeight: deckStore.makeGetterSetter('columnHeaderHeight'),
 	},
 
 	mounted() {

src/client/ui/deck.vue

@@ -1,5 +1,7 @@
 <template>
-<div class="mk-deck" :class="`${deckStore.state.columnAlign}`" v-hotkey.global="keymap" @contextmenu.self.prevent="onContextmenu">
+<div class="mk-deck" :class="`${deckStore.reactiveState.columnAlign.value}`" v-hotkey.global="keymap" @contextmenu.self.prevent="onContextmenu"
+	:style="{ '--deckMargin': deckStore.reactiveState.columnMargin.value + 'px' }"
+>
 	<XSidebar ref="nav"/>
 
 	<template v-for="ids in layout">
@@ -158,11 +160,7 @@ export default defineComponent({
 .mk-deck {
 	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
 
-	// TODO: この値を設定で変えられるようにする？
+	// TODO: ここではなくて、各カラムで自身の幅に応じて上書きするようにしたい
-	$columnMargin: 32px;
-
-	$deckMargin: $columnMargin;
-
 	--margin: var(--marginHalf);
 
 	display: flex;
@@ -170,7 +168,7 @@ export default defineComponent({
 	height: calc(var(--vh, 1vh) * 100);
 	box-sizing: border-box;
 	flex: 1;
-	padding: $deckMargin;
+	padding: var(--deckMargin);
 
 	&.center {
 		> .column:first-of-type {
@@ -184,14 +182,14 @@ export default defineComponent({
 
 	> .column {
 		flex-shrink: 0;
-		margin-right: $columnMargin;
+		margin-right: var(--deckMargin);
 
 		&.folder {
 			display: flex;
 			flex-direction: column;
 
 			> *:not(:last-child) {
-				margin-bottom: $columnMargin;
+				margin-bottom: var(--deckMargin);
 			}
 		}
 	}

src/client/ui/deck/column.vue

@@ -5,6 +5,7 @@
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"
 	v-hotkey="keymap"
+	:style="{ '--deckColumnHeaderHeight': deckStore.reactiveState.columnHeaderHeight.value + 'px' }"
 >
 	<header :class="{ indicated }"
 		draggable="true"
@@ -35,6 +36,7 @@ import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRig
 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';
+import { deckStore } from './deck-store';
 
 export default defineComponent({
 	props: {
@@ -67,6 +69,7 @@ export default defineComponent({
 
 	data() {
 		return {
+			deckStore,
 			active: true,
 			dragging: false,
 			draghover: false,
@@ -261,8 +264,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .dnpfarvg {
-	$header-height: 42px;
-
 	--section-padding: 10px;
 
 	height: 100%;
@@ -296,8 +297,8 @@ export default defineComponent({
 	}
 
 	&:not(.active) {
-		flex-basis: $header-height;
+		flex-basis: var(--deckColumnHeaderHeight);
-		min-height: $header-height;
+		min-height: var(--deckColumnHeaderHeight);
 
 		> header.indicated {
 			box-shadow: 4px 0px var(--accent) inset;
@@ -329,8 +330,8 @@ export default defineComponent({
 		position: relative;
 		display: flex;
 		z-index: 2;
-		line-height: $header-height;
+		line-height: var(--deckColumnHeaderHeight);
-		height: $header-height;
+		height: var(--deckColumnHeaderHeight);
 		padding: 0 16px;
 		font-size: 0.9em;
 		color: var(--panelHeaderFg);
@@ -362,8 +363,8 @@ export default defineComponent({
 		> .action > *,
 		> .menu {
 			z-index: 1;
-			width: $header-height;
+			width: var(--deckColumnHeaderHeight);
-			line-height: $header-height;
+			line-height: var(--deckColumnHeaderHeight);
 			font-size: 16px;
 			color: var(--faceTextButton);
 
@@ -395,7 +396,7 @@ export default defineComponent({
 	}
 
 	> div {
-		height: calc(100% - #{$header-height});
+		height: calc(100% - var(--deckColumnHeaderHeight));
 		overflow: auto;
 		overflow-x: hidden;
 		-webkit-overflow-scrolling: touch;

src/client/ui/deck/deck-store.ts

@@ -40,6 +40,14 @@ export const deckStore = markRaw(new Storage('deck', {
 		where: 'deviceAccount',
 		default: true
 	},
+	columnMargin: {
+		where: 'deviceAccount',
+		default: 16
+	},
+	columnHeaderHeight: {
+		where: 'deviceAccount',
+		default: 42
+	},
 }));
 
 export function addColumn(column: Column) {