fix: editor properties UI

client/app.js

@@ -18,6 +18,7 @@ import Velocity from 'velocity-animate'
 import Hammer from 'hammerjs'
 import moment from 'moment'
 import VueMoment from 'vue-moment'
+import VueTour from 'vue-tour'
 import store from './store'
 
 // ====================================
@@ -98,6 +99,7 @@ Vue.use(helpers)
 Vue.use(VeeValidate, { events: '' })
 Vue.use(Vuetify)
 Vue.use(VueMoment, { moment })
+Vue.use(VueTour)
 
 Vue.prototype.Velocity = Velocity
 

client/components/editor.vue

@@ -4,9 +4,12 @@
       template(slot='actions')
         v-btn(outline, color='green', @click.native.stop='save')
           v-icon(color='green', left) check
-          span.white--text Save
-        v-btn(icon): v-icon(color='red') close
-        v-btn(icon, @click.native.stop='openModal(`properties`)'): v-icon(color='white') sort_by_alpha
+          span.white--text(v-if='mode === "create"') {{ $t('common:actions.create') }}
+          span.white--text(v-else) {{ $t('common:actions.save') }}
+        v-btn.is-icon(outline, color='red').mx-0: v-icon(color='red') close
+        v-btn(outline, color='blue', @click.native.stop='openModal(`properties`)', dark)
+          v-icon(left) sort_by_alpha
+          span.white--text {{ $t('editor:page') }}
     v-content
       editor-code
       component(:is='currentModal')
@@ -24,6 +27,7 @@
 
 <script>
 import _ from 'lodash'
+import { get } from 'vuex-pathify'
 import { AtomSpinner } from 'epic-spinners'
 
 import savePageMutation from 'gql/editor/save.gql'
@@ -46,6 +50,16 @@ export default {
       dialogProgress: false
     }
   },
