From 1cb847aa8051cef2173ddcc2f642499855457056 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 3 Jul 2022 23:13:41 +0900 Subject: [PATCH] enhance(client): tweak deck --- locales/ja-JP.yml | 2 + packages/client/src/ui/deck.vue | 114 ++++++++++++++++++-------------- 2 files changed, 65 insertions(+), 51 deletions(-) diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 13b9fcfd4..496613400 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1729,6 +1729,8 @@ _deck: stackLeft: "左に重ねる" popRight: "右に出す" profile: "プロファイル" + introduction: "カラムを組み合わせて自分だけのインターフェイスを作りましょう!" + introduction2: "画面の右にある + を押して、いつでもカラムを追加できます。" _columns: main: "メイン" diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue index 88fc39061..53e76ea14 100644 --- a/packages/client/src/ui/deck.vue +++ b/packages/client/src/ui/deck.vue @@ -6,31 +6,34 @@
-
-
- +
+ +
+
{{ i18n.ts._deck.introduction }}
+ {{ i18n.ts._deck.addColumn }} +
{{ i18n.ts._deck.introduction2 }}
- +
@@ -67,6 +70,7 @@ import { deckStore, addColumn as addColumnToStore, loadDeck } from './deck/deck- import DeckColumnCore from '@/ui/deck/column-core.vue'; import XSidebar from '@/ui/_common_/sidebar.vue'; import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue'; +import MkButton from '@/components/ui/button.vue'; import { getScrollContainer } from '@/scripts/scroll'; import * as os from '@/os'; import { menuDef } from '@/menu'; @@ -206,47 +210,55 @@ function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') { display: flex; flex-direction: column; - > .columnsWrapper { + > .columns { flex: 1; display: flex; - flex-direction: row; + overflow-x: auto; + overflow-y: clip; - > .columns { - flex: 1; - display: flex; - overflow-x: auto; - overflow-y: clip; - - &.center { - > .column:first-of-type { - margin-left: auto; - } - - > .column:last-of-type { - margin-right: auto; - } + &.center { + > .column:first-of-type { + margin-left: auto; } - > .column { - flex-shrink: 0; - border-right: solid var(--deckDividerThickness) var(--deckDivider); + > .column:last-of-type { + margin-right: auto; + } + } - &:first-child { - border-left: solid var(--deckDividerThickness) var(--deckDivider); - } + > .column { + flex-shrink: 0; + border-right: solid var(--deckDividerThickness) var(--deckDivider); - &.folder { - display: flex; - flex-direction: column; + &:first-of-type { + border-left: solid var(--deckDividerThickness) var(--deckDivider); + } - > *:not(:last-child) { - border-bottom: solid var(--deckDividerThickness) var(--deckDivider); - } + &.folder { + 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 { + flex-shrink: 0; + margin-right: 0; + margin-left: auto; display: flex; flex-direction: column; justify-content: center;