From ffbf1cc54868d295529d93ae0977fa1de3876371 Mon Sep 17 00:00:00 2001
From: Takusea <takusea826@gmail.com>
Date: Sun, 4 Aug 2024 02:45:54 +0900
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=81=AE=E3=83=AA=E3=82=B9=E3=83=88=E3=82=92?=
 =?UTF-8?q?=E3=83=AA=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialog/ToolBarCustomDialog.vue | 174 ++++++++++--------
 1 file changed, 98 insertions(+), 76 deletions(-)

diff --git a/src/components/Dialog/ToolBarCustomDialog.vue b/src/components/Dialog/ToolBarCustomDialog.vue
index e9c8a53890..ec30db1ee4 100644
--- a/src/components/Dialog/ToolBarCustomDialog.vue
+++ b/src/components/Dialog/ToolBarCustomDialog.vue
@@ -43,68 +43,68 @@
           </QToolbar>
         </QHeader>
         <QPage>
-          <QCard flat square class="preview-card">
-            <QToolbar class="bg-toolbar preview-toolbar">
-              <Draggable
-                v-model="toolbarButtons"
-                :itemKey="toolbarButtonKey"
-                @start="toolbarButtonDragging = true"
-                @end="toolbarButtonDragging = false"
+          <QToolbar class="bg-toolbar preview-toolbar">
+            <Draggable
+              v-model="toolbarButtons"
+              :itemKey="toolbarButtonKey"
+              @start="toolbarButtonDragging = true"
+              @end="toolbarButtonDragging = false"
+            >
+              <template
+                #item="{ element: button }: { element: ToolbarButtonTagType }"
               >
-                <template
-                  #item="{ element: button }: { element: ToolbarButtonTagType }"
+                <QBtn
+                  unelevated
+                  color="toolbar-button"
+                  textColor="toolbar-button-display"
+                  :class="
+                    (button === 'EMPTY' ? ' radio-space' : ' radio') +
+                    ' text-no-wrap text-bold q-mr-sm'
+                  "
                 >
-                  <QBtn
-                    unelevated
-                    color="toolbar-button"
-                    textColor="toolbar-button-display"
-                    :class="
-                      (button === 'EMPTY' ? ' radio-space' : ' radio') +
-                      ' text-no-wrap text-bold q-mr-sm'
-                    "
+                  {{ getToolbarButtonName(button) }}
+                  <QTooltip
+                    :delay="800"
+                    anchor="center right"
+                    self="center left"
+                    transitionShow="jump-right"
+                    transitionHide="jump-left"
+                    :style="{
+                      display: toolbarButtonDragging ? 'none' : 'block',
+                    }"
+                    >{{ usableButtonsDesc[button] }}</QTooltip
+                  >
+                </QBtn>
+              </template>
+            </Draggable>
+            <div class="preview-toolbar-drag-hint">
+              ドラッグでボタンの並びを変更できます。
+            </div>
+          </QToolbar>
+          <div class="container">
+            <BaseScrollArea>
+              <div class="inner">
+                <h1 class="title">表示するボタン</h1>
+                <div class="list">
+                  <BaseRowCard
+                    v-for="(desc, key) in usableButtonsDesc"
+                    :key
+                    :title="getToolbarButtonName(key)"
+                    :description="desc"
+                    clickable
+                    @click="toggleToolbarButtons(key)"
                   >
-                    {{ getToolbarButtonName(button) }}
-                    <QTooltip
-                      :delay="800"
-                      anchor="center right"
-                      self="center left"
-                      transitionShow="jump-right"
-                      transitionHide="jump-left"
-                      :style="{
-                        display: toolbarButtonDragging ? 'none' : 'block',
-                      }"
-                      >{{ usableButtonsDesc[button] }}</QTooltip
-                    >
-                  </QBtn>
-                </template>
-              </Draggable>
-              <div class="preview-toolbar-drag-hint">
-                ドラッグでボタンの並びを変更できます。
+                    <BaseSwitch
+                      :id="key"
+                      :checked="toolbarButtons.includes(key)"
+                      onLabel="表示する"
+                      offLabel="表示しない"
+                    />
+                  </BaseRowCard>
+                </div>
               </div>
