liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: edit menu speed-dial UX

Browse Source
This commit is contained in:
Nick 2019-09-27 00:02:26 -04:00
parent 4f8a28f617
commit c7d6473401
2 changed files with 116 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
client/components/common/nav-header.vue
View File

@ -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':

97
client/themes/default/components/page.vue
View File

@ -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')
}
}
}