feat: editor - progress dialog + modal single component

client/js/components/editor-code.vue

@@ -78,10 +78,10 @@
         v-btn(color='white', fab, light, v-model='fabMainMenu' slot='activator')
           v-icon(color='blue darken-2') blur_on
           v-icon(color='blue darken-2') close
-        v-btn(color='blue-grey', fab, dark, @click.native.stop='$parent.pagePropertiesDialog = true'): v-icon sort_by_alpha
-        v-btn(color='green', fab, dark): v-icon save
+        v-btn(color='blue-grey', fab, dark, @click.native.stop='$parent.openModal(`properties`)'): v-icon sort_by_alpha
+        v-btn(color='green', fab, dark, @click.native.stop='$parent.save()'): v-icon save
         v-btn(color='red', fab, dark, small): v-icon not_interested
-        v-btn(color='orange', fab, dark, small, @click.native.stop='$parent.pageAccessDialog = true'): v-icon vpn_lock
+        v-btn(color='orange', fab, dark, small, @click.native.stop='$parent.openModal(`access`)'): v-icon vpn_lock
         v-btn(color='indigo', fab, dark, small): v-icon restore
         v-btn(color='brown', fab, dark, small): v-icon archive
 </template>
@@ -242,7 +242,7 @@ export default {
       display: flex;
 
       + .editor-code-toolbar-group {
-        border-left: 1px solid rgba(mc('blue', '900'), .75);
+        border-left: 1px solid rgba(mc('blue', '600'), .5);
       }
     }
 

client/js/components/editor-modal-access.vue

@@ -1,10 +1,10 @@
 <template lang='pug'>
-  v-bottom-sheet(v-model='isOpened', inset, persistent)
+  v-bottom-sheet(v-model='isShown', inset, persistent)
     v-toolbar(color='orange', flat)
       v-icon(color='white') vpn_lock
       v-toolbar-title.white--text Page Access
       v-spacer
-      v-btn(icon, dark, @click.native='$parent.pageAccessDialog = false')
+      v-btn(icon, dark, @click.native='close')
         v-icon close
     v-card.pa-3(tile)
       v-form
@@ -28,25 +28,29 @@
                   v-btn(flat='', color='primary', @click='$refs.menuPublishEnd.save(date)') OK
       v-card-actions
         v-btn(color='green', dark) Save
-        v-btn(@click.native='$parent.pageAccessDialog = false') Cancel
+        v-btn(@click.native='close') Cancel
 </template>
 
 <script>
 export default {
-  props: {
-    isOpened: {
-      type: Boolean,
-      default: false
-    }
-  },
   data() {
     return {
+      isShown: false,
       isPublished: true,
       isPublishStartShown: false,
       isPublishEndShown: false,
       publishStartDate: '',
       publishEndDate: ''
     }
+  },
+  mounted() {
+    this.isShown = true
+  },
+  methods: {
+    close() {
+      this.isShown = false
+      this.$parent.closeModal()
+    }
   }
 }
 </script>

client/js/components/editor-modal-properties.vue

@@ -1,10 +1,10 @@
 <template lang='pug'>
-  v-bottom-sheet(v-model='isOpened', inset, persistent)
+  v-bottom-sheet(v-model='isShown', inset, persistent)
     v-toolbar(color='blue-grey', flat)
       v-icon(color='white') sort_by_alpha
       v-toolbar-title.white--text Page Properties
       v-spacer
-      v-btn(icon, dark, @click.native='$parent.pagePropertiesDialog = false')
+      v-btn(icon, dark, @click.native='close')
         v-icon close
     v-card.pa-3(tile)
       v-card-text
@@ -15,20 +15,23 @@
           v-text-field(label='Path', prefix='/', append-icon='folder')
       v-card-actions
         v-btn(color='green', dark) Save
-        v-btn(@click.native='$parent.pagePropertiesDialog = false') Cancel
+        v-btn(@click.native='close') Cancel
 </template>
 
 <script>
 export default {
-  props: {
-    isOpened: {
-      type: Boolean,
-      default: false
-    }
-  },
   data() {
     return {
-
+      isShown: false
+    }
+  },
+  mounted() {
+    this.isShown = true
+  },
+  methods: {
+    close() {
+      this.isShown = false
+      this.$parent.closeModal()
     }
   }
 }

client/js/components/editor.vue

@@ -1,11 +1,18 @@
 <template lang="pug">
   .editor
     editor-code
-    editorModalAccess(:is-opened='pageAccessDialog')
-    editorModalProperties(:is-opened='pagePropertiesDialog')
+    component(:is='currentModal')
+    v-dialog(v-model='dialogProgress', persistent, max-width='300')
+      v-card
+        v-progress-linear.my-0(indeterminate, color='primary', height='5')
+        v-card-text.text-xs-center
+          .headline Saving
+          .caption Please wait...
 </template>
 
 <script>
+import _ from 'lodash'
+
 export default {
   components: {
     editorCode: () => import(/* webpackChunkName: "editor-code" */ './editor-code.vue'),
@@ -14,8 +21,27 @@ export default {
   },
   data() {
     return {
-      pageAccessDialog: true,
-      pagePropertiesDialog: false
+      currentModal: '',
+      dialogProgress: false
+    }
+  },
+  methods: {
+    openModal(name) {
+      this.currentModal = `editorModal${_.startCase(name)}`
+    },
+    closeModal() {
+      _.delay(() => {
+        this.currentModal = ``
+      }, 500)
+    },
+    showProgressDialog(textKey) {
+      this.dialogProgress = true
+    },
+    hideProgressDialog() {
+      this.dialogProgress = false
+    },
+    save() {
+      this.showProgressDialog('saving')
     }
   }
 }