feat(editor): implement full-screen mode for code editor

Author: probil

src/renderer/components/editor/Editor.html

@@ -1 +1,14 @@
-<div id="editor" :style="{width: width ? px(width) : '100%'}"></div>
+<div class="editor" :class="{'editor--fullscreen': fullScreen}">
+  <div id="editor" ref="editor" :style="editorStyle"></div>
+  <a
+    href="#"
+    class="editor__fullscreen-toggle"
+    @click="toggleFullscreen"
+    v-if="!readOnly"
+    title="Toggle fullscreen mode"
+  >
+    <b-icon
+      :icon="fullScreen ? 'compress': 'expand'"
+    ></b-icon>
+  </a>
+</div>

src/renderer/components/editor/Editor.scss

@@ -0,0 +1,25 @@
+.editor {
+  position: relative;
+
+  &--fullscreen {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 10;
+  }
+
+  &__fullscreen-toggle {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    z-index: 1;
+    color: whitesmoke;
+  }
+  &__fullscreen-toggle:hover {
+    color: #bbb;
+  }
+}

src/renderer/components/editor/Editor.vue

@@ -16,20 +16,39 @@ export default {
     height: true,
     width: true,
     readOnly: Boolean,
+    autoGrow: Boolean,
   },
   data() {
     return {
       editor: null,
       contentBackup: '',
+      fullScreen: false,
     };
   },
+  computed: {
+    editorHeight() {
+      if (this.autoGrow && !this.fullScreen) return undefined;
+      if (this.height && !this.fullScreen) return this.px(this.height);
+      return '100%'
+    },
+    editorStyle() {
+      return {
+        width: this.width && !this.fullScreen ? this.px(this.width) : '100%',
+        height: this.editorHeight,
+      }
+    },
+  },
   methods: {
     px(n) {
       if (/^\d*$/.test(n)) {
         return `${n}px`;
       }
       return n;
     },
+    toggleFullscreen() {
+      this.fullScreen = !this.fullScreen;
+      this.editor.resize();
+    }
   },
   watch: {
     value(val) {
@@ -49,7 +68,7 @@ export default {
 
     require('brace/ext/emmet');
 
-    const editor = (vm.editor = ace.edit(this.$el));
+    const editor = (vm.editor = ace.edit(this.$refs.editor));
 
     this.$emit('init', editor);
 
@@ -61,12 +80,14 @@ export default {
     editor.setShowPrintMargin(false);
 
     if (!this.readOnly) {
-      editor.setOption('minLines', 15);
       editor.setValue(this.value, 1);
     } else {
       editor.setValue(this.code, 1);
     }
     editor.setReadOnly(this.readOnly);
+    if(this.autoGrow) {
+      editor.setOption('maxLines', Infinity);
+    }
 
     editor.on('change', () => {
       const content = editor.getValue();

src/renderer/components/modals/create-note-modal/CreateNoteModal.html

@@ -69,7 +69,7 @@ <h2 class="text-red" v-if="displayDupError">Oh sorry, you can't have duplicated
                   :lang="file.language"
                   theme="monokai"
                   width="100%"
-                  height="260"
+                  height="220"
           ></editor>
         </b-field>
       </div>

src/renderer/components/notes-list/note-card/NoteCard.html

@@ -46,7 +46,7 @@ <h4>{{value.name}}
                   :lang="value.language"
                   theme="monokai"
                   width="100%"
-                  height="260"
+                  :auto-grow="true"
                   :readOnly="true"
           ></editor>
         </div>