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
+          span.white--text(v-if='mode === "create"') {{ $t('common:actions.create') }}
-        v-btn(icon): v-icon(color='red') close
+          span.white--text(v-else) {{ $t('common:actions.save') }}
-        v-btn(icon, @click.native.stop='openModal(`properties`)'): v-icon(color='white') sort_by_alpha
+        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-container.pa-0(fluid, grid-list-lg)
-          v-flex(xs4)
+          v-layout(row, wrap)
-            v-switch(
+            v-flex(xs12, md4)
-              label='Published'
+              v-switch(
-              v-model='isPublished'
+                label='Published'
-              color='primary'
+                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-flex(xs12, md4)
-                v-btn(
+              v-dialog(
-                  flat=''
+                ref='menuPublishStart'
-                  color='primary'
+                lazy
-                  @click='isPublishStartShown = false'
+                :close-on-content-click='false'
-                  ) Cancel
+                v-model='isPublishStartShown'
-                v-btn(
+                :return-value.sync='publishStartDate'
-                  flat=''
+                full-width
-                  color='primary'
+                width='460px'
-                  @click='$refs.menuPublishStart.save(date)'
+                :disabled='!isPublished'
-                  ) 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-date-picker(
+                v-text-field(
-                v-model='publishEndDate'
+                  slot='activator'
-                :min='(new Date()).toISOString().substring(0, 10)'
+                  label='Publish starting on...'
-                reactive
+                  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'
+                  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-spacer
+                v-text-field(
-                v-btn(
+                  slot='activator'
-                  flat=''
+                  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='isPublishEndShown = false'
+                  reactive
-                  ) Cancel
+                  scrollable
-                v-btn(
+                  landscape
-                  flat=''
+                  )
-                  color='primary'
+                  v-spacer
-                  @click='$refs.menuPublishEnd.save(date)'
+                  v-btn(
-                  ) OK
+                    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

@@ -0,0 +1,3 @@
+.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",

yarn.lock

@@ -9266,6 +9266,10 @@ pn@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
 
+popper.js@^1.12.9:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095"
+
 portfinder@^1.0.13:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -12849,7 +12853,15 @@ vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue@2.5.16:
+vue-tour@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vue-tour/-/vue-tour-1.0.1.tgz#70062f265db8391fc25f44da8ffcf80dd72169e6"
+  dependencies:
+    hash-sum "^1.0.2"
+    popper.js "^1.12.9"
+    vue "^2.5.13"
+
+vue@2.5.16, vue@^2.5.13:
   version "2.5.16"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"