macOSにおいて最小化・最大化・閉じるボタンをタイトルバーの左側に表示する

src/components/MenuBar.vue

@@ -1,6 +1,7 @@
 <template>
   <q-bar class="bg-background q-pa-none relative-position">
-    <img src="icon.png" class="window-logo" alt="application logo" />
+    <min-max-close-buttons v-if="$q.platform.is.mac" />
+    <img v-else src="icon.png" class="window-logo" alt="application logo" />
     <menu-button
       v-for="(root, index) of menudata"
       :key="index"
@@ -28,6 +29,7 @@
 <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";
@@ -69,6 +71,7 @@ export default defineComponent({
   name: "MenuBar",
 
   components: {
+    MinMaxCloseButtons,
     MenuButton,
     TitleBarButtons,
   },

src/components/MinMaxCloseButtons.vue

@@ -0,0 +1,134 @@
+<template>
+  <q-badge
+    v-if="$q.platform.is.mac"
+    transparent
+    color="transparent"
+    text-color="display"
+    class="full-height cursor-not-allowed no-border-radius"
+  >
+    <q-btn
+      dense
+      flat
+      round
+      icon="lens"
+      size="8.5px"
+      color="red"
+      class="title-bar-buttons"
+      @click="closeWindow()"
+    ></q-btn>
+    <q-btn
+      dense
+      flat
+      round
+      icon="lens"
+      size="8.5px"
+      color="yellow"
+      class="title-bar-buttons"
+      @click="minimizeWindow()"
+    ></q-btn>
+    <q-btn
+      dense
+      flat
+      round
+      icon="lens"
+      size="8.5px"
+      color="green"
+      class="title-bar-buttons"
+      @click="maximizeWindow()"
+    ></q-btn>
+  </q-badge>
+  <q-badge
+    v-else
+    transparent
+    color="transparent"
+    text-color="display"
+    class="
+      full-height
+      cursor-not-allowed
+      no-border-radius
+      title-bar-buttons-root
+    "
+  >
+    <q-btn
+      dense
+      flat
+      icon="minimize"
+      class="title-bar-buttons"
+      @click="minimizeWindow()"
+    ></q-btn>
+
+    <q-btn
+      v-if="!isMaximized"
+      dense
+      flat
+      icon="crop_square"
+      class="title-bar-buttons"
+      @click="maximizeWindow()"
+    ></q-btn>
+    <q-btn
+      v-else
+      dense
+      flat
+      :icon="mdiWindowRestore"
+      class="title-bar-buttons"
+      @click="maximizeWindow()"
+    >
+    </q-btn>
+
+    <q-btn
+      dense
+      flat
+      icon="close"
+      class="title-bar-buttons close"
+      @click="closeWindow()"
+    ></q-btn>
+  </q-badge>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from "vue";
+import { useStore } from "@/store";
+import { mdiWindowRestore } from "@quasar/extras/mdi-v5";
+
+export default defineComponent({
+  name: "MinMaxCloseButtons",
+  setup() {
+    const store = useStore();
+
+    const closeWindow = async () => {
+      store.dispatch("CHECK_EDITED_AND_NOT_SAVE");
+    };
+    const minimizeWindow = () => window.electron.minimizeWindow();
+    const maximizeWindow = () => window.electron.maximizeWindow();
+
+    const isMaximized = computed(() => store.state.isMaximized);
+
+    return {
+      closeWindow,
+      minimizeWindow,
+      maximizeWindow,
+      mdiWindowRestore,
+      isMaximized,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.q-badge {
+  padding: 0;
+}
+
+.title-bar-buttons-root {
+  z-index: 2000;
+}
+
+.title-bar-buttons {
+  -webkit-app-region: no-drag;
+  overflow: visible;
+}
+
+.close:hover {
+  background-color: red;
+}
+</style>

src/components/TitleBarButtons.vue

@@ -36,35 +36,6 @@
         最前面に表示
       </q-tooltip>
     </q-btn>
-    <q-btn
-      dense
-      flat
-      round
-      icon="lens"
-      size="8.5px"
-      color="green"
-      class="title-bar-buttons"
-      @click="maximizeWindow()"
-    ></q-btn>
-    <q-btn
-      dense
-      flat
-      round
-      icon="lens"
-      size="8.5px"
-      color="yellow"
-      class="title-bar-buttons"
-      @click="minimizeWindow()"
-    ></q-btn>
-    <q-btn
-      dense
-      flat
-      icon="lens"
-      size="8.5px"
-      color="red"
-      class="title-bar-buttons"
-      @click="closeWindow()"
-    ></q-btn>
   </q-badge>
   <q-badge
     v-else
@@ -107,72 +78,29 @@
         最前面に表示
       </q-tooltip>
     </q-btn>
-    <q-btn
-      dense
-      flat
-      icon="minimize"
-      class="title-bar-buttons"
-      @click="minimizeWindow()"
-    ></q-btn>
-
-    <q-btn
-      v-if="!isMaximized"
-      dense
-      flat
-      icon="crop_square"
-      class="title-bar-buttons"
-      @click="maximizeWindow()"
-    ></q-btn>
-    <q-btn
-      v-else
-      dense
-      flat
-      :icon="mdiWindowRestore"
-      class="title-bar-buttons"
-      @click="maximizeWindow()"
-    >
-    </q-btn>
-
-    <q-btn
-      dense
-      flat
-      icon="close"
-      class="title-bar-buttons close"
-      @click="closeWindow()"
-    ></q-btn>
   </q-badge>
+  <min-max-close-buttons v-if="!$q.platform.is.mac" />
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from "vue";
 import { useStore } from "@/store";
-import { mdiWindowRestore } from "@quasar/extras/mdi-v5";
+import MinMaxCloseButtons from "@/components/MinMaxCloseButtons.vue";
 
 export default defineComponent({
   name: "TitleBarButtons",
+  components: { MinMaxCloseButtons },
   setup() {
     const store = useStore();
 
-    const closeWindow = async () => {
-      store.dispatch("CHECK_EDITED_AND_NOT_SAVE");
-    };
-    const minimizeWindow = () => window.electron.minimizeWindow();
-    const maximizeWindow = () => window.electron.maximizeWindow();
     const changePinWindow = () => {
       window.electron.changePinWindow();
     };
 
     const isPinned = computed(() => store.state.isPinned);
 
-    const isMaximized = computed(() => store.state.isMaximized);
-
     return {
-      closeWindow,
-      minimizeWindow,
-      maximizeWindow,
       changePinWindow,
-      mdiWindowRestore,
-      isMaximized,
       isPinned,
     };
   },
@@ -192,8 +120,4 @@ export default defineComponent({
   -webkit-app-region: no-drag;
   overflow: visible;
 }
-
-.close:hover {
-  background-color: red;
-}
 </style>