-            </QToolbar>
-
-            <QCardActions>
-              <div class="text-h5">表示するボタンの選択</div>
-            </QCardActions>
-            <QCardActions class="no-padding">
-              <QList class="usable-button-list bg-surface">
-                <QItem
-                  v-for="(desc, key) in usableButtonsDesc"
-                  :key
-                  v-ripple
-                  tag="label"
-                >
-                  <QItemSection>
-                    <QItemLabel>{{ getToolbarButtonName(key) }}</QItemLabel>
-                    <QItemLabel caption>{{ desc }}</QItemLabel>
-                  </QItemSection>
-                  <QItemSection avatar>
-                    <QToggle v-model="toolbarButtons" :val="key" />
-                  </QItemSection>
-                </QItem>
-              </QList>
-            </QCardActions>
-          </QCard>
+            </BaseScrollArea>
+          </div>
         </QPage>
       </QPageContainer>
     </QLayout>
@@ -114,6 +114,9 @@
 <script setup lang="ts">
 import { computed, ref, watch, Ref } from "vue";
 import Draggable from "vuedraggable";
+import BaseSwitch from "@/components/Base/BaseSwitch.vue";
+import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
+import BaseRowCard from "@/components/Base/BaseRowCard.vue";
 import { useStore } from "@/store";
 import { ToolbarButtonTagType, ToolbarSettingType } from "@/type/preload";
 import { getToolbarButtonName } from "@/store/utility";
@@ -151,6 +154,14 @@ window.backend.getDefaultToolbarSetting().then((setting) => {
   defaultSetting.push(...setting);
 });
 
+const toggleToolbarButtons = (key) => {
+  if (toolbarButtons.value.includes(key)) {
+    toolbarButtons.value.splice(toolbarButtons.value.indexOf(key), 1);
+  } else {
+    toolbarButtons.value.push(key);
+  }
+};
+
 const usableButtonsDesc: Record<ToolbarButtonTagType, string> = {
   PLAY_CONTINUOUSLY:
     "選択されているテキスト以降のすべてのテキストを読み上げます。",
@@ -246,7 +257,9 @@ const finishOrNotDialog = async () => {
 
 <style lang="scss" scoped>
 @use "@/styles/variables" as vars;
-@use "@/styles/colors" as colors;
+@use "@/styles/v2/variables" as newvars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
 
 .tool-bar-custom-dialog .q-layout-container :deep(.absolute-full) {
   right: 0 !important;
@@ -274,23 +287,6 @@ const finishOrNotDialog = async () => {
   padding-bottom: 8px;
 }
 
-.preview-card {
-  width: 100%;
-  min-width: 460px;
-  background: var(--color-background);
-}
-
-.usable-button-list {
-  // menubar-height + toolbar-height * 2(main+preview) + window-border-width
-  // 52(preview part buttons) * 2 + 46(select part title) + 22(preview part hint)
-  height: calc(
-    100vh - #{vars.$menubar-height + (vars.$toolbar-height) +
-      vars.$window-border-width + 52px + 46px + 22px}
-  );
-  width: 100%;
-  overflow-y: scroll;
-}
-
 .radio {
   &:hover {
     cursor: grab;
@@ -302,4 +298,30 @@ const finishOrNotDialog = async () => {
   flex-grow: 1;
   color: transparent;
 }
+
+.title {
+  @include mixin.headline-1;
+}
+
+.container {
+  // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
+  // height: 100%;
+  height: calc(100vh - 164px);
+  background-color: colors.$background;
+}
+
+.inner {
+  margin: auto;
+  max-width: 960px;
+  padding: newvars.$padding-2;
+  display: flex;
+  flex-direction: column;
+  gap: newvars.$gap-1;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: newvars.$gap-1;
+}
 </style>