fixes for zoom factor setting

src/public/javascripts/dialogs/options.js

@@ -4,6 +4,7 @@ import protectedSessionHolder from '../services/protected_session_holder.js';
 import server from '../services/server.js';
 import infoService from "../services/info.js";
 import zoomService from "../services/zoom.js";
+import utils from "../services/utils.js";
 
 const $dialog = $("#options-dialog");
 const $tabs = $("#options-tabs");
@@ -50,8 +51,14 @@ addTabHandler((function() {
     const $html = $("html");
 
     function optionsLoaded(options) {
-        $zoomFactorSelect.val(options.zoomFactor);
         $themeSelect.val(options.theme);
+
+        if (utils.isElectron()) {
+            $zoomFactorSelect.val(options.zoomFactor);
+        }
+        else {
+            $zoomFactorSelect.prop('disabled', true);
+        }
     }
 
     $themeSelect.change(function() {

src/public/javascripts/services/zoom.js

@@ -2,26 +2,15 @@ import server from "./server.js";
 import utils from "./utils.js";
 import optionsInitService from "./options_init.js";
 
-function decreaseZoomFactor() {
+const MIN_ZOOM = 0.5;
-    const webFrame = require('electron').webFrame;
+const MAX_ZOOM = 2.0;
 
-    if (webFrame.getZoomFactor() > 0.2) {
+async function decreaseZoomFactor() {
-        const webFrame = require('electron').webFrame;
+    await setZoomFactorAndSave(getCurrentZoom() - 0.1);
-        const newZoomFactor = webFrame.getZoomFactor() - 0.1;
-
-        webFrame.setZoomFactor(newZoomFactor);
-
-        server.put('options/zoomFactor/' + newZoomFactor);
-    }
 }
 
-function increaseZoomFactor() {
+async function increaseZoomFactor() {
-    const webFrame = require('electron').webFrame;
+    await setZoomFactorAndSave(getCurrentZoom() + 0.1);
-    const newZoomFactor = webFrame.getZoomFactor() + 0.1;
-
-    webFrame.setZoomFactor(newZoomFactor);
-
-    server.put('options/zoomFactor/' + newZoomFactor);
 }
 
 function setZoomFactor(zoomFactor) {
@@ -32,9 +21,22 @@ function setZoomFactor(zoomFactor) {
 }
 
 async function setZoomFactorAndSave(zoomFactor) {
-    setZoomFactor(zoomFactor);
+    if (!utils.isElectron()) {
+        return;
+    }
 
-    await server.put('options/zoomFactor/' + zoomFactor);
+    if (zoomFactor >= MIN_ZOOM && zoomFactor <= MAX_ZOOM) {
+        setZoomFactor(zoomFactor);
+
+        await server.put('options/zoomFactor/' + zoomFactor);
+    }
+    else {
+        console.log(`Zoom factor ${zoomFactor} outside of the range, ignored.`);
+    }
+}
+
+function getCurrentZoom() {
+    return require('electron').webFrame.getZoomFactor();
 }
 
 if (utils.isElectron()) {

src/public/stylesheets/style.css

@@ -371,7 +371,7 @@ div.ui-tooltip {
     display: flex;
 }
 
-.btn:not(.btn-primary) {
+.btn:not(.btn-primary):not(.btn-danger) {
     border-color: #bbb;
     background-color: #eee;
 }

src/views/index.ejs

@@ -342,6 +342,8 @@
           <li><a href="#about">About Trilium</a></li>
         </ul>
         <div id="appearance">
+          <p>Settings on this options tab are saved automatically after each change.</p>
+
           <form>
             <div class="form-group">
               <label for="theme-select">Theme</label>
@@ -353,28 +355,12 @@
             </div>
 
             <div class="form-group">
-              <label for="zoom-factor-select">Zoom factor (CTRL-+ and CTRL-= work anywhere as well)</label>
+              <label for="zoom-factor-select">Zoom factor (desktop build only)</label>
-              <select class="form-control" id="zoom-factor-select">
+
-                <option value="0.5">0.5</option>
+              <input type="number" class="form-control" id="zoom-factor-select" min="0.3" max="2.0" step="0.1"/>
-                <option value="0.6">0.6</option>
-                <option value="0.7">0.7</option>
-                <option value="0.8">0.8</option>
-                <option value="0.9">0.9</option>
-                <option value="1.0">1.0</option>
-                <option value="1.1">1.1</option>
-                <option value="1.2">1.2</option>
-                <option value="1.3">1.3</option>
-                <option value="1.4">1.4</option>
-                <option value="1.5">1.5</option>
-                <option value="1.6">1.6</option>
-                <option value="1.7">1.7</option>
-                <option value="1.8">1.8</option>
-                <option value="1.9">1.9</option>
-                <option value="2.0">2.0</option>
-              </select>
             </div>
 
-            <p>Settings on this options tab are saved automatically after each change.</p>
+            <p>Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.</p>
           </form>
         </div>
         <div id="change-password">