From c7d64734012383bff11bfc651d887b3c2d1d526f Mon Sep 17 00:00:00 2001 From: Nick Date: Fri, 27 Sep 2019 00:02:26 -0400 Subject: [PATCH] feat: edit menu speed-dial UX --- client/components/common/nav-header.vue | 35 +++++--- client/themes/default/components/page.vue | 97 +++++++++++++++++++++-- 2 files changed, 116 insertions(+), 16 deletions(-) diff --git a/client/components/common/nav-header.vue b/client/components/common/nav-header.vue index 180f53e1..fdf068c7 100644 --- a/client/components/common/nav-header.vue +++ b/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': diff --git a/client/themes/default/components/page.vue b/client/themes/default/components/page.vue index d249f59a..3d0529a5 100644 --- a/client/themes/default/components/page.vue +++ b/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 }') - v-btn.btn-animate-edit( - fab + template(v-slot:activator='{ on: onEditActivator }') + v-speed-dial( + 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' ) - v-icon mdi-pencil + 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') } } }