* 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-local-renotes: "ローカルの投稿のRenoteをタイムラインに表示する"
show-maps: "マップの自動展開" show-maps: "マップの自動展開"
remain-deleted-note: "削除された投稿を表示し続ける" remain-deleted-note: "削除された投稿を表示し続ける"
deck-column-align: "デッキのカラムの置" deck-column-align: "デッキのカラムの置"
deck-column-align-center: "中央" deck-column-align-center: "中央"
deck-column-align-left: "左" 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: "サウンド" sound: "サウンド"
enable-sounds: "サウンドを有効にする" enable-sounds: "サウンドを有効にする"

View File

@ -124,6 +124,15 @@
<header>{{ $t('deck-column-align') }}</header> <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="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="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>
<section> <section>
<ui-switch v-model="games_reversi_showBoardLabels">{{ $t('@.show-reversi-board-labels') }}</ui-switch> <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 }); } 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: { deckDefault: {
get() { return this.$store.state.device.deckDefault; }, get() { return this.$store.state.device.deckDefault; },
set(value) { this.$store.commit('device/set', { key: 'deckDefault', value }); } set(value) { this.$store.commit('device/set', { key: 'deckDefault', value }); }

View File

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

View File

@ -1,6 +1,6 @@
<template> <template>
<mk-ui :class="$style.root"> <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"> <template v-for="ids in layout">
<div v-if="ids.length > 1" class="folder"> <div v-if="ids.length > 1" class="folder">
<template v-for="id, i in ids"> <template v-for="id, i in ids">
@ -369,6 +369,8 @@ export default Vue.extend({
> div > div
margin-right 8px margin-right 8px
width 330px
min-width 330px
&:last-of-type &:last-of-type
margin-right 0 margin-right 0
@ -380,6 +382,26 @@ export default Vue.extend({
> *:not(:last-child) > *:not(:last-child)
margin-bottom 8px 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 &.center
> * > *
&:first-child &:first-child
@ -388,9 +410,20 @@ export default Vue.extend({
&:last-child &:last-child
margin-right auto margin-right auto
&.:not(.flexible)
> *
flex-grow 0
flex-shrink 0
&.flexible
> *
flex-grow 1
flex-shrink 0
> button > button
padding 0 16px padding 0 16px
color var(--faceTextButton) color var(--faceTextButton)
flex-grow 0 !important
&:hover &:hover
color var(--faceTextButtonHover) color var(--faceTextButtonHover)

View File

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