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

* deckColumnMinwidth --> deckColumnMinWidth

* w-default --> normal

* ✌️
This commit is contained in:
tamaina 2018-12-06 11:11:46 +09:00 committed by syuilo
parent 58b3be438a
commit 31b30e3dd2
5 changed files with 58 additions and 4 deletions

View file

@ -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: "サウンドを有効にする"

View file

@ -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 }); }

View file

@ -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)

View file

@ -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)

View file

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