From 65c12903e4530ef649223f68e8b316d8d6b8c6fa Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 4 Jul 2022 21:28:59 +0900
Subject: [PATCH] =?UTF-8?q?enhance(client):=20deck=E3=81=AE=E3=82=A6?=
 =?UTF-8?q?=E3=82=A4=E3=82=B8=E3=82=A7=E3=83=83=E3=83=88=E3=82=AB=E3=83=A9?=
 =?UTF-8?q?=E3=83=A0=E3=81=8C=E6=9C=AA=E8=A8=AD=E5=AE=9A=E3=81=AE=E6=99=82?=
 =?UTF-8?q?=E3=81=AB=E8=AA=AC=E6=98=8E=E3=82=92=E8=A1=A8=E7=A4=BA=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                              | 1 +
 packages/client/src/ui/deck/widgets-column.vue | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 496613400d..9684489927 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1731,6 +1731,7 @@ _deck:
   profile: "プロファイル"
   introduction: "カラムを組み合わせて自分だけのインターフェイスを作りましょう！"
   introduction2: "画面の右にある + を押して、いつでもカラムを追加できます。"
+  widgetsIntroduction: "カラムのメニューから、「ウィジェットの編集」を選択してウィジェットを追加してください"
 
   _columns:
     main: "メイン"
diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/widgets-column.vue
index 9b10f602fb..f181fc328d 100644
--- a/packages/client/src/ui/deck/widgets-column.vue
+++ b/packages/client/src/ui/deck/widgets-column.vue
@@ -3,6 +3,7 @@
 	<template #header><i class="fas fa-window-maximize" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
 	<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"/>
 	</div>
 </XColumn>
@@ -13,6 +14,7 @@ import { } from 'vue';
 import XColumn from './column.vue';
 import { addColumnWidget, Column, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store';
 import XWidgets from '@/components/widgets.vue';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	column: Column;
@@ -52,5 +54,10 @@ function func() {
 	--panelBorder: none;
 
 	padding: 0 var(--margin);
+
+	> .intro {
+		padding: 16px;
+		text-align: center;
+	}
 }
 </style>