#186 zoom

packages/web/src/settings/SettingsModal.svelte

@@ -5,13 +5,14 @@
   import FormCheckboxField from '../forms/FormCheckboxField.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 ModalBase from '../modals/ModalBase.svelte';
   import { closeCurrentModal } from '../modals/modalTools';
-  import { getCurrentSettings, getVisibleToolbar, visibleToolbar } from '../stores';
+  import { getCurrentSettings, getVisibleToolbar, getZoomKoef, visibleToolbar, zoomKoef } from '../stores';
   import axiosInstance from '../utility/axiosInstance';
 
   function handleOk(e) {
@@ -20,6 +21,7 @@
       _.omitBy(e.detail, (v, k) => k.startsWith(':'))
     );
     visibleToolbar.set(!!e.detail[':visibleToolbar']);
+    zoomKoef.set(e.detail[':zoomKoef']);
     closeCurrentModal();
   }
 </script>
@@ -28,6 +30,7 @@
   initialValues={{
     ...getCurrentSettings(),
     ':visibleToolbar': getVisibleToolbar(),
+    ':zoomKoef': getZoomKoef(),
   }}
 >
   <ModalBase {...$$restProps}>
@@ -36,6 +39,18 @@
     <FormValues let:values>
       <div class="heading">Appearance</div>
       <FormCheckboxField name=":visibleToolbar" label="Show toolbar" defaultValue={true} />
+      <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>
       <FormCheckboxField name="dataGrid.showLeftColumn" label="Show left column by default" />

packages/web/src/stores.ts

@@ -53,6 +53,7 @@ export const commandsCustomized = derived([commands, commandsSettings], ([$comma
 );
 
 export const visibleToolbar = writableWithStorage(true, 'visibleToolbar');
+export const zoomKoef = writableWithStorage(1, 'zoomKoef');
 export const leftPanelWidth = writable(300);
 export const currentDropDownMenu = writable(null);
 export const openedModals = writable([]);
@@ -97,6 +98,13 @@ 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;