fix: editor flow

client/components/editor.vue

@@ -10,15 +10,16 @@
           )
           v-icon(color='green', :left='$vuetify.breakpoint.lgAndUp') check
           span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ mode === 'create' ? $t('common:actions.create') : $t('common:actions.save') }}
-        v-btn.mx-0(
+        v-btn(
           outline
           color='blue'
-          @click.native.stop='openModal(`properties`)'
-          :class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
+          @click.native.stop='openPropsModal'
+          :class='{ "is-icon": $vuetify.breakpoint.mdAndDown, "mx-0": mode === `create`, "ml-0": mode !== `create` }'
           )
           v-icon(color='blue', :left='$vuetify.breakpoint.lgAndUp') sort_by_alpha
           span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('editor:page') }}
         v-btn(
+          v-if='mode === `create`'
           outline
           color='red'
           :class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
@@ -28,7 +29,7 @@
           span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.discard') }}
     v-content
       component(:is='currentEditor')
-      component(:is='currentModal')
+      editor-modal-properties(v-model='dialogProps')
       v-dialog(v-model='dialogProgress', persistent, max-width='350')
         v-card(color='blue darken-3', dark)
           v-card-text.text-xs-center.py-4
@@ -54,6 +55,7 @@
                     v-card-text.text-xs-center(@click='selectEditor("code")')
                       v-icon(large, color='primary') code
                       .body-2.mt-2 Code
+                      .caption.grey--text Raw HTML
                 v-flex(xs4)
                   v-card.radius-7(
                     hover
@@ -63,6 +65,7 @@
                     v-card-text.text-xs-center(@click='selectEditor("markdown")')
                       v-icon(large, color='primary') list_alt
                       .body-2.mt-2 Markdown
+                      .caption.grey--text Default
                 v-flex(xs4)
                   v-card.radius-7.grey(
                     hover
@@ -72,7 +75,8 @@
                     v-card-text.text-xs-center(@click='selectEditor("wysiwyg")')
                       v-icon(large, color='grey darken-1') web
                       .body-2.mt-2.grey--text.text--darken-2 Visual Builder
-            .caption.blue--text.text--lighten-2 This cannot be changed later.
+                      .caption.grey--text.text--darken-1 Drag-n-drop
+            .caption.blue--text.text--lighten-2 This cannot be changed once the page is created.
 
     v-snackbar(
       :color='notification.style'
@@ -131,7 +135,7 @@ export default {
     },
     isPublished: {
       type: Boolean,
-      default: false
+      default: true
     },
     initEditor: {
       type: String,
@@ -152,8 +156,8 @@ export default {
   },
   data() {
     return {
-      currentModal: '',
       currentEditor: '',
+      dialogProps: false,
       dialogProgress: false,
       dialogEditorSelector: false
     }
@@ -192,17 +196,12 @@ export default {
       this.dialogEditorSelector = false
       if (this.mode === 'create') {
         _.delay(() => {
-          this.openModal('properties')
+          this.dialogProps = true
         }, 500)
       }
     },
-    openModal(name) {
-      this.currentModal = `editorModal${_.startCase(name)}`
-    },
-    closeModal() {
-      _.delay(() => {
-        this.currentModal = ``
-      }, 500)
+    openPropsModal(name) {
+      this.dialogProps = true
     },
     showProgressDialog(textKey) {
       this.dialogProgress = true
@@ -298,7 +297,7 @@ export default {
 <style lang='scss'>
 
   .editor {
-    background-color: mc('grey', '900');
+    background-color: mc('grey', '900') !important;
     min-height: 100vh;
   }
 

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

@@ -1,7 +1,9 @@
 <template lang='pug'>
-  v-bottom-sheet(
+  v-dialog(
     v-model='isShown'
-    inset
+    persistent
+    lazy
+    width='1100'
     )
     .dialog-header
       v-icon(color='white') sort_by_alpha
@@ -14,17 +16,6 @@
         )
         v-icon(left) check
         span {{ $t('common:actions.ok') }}
-      v-menu
-        v-btn.is-icon(
-          slot='activator'
-          outline
-          dark
-          )
-          v-icon more_horiz
-        v-list
-          v-list-tile
-            v-list-tile-avatar: v-icon delete
-            v-list-tile-title Delete Page
     v-card.wiki-form(tile)
       v-card-text
         v-subheader.pl-0 Page Info
@@ -42,6 +33,8 @@
           label='Short Description'
           counter='255'
           v-model='description'
+          persistent-hint
+          hint='Shown below the title'
           )
       v-divider
       v-card-text.grey(:class='darkMode ? `darken-3-d3` : `lighten-5`')
@@ -93,7 +86,7 @@
                 label='Published'
                 v-model='isPublished'
                 color='primary'
-                hint='Unpublished pages can still be seen by users having write permissions.'
+                hint='Unpublished pages can still be seen by users having write permissions on this page.'
                 persistent-hint
                 )
             v-flex(xs12, md4)
@@ -191,9 +184,14 @@ import _ from 'lodash'
 import { sync, get } from 'vuex-pathify'
 
 export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
-      isShown: false,
       isPublishStartShown: false,
       isPublishEndShown: false,
       namespaces: ['en'],
@@ -206,6 +204,10 @@ export default {
     }
   },
   computed: {
+    isShown: {
+      get() { return this.value },
+      set(val) { this.$emit('input', val) }
+    },
     darkMode: get('site/dark'),
     mode: get('editor/mode'),
     title: sync('page/title'),
@@ -217,17 +219,19 @@ export default {
     publishStartDate: sync('page/publishStartDate'),
     publishEndDate: sync('page/publishEndDate')
   },
-  mounted() {
-    this.isShown = true
-    _.delay(() => {
-      this.$refs.iptTitle.focus()
-      // this.$tours['editorPropertiesTour'].start()
-    }, 500)
+  watch: {
+    value(newValue, oldValue) {
+      if(newValue) {
+        _.delay(() => {
+          this.$refs.iptTitle.focus()
+          // this.$tours['editorPropertiesTour'].start()
+        }, 500)
+      }
+    }
   },
   methods: {
     close() {
       this.isShown = false
-      this.$parent.$parent.closeModal()
     },
     showPathSelector() {
       this.$store.commit('showNotification', {

client/scss/pages/_new.scss

@@ -1,5 +1,5 @@
 .newpage {
-  background: linear-gradient(to bottom, mc('blue', '900') 0%, mc('blue', '800') 100%);
+  background: linear-gradient(to bottom, mc('blue', '900') 0%, mc('blue', '500') 100%);
   height: 100%;
   display: flex;
   flex-direction: column;

client/scss/pages/_welcome.scss

@@ -1,5 +1,5 @@
 .onboarding {
-  background: linear-gradient(to bottom, mc('grey', '900') 0%, mc('grey', '800') 100%);
+  background: linear-gradient(to bottom, mc('grey', '900') 0%, mc('grey', '700') 100%);
   height: 100%;
   display: flex;
   flex-direction: column;

server/controllers/common.js

@@ -98,7 +98,7 @@ router.get('/*', async (req, res, next) => {
   } else if (pageArgs.path === 'home') {
     res.render('welcome')
   } else {
-    res.render('new', { pagePath: req.path })
+    res.status(404).render('new', { pagePath: req.path })
   }
 })