feat: edit menu speed-dial UX
This commit is contained in:
Nick
parent
4f8a28f617
commit
c7d6473401
@ -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':
|
||||
|
||||
@ -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'
|
||||
)
|
||||
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')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user