[refactor] TalkのHeaderBarをTalk下に移動 (VOICEVOX#1825)

docs/UI名称とVueファイル名の対応早見表.md

@@ -24,7 +24,7 @@
       - エンジンの管理 ･･･ [EngineManageDialog](../src/components/Dialog/EngineManageDialog.vue)
     - 設定
       - キー割り当て ･･･ [HotkeySettingDialog](../src/components/Dialog/HotkeySettingDialog.vue)
-      - ツールバーのカスタマイズ ･･･ [HeaderBarCustomDialog](../src/components/Dialog/HeaderBarCustomDialog.vue)
+      - ツールバーのカスタマイズ ･･･ [ToolBarCustomDialog](../src/components/Dialog/ToolBarCustomDialog.vue)
       - キャラクター並び替え・試聴 ･･･ [CharacterOrderDialog](../src/components/Dialog/CharacterOrderDialog.vue)
         - サンプルボイス一覧の各キャラクター ･･･ [CharacterTryListenCard](../src/components/Dialog/CharacterTryListenCard.vue)
       - デフォルトスタイル ･･･ [DefaultStyleListDialog](../src/components/Dialog/DefaultStyleListDialog.vue)
@@ -36,7 +36,7 @@
       - [HelpDialog](../src/components/Dialog/HelpDialog/HelpDialog.vue) の`pagedata`の`components`をご参照ください。
   - ウィンドウ右上のボタン群（ピンボタン含む） ･･･ [TitleBarButtons](../src/components/TitleBarButtons.vue)
     - ピンボタン以外のボタン ･･･ [MinMaxCloseButtons](../src/components/MinMaxCloseButtons.vue)
-- ツールバー ･･･ [HeaderBar](../src/components/HeaderBar.vue)
+- ツールバー ･･･ [ToolBar](../src/components/ToolBar.vue)
 - キャラクター表示欄 ･･･ [CharacterPortrait](../src/components/Talk/CharacterPortrait.vue)
 - 台本欄（テキスト欄追加ボタンを含む） ･･･ [views/EditorHome](../src/views/EditorHome.vue) に含まれる
   - レーン（行番号・テキスト欄含む） ･･･ [AudioCell](../src/components/Talk/AudioCell.vue)

src/components/Dialog/CharacterOrderDialog.vue

@@ -288,7 +288,7 @@ const updatePortrait = (portraitPath: string) => {
 
 .main {
   height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
+    100vh - #{vars.$menubar-height + vars.$toolbar-height +
       vars.$window-border-width}
   );
 

src/components/Dialog/DefaultStyleListDialog.vue

@@ -232,7 +232,7 @@ const openStyleSelectDialog = (characterInfo: CharacterInfo) => {
 
 .main {
   height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
+    100vh - #{vars.$menubar-height + vars.$toolbar-height +
       vars.$window-border-width}
   );
 

src/components/Dialog/DefaultStyleSelectDialog.vue

@@ -254,7 +254,7 @@ const closeDialog = () => {
 }
 .q-page {
   height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
+    100vh - #{vars.$menubar-height + vars.$toolbar-height +
       vars.$window-border-width}
   );
   overflow-y: scroll;

src/components/Dialog/DictionaryManageDialog.vue

@@ -677,10 +677,10 @@ const toDialogClosedState = () => {
 }
 
 .word-list {
-  // menubar-height + header-height + window-border-width +
+  // menubar-height + toolbar-height + window-border-width +
   // 82(title & buttons) + 30(margin 15x2)
   height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
+    100vh - #{vars.$menubar-height + vars.$toolbar-height +
       vars.$window-border-width + 82px + 30px}
   );
   width: 100%;
@@ -721,7 +721,7 @@ const toDialogClosedState = () => {
   display: flex;
   flex-flow: column;
   height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
+    100vh - #{vars.$menubar-height + vars.$toolbar-height +
       vars.$window-border-width}
   ) !important;
   overflow: auto;

src/components/Dialog/EngineManageDialog.vue

@@ -685,10 +685,10 @@ const toDialogClosedState = () => {
 }
 
 .engine-list {
-  // menubar-height + header-height + window-border-width +
+  // menubar-height + toolbar-height + window-border-width +
   // 82(title & buttons) + 30(margin 15x2)
   height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
+    100vh - #{vars.$menubar-height + vars.$toolbar-height +
       vars.$window-border-width + 82px + 30px}
   );
   width: 100%;
@@ -715,7 +715,7 @@ const toDialogClosedState = () => {
   display: flex;
   flex-flow: column;
   height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
+    100vh - #{vars.$menubar-height + vars.$toolbar-height +
       vars.$window-border-width}
   ) !important;
   overflow: auto;

src/components/Dialog/HotkeySettingDialog.vue

