From 31b30e3dd29c8cebc387222265951fa2be15f885 Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Thu, 6 Dec 2018 11:11:46 +0900 Subject: [PATCH] Resolve #3347 , #3349 (#3513) * Resolve #3347 , #3349 Make deck columns' width be selectable and flexible * deckColumnMinwidth --> deckColumnMinWidth * w-default --> normal * :v: --- locales/ja-JP.yml | 9 ++++- .../app/desktop/views/components/settings.vue | 14 ++++++++ .../desktop/views/pages/deck/deck.column.vue | 3 +- .../app/desktop/views/pages/deck/deck.vue | 35 ++++++++++++++++++- src/client/app/store.ts | 1 + 5 files changed, 58 insertions(+), 4 deletions(-) diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 5c78681b1..54dad96f8 100644 --- a/locales/ja-JP.yml +++ b/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: "サウンドを有効にする" diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue index a6a938960..d2ba2c8e7 100644 --- a/src/client/app/desktop/views/components/settings.vue +++ b/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 }); } diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue index bb3f0d8c1..13f7638a0 100644 --- a/src/client/app/desktop/views/pages/deck/deck.column.vue +++ b/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) diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue index 885f72a04..56c6dd051 100644 --- a/src/client/app/desktop/views/pages/deck/deck.vue +++ b/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) diff --git a/src/client/app/store.ts b/src/client/app/store.ts index 9e27206d6..633170e37 100644 --- a/src/client/app/store.ts +++ b/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,