Improve deck

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: この値を設定で変えられるようにする？
-	$columnMargin: 32px;
-
-	$deckMargin: $columnMargin;
-
+	// TODO: ここではなくて、各カラムで自身の幅に応じて上書きするようにしたい
 	--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;
-		min-height: $header-height;
+		flex-basis: var(--deckColumnHeaderHeight);
+		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;
-		height: $header-height;
+		line-height: var(--deckColumnHeaderHeight);
+		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;
-			line-height: $header-height;
+			width: var(--deckColumnHeaderHeight);
+			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) {