feat(UI): improved topbar look&feel on MacOS

src/main/index.js

@@ -11,6 +11,7 @@ import ipcHandlers from './ipc-handlers';
 Store.initRenderer();
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
+const isMacOS = process.platform === 'darwin';
 const gotTheLock = app.requestSingleInstanceLock();
 
 process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true';
@@ -35,6 +36,8 @@ async function createMainWindow () {
          spellcheck: false
       },
       frame: false,
+      titleBarStyle: isMacOS ? 'hidden' : 'default',
+      trafficLightPosition: isMacOS ? { x: 10, y: 8 } : undefined,
       backgroundColor: '#1d1d1d'
    });
 
@@ -81,7 +84,7 @@ else {
    // quit application when all windows are closed
    app.on('window-all-closed', () => {
       // on macOS it is common for applications to stay open until the user explicitly quits
-      if (process.platform !== 'darwin') app.quit();
+      if (isMacOS) app.quit();
    });
 
    app.on('activate', async () => {
@@ -112,7 +115,7 @@ else {
 function createAppMenu () {
    let menu = null;
 
-   if (process.platform === 'darwin') {
+   if (isMacOS) {
       menu = Menu.buildFromTemplate([
          {
             role: 'appMenu'

src/renderer/components/TheTitleBar.vue

@@ -2,7 +2,11 @@
    <div id="titlebar">
       <div class="titlebar-resizer" />
       <div class="titlebar-elements">
-         <img class="titlebar-logo" :src="require('@/images/logo.svg').default">
+         <img
+            v-if="!isMacOS"
+            class="titlebar-logo"
+            :src="require('@/images/logo.svg').default"
+         >
       </div>
       <div class="titlebar-elements titlebar-title">
          {{ windowTitle }}
@@ -22,14 +26,26 @@
          >
             <i class="mdi mdi-24px mdi-refresh" />
          </div>
-         <div class="titlebar-element" @click="minimizeApp">
+         <div
+            v-if="!isMacOS"
+            class="titlebar-element"
+            @click="minimizeApp"
+         >
             <i class="mdi mdi-24px mdi-minus" />
          </div>
-         <div class="titlebar-element" @click="toggleFullScreen">
+         <div
+            v-if="!isMacOS"
+            class="titlebar-element"
+            @click="toggleFullScreen"
+         >
             <i v-if="isMaximized" class="mdi mdi-24px mdi-fullscreen-exit" />
             <i v-else class="mdi mdi-24px mdi-fullscreen" />
          </div>
-         <div class="titlebar-element close-button" @click="closeApp">
+         <div
+            v-if="!isMacOS"
+            class="titlebar-element close-button"
+            @click="closeApp"
+         >
             <i class="mdi mdi-24px mdi-close" />
          </div>
       </div>
@@ -47,7 +63,8 @@ export default {
       return {
          w: getCurrentWindow(),
          isMaximized: getCurrentWindow().isMaximized(),
-         isDevelopment: process.env.NODE_ENV === 'development'
+         isDevelopment: process.env.NODE_ENV === 'development',
+         isMacOS: process.platform === 'darwin'
       };
    },
    computed: {