MobileHeaderBarをHeaderBarと統合

build/matexRecipes.yml

@@ -1,2 +1,6 @@
 toolbarIcons.svg:
-  saveVoice: save + volume_up
+  playAll: filled:play_arrow + notes
+  exportSelected: filled:save + volume_up
+  exportConnectAll: filled:save + link
+  exportAll: filled:save + notes
+  importText: filled:upload + outlined:import_contacts

package.json

@@ -87,7 +87,7 @@
     "@openapitools/openapi-generator-cli": "2.7.0",
     "@playwright/test": "1.40.1",
     "@quasar/vite-plugin": "1.3.0",
-    "@sevenc-nanashi/matex": "1.0.1",
+    "@sevenc-nanashi/matex": "1.1.1",
     "@types/async-lock": "1.4.0",
     "@types/clone-deep": "4.0.1",
     "@types/crypto-js": "4.1.1",

src/backend/mobile/sandbox.ts

@@ -276,7 +276,10 @@ export const api: Sandbox = {
       );
   },
   vuexReady() {
-    SplashScreen.hide();
+    // 1フレーム遅らせることで、真っ白の画面が表示されるのを防ぐ。
+    requestAnimationFrame(() => {
+      SplashScreen.hide();
+    });
   },
   async getSetting(key) {
     const configManager = await getConfigManager();

src/components/App.vue

@@ -17,6 +17,7 @@
 <script setup lang="ts">
 import { watch, onMounted, ref, computed, toRaw } from "vue";
 import { useGtm } from "@gtm-support/vue-gtm";
+import { useQuasar, Notify } from "quasar";
 import TalkEditor from "@/components/Talk/TalkEditor.vue";
 import SingEditor from "@/components/Sing/SingEditor.vue";
 import { EngineId } from "@/type/preload";
@@ -27,6 +28,11 @@ import AllDialog from "@/components/Dialog/AllDialog.vue";
 
 const store = useStore();
 
+const $q = useQuasar();
+Notify.setDefaults({
+  position: $q.platform.is.desktop ? "bottom" : "top",
+});
+
 const openedEditor = computed(() => store.state.openedEditor);
 
 /**

src/components/Talk/MobileMenuButton.vue

@@ -0,0 +1,83 @@
+<template>
+  <QBtn flat round dense>
+    <QIcon name="menu" />
+    <QMenu transition-show="none" transition-hide="none">
+      <QList dense>
+        <MenuItem
+          v-for="(item, index) in menudata"
+          :key="item.label"
+          v-model:selected="subMenuOpenFlags[index]"
+          :menudata="item"
+        />
+      </QList>
+    </QMenu>
+  </QBtn>
+  <QSeparator vertical spaced inset color="background" />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import MenuItem from "@/components/Menu/MenuItem.vue";
+import { MenuItemData } from "@/components/Menu/type";
+
+const menudata = ref<MenuItemData[]>([
+  {
+    type: "button",
+    label: "選択している音声を書き出し",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "すべての音声を書き出し",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "すべての音声を繋げて書き出し",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "separator",
+  },
+  {
+    type: "button",
+    label: "テキストを繋げて書き出し",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "テキスト読み込み",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "separator",
+  },
+  {
+    type: "button",
+    label: "メニューに戻る",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+]);
+
+const subMenuOpenFlags = ref<boolean[]>(
+  [...Array(menudata.value.length)].map(() => false)
+);
+</script>

src/components/Talk/TalkEditor.vue

@@ -3,7 +3,6 @@
 
   <QLayout reveal elevated container class="layout-container">
     <ToolBar v-if="$q.platform.is.desktop" />
-    <MobileHeaderBar v-else />
 
     <QPageContainer>
       <QPage class="main-row-panes">
@@ -124,6 +123,7 @@
         />
       </QPage>
     </QPageContainer>
+    <ToolBar v-if="!$q.platform.is.desktop" />
   </QLayout>
 </template>
 
@@ -149,7 +149,6 @@ import {
   SplitterPositionType,
   Voice,
 } from "@/type/preload";
-import MobileHeaderBar from "@/components/MobileHeaderBar.vue";
 import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 import onetimeWatch from "@/helpers/onetimeWatch";