Update: 各種ダイヤログのデザインを微調整

Aivis-Project · Dec 1, 2024 · e590a7c · e590a7c
1 parent 0f74934
commit e590a7c
Show file tree

Hide file tree

Showing 19 changed files with 85 additions and 57 deletions.
diff --git a/src/backend/electron/main.ts b/src/backend/electron/main.ts
@@ -867,7 +867,7 @@ app.on("ready", async () => {
           message: `設定ファイルの読み込みに失敗しました。${app.getPath(
             "userData",
           )} にある config.json の名前を変えることで解決することがあります（ただし設定がすべてリセットされます）。設定ファイルがあるフォルダを開きますか？`,
-          buttons: ["いいえ", "はい"],
+          buttons: ["キャンセル", "設定ファイルがあるフォルダを開く"],
           noLink: true,
           cancelId: 0,
         })

diff --git a/src/components/Dialog/Dialog.ts b/src/components/Dialog/Dialog.ts
@@ -295,7 +295,7 @@ const showWriteErrorDialog = ({
   if (mediaType === "text") {
     // テキスト書き出し時のエラーを出力
     void actions.SHOW_ALERT_DIALOG({
-      title: "テキストの書き出しに失敗しました。",
+      title: "テキストの書き出しに失敗しました",
       message:
         "書き込みエラーによって失敗しました。空き容量があることや、書き込み権限があることをご確認ください。",
     });
@@ -311,7 +311,7 @@ const showWriteErrorDialog = ({
 
     // 音声書き出し時のエラーを出力
     void actions.SHOW_ALERT_DIALOG({
-      title: "書き出しに失敗しました。",
+      title: "書き出しに失敗しました",
       message: result.errorMessage ?? defaultErrorMessages[result.result] ?? "",
     });
   }

diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
@@ -36,7 +36,7 @@
           <div v-if="loadingDictState" class="loading-dict">
             <div>
               <QSpinner color="primary" size="2.5rem" />
-              <div class="q-mt-sm">
+              <div style="margin-top: 12px">
                 <template v-if="loadingDictState === 'loading'"
                   >読み込み中...</template
                 >
@@ -771,7 +771,7 @@ const {
     color: colors.$display;
     background: colors.$background;
     border-radius: 6px;
-    padding: 14px;
+    padding: 16px 20px;
   }
 }
 

diff --git a/src/components/Dialog/EngineManageDialog.vue b/src/components/Dialog/EngineManageDialog.vue
@@ -35,9 +35,9 @@
         </QHeader>
         <QPage class="row">
           <div v-if="uiLockedState" class="ui-lock-popup">
-            <div class="q-pa-md">
+            <div>
               <QSpinner color="primary" size="2.5rem" />
-              <div class="q-mt-sm">
+              <div style="margin-top: 12px">
                 <template v-if="uiLockedState === 'addingEngine'">
                   音声合成エンジンを追加しています...
                 </template>
@@ -775,6 +775,7 @@ function findDefaultEngineId() {
     color: colors.$display;
     background: colors.$background;
     border-radius: 6px;
+    padding: 16px 20px;
   }
 }
 </style>
diff --git a/src/components/Dialog/HotkeySettingDialog.vue b/src/components/Dialog/HotkeySettingDialog.vue
@@ -262,10 +262,10 @@ const setHotkeyDialogOpened = () => {
 
 const resetHotkey = async (action: string) => {
   const result = await store.actions.SHOW_CONFIRM_DIALOG({
-    title: "ショートカットキーを初期値に戻します",
-    message: `${action}のショートカットキーを初期値に戻します。\n本当に戻しますか？`,
-    actionName: "初期値に戻す",
-    cancel: "初期値に戻さない",
+    title: "ショートカットキーをリセット",
+    message: `「${action}」のショートカットキーをデフォルトに戻します。\nよろしいですか？`,
+    actionName: "リセット",
+    cancel: "キャンセル",
   });
   if (result === "OK") {
     void window.backend

diff --git a/src/components/Dialog/PresetManageDialog.vue b/src/components/Dialog/PresetManageDialog.vue
@@ -1,8 +1,8 @@
 <template>
   <QDialog :modelValue="props.openDialog" @update:modelValue="updateOpenDialog">
-    <QCard class="setting-card q-pa-md dialog-card">
+    <QCard class="setting-card q-pa-sm dialog-card">
       <QCardSection>
-        <div class="text-h5">プリセット管理</div>
+        <div class="text-h6">プリセット管理</div>
       </QCardSection>
       <QCardActions class="q-px-md q-py-sm">
         <div class="full-width row wrap justify-between">

diff --git a/src/components/Dialog/SettingDialog/SettingDialog.vue b/src/components/Dialog/SettingDialog/SettingDialog.vue
@@ -423,7 +423,7 @@
               </QCardActions>
               <ToggleCell
                 title="マルチエンジン機能"
-                description="複数の VOICEVOX 準拠音声合成エンジンを利用可能にします。"
+                description="複数の VOICEVOX API 互換音声合成エンジンを利用可能にします。"
                 :modelValue="enableMultiEngine"
                 @update:modelValue="setEnableMultiEngine"
               />

diff --git a/src/components/Dialog/TextDialog/MessageDialog.vue b/src/components/Dialog/TextDialog/MessageDialog.vue
@@ -10,7 +10,7 @@
     :persistent
     @hide="onDialogHide"
   >
-    <QCard class="q-py-sm q-px-md dialog-card">
+    <QCard class="q-py-sm q-px-sm dialog-card">
       <QCardSection class="message-dialog-title">
         <QIcon
           v-if="props.type !== 'none'"
@@ -24,13 +24,14 @@
       <QCardSection class="q-py-none message">
         {{ props.message }}
       </QCardSection>
-      <QCardActions align="right">
+      <QCardActions style="padding-top: 12px !important" align="right">
         <QBtn
-          unelevated
+          outline
           :label="props.ok"
-          color="toolbar-button"
-          textColor="toolbar-button-display"
+          color="display"
+          textColor="display"
           class="text-no-wrap text-bold q-mr-sm"
+          :style="{ padding: '0px 16px !important' }"
           @click="onOk"
         />
       </QCardActions>

diff --git a/src/components/Dialog/TextDialog/QuestionDialog.vue b/src/components/Dialog/TextDialog/QuestionDialog.vue
@@ -10,7 +10,7 @@
     :persistent
     @hide="onDialogHide"
   >
-    <QCard class="q-py-sm q-px-md dialog-card">
+    <QCard class="q-py-sm q-px-sm dialog-card">
       <QCardSection class="question-dialog-title">
         <QIcon
           v-if="props.type !== 'none'"
@@ -24,17 +24,19 @@
       <QCardSection class="q-py-none message">
         {{ props.message }}
       </QCardSection>
-      <QCardActions align="right">
+      <QCardActions style="padding-top: 12px !important" align="right">
         <QSpace />
         <QBtn
           v-for="(button, index) in props.buttons"
           ref="buttons"
           :key="index"
-          flat
+          :flat="index !== props.buttons.length - 1"
+          :outline="index === props.buttons.length - 1"
           :label="button"
-          :color="index === props.buttons.length - 1 ? 'toolbar-button' : 'display'"
-          :textColor="index === props.buttons.length - 1 ? 'toolbar-button-display' : undefined"
+          color="display"
+          :textColor="index === props.buttons.length - 1 ? 'display' : undefined"
           class="text-no-wrap text-bold"
+          :style="index === props.buttons.length - 1 ? { padding: '0px 16px !important' } : undefined"
           @click="onClick(index)"
         />
       </QCardActions>

diff --git a/src/components/Dialog/TextDialog/common.ts b/src/components/Dialog/TextDialog/common.ts
@@ -1,6 +1,6 @@
 import { ExhaustiveError } from "@/type/utility";
 
-export type DialogType = "none" | "info" | "error" | "question" | "warning";
+export type DialogType = "none" | "info" | "error" | "question" | "warning" | "warning-light";
 export const getIcon = (dialogType: DialogType) => {
   switch (dialogType) {
     case "info":
@@ -11,6 +11,8 @@ export const getIcon = (dialogType: DialogType) => {
       return "help";
     case "warning":
       return "warning";
+    case "warning-light":
+      return "warning";
     case "none":
       return "";
     default:
@@ -24,9 +26,11 @@ export const getColor = (dialogType: DialogType) => {
     case "warning":
       // TODO：warning用の色を用意する
       return "warning";
+    case "warning-light":
+      return "warning-light";
     case "question":
-      return "warning";
     case "info":
+      return "warning-light";
     case "none":
       return "display";
     default:

diff --git a/src/components/Dialog/ToolBarCustomDialog.vue b/src/components/Dialog/ToolBarCustomDialog.vue
@@ -226,8 +226,8 @@ const applyDefaultSetting = async () => {
   const result = await store.actions.SHOW_CONFIRM_DIALOG({
     title: "ツールバーの順序をリセット",
     message: "ツールバーの順序をデフォルトに戻します。\nよろしいですか？",
-    actionName: "はい",
-    cancel: "いいえ",
+    actionName: "リセット",
+    cancel: "キャンセル",
   });
   if (result === "OK") {
     toolbarButtons.value = [...defaultSetting];

diff --git a/src/components/EngineStartupOverlay.vue b/src/components/EngineStartupOverlay.vue
@@ -14,7 +14,7 @@
   >
     <div>
       <QSpinner color="primary" size="2.5rem" />
-      <div class="q-mt-sm">
+      <div style="margin-top: 12px">
         {{
           allEngineState === "STARTING"
             ? "音声合成エンジン起動中..."
@@ -28,14 +28,14 @@
         （初回のみ、セットアップのため起動に数分ほどかかります）<br />
         <QBtn
           v-if="isMultipleEngine"
-          class="q-mt-sm"
+          class="q-mt-sm q-mr-sm"
           outline
           :disable="reloadingLocked"
           @click="reloadAppWithMultiEngineOffMode"
         >
           マルチエンジンをオフにして再読み込みする</QBtn
         >
-        <QBtn v-else class="q-mt-sm" outline @click="openQa">Q&A を見る</QBtn>
+        <QBtn class="q-mt-sm" outline @click="openQa">Q&A を見る</QBtn>
       </template>
     </div>
   </div>
@@ -123,7 +123,7 @@ const openQa = () => {
     color: colors.$display;
     background: colors.$background;
     border-radius: 6px;
-    padding: 14px;
+    padding: 16px 20px;
   }
 }
 </style>
diff --git a/src/components/ProgressView.vue b/src/components/ProgressView.vue
@@ -11,7 +11,7 @@
         font-size="12px"
         color="primary"
         size="xl"
-        :thickness="0.3"
+        :thickness="0.25"
       >
         {{ formattedProgress }}%
       </QCircularProgress>
@@ -20,8 +20,8 @@
         indeterminate
         color="primary"
         rounded
-        :thickness="0.3"
         size="xl"
+        :thickness="0.25"
       />
       <div class="q-mt-md">音声合成中...</div>
     </div>
@@ -86,9 +86,8 @@ const formattedProgress = computed(() =>
   > div {
     color: colors.$display;
     background: colors.$background;
-    width: 200px;
     border-radius: 6px;
-    padding: 14px 48px;
+    padding: 16px 32px;
   }
 }
 </style>
diff --git a/src/components/Talk/AudioInfo.vue b/src/components/Talk/AudioInfo.vue
@@ -90,7 +90,7 @@
 
       <!-- プリセット登録ダイアログ -->
       <QDialog v-model="showsPresetNameDialog" @beforeHide="closeAllDialog">
-        <QCard style="min-width: 350px">
+        <QCard class="q-pa-sm" style="min-width: 350px">
           <QCardSection>
             <div class="text-h6">プリセット登録</div>
           </QCardSection>
@@ -112,36 +112,44 @@
               />
             </QCardSection>
 
-            <QCardActions align="right">
+            <QCardActions style="padding-top: 12px !important" align="right">
               <QBtn
                 v-close-popup
                 flat
                 label="キャンセル"
                 @click="closeAllDialog"
               />
-              <QBtn flat type="submit" label="確定" />
+              <QBtn
+                outline
+                label="確定"
+                color="display"
+                textColor="display"
+                class="text-no-wrap text-bold q-mr-sm"
+                :style="{ padding: '0px 16px !important' }"
+                type="submit"
+              />
             </QCardActions>
           </QForm>
         </QCard>
       </QDialog>
 
       <!-- プリセット再登録ダイアログ -->
       <QDialog v-model="showsPresetRewriteDialog" @beforeHide="closeAllDialog">
-        <QCard>
+        <QCard class="q-pa-sm">
           <QCardSection class="q-pb-none">
             <div class="text-h6">プリセットの再登録</div>
           </QCardSection>
           <QCardSection>
             <QList>
-              <QItem clickable class="no-margin" @click="updatePreset(true)">
+              <QItem clickable class="no-margin q-px-none" @click="updatePreset(true)">
                 <QItemSection avatar>
                   <QAvatar icon="sym_r_arrow_forward" textColor="blue" />
                 </QItemSection>
                 <QItemSection>
                   プリセットを再登録し、このプリセットが設定されたテキスト欄全てに再適用する
                 </QItemSection>
               </QItem>
-              <QItem clickable class="no-margin" @click="updatePreset(false)">
+              <QItem clickable class="no-margin q-px-none" @click="updatePreset(false)">
                 <QItemSection avatar>
                   <QAvatar icon="sym_r_arrow_forward" textColor="blue" />
                 </QItemSection>
@@ -150,7 +158,7 @@
               <QItem
                 v-close-popup
                 clickable
-                class="no-margin"
+                class="no-margin q-px-none"
                 @click="closeAllDialog"
               >
                 <QItemSection avatar>

diff --git a/src/components/Talk/TalkEditor.vue b/src/components/Talk/TalkEditor.vue
@@ -161,19 +161,19 @@ const { registerHotkeyWithCleanup } = useHotkeyManager();
 
 registerHotkeyWithCleanup({
   editor: "talk",
-  name: "音声書き出し",
+  name: "選択音声を書き出し",
   callback: () => {
     if (!uiLocked.value) {
-      void store.actions.SHOW_GENERATE_AND_SAVE_ALL_AUDIO_DIALOG();
+      void store.actions.SHOW_GENERATE_AND_SAVE_SELECTED_AUDIO_DIALOG();
     }
   },
 });
 registerHotkeyWithCleanup({
   editor: "talk",
-  name: "選択音声を書き出し",
+  name: "音声書き出し",
   callback: () => {
     if (!uiLocked.value) {
-      void store.actions.SHOW_GENERATE_AND_SAVE_SELECTED_AUDIO_DIALOG();
+      void store.actions.SHOW_GENERATE_AND_SAVE_ALL_AUDIO_DIALOG();
     }
   },
 });

diff --git a/src/components/Talk/menuBarData.ts b/src/components/Talk/menuBarData.ts
@@ -11,17 +11,17 @@ export const useMenuBarData = () => {
   const fileSubMenuData = computed<MenuItemData[]>(() => [
     {
       type: "button",
-      label: "音声書き出し",
+      label: "選択音声を書き出し",
       onClick: () => {
-        void store.actions.SHOW_GENERATE_AND_SAVE_ALL_AUDIO_DIALOG();
+        void store.actions.SHOW_GENERATE_AND_SAVE_SELECTED_AUDIO_DIALOG();
       },
       disableWhenUiLocked: true,
     },
     {
       type: "button",
-      label: "選択音声を書き出し",
+      label: "音声書き出し",
       onClick: () => {
-        void store.actions.SHOW_GENERATE_AND_SAVE_SELECTED_AUDIO_DIALOG();
+        void store.actions.SHOW_GENERATE_AND_SAVE_ALL_AUDIO_DIALOG();
       },
       disableWhenUiLocked: true,
     },

diff --git a/src/store/project.ts b/src/store/project.ts
@@ -355,7 +355,7 @@ export const projectStore = createPartialStore<ProjectStoreTypes>({
       message += "\n変更を保存しますか？";
 
       const result: number = await showQuestionDialog({
-        type: "info",
+        type: "warning",
         title: "警告",
         message,
         buttons: ["キャンセル", "破棄", "保存"],