:new: add zoom factory setting

app/moe-about.js

@@ -34,8 +34,8 @@ function showAboutWindow() {
     var conf = {
         icon: Const.path + "/icons/HexoEditor.ico",
         autoHideMenuBar: true,
-        width: 660 * moeApp.config.get('scale-factor'),
-        height: 290 * moeApp.config.get('scale-factor'),
+        width: 660,
+        height: 290,
         webPreferences: {
             zoomFactor: moeApp.config.get('scale-factor')
         },

app/moe-config-default.js

@@ -22,8 +22,9 @@
 module.exports = {
     'locale': 'default',
     'debug': false,
-    'scale-factor': 1.0,
+    'scale-factor': 1.2,
     'tab-size': 4,
+    'zoom-level': 1.2,
     'edit-mode': 'preview',
     'edit-mode-read': 'read',
     'edit-mode-write': 'write',

app/moe-l10n.js

@@ -161,6 +161,7 @@ const strings = {
         "Font Size": "Font Size",
         "Line Height": "Line Height",
         "Tab Size": "Tab Size",
+        "Zoom factor": "Zoom Factor",
         "Color Theme": "Color Theme",
         "TeX Math Expressions":"TeX Math Expressions",
         "UML Diagrams": "UML Diagrams",
@@ -338,6 +339,7 @@ const strings = {
         "Font Size": "字体大小",
         "Line Height": "行高",
         "Tab Size": "Tab 大小",
+        "Zoom factor": "缩放比例",
         "Color Theme": "颜色主题",
         "TeX Math Expressions": "TeX 数学表达式",
         "UML Diagrams": "UML 图表",

app/moe-settings.js

@@ -34,8 +34,8 @@ function showSettingsWindow() {
     const conf = {
         icon: Const.path + "/icons/HexoEditor.ico",
         autoHideMenuBar: true,
-        width: 600 * moeApp.config.get('scale-factor'),
-        height: parseInt(275 * moeApp.config.get('scale-factor')),
+        width: 600,
+        height: 325,
         webPreferences: {
             zoomFactor: moeApp.config.get('scale-factor')
         },

app/moe-window.js

@@ -47,8 +47,8 @@ class MoeditorWindow {
         var conf = {
             icon: Const.path + "/icons/HexoEditor.ico",
             autoHideMenuBar: true,
-            width: 1000 * moeApp.config.get('scale-factor'),
-            height: 600 * moeApp.config.get('scale-factor'),
+            width: 1000 ,
+            height: 600 ,
             webPreferences: {
                 zoomFactor: moeApp.config.get('scale-factor')
             },

views/main/moe-settings.js

@@ -196,6 +196,14 @@ function setTabSize(val) {
     window.editor.refresh();
 }
 
+function setZoomFactor(val) {
+    var scale = parseFloat(val);
+    var webFrame = require('electron').webFrame;
+    if (scale >= 0.7 && scale <= 1.6){
+        webFrame.setZoomFactor(scale)
+    }
+}
+
 function setSourceCenter(val) {
     if(imgManager ){
         imgManager.updateBase();
@@ -287,6 +295,7 @@ tryRun(setShowLineNumber, !!moeApp.config.get('editor-ShowLineNumber'));
 tryRun(setScrollTogether, moeApp.config.get('scroll-Together'));
 tryRun(setEditorTheme, moeApp.config.get('editor-theme'));
 tryRun(setEditorFontSize, moeApp.config.get('editor-font-size'));
+tryRun(setZoomFactor, moeApp.config.get('scale-factor'));
 tryRun(setEditorLineHeight, moeApp.config.get('editor-line-height'));
 tryRun(setRenderTheme, moeApp.config.get('render-theme'));
 tryRun(setHighlightTheme, moeApp.config.get('highlight-theme'));
@@ -322,6 +331,8 @@ ipcRenderer.on('setting-changed', (e, arg) => {
         tryRun(setRenderTheme, arg.val);
     } else if (arg.key === 'tab-size') {
         tryRun(setTabSize, arg.val);
+    } else if (arg.key === 'scale-factor') {
+        tryRun(setZoomFactor, arg.val);
     } else if (arg.key === 'hexo-auto-setting') {
         tryRun(setHexoAutoSetting, arg.val);
     } else if (arg.key === 'hexo-config-enable') {

views/settings/moe-settings.css

@@ -141,4 +141,9 @@ option.invalidFile {
 span.checkbtn{
     width: 15px;
     display: inline-block;
+}
+
+input[data-key="scale-factor"]::-webkit-outer-spin-button,
+input[data-key="scale-factor"]::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
 }

views/settings/moe-settings.js

@@ -67,7 +67,13 @@ document.addEventListener('DOMContentLoaded', () => {
             else item.value = oldVal;
             item.addEventListener('change', () => {
                 let val;
-                if (item.tagName === 'INPUT' && item.type === 'checkbox') val = item.checked;
+                if (item.id === 'scaleFactor') {
+                    if (item.value === '') item.value = oldVal;
+                    else if (0.7 > item.value) item.value = 0.7;
+                    else if (1.6 < item.value) item.value = 1.6;
+                    val = item.value;
+                }
+                else if (item.tagName === 'INPUT' && item.type === 'checkbox') val = item.checked;
                 else val = item.value;
                 console.log(key + ': ' + val);
                 moeApp.config.set(key, val);

views/settings/settings.html

@@ -106,6 +106,14 @@
                                     </select>
                                 </td>
                             </tr>
+                            <tr>
+                                <td width="40%" class="l10n">Zoom factor</td>
+                                <td width="60%">
+                                    <script>
+                                        document.write(`<input class="settings-item" id="scaleFactor" type="number" data-key="scale-factor" value="${moeApp.config.get('scale-factor')}" title="0.7 ~ 1.6">`);
+                                    </script>
+                                </td>
+                            </tr>
                         </table>
                     </div>
                     <div class="panel" data-tab="edit">