feat: editor-modal-access UI + editor toolbar

client/js/components/editor-code.vue

@@ -1,5 +1,8 @@
 <template lang='pug'>
   .editor-code
+    v-toolbar(color='blue', flat, dense, dark)
+      v-icon(color='blue lighten-5') border_color
+      v-toolbar-title.white--text Sample Page
     .editor-code-toolbar
       .editor-code-toolbar-group
         .editor-code-toolbar-item
@@ -62,8 +65,8 @@
         codemirror(ref='cm', v-model='code', :options='cmOptions', @ready="onCmReady")
       .editor-code-preview
         .editor-code-preview-title Preview
-      v-speed-dial(:open-on-hover='true', direction='top', transition='slide-y-reverse-transition', :fixed='true', :right='!isMobile', :left='isMobile', :bottom='true')
-        v-btn(color='blue', fab, dark, slot='activator')
+      v-speed-dial(v-model='fabInsertMenu', :open-on-hover='true', direction='top', transition='slide-y-reverse-transition', :fixed='true', :right='!isMobile', :left='isMobile', :bottom='true')
+        v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator')
           v-icon add_circle
           v-icon close
         v-btn(color='teal', fab, dark): v-icon image
@@ -71,17 +74,16 @@
         v-btn(color='red', fab, dark): v-icon play_circle_outline
         v-btn(color='purple', fab, dark): v-icon multiline_chart
         v-btn(color='indigo', fab, dark): v-icon functions
-      v-speed-dial(:open-on-hover='true', :direction='saveMenuDirection', transition='slide-x-reverse-transition', :fixed='true', :right='true', :top='!isMobile', :bottom='isMobile')
-        v-btn(color='blue', fab, dark, slot='activator')
-          v-icon more_horiz
-          v-icon close
-        v-btn(color='blue-grey', fab, dark, @click='documentPropsDialog = !documentPropsDialog'): v-icon sort_by_alpha
+      v-speed-dial(v-model='fabMainMenu', :open-on-hover='true', :direction='saveMenuDirection', transition='slide-x-reverse-transition', :fixed='true', :right='true', :top='!isMobile', :bottom='isMobile')
+        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='red', fab, dark, small): v-icon not_interested
-        v-btn(color='orange', fab, dark, small): v-icon vpn_lock
+        v-btn(color='orange', fab, dark, small, @click.native.stop='$parent.pageAccessDialog = true'): v-icon vpn_lock
         v-btn(color='indigo', fab, dark, small): v-icon restore
         v-btn(color='brown', fab, dark, small): v-icon archive
-    editorModalDocument(:is-opened='documentPropsDialog')
 </template>
 
 <script>
@@ -106,11 +108,12 @@ import 'codemirror/addon/search/match-highlighter.js'
 
 export default {
   components: {
-    codemirror,
-    editorModalDocument: () => import(/* webpackChunkName: "editor" */ './editor-modal-document.vue')
+    codemirror
   },
   data() {
     return {
+      fabMainMenu: false,
+      fabInsertMenu: false,
       code: '# Header 1\n\nSample **Text**\n\n## Header 2\nSample Text',
       cmOptions: {
         tabSize: 2,
@@ -132,8 +135,7 @@ export default {
             if (cm.getOption('fullScreen')) cm.setOption('fullScreen', false)
           }
         }
-      },
-      documentPropsDialog: false
+      }
     }
   },
   computed: {

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

@@ -0,0 +1,56 @@
+<template lang='pug'>
+  v-bottom-sheet(v-model='isOpened', 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-icon close
+    v-card.pa-3(tile)
+      v-form
+        v-container(fluid)
+          v-layout(row, wrap)
+            v-flex(xs12)
+              v-switch(label='Published', v-model='isPublished', color='primary')
+            v-flex(xs6)
+              v-menu(ref='menuPublishStart', lazy='', :close-on-content-click='false', v-model='isPublishStartShown', transition='scale-transition', offset-y='', full-width='', :nudge-right='40', min-width='290px', :return-value.sync='publishStartDate')
+                v-text-field(slot='activator', label='Publish starting on...', v-model='publishStartDate', prepend-icon='event', readonly)
+                v-date-picker(v-model='date', :min='(new Date()).toISOString().substring(0, 10)', reactive)
+                  v-spacer
+                  v-btn(flat='', color='primary', @click='isPublishStartShown = false') Cancel
+                  v-btn(flat='', color='primary', @click='$refs.menuPublishStart.save(date)') OK
+            v-flex(xs6)
+              v-menu(ref='menuPublishEnd', lazy='', :close-on-content-click='false', v-model='isPublishEndShown', transition='scale-transition', offset-y='', full-width='', :nudge-right='40', min-width='290px', :return-value.sync='publishEndDate')
+                v-text-field(slot='activator', label='Publish ending on...', v-model='publishEndDate', prepend-icon='event', readonly)
+                v-date-picker(v-model='date', :min='(new Date()).toISOString().substring(0, 10)', reactive)
+                  v-spacer
+                  v-btn(flat='', color='primary', @click='isPublishEndShown = false') Cancel
+                  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
+</template>
+
+<script>
+export default {
+  props: {
+    isOpened: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isPublished: true,
+      isPublishStartShown: false,
+      isPublishEndShown: false,
+      publishStartDate: '',
+      publishEndDate: ''
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+
+</style>

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

@@ -1,10 +1,10 @@
 <template lang='pug'>
-  v-bottom-sheet(v-model='isOpened', inset)
+  v-bottom-sheet(v-model='isOpened', inset, persistent)
     v-toolbar(color='blue-grey', flat)
       v-icon(color='white') sort_by_alpha
-      v-toolbar-title.white--text Document Properties
+      v-toolbar-title.white--text Page Properties
       v-spacer
-      v-btn(icon, dark)
+      v-btn(icon, dark, @click.native='$parent.pagePropertiesDialog = false')
         v-icon close
     v-card.pa-3(tile)
       v-card-text
@@ -15,7 +15,7 @@
           v-text-field(label='Path', prefix='/', append-icon='folder')
       v-card-actions
         v-btn(color='green', dark) Save
-        v-btn Cancel
+        v-btn(@click.native='$parent.pagePropertiesDialog = false') Cancel
 </template>
 
 <script>

client/js/components/editor.vue

@@ -1,11 +1,22 @@
 <template lang="pug">
-  editor-code
+  .editor
+    editor-code
+    editorModalAccess(:is-opened='pageAccessDialog')
+    editorModalProperties(:is-opened='pagePropertiesDialog')
 </template>
 
 <script>
 export default {
   components: {
-    editorCode: () => import(/* webpackChunkName: "editor" */ './editor-code.vue')
+    editorCode: () => import(/* webpackChunkName: "editor-code" */ './editor-code.vue'),
+    editorModalAccess: () => import(/* webpackChunkName: "editor-common" */ './editor-modal-access.vue'),
+    editorModalProperties: () => import(/* webpackChunkName: "editor-common" */ './editor-modal-properties.vue')
+  },
+  data() {
+    return {
+      pageAccessDialog: true,
+      pagePropertiesDialog: false
+    }
   }
 }
 </script>