feat: edit menu speed-dial UX

client/components/common/nav-header.vue

@@ -246,7 +246,7 @@ export default {
     pictureUrl: get('user/pictureUrl'),
     isAuthenticated: get('user/authenticated'),
     permissions: get('user/permissions'),
-    picture() {
+    picture () {
       if (this.pictureUrl && this.pictureUrl.length > 1) {
         return {
           kind: 'image',
@@ -264,27 +264,44 @@ export default {
         }
       }
     },
-    isAdmin() {
+    isAdmin () {
       return _.intersection(this.permissions, ['manage:system', 'write:users', 'manage:users', 'write:groups', 'manage:groups', 'manage:navigation', 'manage:theme', 'manage:api']).length > 0
     }
   },
-  created() {
+  created () {
     if (this.hideSearch || this.dense || this.$vuetify.breakpoint.smAndDown) {
       this.searchIsShown = false
     }
   },
+  mounted () {
+    this.$root.$on('pageEdit', () => {
+      this.pageEdit()
+    })
+    this.$root.$on('pageHistory', () => {
+      this.pageHistory()
+    })
+    this.$root.$on('pageSource', () => {
+      this.pageSource()
+    })
+    this.$root.$on('pageMove', () => {
+      this.pageMove()
+    })
+    this.$root.$on('pageDelete', () => {
+      this.pageDelete()
+    })
+  },
   methods: {
-    searchFocus() {
+    searchFocus () {
       this.searchIsFocused = true
     },
-    searchBlur() {
+    searchBlur () {
       this.searchIsFocused = false
     },
-    searchClose() {
+    searchClose () {
       this.search = ''
       this.searchBlur()
     },
-    searchToggle() {
+    searchToggle () {
       this.searchIsShown = !this.searchIsShown
       if (this.searchIsShown) {
         _.delay(() => {
@@ -292,7 +309,7 @@ export default {
         }, 200)
       }
     },
-    searchEnter() {
+    searchEnter () {
       this.$root.$emit('searchEnter', true)
     },
     searchMove(dir) {
@@ -339,7 +356,7 @@ export default {
         icon: 'ferry'
       })
     },
-    async changeLocale(locale) {
+    async changeLocale (locale) {
       await this.$i18n.i18next.changeLanguage(locale.code)
       switch (this.mode) {
         case 'view':

client/themes/default/components/page.vue

@@ -134,19 +134,86 @@
 
           v-flex.page-col-content(xs12, lg9, xl10)
             v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='isAuthenticated')
-              template(v-slot:activator='{ on }')
+              template(v-slot:activator='{ on: onEditActivator }')
-                v-btn.btn-animate-edit(
+                v-speed-dial(
-                  fab
+                  v-model='pageEditFab'
+                  direction='top'
+                  open-on-hover
+                  transition='scale-transition'
                   bottom
                   :right='!$vuetify.rtl'
                   :left='$vuetify.rtl'
-                  color='primary'
                   fixed
                   dark
-                  :href='"/e/" + locale + "/" + path'
+                  )
-                  v-on='on'
+                  template(v-slot:activator)
+                    v-btn.btn-animate-edit(
+                      fab
+                      color='primary'
+                      v-model='pageEditFab'
+                      @click='pageEdit'
+                      v-on='onEditActivator'
                       )
                       v-icon mdi-pencil
+                  v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl')
+                    template(v-slot:activator='{ on }')
+                      v-btn(
+                        fab
+                        small
+                        color='white'
+                        light
+                        v-on='on'
+                        @click='pageHistory'
+                        )
+                        v-icon(size='20') mdi-history
+                    span History
+                  v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl')
+                    template(v-slot:activator='{ on }')
+                      v-btn(
+                        fab
+                        small
+                        color='white'
+                        light
+                        v-on='on'
+                        @click='pageSource'
+                        )
+                        v-icon(size='20') mdi-code-tags
+                    span View Source
+                  v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl')
+                    template(v-slot:activator='{ on }')
+                      v-btn(
+                        fab
+                        small
+                        color='white'
+                        light
+                        v-on='on'
+                        @click='pageMove'
+                        )
+                        v-icon(size='20') mdi-content-save-move-outline
+                    span Move / Rename
+                  v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl')
+                    template(v-slot:activator='{ on }')
+                      v-btn(
+                        fab
+                        dark
+                        small
+                        color='red'
+                        v-on='on'
+                        @click='pageDelete'
+                        )
+                        v-icon(size='20') mdi-trash-can-outline
+                    span Delete
+                  v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl')
+                    template(v-slot:activator='{ on }')
+                      v-btn.mb-4(
+                        fab
+                        color='teal'
+                        dark
+                        v-on='on'
+                        @click='pageHistory'
+                        )
+                        v-icon mdi-plus
+                    span New Page
               span {{$t('common:page.editPage')}}
             .contents(ref='container')
               slot(name='contents')
@@ -251,6 +318,7 @@ export default {
       navShown: false,
       navExpanded: false,
       upBtnShown: false,
+      pageEditFab: false,
       scrollOpts: {
         duration: 1500,
         offset: 0,
@@ -343,6 +411,21 @@ export default {
     },
     print () {
       window.print()
+    },
+    pageEdit () {
+      this.$root.$emit('pageEdit')
+    },
+    pageHistory () {
+      this.$root.$emit('pageHistory')
+    },
+    pageSource () {
+      this.$root.$emit('pageSource')
+    },
+    pageMove () {
+      this.$root.$emit('pageMove')
+    },
+    pageDelete () {
+      this.$root.$emit('pageDelete')
     }
   }
 }