From 4703d78b39225e73b631a42f673cadca3bcba72a Mon Sep 17 00:00:00 2001
From: Kailash Nadh <kailash@nadh.in>
Date: Sat, 1 Aug 2020 20:19:03 +0530
Subject: [PATCH] Add a fullscreen option to the campaign richtext editor

---
 frontend/src/assets/style.scss     | 19 ++++++++++++++++++-
 frontend/src/components/Editor.vue | 24 +++++++++++++++++++++++-
 frontend/src/views/Campaigns.vue   |  6 ++----
 3 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss
index 7a77333..695ef1a 100644
--- a/frontend/src/assets/style.scss
+++ b/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 {
diff --git a/frontend/src/components/Editor.vue b/frontend/src/components/Editor.vue
index 3b7d961..fe46614 100644
--- a/frontend/src/components/Editor.vue
+++ b/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);
     },
diff --git a/frontend/src/views/Campaigns.vue b/frontend/src/views/Campaigns.vue
index 8b99a7b..fe7d22b 100644
--- a/frontend/src/views/Campaigns.vue
+++ b/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"
-            :disabled="isSearchAdvanced"></b-input>
-          <b-button native-type="submit" type="is-primary" icon-left="magnify"
-            :disabled="isSearchAdvanced"></b-button>
+            placeholder="Name or subject" icon="magnify" ref="query"></b-input>
+          <b-button native-type="submit" type="is-primary" icon-left="magnify"></b-button>
       </b-field>
     </form>