add font customization

xenkuo · Apr 26, 2020 · ce46023 · ce46023
1 parent 022fc60
commit ce46023
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 21 deletions.
diff --git a/src/editor.js b/src/editor.js
@@ -393,7 +393,8 @@ amdRequire(["vs/editor/editor.main"], function () {
     automaticLayout: true,
     readOnly: true,
     folding: false,
-    fontFamily: "Consolas, 'SF Mono', Menlo, 'Lucida Console', 'Courier New', monospace",
+    fontFamily: config.general.fontFamily,
+    fontSize: config.general.fontSize,
     overviewRulerBorder: false,
     scrollBeyondLastLine: false,
     smoothScrolling: true,
@@ -478,6 +479,24 @@ document.getElementById("clear-btn").onclick = () => {
   editor.getModel().setValue(value);
 };
 
+document.getElementById("editor-font-family").onblur = (e) => {
+  let font = e.target.value.trim();
+
+  if (font === "")
+    font =
+      "Consolas, 'SF Mono', Menlo, 'Lucida Console', 'Courier New', monospace";
+  editor.updateOptions({ fontFamily: font });
+  configUpdate("general.fontFamily", font);
+};
+
+document.getElementById("editor-font-size").onblur = (e) => {
+  let size = e.target.value.trim();
+  if (size === "") size = 12;
+
+  editor.updateOptions({ fontSize: size });
+  configUpdate("general.fontSize", size);
+};
+
 document.getElementById("breakpoint-switch").onclick = (e) => {
   if (e.target.checked === true) {
     if (config.advance.breakpoint.onText.length === 0) {

diff --git a/src/index.html b/src/index.html
@@ -63,12 +63,12 @@
           </ul>
         </div>
         <div id="general-tab" class="col s12">
-          <div class="col s7">
+          <div class="col s6">
             <div class="row config-row">
-              <div class="col s4 config-key">
+              <div class="col s5 config-key">
                 <p>Hex Mode</p>
               </div>
-              <div class="col s8 config-item">
+              <div class="col s7 config-item">
                 <div class="switch">
                   <label>
                     Off
@@ -81,10 +81,10 @@
             </div>
 
             <div class="row config-row">
-              <div class="col s4 config-key">
+              <div class="col s5 config-key">
                 <p>Timestamp</p>
               </div>
-              <div class="col s8 config-item">
+              <div class="col s7 config-item">
                 <div class="switch">
                   <label>
                     Off
@@ -97,10 +97,10 @@
             </div>
 
             <div class="row config-row">
-              <div class="col s4 config-key">
+              <div class="col s5 config-key">
                 <p>Modem Signal</p>
               </div>
-              <div class="col s8 config-item">
+              <div class="col s7 config-item">
                 <div class="switch">
                   <label>
                     Off
@@ -113,7 +113,7 @@
             </div>
 
             <div class="row config-row">
-              <div class="col s6 config-key">
+              <div class="col s7 config-key">
                 <p>Customized Baud Rate</p>
               </div>
               <div class="input-field col s3 config-item">
@@ -162,7 +162,23 @@
               </select>
             </div>
           </div>
-          <div class="col s3 no-head"></div>
+          <div class="col s1 no-head"></div>
+          <div class="col s3 no-head">
+            <div class="input-field col s12 config-item">
+              <input
+                id="editor-font-family"
+                placeholder="Font Family"
+                type="text"
+              />
+            </div>
+            <div class="input-field col s12 config-item">
+              <input
+                id="editor-font-size"
+                placeholder="Font Size"
+                type="text"
+              />
+            </div>
+          </div>
         </div>
         <div id="transmit-tab" class="col s12">
           <div class="col s7">

diff --git a/src/index.js b/src/index.js
@@ -52,6 +52,11 @@ const store = new Store({
     },
     "1.0.4": (store) => {
       store.set("general.modemSignal", false);
+      store.set(
+        "general.fontFamily",
+        "Consolas, 'SF Mono', Menlo, 'Lucida Console', 'Courier New', monospace"
+      );
+      store.set("general.fontSize", 12);
     },
   },
 });
@@ -94,17 +99,6 @@ ipcRenderer.on("main-cmd", (event, arg) => {
       console.log("Unknown cmds");
       break;
   }
-  // if (arg === "Clear") {
-  //   let text = editor.getModel().getValue();
-  //   clipboard.writeText(text);
-  //   editor.getModel().setValue("");
-  // } else if (arg === "Switch") {
-  //   document.getElementById("port-switch").click();
-  // } else if (arg === "Open") {
-  //   console.log("open");
-  // } else if (arg === "Save") {
-  //   console.log("Save");
-  // }
 });
 
 window.onload = () => {
@@ -170,6 +164,10 @@ window.onload = () => {
   flowcontrol.selectedIndex = config.general.flowcontrolIndex;
   M.FormSelect.init(flowcontrol);
 
+  document.getElementById("editor-font-family").value =
+    config.general.fontFamily;
+  document.getElementById("editor-font-size").value = config.general.fontSize;
+
   document.getElementById("breakpoint-switch").checked =
     config.advance.breakpoint.switch;
   document.getElementById("breakpoint-on-text").value =