Add a fullscreen option to the campaign richtext editor

frontend/src/assets/style.scss

@@ -166,7 +166,7 @@ section {
   }
 }
 
-/* HTML code editor */
+/* WYSIWYG / HTML code editor */
 .html-editor {
   position: relative;
   width: 100%;
@@ -175,6 +175,23 @@ section {
   border: 1px solid $grey-lighter;
   border-radius: 2px;
 }
+.quill-editor {
+  background: #fff;
+  &.fullscreen {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    bottom: 10px;
+    left: 10px;
+    z-index: 100;
+  }
+  .ql-fullscreen:after {
+    content: "⤢";
+    font-weight: 600;
+    font-size: 1.2rem;
+    line-height: 0.95rem;
+  }
+}
 
 /* Table colors and padding */
 .main table {

frontend/src/components/Editor.vue

@@ -22,6 +22,7 @@
 
     <!-- wsywig //-->
     <quill-editor
+      :class="{'fullscreen': isEditorFullscreen}"
       v-if="form.format === 'richtext'"
       v-model="form.body"
       ref="quill"
@@ -84,6 +85,7 @@ export default {
     return {
       isPreviewing: false,
       isMediaVisible: false,
+      isEditorFullscreen: false,
       form: {
         body: '',
         format: this.contentType,
@@ -104,6 +106,16 @@ export default {
       options: {
         placeholder: 'Content here',
         modules: {
+          keyboard: {
+            bindings: {
+              esc: {
+                key: 27,
+                handler: () => {
+                  this.toggleFullscreen(true);
+                },
+              },
+            },
+          },
           toolbar: {
             container: [
               [{ header: [1, 2, 3, false] }],
@@ -122,11 +134,12 @@ export default {
                 { align: 'justify' },
               ],
               ['link', 'image'],
-              ['clean', 'font'],
+              ['clean', 'fullscreen'],
             ],
 
             handlers: {
               image: this.toggleMedia,
+              fullscreen: () => this.toggleFullscreen(false),
             },
           },
         },
@@ -198,6 +211,15 @@ export default {
       this.isMediaVisible = !this.isMediaVisible;
     },
 
+    toggleFullscreen(onlyMinimize) {
+      if (onlyMinimize) {
+        if (!this.isEditorFullscreen) {
+          return;
+        }
+      }
+      this.isEditorFullscreen = !this.isEditorFullscreen;
+    },
+
     onMediaSelect(m) {
       this.$refs.quill.quill.insertEmbed(this.lastSel.index || 0, 'image', m.url);
     },

frontend/src/views/Campaigns.vue

@@ -15,10 +15,8 @@
     <form @submit.prevent="getCampaigns">
       <b-field grouped>
           <b-input v-model="queryParams.query"
-            placeholder="Name or subject" icon="magnify" ref="query"
+            placeholder="Name or subject" icon="magnify" ref="query"></b-input>
-            :disabled="isSearchAdvanced"></b-input>
+          <b-button native-type="submit" type="is-primary" icon-left="magnify"></b-button>
-          <b-button native-type="submit" type="is-primary" icon-left="magnify"
-            :disabled="isSearchAdvanced"></b-button>
       </b-field>
     </form>