fix: editor flow
This commit is contained in:
Nicolas Giard
parent
461f4a7e02
commit
366a835278
@ -10,15 +10,16 @@
|
||||
)
|
||||
v-icon(color='green', :left='$vuetify.breakpoint.lgAndUp') check
|
||||
span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ mode === 'create' ? $t('common:actions.create') : $t('common:actions.save') }}
|
||||
v-btn.mx-0(
|
||||
v-btn(
|
||||
outline
|
||||
color='blue'
|
||||
@click.native.stop='openModal(`properties`)'
|
||||
:class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
|
||||
@click.native.stop='openPropsModal'
|
||||
:class='{ "is-icon": $vuetify.breakpoint.mdAndDown, "mx-0": mode === `create`, "ml-0": mode !== `create` }'
|
||||
)
|
||||
v-icon(color='blue', :left='$vuetify.breakpoint.lgAndUp') sort_by_alpha
|
||||
span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('editor:page') }}
|
||||
v-btn(
|
||||
v-if='mode === `create`'
|
||||
outline
|
||||
color='red'
|
||||
:class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
|
||||
@ -28,7 +29,7 @@
|
||||
span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.discard') }}
|
||||
v-content
|
||||
component(:is='currentEditor')
|
||||
component(:is='currentModal')
|
||||
editor-modal-properties(v-model='dialogProps')
|
||||
v-dialog(v-model='dialogProgress', persistent, max-width='350')
|
||||
v-card(color='blue darken-3', dark)
|
||||
v-card-text.text-xs-center.py-4
|
||||
@ -54,6 +55,7 @@
|
||||
v-card-text.text-xs-center(@click='selectEditor("code")')
|
||||
v-icon(large, color='primary') code
|
||||
.body-2.mt-2 Code
|
||||
.caption.grey--text Raw HTML
|
||||
v-flex(xs4)
|
||||
v-card.radius-7(
|
||||
hover
|
||||
@ -63,6 +65,7 @@
|
||||
v-card-text.text-xs-center(@click='selectEditor("markdown")')
|
||||
v-icon(large, color='primary') list_alt
|
||||
.body-2.mt-2 Markdown
|
||||
.caption.grey--text Default
|
||||
v-flex(xs4)
|
||||
v-card.radius-7.grey(
|
||||
hover
|
||||
@ -72,7 +75,8 @@
|
||||
v-card-text.text-xs-center(@click='selectEditor("wysiwyg")')
|
||||
v-icon(large, color='grey darken-1') web
|
||||
.body-2.mt-2.grey--text.text--darken-2 Visual Builder
|
||||
.caption.blue--text.text--lighten-2 This cannot be changed later.
|
||||
.caption.grey--text.text--darken-1 Drag-n-drop
|
||||
.caption.blue--text.text--lighten-2 This cannot be changed once the page is created.
|
||||
|
||||
v-snackbar(
|
||||
:color='notification.style'
|
||||
@ -131,7 +135,7 @@ export default {
|
||||
},
|
||||
isPublished: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: true
|
||||
},
|
||||
initEditor: {
|
||||
type: String,
|
||||
@ -152,8 +156,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentModal: '',
|
||||
currentEditor: '',
|
||||
dialogProps: false,
|
||||
dialogProgress: false,
|
||||
dialogEditorSelector: false
|
||||
}
|
||||
@ -192,17 +196,12 @@ export default {
|
||||
this.dialogEditorSelector = false
|
||||
if (this.mode === 'create') {
|
||||
_.delay(() => {
|
||||
this.openModal('properties')
|
||||
this.dialogProps = true
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
openModal(name) {
|
||||
this.currentModal = `editorModal${_.startCase(name)}`
|
||||
},
|
||||
closeModal() {
|
||||
_.delay(() => {
|
||||
this.currentModal = ``
|
||||
}, 500)
|
||||
openPropsModal(name) {
|
||||
this.dialogProps = true
|
||||
},
|
||||
showProgressDialog(textKey) {
|
||||
this.dialogProgress = true
|
||||
@ -298,7 +297,7 @@ export default {
|
||||
<style lang='scss'>
|
||||
|
||||
.editor {
|
||||
background-color: mc('grey', '900');
|
||||
background-color: mc('grey', '900') !important;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template lang='pug'>
|
||||
v-bottom-sheet(
|
||||
v-dialog(
|
||||
v-model='isShown'
|
||||
inset
|
||||
persistent
|
||||
lazy
|
||||
width='1100'
|
||||
)
|
||||
.dialog-header
|
||||
v-icon(color='white') sort_by_alpha
|
||||
@ -14,17 +16,6 @@
|
||||
)
|
||||
v-icon(left) check
|
||||
span {{ $t('common:actions.ok') }}
|
||||
v-menu
|
||||
v-btn.is-icon(
|
||||
slot='activator'
|
||||
outline
|
||||
dark
|
||||
)
|
||||
v-icon more_horiz
|
||||
v-list
|
||||
v-list-tile
|
||||
v-list-tile-avatar: v-icon delete
|
||||
v-list-tile-title Delete Page
|
||||
v-card.wiki-form(tile)
|
||||
v-card-text
|
||||
v-subheader.pl-0 Page Info
|
||||
@ -42,6 +33,8 @@
|
||||
label='Short Description'
|
||||
counter='255'
|
||||
v-model='description'
|
||||
persistent-hint
|
||||
hint='Shown below the title'
|
||||
)
|
||||
v-divider
|
||||
v-card-text.grey(:class='darkMode ? `darken-3-d3` : `lighten-5`')
|
||||
@ -93,7 +86,7 @@
|
||||
label='Published'
|
||||
v-model='isPublished'
|
||||
color='primary'
|
||||
hint='Unpublished pages can still be seen by users having write permissions.'
|
||||
hint='Unpublished pages can still be seen by users having write permissions on this page.'
|
||||
persistent-hint
|
||||
)
|
||||
v-flex(xs12, md4)
|
||||
@ -191,9 +184,14 @@ import _ from 'lodash'
|
||||
import { sync, get } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShown: false,
|
||||
isPublishStartShown: false,
|
||||
isPublishEndShown: false,
|
||||
namespaces: ['en'],
|
||||
@ -206,6 +204,10 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isShown: {
|
||||
get() { return this.value },
|
||||
set(val) { this.$emit('input', val) }
|
||||
},
|
||||
darkMode: get('site/dark'),
|
||||
mode: get('editor/mode'),
|
||||
title: sync('page/title'),
|
||||
@ -217,17 +219,19 @@ export default {
|
||||
publishStartDate: sync('page/publishStartDate'),
|
||||
publishEndDate: sync('page/publishEndDate')
|
||||
},
|
||||
mounted() {
|
||||
this.isShown = true
|
||||
_.delay(() => {
|
||||
this.$refs.iptTitle.focus()
|
||||
// this.$tours['editorPropertiesTour'].start()
|
||||
}, 500)
|
||||
watch: {
|
||||
value(newValue, oldValue) {
|
||||
if(newValue) {
|
||||
_.delay(() => {
|
||||
this.$refs.iptTitle.focus()
|
||||
// this.$tours['editorPropertiesTour'].start()
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.isShown = false
|
||||
this.$parent.$parent.closeModal()
|
||||
},
|
||||
showPathSelector() {
|
||||
this.$store.commit('showNotification', {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.newpage {
|
||||
background: linear-gradient(to bottom, mc('blue', '900') 0%, mc('blue', '800') 100%);
|
||||
background: linear-gradient(to bottom, mc('blue', '900') 0%, mc('blue', '500') 100%);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.onboarding {
|
||||
background: linear-gradient(to bottom, mc('grey', '900') 0%, mc('grey', '800') 100%);
|
||||
background: linear-gradient(to bottom, mc('grey', '900') 0%, mc('grey', '700') 100%);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -98,7 +98,7 @@ router.get('/*', async (req, res, next) => {
|
||||
} else if (pageArgs.path === 'home') {
|
||||
res.render('welcome')
|
||||
} else {
|
||||
res.render('new', { pagePath: req.path })
|
||||
res.status(404).render('new', { pagePath: req.path })
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user