From e49d1722ac51ce0ac633a86f3e1301868e8b1560 Mon Sep 17 00:00:00 2001
From: Gray Suitcase <41382894+PickledChair@users.noreply.github.com>
Date: Wed, 29 Dec 2021 16:53:17 +0900
Subject: [PATCH] =?UTF-8?q?Mac:=20=E3=83=8D=E3=82=A4=E3=83=86=E3=82=A3?=
 =?UTF-8?q?=E3=83=96=E3=81=AE=E4=B8=89=E8=89=B2=E3=83=9C=E3=82=BF=E3=83=B3?=
 =?UTF-8?q?=EF=BC=88=E6=9C=80=E5=B0=8F=E5=8C=96=E3=83=BB=E6=9C=80=E5=A4=A7?=
 =?UTF-8?q?=E5=8C=96=E3=83=BB=E9=96=89=E3=81=98=E3=82=8B=E3=83=9C=E3=82=BF?=
 =?UTF-8?q?=E3=83=B3=EF=BC=89=E3=82=92=E4=BD=BF=E3=81=86=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB=E5=A4=89=E6=9B=B4=20(#621)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* use native traffic light on mac

* update Vuex.spec.ts for test

* make disable dark mode for macOS

* fix quote

* trivial change

* artifact_name -> macos_artifact_name

* hard-coding mac app name

* ダークモード無効化をアプリ側で対応

* npm run fmt

* Mac の場合だけライトモード固定にするように変更

* Macでlightモード指定している理由をコメントに記載
---
 src/background.ts                       | 21 ++++++++++++++++++++-
 src/components/MenuBar.vue              | 13 ++++++++++---
 src/plugins/ipcMessageReceiverPlugin.ts |  8 ++++++++
 src/store/type.ts                       | 15 +++++++++++++++
 src/store/ui.ts                         | 16 ++++++++++++++++
 src/type/ipc.d.ts                       | 10 ++++++++++
 tests/unit/store/Vuex.spec.ts           |  1 +
 7 files changed, 80 insertions(+), 4 deletions(-)

diff --git a/src/background.ts b/src/background.ts
index dc1d0c3655..ca0143f043 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -5,7 +5,15 @@ import dotenv from "dotenv";
 import treeKill from "tree-kill";
 import Store from "electron-store";
 
-import { app, protocol, BrowserWindow, dialog, Menu, shell } from "electron";
+import {
+  app,
+  protocol,
+  BrowserWindow,
+  dialog,
+  Menu,
+  shell,
+  nativeTheme,
+} from "electron";
 import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
 import installExtension, { VUEJS3_DEVTOOLS } from "electron-devtools-installer";
 
@@ -441,6 +449,8 @@ async function createWindow() {
     width: 800,
     height: 600,
     frame: false,
+    titleBarStyle: "hidden",
+    trafficLightPosition: { x: 6, y: 4 },
     minWidth: 320,
     show: false,
     webPreferences: {
@@ -461,8 +471,17 @@ async function createWindow() {
   }
   if (isDevelopment) win.webContents.openDevTools();
 
+  // Macではdarkモードかつウィンドウが非アクティブのときに閉じるボタンなどが見えなくなるので、lightモードに固定
+  if (isMac) nativeTheme.themeSource = "light";
+
   win.on("maximize", () => win.webContents.send("DETECT_MAXIMIZED"));
   win.on("unmaximize", () => win.webContents.send("DETECT_UNMAXIMIZED"));
+  win.on("enter-full-screen", () =>
+    win.webContents.send("DETECT_ENTER_FULLSCREEN")
+  );
+  win.on("leave-full-screen", () =>
+    win.webContents.send("DETECT_LEAVE_FULLSCREEN")
+  );
   win.on("always-on-top-changed", () => {
     win.webContents.send(
       win.isAlwaysOnTop() ? "DETECT_PINNED" : "DETECT_UNPINNED"
diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
index 5101266494..efa5356b6c 100644
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -1,6 +1,9 @@
 <template>
   <q-bar class="bg-background q-pa-none relative-position">
-    <min-max-close-buttons v-if="$q.platform.is.mac" />
+    <div
+      v-if="$q.platform.is.mac && !isFullscreen"
+      class="mac-traffic-light-space"
+    ></div>
     <img v-else src="icon.png" class="window-logo" alt="application logo" />
     <menu-button
       v-for="(root, index) of menudata"
@@ -30,7 +33,6 @@
 <script lang="ts">
 import { defineComponent, ref, computed, ComputedRef, watch } from "vue";
 import { useStore } from "@/store";
-import MinMaxCloseButtons from "@/components/MinMaxCloseButtons.vue";
 import MenuButton from "@/components/MenuButton.vue";
 import TitleBarButtons from "@/components/TitleBarButtons.vue";
 import { useQuasar } from "quasar";
@@ -75,7 +77,6 @@ export default defineComponent({
   name: "MenuBar",
 
   components: {
-    MinMaxCloseButtons,
     MenuButton,
     TitleBarButtons,
   },
@@ -91,6 +92,7 @@ export default defineComponent({
     const menubarLocked = computed(() => store.getters.MENUBAR_LOCKED);
     const projectName = computed(() => store.getters.PROJECT_NAME);
     const isEdited = computed(() => store.getters.IS_EDITED);
+    const isFullscreen = computed(() => store.getters.IS_FULLSCREEN);
 
     const createNewProject = async () => {
       if (!uiLocked.value) {
@@ -359,6 +361,7 @@ export default defineComponent({
       menubarLocked,
       projectName,
       isEdited,
+      isFullscreen,
       subMenuOpenFlags,
       reassignSubMenuOpen,
       menudata,
@@ -398,4 +401,8 @@ export default defineComponent({
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
+.mac-traffic-light-space {
+  margin-right: 70px;
+}
 </style>
diff --git a/src/plugins/ipcMessageReceiverPlugin.ts b/src/plugins/ipcMessageReceiverPlugin.ts
index fad6007c4f..fa38763444 100644
--- a/src/plugins/ipcMessageReceiverPlugin.ts
+++ b/src/plugins/ipcMessageReceiverPlugin.ts
@@ -34,6 +34,14 @@ export const ipcMessageReceiver: Plugin = {
       options.store.dispatch("DETECT_UNPINNED");
     });
 
+    window.electron.onReceivedIPCMsg("DETECT_ENTER_FULLSCREEN", () =>
+      options.store.dispatch("DETECT_ENTER_FULLSCREEN")
+    );
+
+    window.electron.onReceivedIPCMsg("DETECT_LEAVE_FULLSCREEN", () =>
+      options.store.dispatch("DETECT_LEAVE_FULLSCREEN")
+    );
+
     window.electron.onReceivedIPCMsg("CHECK_EDITED_AND_NOT_SAVE", () => {
       options.store.dispatch("CHECK_EDITED_AND_NOT_SAVE");
     });
diff --git a/src/store/type.ts b/src/store/type.ts
index 9464ff63b8..c00af87e90 100644
--- a/src/store/type.ts
+++ b/src/store/type.ts
@@ -764,6 +764,7 @@ export type UiStoreState = {
   isAcceptRetrieveTelemetryDialogOpen: boolean;
   isMaximized: boolean;
   isPinned: boolean;
+  isFullscreen: boolean;
 };
 
 type UiStoreTypes = {
@@ -870,6 +871,20 @@ type UiStoreTypes = {
     action(): void;
   };
 
+  DETECT_ENTER_FULLSCREEN: {
+    mutation: undefined;
+    action(): void;
+  };
+
+  DETECT_LEAVE_FULLSCREEN: {
+    mutation: undefined;
+    action(): void;
+  };
+
+  IS_FULLSCREEN: {
+    getter: boolean;
+  };
+
   CHECK_EDITED_AND_NOT_SAVE: {
     action(): Promise<void>;
   };
diff --git a/src/store/ui.ts b/src/store/ui.ts
index e882c18d47..9e9e323ab4 100644
--- a/src/store/ui.ts
+++ b/src/store/ui.ts
@@ -38,6 +38,7 @@ export const uiStoreState: UiStoreState = {
   isAcceptRetrieveTelemetryDialogOpen: false,
   isMaximized: false,
   isPinned: false,
+  isFullscreen: false,
 };
 
 export const uiStore: VoiceVoxStoreOptions<UiGetters, UiActions, UiMutations> =
@@ -52,6 +53,9 @@ export const uiStore: VoiceVoxStoreOptions<UiGetters, UiActions, UiMutations> =
       SHOULD_SHOW_PANES(_, getters) {
         return getters.ACTIVE_AUDIO_KEY != undefined;
       },
+      IS_FULLSCREEN(state) {
+        return state.isFullscreen;
+      },
     },
 
     mutations: {
@@ -118,6 +122,12 @@ export const uiStore: VoiceVoxStoreOptions<UiGetters, UiActions, UiMutations> =
       DETECT_UNPINNED(state) {
         state.isPinned = false;
       },
+      DETECT_ENTER_FULLSCREEN(state) {
+        state.isFullscreen = true;
+      },
+      DETECT_LEAVE_FULLSCREEN(state) {
+        state.isFullscreen = false;
+      },
     },
 
     actions: {
@@ -266,6 +276,12 @@ export const uiStore: VoiceVoxStoreOptions<UiGetters, UiActions, UiMutations> =
       async DETECT_UNPINNED({ commit }) {
         commit("DETECT_UNPINNED");
       },
+      async DETECT_ENTER_FULLSCREEN({ commit }) {
+        commit("DETECT_ENTER_FULLSCREEN");
+      },
+      async DETECT_LEAVE_FULLSCREEN({ commit }) {
+        commit("DETECT_LEAVE_FULLSCREEN");
+      },
       async CHECK_EDITED_AND_NOT_SAVE({ getters }) {
         if (getters.IS_EDITED) {
           const result: number = await window.electron.showInfoDialog({
diff --git a/src/type/ipc.d.ts b/src/type/ipc.d.ts
index 3e475881dc..a0054f292e 100644
--- a/src/type/ipc.d.ts
+++ b/src/type/ipc.d.ts
@@ -254,6 +254,16 @@ type IpcSOData = {
     return: void;
   };
 
+  DETECT_ENTER_FULLSCREEN: {
+    args: [];
+    return: void;
+  };
+
+  DETECT_LEAVE_FULLSCREEN: {
+    args: [];
+    return: void;
+  };
+
   CHECK_EDITED_AND_NOT_SAVE: {
     args: [];
     return: void;
diff --git a/tests/unit/store/Vuex.spec.ts b/tests/unit/store/Vuex.spec.ts
index f9afda3ee0..69097dce2b 100644
--- a/tests/unit/store/Vuex.spec.ts
+++ b/tests/unit/store/Vuex.spec.ts
@@ -52,6 +52,7 @@ describe("store/vuex.js test", () => {
           availableThemes: [],
         },
         isPinned: false,
+        isFullscreen: false,
         presetItems: {},
         presetKeys: [],
         hotkeySettings: [],