feat: editor - progress dialog + modal single component

This commit is contained in:
NGPixel 2018-02-19 15:41:36 -05:00
parent 218fe02e45
commit ce7063ea91
4 changed files with 60 additions and 27 deletions

View File

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

View File

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

View File

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

View File

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