From 7b8c0be04401d7d4a0d89dee430d87a5559a8f84 Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Sat, 26 Feb 2022 14:04:18 +0100 Subject: [PATCH] native menu, fullscreen refactor --- app/src/electron.js | 58 ++++++++++--------- packages/api/src/controllers/config.js | 17 +++++- packages/web/src/App.svelte | 7 +-- packages/web/src/Screen.svelte | 5 +- packages/web/src/commands/stdCommands.ts | 9 ++- .../src/forms/SettingsCheckboxField.svelte | 23 -------- .../src/forms/SettingsCheckboxFieldRaw.svelte | 17 ------ .../web/src/forms/SettingsTextField.svelte | 15 ----- .../web/src/forms/SettingsTextFieldRaw.svelte | 18 ------ .../web/src/settings/SettingsModal.svelte | 26 +-------- packages/web/src/stores.ts | 16 +++++ packages/web/src/utility/common.ts | 21 ------- packages/web/src/utility/getElectron.ts | 5 -- .../web/src/widgets/WidgetIconPanel.svelte | 5 +- 14 files changed, 77 insertions(+), 165 deletions(-) delete mode 100644 packages/web/src/forms/SettingsCheckboxField.svelte delete mode 100644 packages/web/src/forms/SettingsCheckboxFieldRaw.svelte delete mode 100644 packages/web/src/forms/SettingsTextField.svelte delete mode 100644 packages/web/src/forms/SettingsTextFieldRaw.svelte diff --git a/app/src/electron.js b/app/src/electron.js index 7473e43e..b4d772e9 100644 --- a/app/src/electron.js +++ b/app/src/electron.js @@ -14,9 +14,7 @@ const BrowserWindow = electron.BrowserWindow; const path = require('path'); const url = require('url'); const mainMenuDefinition = require('./mainMenuDefinition'); - -let useNativeMenu = true; -let useNativeMenuSpecified = null; +const { settings } = require('cluster'); // require('@electron/remote/main').initialize(); @@ -104,9 +102,6 @@ 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': @@ -122,8 +117,11 @@ ipcMain.on('window-action', async (event, arg) => { case 'close': mainWindow.close(); break; - case 'fullscreen': - mainWindow.setFullScreen(!mainWindow.isFullScreen()); + case 'fullscreen-on': + mainWindow.setFullScreen(true); + break; + case 'fullscreen-off': + mainWindow.setFullScreen(false); break; case 'devtools': mainWindow.webContents.toggleDevTools(); @@ -157,21 +155,31 @@ ipcMain.handle('showItemInFolder', async (event, path) => { ipcMain.handle('openExternal', async (event, url) => { electron.shell.openExternal(url); }); -ipcMain.handle('useNativeMenu', async () => { - return useNativeMenu; -}); + +function fillMissingSettings(value) { + const res = { + ...value, + }; + if (value['app.useNativeMenu'] !== true && value['app.useNativeMenu'] !== false) { + res['app.useNativeMenu'] = os.platform() == 'darwin' ? true : false; + } + return res; +} function createWindow() { + let settingsJson = {}; + try { + const datadir = path.join(os.homedir(), 'dbgate-data'); + settingsJson = fillMissingSettings( + JSON.parse(fs.readFileSync(path.join(datadir, 'settings.json'), { encoding: 'utf-8' })) + ); + } catch (err) { + console.log('Error loading settings.json:', err.message); + settingsJson = fillMissingSettings({}); + } + const bounds = initialConfig['winBounds']; - useNativeMenu = os.platform() == 'darwin' ? true : false; - if (initialConfig['useNativeMenu'] === true) { - useNativeMenu = true; - useNativeMenuSpecified = true; - } - if (initialConfig['useNativeMenu'] === false) { - useNativeMenu = false; - useNativeMenuSpecified = false; - } + useNativeMenu = settingsJson['app.useNativeMenu']; mainWindow = new BrowserWindow({ width: 1200, @@ -192,17 +200,14 @@ function createWindow() { if (initialConfig['winIsMaximized']) { mainWindow.maximize(); } - if (initialConfig['winIsFullscreen']) { + if (settingsJson['app.fullscreen']) { mainWindow.setFullScreen(true); } mainMenu = buildMenu(); mainWindow.setMenu(mainMenu); - async function loadMainWindow() { - const settings = await main.configController.getSettings(); - console.log(settings); - + function loadMainWindow() { const startUrl = process.env.ELECTRON_START_URL || url.format({ @@ -217,8 +222,6 @@ function createWindow() { JSON.stringify({ winBounds: mainWindow.getBounds(), winIsMaximized: mainWindow.isMaximized(), - useNativeMenu: useNativeMenuSpecified, - winIsFullscreen: mainWindow.isFullScreen(), }), 'utf-8' ); @@ -230,6 +233,7 @@ function createWindow() { if (os.platform() == 'linux') { mainWindow.setIcon(path.resolve(__dirname, '../icon.png')); } + // mainWindow.webContents.toggleDevTools(); } const apiPackage = path.join( diff --git a/packages/api/src/controllers/config.js b/packages/api/src/controllers/config.js index 69d71cbc..01d39b13 100644 --- a/packages/api/src/controllers/config.js +++ b/packages/api/src/controllers/config.js @@ -1,4 +1,5 @@ const fs = require('fs-extra'); +const os = require('os'); const path = require('path'); const axios = require('axios'); const { datadir } = require('../utility/directories'); @@ -44,12 +45,24 @@ module.exports = { getSettings_meta: true, async getSettings() { try { - return JSON.parse(await fs.readFile(path.join(datadir(), 'settings.json'), { encoding: 'utf-8' })); + return this.fillMissingSettings( + JSON.parse(await fs.readFile(path.join(datadir(), 'settings.json'), { encoding: 'utf-8' })) + ); } catch (err) { - return {}; + return this.fillMissingSettings({}); } }, + fillMissingSettings(value) { + const res = { + ...value, + }; + if (value['app.useNativeMenu'] !== true && value['app.useNativeMenu'] !== false) { + res['app.useNativeMenu'] = os.platform() == 'darwin' ? true : false; + } + return res; + }, + updateSettings_meta: true, async updateSettings(values) { if (!hasPermission(`settings/change`)) return false; diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte index a53fd590..f8b7c3ce 100644 --- a/packages/web/src/App.svelte +++ b/packages/web/src/App.svelte @@ -15,9 +15,8 @@ import { subscribeConnectionPingers } from './utility/connectionsPinger'; import { subscribePermissionCompiler } from './utility/hasPermission'; import { apiCall } from './utility/api'; - import { getConfig, getUsedApps } from './utility/metadataLoaders'; + import { getConfig, getSettings, getUsedApps } from './utility/metadataLoaders'; import AppTitleProvider from './utility/AppTitleProvider.svelte'; - import { initTitleBarVisibility } from './utility/common'; let loadedApi = false; @@ -27,13 +26,11 @@ // return; // } - await initTitleBarVisibility(); - try { // console.log('************** LOADING API'); - const settings = await apiCall('config/get-settings'); const connections = await apiCall('connections/list'); + const settings = await getSettings(); const config = await getConfig(); const apps = await getUsedApps(); loadedApi = settings && connections && config && apps; diff --git a/packages/web/src/Screen.svelte b/packages/web/src/Screen.svelte index cd1b35b1..931da812 100644 --- a/packages/web/src/Screen.svelte +++ b/packages/web/src/Screen.svelte @@ -9,6 +9,7 @@ openedSnackbars, selectedWidget, visibleCommandPalette, + visibleTitleBar, visibleToolbar, } from './stores'; import TabsPanel from './widgets/TabsPanel.svelte'; @@ -23,8 +24,6 @@ import DragAndDropFileTarget from './DragAndDropFileTarget.svelte'; import dragDropFileTarget from './utility/dragDropFileTarget'; import TitleBar from './widgets/TitleBar.svelte'; - import { onMount } from 'svelte'; - import { getTitleBarVisibility } from './utility/common'; $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light'; @@ -42,7 +41,7 @@ use:dragDropFileTarget on:contextmenu={e => e.preventDefault()} > - {#if getTitleBarVisibility()} + {#if $visibleTitleBar}
diff --git a/packages/web/src/commands/stdCommands.ts b/packages/web/src/commands/stdCommands.ts index 0c06dc3f..20ee4082 100644 --- a/packages/web/src/commands/stdCommands.ts +++ b/packages/web/src/commands/stdCommands.ts @@ -27,6 +27,7 @@ import { showSnackbarSuccess } from '../utility/snackbar'; import { apiCall } from '../utility/api'; import runCommand from './runCommand'; import { openWebLink } from '../utility/exportElectronFile'; +import { getSettings } from '../utility/metadataLoaders'; function themeCommand(theme: ThemeDefinition) { return { @@ -596,7 +597,13 @@ registerCommand({ name: 'Toggle full screen', keyText: 'F11', testEnabled: () => getElectron() != null, - onClick: () => getElectron().send('window-action', 'fullscreen'), + onClick: async () => { + const settings = await getSettings(); + const value = !settings['app.fullscreen']; + apiCall('config/update-settings', { 'app.fullscreen': value }); + if (value) getElectron().send('window-action', 'fullscreen-on'); + else getElectron().send('window-action', 'fullscreen-off'); + }, }); registerCommand({ diff --git a/packages/web/src/forms/SettingsCheckboxField.svelte b/packages/web/src/forms/SettingsCheckboxField.svelte deleted file mode 100644 index 68e3d3bd..00000000 --- a/packages/web/src/forms/SettingsCheckboxField.svelte +++ /dev/null @@ -1,23 +0,0 @@ - - - setFieldValue(name, !$values[name]) }} -> - - diff --git a/packages/web/src/forms/SettingsCheckboxFieldRaw.svelte b/packages/web/src/forms/SettingsCheckboxFieldRaw.svelte deleted file mode 100644 index 86064b2d..00000000 --- a/packages/web/src/forms/SettingsCheckboxFieldRaw.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - - diff --git a/packages/web/src/forms/SettingsTextField.svelte b/packages/web/src/forms/SettingsTextField.svelte deleted file mode 100644 index aebcc501..00000000 --- a/packages/web/src/forms/SettingsTextField.svelte +++ /dev/null @@ -1,15 +0,0 @@ - - - - - diff --git a/packages/web/src/forms/SettingsTextFieldRaw.svelte b/packages/web/src/forms/SettingsTextFieldRaw.svelte deleted file mode 100644 index f99875e5..00000000 --- a/packages/web/src/forms/SettingsTextFieldRaw.svelte +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/packages/web/src/settings/SettingsModal.svelte b/packages/web/src/settings/SettingsModal.svelte index c409d298..a4ea0444 100644 --- a/packages/web/src/settings/SettingsModal.svelte +++ b/packages/web/src/settings/SettingsModal.svelte @@ -2,40 +2,16 @@ import _ from 'lodash'; import FormStyledButton from '../buttons/FormStyledButton.svelte'; - 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'; - import FormSubmit from '../forms/FormSubmit.svelte'; import FormTextField from '../forms/FormTextField.svelte'; import FormValues from '../forms/FormValues.svelte'; - import SettingsCheckboxField from '../forms/SettingsCheckboxField.svelte'; import SettingsFormProvider from '../forms/SettingsFormProvider.svelte'; - import SettingsTextField from '../forms/SettingsTextField.svelte'; - + import ModalBase from '../modals/ModalBase.svelte'; 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( - // 'config/update-settings', - // _.omitBy(e.detail, (v, k) => k.startsWith(':')) - // ); - // visibleToolbar.set(!!e.detail[':visibleToolbar']); - // 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(); diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts index d961dd68..6de47921 100644 --- a/packages/web/src/stores.ts +++ b/packages/web/src/stores.ts @@ -76,9 +76,25 @@ export const currentThemeDefinition = derived([currentTheme, extensions], ([$cur $extensions.themes.find(x => x.themeClassName == $currentTheme) ); +export const visibleTitleBar = derived(useSettings(), $settings => { + const electron = getElectron(); + if (!electron) return false; + // console.log('visibleTitleBar:settings', $settings); + if (!$settings) return false; + return !$settings['app.fullscreen'] && !$settings['app.useNativeMenu']; +}); + +export const visibleHamburgerMenuWidget = derived(useSettings(), $settings => { + const electron = getElectron(); + if (!electron) return true; + if (!$settings) return false; + return !!$settings['app.fullscreen']; +}); + subscribeCssVariable(selectedWidget, x => (x ? 1 : 0), '--dim-visible-left-panel'); // subscribeCssVariable(visibleToolbar, x => (x ? 1 : 0), '--dim-visible-toolbar'); subscribeCssVariable(leftPanelWidth, x => `${x}px`, '--dim-left-panel-width'); +subscribeCssVariable(visibleTitleBar, x => (x ? 1 : 0), '--dim-visible-titlebar'); let activeTabIdValue = null; activeTabId.subscribe(value => { diff --git a/packages/web/src/utility/common.ts b/packages/web/src/utility/common.ts index bf3ec7b7..bd613c9c 100644 --- a/packages/web/src/utility/common.ts +++ b/packages/web/src/utility/common.ts @@ -39,24 +39,3 @@ export async function asyncFilter(arr, predicate) { return arr.filter((_v, index) => results[index]); } - -async function computeTitleBarVisibility() { - const electron = getElectron(); - if (!electron) { - return false; - } - 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 1ad47e2c..b4f75e4c 100644 --- a/packages/web/src/utility/getElectron.ts +++ b/packages/web/src/utility/getElectron.ts @@ -26,11 +26,6 @@ class ElectronApi { await this.ipcRenderer.invoke('openExternal', url); } - async useNativeMenu() { - const res = await this.ipcRenderer.invoke('useNativeMenu'); - return res; - } - async invoke(route, args) { const res = await this.ipcRenderer.invoke(route, args); return res; diff --git a/packages/web/src/widgets/WidgetIconPanel.svelte b/packages/web/src/widgets/WidgetIconPanel.svelte index 3379688a..c36d6504 100644 --- a/packages/web/src/widgets/WidgetIconPanel.svelte +++ b/packages/web/src/widgets/WidgetIconPanel.svelte @@ -1,8 +1,7 @@
- {#if !getTitleBarVisibility()} + {#if $visibleHamburgerMenuWidget}