+  computed: {
+    mode: get('editor/mode')
+  },
+  mounted() {
+    if (this.mode === 'create') {
+      _.delay(() => {
+        this.openModal('properties')
+      }, 500)
+    }
+  },
   methods: {
     openModal(name) {
       this.currentModal = `editorModal${_.startCase(name)}`

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

@@ -2,7 +2,6 @@
   v-bottom-sheet(
     v-model='isShown'
     inset
-    persistent
     )
     .dialog-header
       v-icon(color='white') sort_by_alpha
@@ -19,6 +18,7 @@
       v-card-text
         v-subheader.pl-0 Page Info
         v-text-field(
+          ref='iptTitle'
           outline
           background-color='grey lighten-2'
           label='Title'
@@ -43,101 +43,120 @@
       v-divider
       v-card-text
         v-subheader.pl-0 Tags
-        v-select(
+        v-combobox(
           background-color='grey lighten-2'
           chips
           deletable-chips
           hide-details
           label='Tags'
           outline
-          tags
+          multiple
           v-model='tags'
           single-line
           )
       v-divider
-      v-card-text
+      v-card-text.pb-5
         v-subheader.pl-0 Publishing State
-        v-layout(row, wrap)
-          v-flex(xs4)
-            v-switch(
-              label='Published'
-              v-model='isPublished'
-              color='primary'
-              )
-          v-flex(xs4)
-            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='publishStartDate'
-                :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(xs4)
-            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-container.pa-0(fluid, grid-list-lg)
+          v-layout(row, wrap)
+            v-flex(xs12, md4)
+              v-switch(
+                label='Published'
+                v-model='isPublished'
+                color='primary'
                 )
-              v-date-picker(
-                v-model='publishEndDate'
-                :min='(new Date()).toISOString().substring(0, 10)'
-                reactive
+            v-flex(xs12, md4)
+              v-dialog(
+                ref='menuPublishStart'
+                lazy
+                :close-on-content-click='false'
+                v-model='isPublishStartShown'
+                :return-value.sync='publishStartDate'
+                full-width
+                width='460px'
+                :disabled='!isPublished'
                 )
-                v-spacer
-                v-btn(
-                  flat=''
+                v-text-field(
+                  slot='activator'
+                  label='Publish starting on...'
+                  v-model='publishStartDate'
+                  prepend-icon='event'
+                  readonly
+                  outline
+                  background-color='grey lighten-2'
+                  clearable
+                  hint='Leave empty for no start date'
+                  persistent-hint
+                  :disabled='!isPublished'
+                  )
+                v-date-picker(
+                  v-model='publishStartDate'
+                  :min='(new Date()).toISOString().substring(0, 10)'
                   color='primary'
-                  @click='isPublishEndShown = false'
-                  ) Cancel
-                v-btn(
-                  flat=''
+                  reactive
+                  scrollable
+                  landscape
+                  )
+                  v-spacer
+                  v-btn(
+                    flat=''
+                    color='primary'
+                    @click='isPublishStartShown = false'
+                    ) Cancel
+                  v-btn(
+                    flat=''
+                    color='primary'
+                    @click='$refs.menuPublishStart.save(publishStartDate)'
+                    ) OK
+            v-flex(xs12, md4)
+              v-dialog(
+                ref='menuPublishEnd'
+                lazy
+                :close-on-content-click='false'
+                v-model='isPublishEndShown'
+                :return-value.sync='publishEndDate'
+                full-width
+                width='460px'
+                :disabled='!isPublished'
+                )
+                v-text-field(
+                  slot='activator'
+                  label='Publish ending on...'
+                  v-model='publishEndDate'
+                  prepend-icon='event'
+                  readonly
+                  outline
+                  background-color='grey lighten-2'
+                  clearable
+                  hint='Leave empty for no end date'
+                  persistent-hint
+                  :disabled='!isPublished'
+                  )
+                v-date-picker(
+                  v-model='publishEndDate'
+                  :min='(new Date()).toISOString().substring(0, 10)'
                   color='primary'
-                  @click='$refs.menuPublishEnd.save(date)'
-                  ) OK
+                  reactive
+                  scrollable
+                  landscape
+                  )
+                  v-spacer
+                  v-btn(
+                    flat=''
+                    color='primary'
+                    @click='isPublishEndShown = false'
+                    ) Cancel
+                  v-btn(
+                    flat=''
+                    color='primary'
+                    @click='$refs.menuPublishEnd.save(publishEndDate)'
+                    ) OK
+
+    v-tour(name='editorPropertiesTour', :steps='tourSteps')
 </template>
 
 <script>
+import _ from 'lodash'
 import { sync } from 'vuex-pathify'
 
 export default {
@@ -145,7 +164,13 @@ export default {
     return {
       isShown: false,
       isPublishStartShown: false,
-      isPublishEndShown: false
+      isPublishEndShown: false,
+      tourSteps: [
+        {
+          target: '.dialog-header',
+          content: `First-time tour help here. <strong>TODO</strong>!`
+        }
+      ]
     }
   },
   computed: {
@@ -159,6 +184,10 @@ export default {
   },
   mounted() {
     this.isShown = true
+    _.delay(() => {
+      this.$refs.iptTitle.focus()
+      // this.$tours['editorPropertiesTour'].start()
+    }, 500)
   },
   methods: {
     close() {

client/scss/app.scss

@@ -6,11 +6,13 @@
 // @import "../libs/animate/animate";
 
 @import 'components/markdown-content';
+@import 'components/btn';
 @import 'components/data-table';
 @import 'components/dialog';
 
 // @import '../libs/twemoji/twemoji-awesome';
 @import '../libs/prism/prism.css';
+@import '~vue-tour/dist/vue-tour.css';
 // @import 'node_modules/diff2html/dist/diff2html.min';
 
 @import 'pages/welcome';

client/scss/components/_btn.scss

+.v-btn.is-icon {
+  min-width: auto;
+}

client/store/editor.js

@@ -6,9 +6,10 @@ const state = {
   tags: [],
   path: '',
   isPublished: true,
-  publishEtartDate: '',
+  publishStartDate: '',
   publishEndDate: '',
-  locale: 'en'
+  locale: 'en',
+  mode: 'create'
 }
 
 export default {

package.json

@@ -236,6 +236,7 @@
     "vue-router": "3.0.1",
     "vue-simple-breakpoints": "1.0.3",
     "vue-template-compiler": "2.5.16",
+    "vue-tour": "1.0.1",
     "vuedraggable": "2.16.0",
     "vuetify": "1.1.1",
     "vuex": "3.0.1",