forked from FoundKeyGang/FoundKey
* Resolve #3347 , #3349 Make deck columns' width be selectable and flexible * deckColumnMinwidth --> deckColumnMinWidth * w-default --> normal * ✌️
This commit is contained in:
parent
58b3be438a
commit
31b30e3dd2
5 changed files with 58 additions and 4 deletions
|
@ -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: "サウンドを有効にする"
|
||||
|
|
|
@ -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 }); }
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -65,6 +65,7 @@ const defaultDeviceSettings = {
|
|||
postStyle: 'standard',
|
||||
navbar: 'top',
|
||||
deckColumnAlign: 'center',
|
||||
deckColumnWidth: 'normal',
|
||||
mobileNotificationPosition: 'bottom',
|
||||
deckTemporaryColumn: null,
|
||||
deckDefault: false,
|
||||
|
|
Loading…
Reference in a new issue