feat: editor - progress dialog + modal single component
This commit is contained in:
parent
218fe02e45
commit
ce7063ea91
@ -78,10 +78,10 @@
|
||||
v-btn(color='white', fab, light, v-model='fabMainMenu' slot='activator')
|
||||
v-icon(color='blue darken-2') blur_on
|
||||
v-icon(color='blue darken-2') close
|
||||
v-btn(color='blue-grey', fab, dark, @click.native.stop='$parent.pagePropertiesDialog = true'): v-icon sort_by_alpha
|
||||
v-btn(color='green', fab, dark): v-icon save
|
||||
v-btn(color='blue-grey', fab, dark, @click.native.stop='$parent.openModal(`properties`)'): v-icon sort_by_alpha
|
||||
v-btn(color='green', fab, dark, @click.native.stop='$parent.save()'): v-icon save
|
||||
v-btn(color='red', fab, dark, small): v-icon not_interested
|
||||
v-btn(color='orange', fab, dark, small, @click.native.stop='$parent.pageAccessDialog = true'): v-icon vpn_lock
|
||||
v-btn(color='orange', fab, dark, small, @click.native.stop='$parent.openModal(`access`)'): v-icon vpn_lock
|
||||
v-btn(color='indigo', fab, dark, small): v-icon restore
|
||||
v-btn(color='brown', fab, dark, small): v-icon archive
|
||||
</template>
|
||||
@ -242,7 +242,7 @@ export default {
|
||||
display: flex;
|
||||
|
||||
+ .editor-code-toolbar-group {
|
||||
border-left: 1px solid rgba(mc('blue', '900'), .75);
|
||||
border-left: 1px solid rgba(mc('blue', '600'), .5);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,10 +1,10 @@
|
||||
<template lang='pug'>
|
||||
v-bottom-sheet(v-model='isOpened', inset, persistent)
|
||||
v-bottom-sheet(v-model='isShown', inset, persistent)
|
||||
v-toolbar(color='orange', flat)
|
||||
v-icon(color='white') vpn_lock
|
||||
v-toolbar-title.white--text Page Access
|
||||
v-spacer
|
||||
v-btn(icon, dark, @click.native='$parent.pageAccessDialog = false')
|
||||
v-btn(icon, dark, @click.native='close')
|
||||
v-icon close
|
||||
v-card.pa-3(tile)
|
||||
v-form
|
||||
@ -28,25 +28,29 @@
|
||||
v-btn(flat='', color='primary', @click='$refs.menuPublishEnd.save(date)') OK
|
||||
v-card-actions
|
||||
v-btn(color='green', dark) Save
|
||||
v-btn(@click.native='$parent.pageAccessDialog = false') Cancel
|
||||
v-btn(@click.native='close') Cancel
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
isOpened: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShown: false,
|
||||
isPublished: true,
|
||||
isPublishStartShown: false,
|
||||
isPublishEndShown: false,
|
||||
publishStartDate: '',
|
||||
publishEndDate: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isShown = true
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.isShown = false
|
||||
this.$parent.closeModal()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -1,10 +1,10 @@
|
||||
<template lang='pug'>
|
||||
v-bottom-sheet(v-model='isOpened', inset, persistent)
|
||||
v-bottom-sheet(v-model='isShown', inset, persistent)
|
||||
v-toolbar(color='blue-grey', flat)
|
||||
v-icon(color='white') sort_by_alpha
|
||||
v-toolbar-title.white--text Page Properties
|
||||
v-spacer
|
||||
v-btn(icon, dark, @click.native='$parent.pagePropertiesDialog = false')
|
||||
v-btn(icon, dark, @click.native='close')
|
||||
v-icon close
|
||||
v-card.pa-3(tile)
|
||||
v-card-text
|
||||
@ -15,20 +15,23 @@
|
||||
v-text-field(label='Path', prefix='/', append-icon='folder')
|
||||
v-card-actions
|
||||
v-btn(color='green', dark) Save
|
||||
v-btn(@click.native='$parent.pagePropertiesDialog = false') Cancel
|
||||
v-btn(@click.native='close') Cancel
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
isOpened: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
isShown: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isShown = true
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.isShown = false
|
||||
this.$parent.closeModal()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,11 +1,18 @@
|
||||
<template lang="pug">
|
||||
.editor
|
||||
editor-code
|
||||
editorModalAccess(:is-opened='pageAccessDialog')
|
||||
editorModalProperties(:is-opened='pagePropertiesDialog')
|
||||
component(:is='currentModal')
|
||||
v-dialog(v-model='dialogProgress', persistent, max-width='300')
|
||||
v-card
|
||||
v-progress-linear.my-0(indeterminate, color='primary', height='5')
|
||||
v-card-text.text-xs-center
|
||||
.headline Saving
|
||||
.caption Please wait...
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
editorCode: () => import(/* webpackChunkName: "editor-code" */ './editor-code.vue'),
|
||||
@ -14,8 +21,27 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageAccessDialog: true,
|
||||
pagePropertiesDialog: false
|
||||
currentModal: '',
|
||||
dialogProgress: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openModal(name) {
|
||||
this.currentModal = `editorModal${_.startCase(name)}`
|
||||
},
|
||||
closeModal() {
|
||||
_.delay(() => {
|
||||
this.currentModal = ``
|
||||
}, 500)
|
||||
},
|
||||
showProgressDialog(textKey) {
|
||||
this.dialogProgress = true
|
||||
},
|
||||
hideProgressDialog() {
|
||||
this.dialogProgress = false
|
||||
},
|
||||
save() {
|
||||
this.showProgressDialog('saving')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user