zoom - removed from settings, added to window menu

app/src/electron.js

@@ -212,6 +212,15 @@ ipcMain.on('window-action', async (event, arg) => {
     case 'reload':
       mainWindow.webContents.reloadIgnoringCache();
       break;
+    case 'zoomin':
+      mainWindow.webContents.zoomLevel += 0.5;
+      break;
+    case 'zoomout':
+      mainWindow.webContents.zoomLevel -= 0.5;
+      break;
+    case 'zoomreset':
+      mainWindow.webContents.zoomLevel = 0;
+      break;
   }
 });
 
@@ -253,6 +262,7 @@ function createWindow() {
     titleBarStyle: useNativeMenu ? undefined : 'hidden',
     ...bounds,
     icon: os.platform() == 'win32' ? 'icon.ico' : path.resolve(__dirname, '../icon.png'),
+    partition: 'persist:dbgate',
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false,

app/src/mainMenuDefinition.js

@@ -24,6 +24,10 @@ module.exports = [
     submenu: [
       { command: 'tabs.closeTab', hideDisabled: true },
       { command: 'tabs.closeAll', hideDisabled: true },
+      { divider: true },
+      { command: 'app.zoomIn', hideDisabled: true },
+      { command: 'app.zoomOut', hideDisabled: true },
+      { command: 'app.zoomReset', hideDisabled: true },
     ],
   },
 

packages/web/src/commands/CommandListener.svelte

@@ -11,8 +11,6 @@
     if (e.altKey) keyText += 'Alt+';
     keyText += e.key;
 
-    // console.log('keyText', keyText);
-
     const commandsValue = get(commandsCustomized);
     const commandsFiltered: any = Object.values(commandsValue).filter(
       (x: any) =>

packages/web/src/commands/stdCommands.ts

@@ -387,7 +387,6 @@ registerCommand({
     const keys = [
       'leftPanelWidth',
       'visibleToolbar',
-      'zoomKoef',
       'selectedWidget',
       'currentTheme',
 
@@ -643,6 +642,33 @@ registerCommand({
   onClick: () => openWebLink('https://opencollective.com/dbgate'),
 });
 
+
+registerCommand({
+  id: 'app.zoomIn',
+  category: 'Application',
+  name: 'Zoom in',
+  keyText: 'Ctrl+=',
+  testEnabled: () => getElectron() != null,
+  onClick: () => getElectron().send('window-action', 'zoomin'),
+});
+
+registerCommand({
+  id: 'app.zoomOut',
+  category: 'Application',
+  name: 'Zoom out',
+  keyText: 'Ctrl+-',
+  testEnabled: () => getElectron() != null,
+  onClick: () => getElectron().send('window-action', 'zoomout'),
+});
+
+registerCommand({
+  id: 'app.zoomReset',
+  category: 'Application',
+  name: 'Reset zoom',
+  testEnabled: () => getElectron() != null,
+  onClick: () => getElectron().send('window-action', 'zoomreset'),
+});
+
 const electron = getElectron();
 if (electron) {
   electron.addEventListener('run-command', (e, commandId) => runCommand(commandId));

packages/web/src/settings/SettingsModal.svelte

@@ -25,7 +25,6 @@
       _.omitBy(e.detail, (v, k) => k.startsWith(':'))
     );
     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');
@@ -40,7 +39,6 @@
   initialValues={{
     ...getCurrentSettings(),
     ':visibleToolbar': getVisibleToolbar(),
-    ':zoomKoef': getZoomKoef(),
     ':useNativeMenu': !getTitleBarVisibility(),
   }}
 >
@@ -48,23 +46,10 @@
     <div slot="header">Settings</div>
 
     <FormValues let:values>
-      <div class="heading">Appearance</div>
-      <!-- <FormCheckboxField name=":visibleToolbar" label="Show toolbar" defaultValue={true} /> -->
       {#if electron}
+        <div class="heading">Appearance</div>
         <FormCheckboxField name=":useNativeMenu" label="Use system native menu" />
       {/if}
-      <FormSelectField
-        name=":zoomKoef"
-        label="Zoom"
-        defaultValue="1"
-        options={[
-          { label: '60%', value: '0.6' },
-          { label: '80%', value: '0.8' },
-          { label: '100%', value: '1' },
-          { label: '120%', value: '1.2' },
-          { label: '140%', value: '1.4' },
-        ]}
-      />
 
       <div class="heading">Data grid</div>
       <FormTextField

packages/web/src/stores.ts

@@ -58,7 +58,6 @@ export const commandsCustomized = derived([commands, commandsSettings], ([$comma
 
 // export const visibleToolbar = writableWithStorage(true, 'visibleToolbar');
 export const visibleToolbar = writable(false);
-export const zoomKoef = writableWithStorage(1, 'zoomKoef');
 export const leftPanelWidth = writableWithStorage(300, 'leftPanelWidth');
 export const currentDropDownMenu = writable(null);
 export const openedModals = writable([]);
@@ -102,13 +101,6 @@ visibleToolbar.subscribe(value => {
 });
 export const getVisibleToolbar = () => visibleToolbarValue;
 
-let zommKoefValue = null;
-zoomKoef.subscribe(value => {
-  zommKoefValue = value;
-  document.body.style.setProperty('zoom', zommKoefValue);
-});
-export const getZoomKoef = () => zommKoefValue;
-
 let openedTabsValue = null;
 openedTabs.subscribe(value => {
   openedTabsValue = value;