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

@@ -85,7 +85,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/App.vue

@@ -8,12 +8,18 @@
 import { watch, computed } from "vue";
 import { useGtm } from "@gtm-support/vue-gtm";
 import { useRoute } from "vue-router";
+import { useQuasar, Notify } from "quasar";
 import ErrorBoundary from "@/components/ErrorBoundary.vue";
 import { useStore } from "@/store";
 
 const store = useStore();
 store.dispatch("INIT_VUEX");
 
+const $q = useQuasar();
+Notify.setDefaults({
+  position: $q.platform.is.desktop ? "bottom" : "top",
+});
+
 // URLパラメータに従ってマルチエンジンをオフにする
 const route = useRoute();
 const query = computed(() => route.query);

src/components/HeaderBar.vue

@@ -1,5 +1,22 @@
 <template>
-  <q-header class="q-py-sm">
+  <q-toolbar v-if="isMobile" class="bg-primary text-white">
+    <mobile-menu v-if="isMobile" />
+    <template v-for="button in headerButtons" :key="button.text">
+      <q-space v-if="button.text === null" />
+      <q-btn
+        v-else
+        flat
+        round
+        dense
+        :disable="button.disable.value"
+        :icon="buttonIcons[button.tag]"
+        @click="button.click"
+      >
+        <q-tooltip>{{ button.text }}</q-tooltip>
+      </q-btn>
+    </template>
+  </q-toolbar>
+  <q-header v-else class="q-py-sm">
     <q-toolbar>
       <template v-for="button in headerButtons" :key="button.text">
         <q-space v-if="button.text === null" />
@@ -20,6 +37,8 @@
 
 <script setup lang="ts">
 import { computed, ComputedRef } from "vue";
+import { useQuasar } from "quasar";
+import MobileMenu from "./MobileMenu.vue";
 import {
   generateAndConnectAndSaveAudioWithDialog,
   multiGenerateAndSaveAudioWithDialog,
@@ -34,14 +53,19 @@ import {
 } from "@/type/preload";
 import { getToolbarButtonName } from "@/store/utility";
 
+const $q = useQuasar();
+const isMobile = computed(() => !$q.platform.is.desktop);
+
 type ButtonContent = {
   text: string;
   click(): void;
   disable: ComputedRef<boolean>;
+  tag: ToolbarButtonTagType;
 };
 
 type SpacerContent = {
   text: null;
+  tag: null;
 };
 
 const store = useStore();
@@ -166,7 +190,7 @@ const importTextFile = () => {
 
 const usableButtons: Record<
   ToolbarButtonTagType,
-  Omit<ButtonContent, "text"> | null
+  Omit<ButtonContent, "text" | "tag"> | null
 > = {
   PLAY_CONTINUOUSLY: {
     click: playContinuously,
@@ -214,12 +238,27 @@ const headerButtons = computed(() =>
       return {
         ...buttonContent,
         text: getToolbarButtonName(tag),
+        tag,
       };
     } else {
       return {
         text: null,
+        tag: null,
       };
     }
   })
 );
+
+const buttonIcons: Record<ToolbarButtonTagType, string> = {
+  PLAY_CONTINUOUSLY: "playlist_play",
+  STOP: "stop",
+  EXPORT_AUDIO_SELECTED: "svguse:toolbarIcons.svg#exportSelected",
+  EXPORT_AUDIO_ALL: "svguse:toolbarIcons.svg#exportAll",
+  EXPORT_AUDIO_CONNECT_ALL: "svguse:toolbarIcons.svg#exportConnectAll",
+  UNDO: "undo",
+  REDO: "redo",
+  IMPORT_TEXT: "svguse:toolbarIcons.svg#importText",
+  SAVE_PROJECT: "save",
+  EMPTY: "",
+};
 </script>

src/components/MobileMenu.vue

@@ -0,0 +1,83 @@
+<template>
+  <q-btn flat round dense>
+    <q-icon name="menu" />
+    <q-menu transition-show="none" transition-hide="none">
+      <q-list dense>
+        <menu-item
+          v-for="(item, index) in menudata"
+          :key="item.label"
+          v-model:selected="subMenuOpenFlags[index]"
+          :menudata="item"
+        />
+      </q-list>
+    </q-menu>
+  </q-btn>
+  <q-separator vertical spaced inset color="background" />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { MenuItemData } from "./MenuBar.vue";
+import MenuItem from "./MenuItem.vue";
+
+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>