@@ -393,7 +393,7 @@ const resetHotkey = async (action: string) => {
 .hotkey-table {
   width: calc(100vw - #{vars.$window-border-width * 2});
   height: calc(
-    100vh - #{vars.$menubar-height + vars.$header-height +
+    100vh - #{vars.$menubar-height + vars.$toolbar-height +
       vars.$window-border-width}
   );
 

src/components/Dialog/HeaderBarCustomDialog.vue → src/components/Dialog/ToolBarCustomDialog.vue

@@ -1,10 +1,10 @@
 <template>
   <q-dialog
-    v-model="headerBarCustomDialogOpenComputed"
+    v-model="ToolBarCustomDialogOpenComputed"
     maximized
     transition-show="jump-up"
     transition-hide="jump-down"
-    class="header-bar-custom-dialog transparent-backdrop"
+    class="tool-bar-custom-dialog transparent-backdrop"
   >
     <q-layout container view="hHh Lpr fFf" class="bg-background">
       <q-page-container class="root">
@@ -171,7 +171,7 @@ const usableButtonsDesc: Record<ToolbarButtonTagType, string> = {
     "これはボタンではありません。レイアウトの調整に使います。また、実際には表示されません。",
 };
 
-const headerBarCustomDialogOpenComputed = computed({
+const ToolBarCustomDialogOpenComputed = computed({
   get: () => props.modelValue || isChanged.value,
   set: (val) => emit("update:modelValue", val),
 });
@@ -236,11 +236,11 @@ const finishOrNotDialog = async () => {
     if (result === "OK") {
       toolbarButtons.value = [...store.state.toolbarSetting];
       selectedButton.value = toolbarButtons.value[0];
-      headerBarCustomDialogOpenComputed.value = false;
+      ToolBarCustomDialogOpenComputed.value = false;
     }
   } else {
     selectedButton.value = toolbarButtons.value[0];
-    headerBarCustomDialogOpenComputed.value = false;
+    ToolBarCustomDialogOpenComputed.value = false;
   }
 };
 </script>
@@ -249,7 +249,7 @@ const finishOrNotDialog = async () => {
 @use '@/styles/variables' as vars;
 @use '@/styles/colors' as colors;
 
-.header-bar-custom-dialog .q-layout-container :deep(.absolute-full) {
+.tool-bar-custom-dialog .q-layout-container :deep(.absolute-full) {
   right: 0 !important;
   overflow-x: hidden;
 
@@ -260,7 +260,7 @@ const finishOrNotDialog = async () => {
 }
 
 .preview-toolbar {
-  height: calc(#{vars.$header-height} + 8px);
+  height: calc(#{vars.$toolbar-height} + 8px);
   display: block;
 }
 
@@ -282,10 +282,10 @@ const finishOrNotDialog = async () => {
 }
 
 .usable-button-list {
-  // menubar-height + header-height * 2(main+preview) + window-border-width
+  // 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.$header-height) +
+    100vh - #{vars.$menubar-height + (vars.$toolbar-height) +
       vars.$window-border-width + 52px + 46px + 22px}
   );
   width: 100%;

src/components/Talk/TalkEditor.vue

@@ -2,7 +2,7 @@
   <menu-bar />
 
   <q-layout reveal elevated container class="layout-container">
-    <header-bar />
+    <tool-bar />
 
     <q-page-container>
       <q-page class="main-row-panes">
@@ -125,7 +125,7 @@
   <help-dialog v-model="isHelpDialogOpenComputed" />
   <setting-dialog v-model="isSettingDialogOpenComputed" />
   <hotkey-setting-dialog v-model="isHotkeySettingDialogOpenComputed" />
-  <header-bar-custom-dialog v-model="isToolbarSettingDialogOpenComputed" />
+  <tool-bar-custom-dialog v-model="isToolbarSettingDialogOpenComputed" />
   <character-order-dialog
     v-if="orderedAllCharacterInfos.length > 0"
     v-model="isCharacterOrderDialogOpenComputed"
@@ -157,13 +157,13 @@ import AudioCell from "./AudioCell.vue";
 import AudioDetail from "./AudioDetail.vue";
 import AudioInfo from "./AudioInfo.vue";
 import CharacterPortrait from "./CharacterPortrait.vue";
+import ToolBar from "./ToolBar.vue";
 import { useStore } from "@/store";
-import HeaderBar from "@/components/HeaderBar.vue";
 import MenuBar from "@/components/Talk/MenuBar.vue";
 import HelpDialog from "@/components/Dialog/HelpDialog/HelpDialog.vue";
 import SettingDialog from "@/components/Dialog/SettingDialog.vue";
 import HotkeySettingDialog from "@/components/Dialog/HotkeySettingDialog.vue";
-import HeaderBarCustomDialog from "@/components/Dialog/HeaderBarCustomDialog.vue";
+import ToolBarCustomDialog from "@/components/Dialog/ToolBarCustomDialog.vue";
 import DefaultStyleListDialog from "@/components/Dialog/DefaultStyleListDialog.vue";
 import CharacterOrderDialog from "@/components/Dialog/CharacterOrderDialog.vue";
 import AcceptRetrieveTelemetryDialog from "@/components/Dialog/AcceptRetrieveTelemetryDialog.vue";
@@ -760,7 +760,7 @@ const onAudioCellPaneClick = () => {
 @use '@/styles/colors' as colors;
 
 .q-header {
-  height: vars.$header-height;
+  height: vars.$toolbar-height;
 }
 
 .layout-container {
@@ -784,7 +784,7 @@ const onAudioCellPaneClick = () => {
 
   .q-splitter--horizontal {
     height: calc(
-      100vh - #{vars.$menubar-height + vars.$header-height +
+      100vh - #{vars.$menubar-height + vars.$toolbar-height +
         vars.$window-border-width}
     );
   }

src/components/HeaderBar.vue → src/components/Talk/ToolBar.vue

@@ -1,7 +1,7 @@
 <template>
   <q-header class="q-py-sm">
     <q-toolbar>
-      <template v-for="button in headerButtons" :key="button.text">
+      <template v-for="button in buttons" :key="button.text">
         <q-space v-if="button.text === null" />
         <q-btn
           v-else
@@ -202,7 +202,7 @@ const usableButtons: Record<
   EMPTY: null,
 };
 
-const headerButtons = computed(() =>
+const buttons = computed(() =>
   store.state.toolbarSetting.map<ButtonContent | SpacerContent>((tag) => {
     const buttonContent = usableButtons[tag];
     if (buttonContent) {

src/styles/variables.scss

@@ -1,6 +1,6 @@
 $window-border-width: 2px;
 
-$header-height: 66px;
+$toolbar-height: 66px;
 $menubar-height: 24px;
 
 $detail-view-splitter-cell-z-index: 2;