enhance(client): deckのウイジェットカラムが未設定の時に説明を表示するように

This commit is contained in:
syuilo 2022-07-04 21:28:59 +09:00
parent 2a24fc18ca
commit 694d2c94a1
2 changed files with 8 additions and 0 deletions

View file

@ -1731,6 +1731,7 @@ _deck:
profile: "プロファイル" profile: "プロファイル"
introduction: "カラムを組み合わせて自分だけのインターフェイスを作りましょう!" introduction: "カラムを組み合わせて自分だけのインターフェイスを作りましょう!"
introduction2: "画面の右にある + を押して、いつでもカラムを追加できます。" introduction2: "画面の右にある + を押して、いつでもカラムを追加できます。"
widgetsIntroduction: "カラムのメニューから、「ウィジェットの編集」を選択してウィジェットを追加してください"
_columns: _columns:
main: "メイン" main: "メイン"

View file

@ -3,6 +3,7 @@
<template #header><i class="fas fa-window-maximize" style="margin-right: 8px;"></i>{{ column.name }}</template> <template #header><i class="fas fa-window-maximize" style="margin-right: 8px;"></i>{{ column.name }}</template>
<div class="wtdtxvec"> <div class="wtdtxvec">
<div v-if="!(column.widgets && column.widgets.length > 0) && !edit" class="intro">{{ i18n.ts._deck.widgetsIntroduction }}</div>
<XWidgets :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/> <XWidgets :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
</div> </div>
</XColumn> </XColumn>
@ -13,6 +14,7 @@ import { } from 'vue';
import XColumn from './column.vue'; import XColumn from './column.vue';
import { addColumnWidget, Column, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store'; import { addColumnWidget, Column, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store';
import XWidgets from '@/components/widgets.vue'; import XWidgets from '@/components/widgets.vue';
import { i18n } from '@/i18n';
const props = defineProps<{ const props = defineProps<{
column: Column; column: Column;
@ -52,5 +54,10 @@ function func() {
--panelBorder: none; --panelBorder: none;
padding: 0 var(--margin); padding: 0 var(--margin);
> .intro {
padding: 16px;
text-align: center;
}
} }
</style> </style>