diff --git a/app/src/electron.js b/app/src/electron.js index 24f370f1..5f84fb82 100644 --- a/app/src/electron.js +++ b/app/src/electron.js @@ -15,7 +15,8 @@ const path = require('path'); const url = require('url'); const mainMenuDefinition = require('./mainMenuDefinition'); -let isNativeMenu = true; +let useNativeMenu = true; +let useNativeMenuSpecified = null; // require('@electron/remote/main').initialize(); @@ -184,6 +185,9 @@ ipcMain.on('set-title', async (event, arg) => { ipcMain.on('open-link', async (event, arg) => { electron.shell.openExternal(arg); }); +ipcMain.on('set-use-native-menu', async (event, arg) => { + useNativeMenuSpecified = arg; +}); ipcMain.on('window-action', async (event, arg) => { switch (arg) { case 'minimize': @@ -226,23 +230,28 @@ ipcMain.handle('showItemInFolder', async (event, path) => { ipcMain.handle('openExternal', async (event, url) => { electron.shell.openExternal(url); }); -ipcMain.handle('isNativeMenu', async () => { - return isNativeMenu; +ipcMain.handle('useNativeMenu', async () => { + return useNativeMenu; }); function createWindow() { const bounds = initialConfig['winBounds']; - isNativeMenu = os.platform() == 'darwin' ? true : false; - if (initialConfig['menuStyle'] == 'native') isNativeMenu = true; - if (initialConfig['menuStyle'] == 'client') isNativeMenu = false; - // isNativeMenu = true; + useNativeMenu = os.platform() == 'darwin' ? true : false; + if (initialConfig['useNativeMenu'] === true) { + useNativeMenu = true; + useNativeMenuSpecified = true; + } + if (initialConfig['useNativeMenu'] === false) { + useNativeMenu = false; + useNativeMenuSpecified = false; + } mainWindow = new BrowserWindow({ width: 1200, height: 800, title: 'DbGate', - frame: isNativeMenu, - titleBarStyle: isNativeMenu ? undefined : 'hidden', + frame: useNativeMenu, + titleBarStyle: useNativeMenu ? undefined : 'hidden', ...bounds, icon: os.platform() == 'win32' ? 'icon.ico' : path.resolve(__dirname, '../icon.png'), webPreferences: { @@ -274,6 +283,7 @@ function createWindow() { JSON.stringify({ winBounds: mainWindow.getBounds(), winIsMaximized: mainWindow.isMaximized(), + useNativeMenu: useNativeMenuSpecified, }), 'utf-8' ); diff --git a/app/src/mainMenuDefinition.js b/app/src/mainMenuDefinition.js index 3224c30e..4095eb11 100644 --- a/app/src/mainMenuDefinition.js +++ b/app/src/mainMenuDefinition.js @@ -45,7 +45,9 @@ module.exports = [ { command: 'app.toggleDevTools', hideDisabled: true }, { command: 'app.toggleFullScreen', hideDisabled: true }, { command: 'app.minimize', hideDisabled: true }, + { divider: true }, { command: 'theme.changeTheme', hideDisabled: true }, + { command: 'settings.show' }, ], }, { diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte index 7642fb58..6271eea7 100644 --- a/packages/web/src/App.svelte +++ b/packages/web/src/App.svelte @@ -16,7 +16,8 @@ import { subscribePermissionCompiler } from './utility/hasPermission'; import { apiCall } from './utility/api'; import { getUsedApps } from './utility/metadataLoaders'; -import AppTitleProvider from './utility/AppTitleProvider.svelte'; + import AppTitleProvider from './utility/AppTitleProvider.svelte'; + import { initTitleBarVisibility } from './utility/common'; let loadedApi = false; @@ -26,6 +27,8 @@ import AppTitleProvider from './utility/AppTitleProvider.svelte'; // return; // } + await initTitleBarVisibility(); + try { // console.log('************** LOADING API'); diff --git a/packages/web/src/Screen.svelte b/packages/web/src/Screen.svelte index 22d714ac..16db06e1 100644 --- a/packages/web/src/Screen.svelte +++ b/packages/web/src/Screen.svelte @@ -24,18 +24,12 @@ import dragDropFileTarget from './utility/dragDropFileTarget'; import TitleBar from './widgets/TitleBar.svelte'; import { onMount } from 'svelte'; - import { shouldDrawTitleBar } from './utility/common'; + import { getTitleBarVisibility } from './utility/common'; $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light'; let domTabs; - let drawTitleBar = false; - onMount(async () => { - drawTitleBar = await shouldDrawTitleBar(); - document.documentElement.style.setProperty('--dim-visible-titlebar', drawTitleBar ? 1 : 0); - }); - function handleTabsWheel(e) { if (!e.shiftKey) { e.preventDefault(); @@ -57,7 +51,7 @@ use:dragDropFileTarget on:contextmenu={e => e.preventDefault()} > - {#if drawTitleBar} + {#if getTitleBarVisibility()}
diff --git a/packages/web/src/settings/SettingsModal.svelte b/packages/web/src/settings/SettingsModal.svelte index 01f8fe3a..3e26405e 100644 --- a/packages/web/src/settings/SettingsModal.svelte +++ b/packages/web/src/settings/SettingsModal.svelte @@ -3,6 +3,7 @@ import FormButton from '../forms/FormButton.svelte'; import FormCheckboxField from '../forms/FormCheckboxField.svelte'; + import FormProvider from '../forms/FormProvider.svelte'; import FormProvider from '../forms/FormProvider.svelte'; import FormSelectField from '../forms/FormSelectField.svelte'; @@ -14,6 +15,9 @@ import { closeCurrentModal } from '../modals/modalTools'; import { getCurrentSettings, getVisibleToolbar, getZoomKoef, visibleToolbar, zoomKoef } from '../stores'; import { apiCall } from '../utility/api'; + import { getTitleBarVisibility } from '../utility/common'; + import getElectron from '../utility/getElectron'; + import { showSnackbarInfo } from '../utility/snackbar'; function handleOk(e) { apiCall( @@ -22,8 +26,14 @@ ); visibleToolbar.set(!!e.detail[':visibleToolbar']); zoomKoef.set(e.detail[':zoomKoef']); + if (electron && !getTitleBarVisibility() != !!e.detail[':useNativeMenu']) { + electron.send('set-use-native-menu', !!e.detail[':useNativeMenu']); + showSnackbarInfo('Native menu settings will be applied after app restart'); + } closeCurrentModal(); } + + const electron = getElectron(); @@ -39,6 +50,9 @@
Appearance
+ {#if electron} + + {/if} results[index]); } -export async function shouldDrawTitleBar() { +async function computeTitleBarVisibility() { const electron = getElectron(); if (!electron) { return false; } - if (await electron.isNativeMenu()) { + if (await electron.useNativeMenu()) { return false; } return true; } + +let titleBarVisibility = false; +export async function initTitleBarVisibility() { + titleBarVisibility = await computeTitleBarVisibility(); + document.documentElement.style.setProperty('--dim-visible-titlebar', titleBarVisibility ? '1' : '0'); +} + +export function getTitleBarVisibility() { + return titleBarVisibility; +} diff --git a/packages/web/src/utility/getElectron.ts b/packages/web/src/utility/getElectron.ts index 0e4f06d2..1ad47e2c 100644 --- a/packages/web/src/utility/getElectron.ts +++ b/packages/web/src/utility/getElectron.ts @@ -26,8 +26,8 @@ class ElectronApi { await this.ipcRenderer.invoke('openExternal', url); } - async isNativeMenu() { - const res = await this.ipcRenderer.invoke('isNativeMenu'); + async useNativeMenu() { + const res = await this.ipcRenderer.invoke('useNativeMenu'); return res; } diff --git a/packages/web/src/widgets/WidgetIconPanel.svelte b/packages/web/src/widgets/WidgetIconPanel.svelte index edfb4102..6075665b 100644 --- a/packages/web/src/widgets/WidgetIconPanel.svelte +++ b/packages/web/src/widgets/WidgetIconPanel.svelte @@ -2,7 +2,7 @@ import { onMount } from 'svelte'; import FontIcon from '../icons/FontIcon.svelte'; import { currentDropDownMenu, selectedWidget, visibleCommandPalette } from '../stores'; - import { shouldDrawTitleBar } from '../utility/common'; + import { getTitleBarVisibility } from '../utility/common'; import mainMenuDefinition from '../../../../app/src/mainMenuDefinition'; let domSettings; @@ -78,15 +78,10 @@ const items = mainMenuDefinition; currentDropDownMenu.set({ left, top, items }); } - - let showMainMenu = false; - onMount(async () => { - showMainMenu = !(await shouldDrawTitleBar()); - });
- {#if showMainMenu} + {#if !getTitleBarVisibility()}