feat(): Allow to change fontSize & fontFamily in editor from Settings (…

…#1787) * feat(): Allow to change fontSize & fontFamily in editor from Settings * fix(): review changes
kestra-io · Jul 21, 2023 · 226e971 · 226e971
1 parent 52eef24
commit 226e971
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 6 deletions.
diff --git a/ui/src/components/inputs/Editor.vue b/ui/src/components/inputs/Editor.vue
@@ -20,7 +20,7 @@
                             <el-button :icon="icon.Help" @click="restartGuidedTour" size="small" />
                         </el-tooltip>
                     </el-button-group>
-                    <slot name="extends-navbar"/>
+                    <slot name="extends-navbar" />
                 </div>
             </slot>
         </nav>
@@ -185,8 +185,8 @@
                 return {
                     ...{
                         tabSize: 2,
-                        fontFamily: "'Source Code Pro', monospace",
-                        fontSize: 12,
+                        fontFamily:  localStorage.getItem("editorFontFamily") ? localStorage.getItem("editorFontFamily") : "'Source Code Pro', monospace",
+                        fontSize: localStorage.getItem("editorFontSize") ? parseInt(localStorage.getItem("editorFontSize")) : 12,
                         showFoldingControls: "always",
                         scrollBeyondLastLine: false,
                         roundedSelection: false,

diff --git a/ui/src/components/inputs/MonacoEditor.vue b/ui/src/components/inputs/MonacoEditor.vue
@@ -12,7 +12,7 @@
     import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
     import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
     import YamlWorker from "./yaml.worker.js?worker";
-    import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+    import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
     import {setDiagnosticsOptions} from "monaco-yaml";
     import {yamlSchemas} from "override/utils/yamlSchemas"
     import Utils from "../../utils/utils";

diff --git a/ui/src/components/settings/Settings.vue b/ui/src/components/settings/Settings.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-form class="ks-horizontal">
+        <el-form class="ks-horizontal max-size">
             <el-form-item :label="$t('Language')">
                 <el-select :model-value="lang" @update:model-value="onLang">
                     <el-option
@@ -34,6 +34,27 @@
                 </el-select>
             </el-form-item>
 
+            <el-form-item :label="$t('Editor fontsize')">
+                <el-input-number
+                    :model-value="editorFontSize"
+                    @update:model-value="onFontSize"
+                    controls-position="right"
+                    :min="1"
+                    :max="50"
+                />
+            </el-form-item>
+
+            <el-form-item :label="$t('Editor fontfamily')">
+                <el-select :model-value="editorFontFamily" @update:model-value="onFontFamily">
+                    <el-option
+                        v-for="item in fontFamilyOptions"
+                        :key="item.value"
+                        :label="item.text"
+                        :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+
             <el-form-item label="&nbsp;">
                 <el-checkbox :label="$t('Fold auto')" :model-value="autofoldTextEditor" @update:model-value="onAutofoldTextEditor" />
             </el-form-item>
@@ -98,7 +119,9 @@
                 editorTheme: undefined,
                 autofoldTextEditor: undefined,
                 guidedTour: undefined,
-                logDisplay: undefined
+                logDisplay: undefined,
+                editorFontSize: undefined,
+                editorFontFamily: undefined
             };
         },
         created() {
@@ -112,6 +135,8 @@
             this.autofoldTextEditor = localStorage.getItem("autofoldTextEditor") === "true";
             this.guidedTour = localStorage.getItem("tourDoneOrSkip") === "true";
             this.logDisplay = localStorage.getItem("logDisplay") || logDisplayTypes.DEFAULT;
+            this.editorFontSize = localStorage.getItem("editorFontSize") || 12;
+            this.editorFontFamily = localStorage.getItem("editorFontFamily") || "'Source Code Pro', monospace";
         },
         methods: {
             onNamespaceSelect(value) {
@@ -174,6 +199,16 @@
                 localStorage.setItem("logDisplay", value);
                 this.logDisplay = value;
                 this.$toast().saved();
+            },
+            onFontSize(value) {
+                localStorage.setItem("editorFontSize", value);
+                this.editorFontSize = value;
+                this.$toast().saved();
+            },
+            onFontFamily(value) {
+                localStorage.setItem("editorFontFamily", value);
+                this.editorFontFamily = value;
+                this.$toast().saved();
             }
         },
         computed: {
@@ -215,6 +250,40 @@
                     {value: logDisplayTypes.HIDDEN, text: this.$t("collapse all")}
                 ]
             },
+            fontFamilyOptions() {
+                // Array of font family that contains arabic language and japanese, chinese, korean languages compatible font family
+                return [
+                    {
+                        value: "'Source Code Pro', monospace",
+                        text: "Source Code Pro"
+                    },
+                    {
+                        value: "'Courier New', monospace",
+                        text: "Courier"
+                    },
+                    {
+                        value: "'Times New Roman', serif",
+                        text: "Times New Roman"
+                    },
+                    {
+                        value: "'Book Antiqua', serif",
+                        text: "Book Antiqua"
+                    },
+                    {
+                        value: "'Times New Roman Arabic', serif",
+                        text: "Times New Roman Arabic"
+                    },
+                    {
+                        value: "'SimSun', sans-serif",
+                        text: "SimSun"
+                    }
+                ]
+            }
         }
     };
 </script>
+<style>
+    .el-input-number {
+        max-width: 20vw;
+    }
+</style>
diff --git a/ui/src/translations.json b/ui/src/translations.json
@@ -245,6 +245,8 @@
     "Default log level": "Default log level",
     "unsaved changed ?": "You have unsaved changes, do you want to leave this page?",
     "Editor theme": "Editor theme",
+    "Editor fontsize": "Editor font size",
+    "Editor fontfamily": "Editor font family",
     "errors": {
       "404": {
         "title": "Page not found",
@@ -708,6 +710,8 @@
     "Default log level": "Niveau de log par défaut",
     "unsaved changed ?": "Vous avez des changements non sauvegardés, voulez-vous quitter la page ?",
     "Editor theme": "Theme de l'éditeur",
+    "Editor fontsize": "Taille de police de l'éditeur",
+    "Editor fontfamily": "Police de l'éditeur",
     "errors": {
       "404": {
         "title": "Page introuvable",