feat(settings): merge zoom factor with desktop app settings

TriliumNext · Dec 9, 2024 · efae109 · efae109
1 parent f1241b2
commit efae109
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 33 deletions.
diff --git a/src/public/app/widgets/type_widgets/content_widget.js b/src/public/app/widgets/type_widgets/content_widget.js
@@ -1,6 +1,5 @@
 import TypeWidget from "./type_widget.js";
-import ZoomFactorOptions from "./options/appearance/zoom_factor.js";
-import NativeTitleBarOptions from "./options/appearance/electron_integration.js";
+import ElectronIntegrationOptions from "./options/appearance/electron_integration.js";
 import ThemeOptions from "./options/appearance/theme.js";
 import FontsOptions from "./options/appearance/fonts.js";
 import MaxContentWidthOptions from "./options/appearance/max_content_width.js";
@@ -62,8 +61,7 @@ const CONTENT_WIDGETS = {
         ThemeOptions,
         FontsOptions,
         CodeBlockOptions,
-        ZoomFactorOptions,
-        NativeTitleBarOptions,
+        ElectronIntegrationOptions,
         MaxContentWidthOptions,
         RibbonOptions
     ],

diff --git a/src/public/app/widgets/type_widgets/options/appearance/electron_integration.js b/src/public/app/widgets/type_widgets/options/appearance/electron_integration.js
@@ -6,6 +6,15 @@ const TPL = `
 <div class="options-section">    
     <h4>${t("electron_integration.desktop-application")}</h4>
 
+    <div class="form-group row">
+        <div class="col-12">
+            <label>${t("electron_integration.zoom-factor")}</label>
+            <input type="number" class="zoom-factor-select form-control options-number-input" min="0.3" max="2.0" step="0.1"/>            
+            <p>${t("zoom_factor.description")}</p>
+        </div>
+    </div>
+    <hr />
+
     <div class="side-checkbox">
         <label class="form-check">
             <input type="checkbox" class="native-title-bar form-check-input" />
@@ -29,6 +38,10 @@ const TPL = `
 export default class ElectronIntegrationOptions extends OptionsWidget {
     doRender() {
         this.$widget = $(TPL);
+
+        this.$zoomFactorSelect = this.$widget.find(".zoom-factor-select");
+        this.$zoomFactorSelect.on('change', () => { appContext.triggerCommand('setZoomFactorAndSave', {zoomFactor: this.$zoomFactorSelect.val()}); });
+
         this.$nativeTitleBar = this.$widget.find("input.native-title-bar");
         this.$nativeTitleBar.on("change", () => this.updateCheckboxOption("nativeTitleBarVisible", this.$nativeTitleBar));
 
@@ -48,6 +61,7 @@ export default class ElectronIntegrationOptions extends OptionsWidget {
     }
 
     async optionsLoaded(options) {
+        this.$zoomFactorSelect.val(options.zoomFactor);
         this.setCheckboxState(this.$nativeTitleBar, options.nativeTitleBarVisible);
         this.setCheckboxState(this.$backgroundEffects, options.backgroundEffects);
     }

diff --git a/src/public/app/widgets/type_widgets/options/appearance/zoom_factor.js b/src/public/app/widgets/type_widgets/options/appearance/zoom_factor.js
diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json
@@ -1581,6 +1581,7 @@
     "native-title-bar-description": "For Windows and macOS, keeping the native title bar off makes the application look more compact. On Linux, keeping the native title bar on integrates better with the rest of the system.",
     "background-effects": "Enable background effects (Windows 11 only)",
     "background-effects-description": "The Mica effect adds a blurred, stylish background to app windows, creating depth and a modern look.",
-    "restart-app-button": "Restart the application to view the changes"
+    "restart-app-button": "Restart the application to view the changes",
+    "zoom-factor": "Zoom factor"
   }
 }