editor font size settings

packages/web/src/query/AceEditor.svelte

@@ -37,6 +37,19 @@
     'tomorrow_night',
     'twilight',
   ];
+
+  export const FONT_SIZES = [
+    { label: '8', value: '8' },
+    { label: '9', value: '9' },
+    { label: '10', value: '10' },
+    { label: '11', value: '11' },
+    { label: '12 - Normal', value: '12' },
+    { label: '13', value: '13' },
+    { label: '14', value: '14' },
+    { label: '15', value: '15' },
+    { label: '16', value: '16' },
+    { label: '17', value: '17' },
+  ];
 </script>
 
 <script lang="ts">
@@ -101,7 +114,7 @@
   import 'ace-builds/src-noconflict/theme-tomorrow_night';
   import 'ace-builds/src-noconflict/theme-twilight';
 
-  import { currentDropDownMenu, currentEditorTheme, currentThemeDefinition } from '../stores';
+  import { currentDropDownMenu, currentEditorFontSize, currentEditorTheme, currentThemeDefinition } from '../stores';
   import _ from 'lodash';
   import { handleCommandKeyDown } from '../commands/CommandListener.svelte';
   import resizeObserver from '../utility/resizeObserver';
@@ -149,11 +162,14 @@
 
   let queryParserWorker;
 
+  let defaultFontSize;
+
   const stdOptions = {
     showPrintMargin: false,
   };
 
   $: theme = $currentEditorTheme || ($currentThemeDefinition?.themeType == 'dark' ? 'merbivore' : 'github');
+  $: watchEditorFontSize($currentEditorFontSize);
 
   export function getEditor(): ace.Editor {
     return editor;
@@ -187,6 +203,12 @@
     }
   }
 
+  function watchEditorFontSize(value) {
+    if (editor) {
+      editor.setFontSize(value ? parseInt(value) : defaultFontSize);
+    }
+  }
+
   $: watchTheme(theme);
   function watchTheme(newTheme: string) {
     if (editor) {
@@ -400,6 +422,10 @@
       contentBackup = content;
       changedQueryParts();
     });
+    defaultFontSize = editor.getFontSize();
+    if ($currentEditorFontSize) {
+      editor.setFontSize($currentEditorFontSize);
+    }
 
     editor.on('changeSelection', () => {
       changedCurrentQueryPart();

packages/web/src/settings/SettingsModal.svelte

@@ -14,9 +14,9 @@
 
   import ModalBase from '../modals/ModalBase.svelte';
   import { closeCurrentModal } from '../modals/modalTools';
-  import { EDITOR_THEMES } from '../query/AceEditor.svelte';
+  import { EDITOR_THEMES, FONT_SIZES } from '../query/AceEditor.svelte';
   import SqlEditor from '../query/SqlEditor.svelte';
-  import { currentEditorTheme, extensions } from '../stores';
+  import { currentEditorFontSize, currentEditorTheme, extensions } from '../stores';
   import getElectron from '../utility/getElectron';
   import ThemeSkeleton from './ThemeSkeleton.svelte';
 
@@ -106,15 +106,31 @@ ORDER BY
 
           <div class="heading">Editor theme</div>
 
-          <FormFieldTemplateLarge label="Theme" type='combo'>
+          <div class="flex">
-            <SelectField
+            <div class="col-6">
-              isNative
+              <FormFieldTemplateLarge label="Theme" type="combo">
-              notSelected="(use theme default)"
+                <SelectField
-              options={EDITOR_THEMES.map(theme => ({ label: theme, value: theme }))}
+                  isNative
-              value={$currentEditorTheme}
+                  notSelected="(use theme default)"
-              on:change={e => ($currentEditorTheme = e.detail)}
+                  options={EDITOR_THEMES.map(theme => ({ label: theme, value: theme }))}
-            />
+                  value={$currentEditorTheme}
-          </FormFieldTemplateLarge>
+                  on:change={e => ($currentEditorTheme = e.detail)}
+                />
+              </FormFieldTemplateLarge>
+            </div>
+
+            <div class="col-6">
+              <FormFieldTemplateLarge label="Font size " type="combo">
+                <SelectField
+                  isNative
+                  notSelected="(default)"
+                  options={FONT_SIZES}
+                  value={$currentEditorFontSize}
+                  on:change={e => ($currentEditorFontSize = e.detail)}
+                />
+              </FormFieldTemplateLarge>
+            </div>
+          </div>
 
           <div class="editor">
             <SqlEditor value={sqlPreview} readOnly />

packages/web/src/stores.ts

@@ -59,6 +59,9 @@ export const currentTheme = getElectron()
 export const currentEditorTheme = getElectron()
   ? writableSettingsValue(null, 'currentEditorTheme')
   : writableWithStorage(null, 'currentEditorTheme');
+export const currentEditorFontSize = getElectron()
+  ? writableSettingsValue(null, 'currentEditorFontSize')
+  : writableWithStorage(null, 'currentEditorFontSize');
 export const activeTabId = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected)?.tabid);
 export const activeTab = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected));
 export const recentDatabases = writableWithStorage([], 'recentDatabases');