Change font size in code editor

frg-fossee · Dec 21, 2023 · 437409a · 437409a
1 parent aa1d646
commit 437409a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/ArduinoFrontend/src/app/code-editor/code-editor.component.html b/ArduinoFrontend/src/app/code-editor/code-editor.component.html
@@ -9,6 +9,10 @@
     <div class="inline-block"
       style="display: flex; background-color:whitesmoke; justify-content: space-between;margin:auto;">
       <span style="flex:1 1 auto;"></span>
+      <button class="btn btn-light btn-sm  mb-1 mt-2 mr-1 " matTooltip="Increase font size" style="font-size: 16px; max-height:30px;background: transparent;"
+        (click)="IncreaseFont()"><i>A+</i></button>
+      <button class="btn btn-light btn-sm  mb-1 mt-2 mr-1 " matTooltip="Decrease font size" style="font-size: 16px; max-height:30px;background: transparent;"
+        (click)="DecreaseFont()"><i>A-</i></button>
       <button class="btn btn-light btn-sm  mb-1 mt-2 mr-1 " matTooltip="Download ino file" style="font-size: 16px; max-height:30px;background: transparent;"
         (click)="DownloadCode()"><i class="fa fa-download"></i></button>
       <button class="btn btn-light btn-sm mb-1 mt-2 mr-1 " matTooltip="Include Library" style="font-size:16px; max-height:30px;background: transparent;"

diff --git a/ArduinoFrontend/src/app/code-editor/code-editor.component.ts b/ArduinoFrontend/src/app/code-editor/code-editor.component.ts
@@ -26,9 +26,11 @@ export class CodeEditorComponent {
   /**
    * Monaco code editor options
    */
+   size = 15
   editorOptions = {
     theme: 'vs',
-    language: 'c'
+    language: 'c',
+    fontSize: 15
   };
   /**
    * Instance of Monaco editor
@@ -144,6 +146,20 @@ export class CodeEditorComponent {
       }
     }
   }
+  /**
+  * Increase the size of the font in the editor
+  */
+  IncreaseFont(fontSize: number){ 
+    this.size = this.size + 1;
+    this.editorOptions = {...this.editorOptions, fontSize:this.size};
+  }
+  /**
+  * Decrease the size of the font in the editor
+  */
+  DecreaseFont(fontSize: number){ 
+    this.size = this.size - 1;
+    this.editorOptions = {...this.editorOptions, fontSize:this.size};
+  }  
   /**
    * Download the code from code editor
    */