custom titlebar POC

app/src/electron.js

@@ -13,6 +13,8 @@ const BrowserWindow = electron.BrowserWindow;
 const path = require('path');
 const url = require('url');
 
+let isNativeMenu = true;
+
 // require('@electron/remote/main').initialize();
 
 const configRootPath = path.join(app.getPath('userData'), 'config-root.json');
@@ -168,6 +170,24 @@ ipcMain.on('close-window', async (event, arg) => {
 ipcMain.on('set-title', async (event, arg) => {
   mainWindow.setTitle(arg);
 });
+ipcMain.on('window-action', async (event, arg) => {
+  switch (arg) {
+    case 'minimize':
+      mainWindow.minimize();
+      break;
+    case 'maximize':
+      if (mainWindow.isMaximized()) {
+        mainWindow.unmaximize();
+      } else {
+        mainWindow.maximize();
+      }
+      break;
+    case 'close':
+      mainWindow.close();
+      break;
+  }
+  mainWindow.setTitle(arg);
+});
 
 ipcMain.handle('showOpenDialog', async (event, options) => {
   const res = electron.dialog.showOpenDialogSync(mainWindow, options);
@@ -183,13 +203,22 @@ ipcMain.handle('showItemInFolder', async (event, path) => {
 ipcMain.handle('openExternal', async (event, url) => {
   electron.shell.openExternal(url);
 });
+ipcMain.handle('isNativeMenu', async () => {
+  return isNativeMenu;
+});
 
 function createWindow() {
   const bounds = initialConfig['winBounds'];
+  isNativeMenu = os.platform() == 'darwin' ? true : false;
+  if (initialConfig['menuStyle'] == 'native') isNativeMenu = true;
+  if (initialConfig['menuStyle'] == 'client') isNativeMenu = false;
+
   mainWindow = new BrowserWindow({
     width: 1200,
     height: 800,
     title: 'DbGate',
+    frame: isNativeMenu,
+    titleBarStyle: isNativeMenu ? undefined : 'hidden',
     ...bounds,
     icon: os.platform() == 'win32' ? 'icon.ico' : path.resolve(__dirname, '../icon.png'),
     webPreferences: {

packages/web/public/dimensions.css

@@ -13,9 +13,14 @@
   );
 
   --dim-visible-toolbar: 1; /* set from JS */
+  --dim-visible-titlebar: 0; /* set from JS */
 
   --dim-toolbar-height: 30px;
-  --dim-header-top: calc(var(--dim-toolbar-height) * var(--dim-visible-toolbar));
+  --dim-titlebar-height: 30px;
+  --dim-toolbar-top: calc(var(--dim-titlebar-height) * var(--dim-visible-titlebar));
+  --dim-header-top: calc(
+    var(--dim-titlebar-height) * var(--dim-visible-titlebar) + var(--dim-toolbar-height) * var(--dim-visible-toolbar)
+  );
   --dim-content-top: calc(var(--dim-header-top) + var(--dim-tabs-panel-height));
 
   --dim-large-form-margin: 20px;

packages/web/src/Screen.svelte

@@ -22,11 +22,26 @@
   import ModalLayer from './modals/ModalLayer.svelte';
   import DragAndDropFileTarget from './DragAndDropFileTarget.svelte';
   import dragDropFileTarget from './utility/dragDropFileTarget';
+  import TitleBar from './widgets/TitleBar.svelte';
+  import { onMount } from 'svelte';
+  import getElectron from './utility/getElectron';
 
   $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
 
   let domTabs;
 
+  let drawTitleBar = false;
+  onMount(async () => {
+    let draw = true;
+    const electron = getElectron();
+    if (electron && (await electron.isNativeMenu())) {
+      draw = false;
+    }
+    drawTitleBar = draw;
+    document.documentElement.style.setProperty('--dim-visible-titlebar', drawTitleBar ? 1 : 0);
+    console.log('drawTitleBar', drawTitleBar);
+  });
+
   function handleTabsWheel(e) {
     if (!e.shiftKey) {
       e.preventDefault();
@@ -37,7 +52,7 @@
 
 <svelte:head>
   {#if $currentThemeDefinition?.themeCss}
-    {@html `<style id="themePlugin">${$currentThemeDefinition?.themeCss}</style>`}
+  {@html `<style id="themePlugin">${$currentThemeDefinition?.themeCss}</style>`}
   {/if}
 </svelte:head>
 
@@ -46,6 +61,11 @@
   use:dragDropFileTarget
   on:contextmenu={e => e.preventDefault()}
 >
+  {#if drawTitleBar}
+    <div class="titlebar">
+      <TitleBar />
+    </div>
+  {/if}
   <div class="iconbar">
     <WidgetIconPanel />
   </div>
@@ -153,7 +173,7 @@
   }
   .toolbar {
     position: fixed;
-    top: 0;
+    top: var(--dim-toolbar-top);
     height: var(--dim-toolbar-height);
     left: 0;
     right: 0;
@@ -172,4 +192,12 @@
     right: 0;
     bottom: var(--dim-statusbar-height);
   }
+
+  .titlebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--dim-titlebar-height);
+  }
 </style>

packages/web/src/icons/FontIcon.svelte

@@ -29,6 +29,11 @@
     'icon app': 'mdi mdi-layers-triple',
     'icon open-in-new': 'mdi mdi-open-in-new',
 
+    'icon window-restore': 'mdi mdi-window-restore',
+    'icon window-close': 'mdi mdi-window-close',
+    'icon window-minimize': 'mdi mdi-window-minimize',
+    'img dbgate': 'mdi mdi-database color-icon-gold',
+
     'icon columns': 'mdi mdi-view-column',
     'icon columns-outline': 'mdi mdi-view-column-outline',
 

packages/web/src/utility/getElectron.ts

@@ -27,6 +27,10 @@ class ElectronApi {
     await this.ipcRenderer.invoke('openExternal', url);
   }
 
+  async isNativeMenu() {
+    await this.ipcRenderer.invoke('isNativeMenu');
+  }
+
   async invoke(route, args) {
     const res = await this.ipcRenderer.invoke(route, args);
     return res;

packages/web/src/widgets/TitleBar.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  import { activeTab, currentDatabase } from '../stores';
+  import getElectron from '../utility/getElectron';
+
+  $: title = _.compact([$activeTab?.title, $currentDatabase?.name, 'DbGate']).join(' - ');
+  const electron = getElectron();
+</script>
+
+<div class="container">
+  <div class="icon"><FontIcon icon="img dbgate" /></div>
+  <div class="menu">File Edit Window</div>
+  <div class="title">{title}</div>
+
+  <div class="actions">
+    <div class="button" on:click={() => electron.send('window-action', 'minimize')}>
+      <FontIcon icon="icon window-minimize" />
+    </div>
+    <div class="button">
+      <FontIcon icon="icon window-restore" on:click={() => electron.send('window-action', 'maximize')} />
+    </div>
+    <div class="button close-button" on:click={() => electron.send('window-action', 'close')}>
+      <FontIcon icon="icon window-close" />
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    -webkit-app-region: drag;
+    user-select: none;
+    height: var(--dim-titlebar-height);
+    display: flex;
+    align-items: center;
+    background: var(--theme-bg-3);
+    color: var(--theme-font-1);
+  }
+
+  .title {
+    flex-grow: 1;
+    text-align: center;
+  }
+
+  .icon {
+    padding: 5px;
+    font-size: 12pt;
+  }
+
+  .button {
+    padding: 5px;
+  }
+
+  .close-button {
+    padding: 5px 7px;
+  }
+
+  .button:hover {
+    background: var(--theme-bg-hover);
+  }
+
+  .close-button:hover {
+    background: var(--theme-icon-red);
+  }
+
+  .menu {
+    margin-left: 10px;
+  }
+
+  .actions {
+    display: flex;
+    margin-left: 0;
+    -webkit-app-region: no-drag;
+  }
+</style>