Resolve #3347 , #3349 (#3513)

* Resolve  #3347 , #3349
Make deck columns' width be selectable and flexible

* deckColumnMinwidth --> deckColumnMinWidth

* w-default --> normal

* ✌️

locales/ja-JP.yml

@@ -863,9 +863,16 @@ desktop/views/components/settings.vue:
   show-local-renotes: "ローカルの投稿のRenoteをタイムラインに表示する"
   show-maps: "マップの自動展開"
   remain-deleted-note: "削除された投稿を表示し続ける"
-  deck-column-align: "デッキのカラムの位置"
+  deck-column-align: "デッキのカラムの配置"
   deck-column-align-center: "中央"
   deck-column-align-left: "左"
+  deck-column-align-flexible: "フレキシブル"
+  deck-column-width: "デッキのカラムの幅"
+  deck-column-width-narrow: "狭"
+  deck-column-width-narrower: "やや狭"
+  deck-column-width-normal: "普通"
+  deck-column-width-wider: "やや広"
+  deck-column-width-wide: "広"
 
   sound: "サウンド"
   enable-sounds: "サウンドを有効にする"

src/client/app/desktop/views/components/settings.vue

@@ -124,6 +124,15 @@
 				<header>{{ $t('deck-column-align') }}</header>
 				<ui-radio v-model="deckColumnAlign" value="center">{{ $t('deck-column-align-center') }}</ui-radio>
 				<ui-radio v-model="deckColumnAlign" value="left">{{ $t('deck-column-align-left') }}</ui-radio>
+				<ui-radio v-model="deckColumnAlign" value="flexible">{{ $t('deck-column-align-flexible') }}</ui-radio>
+			</section>
+			<section>
+				<header>{{ $t('deck-column-width') }}</header>
+				<ui-radio v-model="deckColumnWidth" value="narrow">{{ $t('deck-column-width-narrow') }}</ui-radio>
+				<ui-radio v-model="deckColumnWidth" value="narrower">{{ $t('deck-column-width-narrower') }}</ui-radio>
+				<ui-radio v-model="deckColumnWidth" value="normal">{{ $t('deck-column-width-normal') }}</ui-radio>
+				<ui-radio v-model="deckColumnWidth" value="wider">{{ $t('deck-column-width-wider') }}</ui-radio>
+				<ui-radio v-model="deckColumnWidth" value="wide">{{ $t('deck-column-width-wide') }}</ui-radio>
 			</section>
 			<section>
 				<ui-switch v-model="games_reversi_showBoardLabels">{{ $t('@.show-reversi-board-labels') }}</ui-switch>
@@ -357,6 +366,11 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'deckColumnAlign', value }); }
 		},
 
+		deckColumnWidth: {
+			get() { return this.$store.state.device.deckColumnWidth; },
+			set(value) { this.$store.commit('device/set', { key: 'deckColumnWidth', value }); }
+		},
+
 		deckDefault: {
 			get() { return this.$store.state.device.deckDefault; },
 			set(value) { this.$store.commit('device/set', { key: 'deckDefault', value }); }

src/client/app/desktop/views/pages/deck/deck.column.vue

@@ -318,8 +318,6 @@ export default Vue.extend({
 .dnpfarvgbnfmyzbdquhhzyxcmstpdqzs
 	$header-height = 42px
 
-	width 330px
-	min-width 330px
 	height 100%
 	background var(--face)
 	border-radius var(--round)
@@ -354,6 +352,7 @@ export default Vue.extend({
 	&:not(.isStacked).narrow
 		width 285px
 		min-width 285px
+		flex-grow 0 !important
 
 	&.naked
 		background var(--deckAcrylicColumnBg)

src/client/app/desktop/views/pages/deck/deck.vue

@@ -1,6 +1,6 @@
 <template>
 <mk-ui :class="$style.root">
-	<div class="qlvquzbjribqcaozciifydkngcwtyzje" ref="body" :style="style" :class="{ center: $store.state.device.deckColumnAlign == 'center' }" v-hotkey.global="keymap">
+	<div class="qlvquzbjribqcaozciifydkngcwtyzje" ref="body" :style="style" :class="`${$store.state.device.deckColumnAlign} ${$store.state.device.deckColumnWidth}`" v-hotkey.global="keymap">
 		<template v-for="ids in layout">
 			<div v-if="ids.length > 1" class="folder">
 				<template v-for="id, i in ids">
@@ -369,6 +369,8 @@ export default Vue.extend({
 
 	> div
 		margin-right 8px
+		width 330px
+		min-width 330px
 
 		&:last-of-type
 			margin-right 0
@@ -380,6 +382,26 @@ export default Vue.extend({
 			> *:not(:last-child)
 				margin-bottom 8px
 
+	&.narrow
+		> div
+			width 303px
+			min-width 303px
+
+	&.narrower
+		> div
+			width 316.5px
+			min-width 316.5px
+
+	&.wider
+		> div
+			width 343.5px
+			min-width 343.5px
+
+	&.wide
+		> div
+			width 357px
+			min-width 357px
+
 	&.center
 		> *
 			&:first-child
@@ -388,9 +410,20 @@ export default Vue.extend({
 			&:last-child
 				margin-right auto
 
+	&.:not(.flexible)
+		> *
+			flex-grow 0
+			flex-shrink 0
+
+	&.flexible
+		> *
+			flex-grow 1
+			flex-shrink 0
+
 	> button
 		padding 0 16px
 		color var(--faceTextButton)
+		flex-grow 0 !important
 
 		&:hover
 			color var(--faceTextButtonHover)

src/client/app/store.ts

@@ -65,6 +65,7 @@ const defaultDeviceSettings = {
 	postStyle: 'standard',
 	navbar: 'top',
 	deckColumnAlign: 'center',
+	deckColumnWidth: 'normal',
 	mobileNotificationPosition: 'bottom',
 	deckTemporaryColumn: null,
 	deckDefault: false,