Add: ＋ボタン非表示機能を追加 (#1375)

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>

src/components/SettingDialog.vue

@@ -590,6 +590,28 @@
                 >
                 </q-toggle>
               </q-card-actions>
+              <q-card-actions class="q-px-md q-py-none bg-surface">
+                <div>テキスト追加ボタンの表示</div>
+                <div>
+                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
+                    <q-tooltip
+                      :delay="500"
+                      anchor="center right"
+                      self="center left"
+                      transition-show="jump-right"
+                      transition-hide="jump-left"
+                    >
+                      右下にテキスト追加ボタンを表示します。
+                    </q-tooltip>
+                  </q-icon>
+                </div>
+                <q-space />
+                <q-toggle
+                  :model-value="showAddAudioItemButton"
+                  @update:model-value="changeShowAddAudioItemButton($event)"
+                >
+                </q-toggle>
+              </q-card-actions>
             </q-card>
 
             <!-- Experimental Card -->
@@ -922,6 +944,40 @@ const changeShowTextLineNumber = (showTextLineNumber: boolean) => {
   });
 };
 
+// エディタの＋ボタン表示設定
+const showAddAudioItemButton = computed(
+  () => store.state.showAddAudioItemButton
+);
+const changeShowAddAudioItemButton = (showAddAudioItemButton: boolean) => {
+  store.dispatch("SET_SHOW_ADD_AUDIO_ITEM_BUTTON", {
+    showAddAudioItemButton,
+  });
+
+  // 設定をオフにする場合はヒントを表示
+  if (!showAddAudioItemButton) {
+    $q.dialog({
+      title: "エディタの＋ボタンを非表示にする",
+      message: "テキスト欄は Shift + Enter で追加できます",
+      persistent: true, // ダイアログ外側押下時にユーザが設定ができたと思い込むことを防止する
+      ok: {
+        flat: true,
+        label: "OK",
+        textColor: "display",
+      },
+      cancel: {
+        flat: true,
+        label: "キャンセル",
+        textColor: "display",
+      },
+    }).onCancel(() => {
+      // キャンセルしたら設定を元に戻す
+      store.dispatch("SET_SHOW_ADD_AUDIO_ITEM_BUTTON", {
+        showAddAudioItemButton: true,
+      });
+    });
+  }
+};
+
 const currentAudioOutputDeviceComputed = computed<{
   key: string;
   label: string;

src/store/setting.ts

@@ -42,6 +42,7 @@ export const settingStoreState: SettingStoreState = {
   },
   editorFont: "default",
   showTextLineNumber: false,
+  showAddAudioItemButton: true,
   acceptRetrieveTelemetry: "Unconfirmed",
   experimentalSetting: {
     enablePreset: false,
@@ -96,6 +97,12 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
         ),
       });
 
+      dispatch("SET_SHOW_ADD_AUDIO_ITEM_BUTTON", {
+        showAddAudioItemButton: await window.electron.getSetting(
+          "showAddAudioItemButton"
+        ),
+      });
+
       dispatch("SET_ACCEPT_RETRIEVE_TELEMETRY", {
         acceptRetrieveTelemetry: await window.electron.getSetting(
           "acceptRetrieveTelemetry"
@@ -278,6 +285,21 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
     },
   },
 
+  SET_SHOW_ADD_AUDIO_ITEM_BUTTON: {
+    mutation(state, { showAddAudioItemButton }) {
+      state.showAddAudioItemButton = showAddAudioItemButton;
+    },
+    action({ commit }, { showAddAudioItemButton }) {
+      window.electron.setSetting(
+        "showAddAudioItemButton",
+        showAddAudioItemButton
+      );
+      commit("SET_SHOW_ADD_AUDIO_ITEM_BUTTON", {
+        showAddAudioItemButton,
+      });
+    },
+  },
+
   SET_ACCEPT_RETRIEVE_TELEMETRY: {
     mutation(state, { acceptRetrieveTelemetry }) {
       state.acceptRetrieveTelemetry = acceptRetrieveTelemetry;

src/store/type.ts

@@ -1016,6 +1016,7 @@ export type SettingStoreState = {
   themeSetting: ThemeSetting;
   editorFont: EditorFontType;
   showTextLineNumber: boolean;
+  showAddAudioItemButton: boolean;
   acceptRetrieveTelemetry: AcceptRetrieveTelemetryStatus;
   experimentalSetting: ExperimentalSetting;
   splitTextWhenPaste: SplitTextWhenPasteType;
@@ -1059,6 +1060,11 @@ export type SettingStoreTypes = {
     action(payload: { showTextLineNumber: boolean }): void;
   };
 
+  SET_SHOW_ADD_AUDIO_ITEM_BUTTON: {
+    mutation: { showAddAudioItemButton: boolean };
+    action(payload: { showAddAudioItemButton: boolean }): void;
+  };
+
   SET_ACCEPT_RETRIEVE_TELEMETRY: {
     mutation: { acceptRetrieveTelemetry: AcceptRetrieveTelemetryStatus };
     action(payload: {

src/type/preload.ts

@@ -572,6 +572,7 @@ export const electronStoreSchema = z
     currentTheme: z.string().default("Default"),
     editorFont: z.enum(["default", "os"]).default("default"),
     showTextLineNumber: z.boolean().default(false),
+    showAddAudioItemButton: z.boolean().default(true),
     experimentalSetting: experimentalSettingSchema.passthrough().default({}),
     acceptRetrieveTelemetry: z
       .enum(["Unconfirmed", "Accepted", "Refused"])

src/views/EditorHome.vue

@@ -106,7 +106,10 @@
                           />
                         </template>
                       </draggable>
-                      <div class="add-button-wrapper">
+                      <div
+                        v-if="showAddAudioItemButton"
+                        class="add-button-wrapper"
+                      >
                         <q-btn
                           fab
                           icon="add"
@@ -815,6 +818,10 @@ watch(activeAudioKey, (audioKey) => {
     activeCellElement.scrollIntoView(overflowTop || !overflowBottom);
   }
 });
+
+const showAddAudioItemButton = computed(() => {
+  return store.state.showAddAudioItemButton;
+});
 </script>
 
 <style scoped lang="scss">

tests/unit/store/Vuex.spec.ts

@@ -77,6 +77,7 @@ describe("store/vuex.js test", () => {
         },
         editorFont: "default",
         showTextLineNumber: false,
+        showAddAudioItemButton: true,
         isPinned: false,
         isFullscreen: false,
         presetItems: {},
@@ -247,6 +248,7 @@ describe("store/vuex.js test", () => {
       false
     );
     assert.equal(store.state.showTextLineNumber, false);
+    assert.equal(store.state.showAddAudioItemButton, true);
     assert.propertyVal(
       store.state.splitterPosition,
       "audioDetailPaneHeight",