Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

enhance(client): tweak deck

Browse Source
This commit is contained in:
syuilo 2022-07-03 23:13:41 +09:00
parent 034c5d792b
commit 1cb847aa80
2 changed files with 65 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
locales/ja-JP.yml
View File

@ -1729,6 +1729,8 @@ _deck:
stackLeft: "左に重ねる" stackLeft: "左に重ねる"
popRight: "右に出す" popRight: "右に出す"
profile: "プロファイル" profile: "プロファイル"
introduction: "カラムを組み合わせて自分だけのインターフェイスを作りましょう！"
introduction2: "画面の右にある + を押して、いつでもカラムを追加できます。"
_columns: _columns:
main: "メイン" main: "メイン"

114
packages/client/src/ui/deck.vue
View File

@ -6,31 +6,34 @@
<div class="main"> <div class="main">
<XStatusBars class="statusbars"/> <XStatusBars class="statusbars"/>
<div class="columnsWrapper"> <div ref="columnsEl" class="columns" :class="deckStore.reactiveState.columnAlign.value" @contextmenu.self.prevent="onContextmenu">
<div ref="columnsEl" class="columns" :class="deckStore.reactiveState.columnAlign.value" @contextmenu.self.prevent="onContextmenu"> <template v-for="ids in layout">
<template v-for="ids in layout"> <!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため --> <section
<section v-if="ids.length > 1"
v-if="ids.length > 1" class="folder column"
class="folder column" :style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }" >
> <DeckColumnCore v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
<DeckColumnCore v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/> </section>
</section> <DeckColumnCore
<DeckColumnCore v-else
v-else :ref="ids[0]"
:ref="ids[0]" :key="ids[0]"
:key="ids[0]" class="column"
class="column" :column="columns.find(c => c.id === ids[0])"
:column="columns.find(c => c.id === ids[0])" :is-stacked="false"
:is-stacked="false" :style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }" @parent-focus="moveFocus(ids[0], $event)"
@parent-focus="moveFocus(ids[0], $event)" />
/> </template>
</template> <div v-if="layout.length === 0" class="intro _panel">
<div>{{ i18n.ts._deck.introduction }}</div>
<MkButton primary class="add" @click="addColumn">{{ i18n.ts._deck.addColumn }}</MkButton>
<div>{{ i18n.ts._deck.introduction2 }}</div>
</div> </div>
<div class="sideMenu"> <div class="sideMenu">
<button class="_button button" @click="addColumn"><i class="fas fa-plus"></i></button> <button v-tooltip="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="fas fa-plus"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -67,6 +70,7 @@ import { deckStore, addColumn as addColumnToStore, loadDeck } from './deck/deck-
import DeckColumnCore from '@/ui/deck/column-core.vue'; import DeckColumnCore from '@/ui/deck/column-core.vue';
import XSidebar from '@/ui/_common_/sidebar.vue'; import XSidebar from '@/ui/_common_/sidebar.vue';
import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue'; import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue';
import MkButton from '@/components/ui/button.vue';
import { getScrollContainer } from '@/scripts/scroll'; import { getScrollContainer } from '@/scripts/scroll';
import * as os from '@/os'; import * as os from '@/os';
import { menuDef } from '@/menu'; import { menuDef } from '@/menu';
@ -206,47 +210,55 @@ function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> .columnsWrapper { > .columns {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: row; overflow-x: auto;
overflow-y: clip;
> .columns { &.center {
flex: 1; > .column:first-of-type {
display: flex; margin-left: auto;
overflow-x: auto;
overflow-y: clip;
&.center {
> .column:first-of-type {
margin-left: auto;
}
> .column:last-of-type {
margin-right: auto;
}
} }
> .column { > .column:last-of-type {
flex-shrink: 0; margin-right: auto;
border-right: solid var(--deckDividerThickness) var(--deckDivider); }
}
&:first-child { > .column {
border-left: solid var(--deckDividerThickness) var(--deckDivider); flex-shrink: 0;
} border-right: solid var(--deckDividerThickness) var(--deckDivider);
&.folder { &:first-of-type {
display: flex; border-left: solid var(--deckDividerThickness) var(--deckDivider);
flex-direction: column; }
> *:not(:last-child) { &.folder {
border-bottom: solid var(--deckDividerThickness) var(--deckDivider); display: flex;
} flex-direction: column;
> *:not(:last-of-type) {
border-bottom: solid var(--deckDividerThickness) var(--deckDivider);
} }
} }
} }
> .intro {
padding: 32px;
height: min-content;
text-align: center;
margin: auto;
> .add {
margin: 1em auto;
}
}
> .sideMenu { > .sideMenu {
flex-shrink: 0;
margin-right: 0;
margin-left: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;