fix: editor properties UI
This commit is contained in:
NGPixel
parent
760939f808
commit
c7b675bb1c
@ -18,6 +18,7 @@ import Velocity from 'velocity-animate'
|
||||
import Hammer from 'hammerjs'
|
||||
import moment from 'moment'
|
||||
import VueMoment from 'vue-moment'
|
||||
import VueTour from 'vue-tour'
|
||||
import store from './store'
|
||||
|
||||
// ====================================
|
||||
@ -98,6 +99,7 @@ Vue.use(helpers)
|
||||
Vue.use(VeeValidate, { events: '' })
|
||||
Vue.use(Vuetify)
|
||||
Vue.use(VueMoment, { moment })
|
||||
Vue.use(VueTour)
|
||||
|
||||
Vue.prototype.Velocity = Velocity
|
||||
|
||||
|
||||
@ -4,9 +4,12 @@
|
||||
template(slot='actions')
|
||||
v-btn(outline, color='green', @click.native.stop='save')
|
||||
v-icon(color='green', left) check
|
||||
span.white--text Save
|
||||
v-btn(icon): v-icon(color='red') close
|
||||
v-btn(icon, @click.native.stop='openModal(`properties`)'): v-icon(color='white') sort_by_alpha
|
||||
span.white--text(v-if='mode === "create"') {{ $t('common:actions.create') }}
|
||||
span.white--text(v-else) {{ $t('common:actions.save') }}
|
||||
v-btn.is-icon(outline, color='red').mx-0: v-icon(color='red') close
|
||||
v-btn(outline, color='blue', @click.native.stop='openModal(`properties`)', dark)
|
||||
v-icon(left) sort_by_alpha
|
||||
span.white--text {{ $t('editor:page') }}
|
||||
v-content
|
||||
editor-code
|
||||
component(:is='currentModal')
|
||||
@ -24,6 +27,7 @@
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import { get } from 'vuex-pathify'
|
||||
import { AtomSpinner } from 'epic-spinners'
|
||||
|
||||
import savePageMutation from 'gql/editor/save.gql'
|
||||
@ -46,6 +50,16 @@ export default {
|
||||
dialogProgress: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
mode: get('editor/mode')
|
||||
},
|
||||
mounted() {
|
||||
if (this.mode === 'create') {
|
||||
_.delay(() => {
|
||||
this.openModal('properties')
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openModal(name) {
|
||||
this.currentModal = `editorModal${_.startCase(name)}`
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
v-bottom-sheet(
|
||||
v-model='isShown'
|
||||
inset
|
||||
persistent
|
||||
)
|
||||
.dialog-header
|
||||
v-icon(color='white') sort_by_alpha
|
||||
@ -19,6 +18,7 @@
|
||||
v-card-text
|
||||
v-subheader.pl-0 Page Info
|
||||
v-text-field(
|
||||
ref='iptTitle'
|
||||
outline
|
||||
background-color='grey lighten-2'
|
||||
label='Title'
|
||||
@ -43,50 +43,59 @@
|
||||
v-divider
|
||||
v-card-text
|
||||
v-subheader.pl-0 Tags
|
||||
v-select(
|
||||
v-combobox(
|
||||
background-color='grey lighten-2'
|
||||
chips
|
||||
deletable-chips
|
||||
hide-details
|
||||
label='Tags'
|
||||
outline
|
||||
tags
|
||||
multiple
|
||||
v-model='tags'
|
||||
single-line
|
||||
)
|
||||
v-divider
|
||||
v-card-text
|
||||
v-card-text.pb-5
|
||||
v-subheader.pl-0 Publishing State
|
||||
v-container.pa-0(fluid, grid-list-lg)
|
||||
v-layout(row, wrap)
|
||||
v-flex(xs4)
|
||||
v-flex(xs12, md4)
|
||||
v-switch(
|
||||
label='Published'
|
||||
v-model='isPublished'
|
||||
color='primary'
|
||||
)
|
||||
v-flex(xs4)
|
||||
v-menu(
|
||||
v-flex(xs12, md4)
|
||||
v-dialog(
|
||||
ref='menuPublishStart'
|
||||
lazy=''
|
||||
lazy
|
||||
:close-on-content-click='false'
|
||||
v-model='isPublishStartShown'
|
||||
transition='scale-transition'
|
||||
offset-y=''
|
||||
full-width=''
|
||||
:nudge-right='40'
|
||||
min-width='290px'
|
||||
:return-value.sync='publishStartDate'
|
||||
full-width
|
||||
width='460px'
|
||||
:disabled='!isPublished'
|
||||
)
|
||||
v-text-field(
|
||||
slot='activator'
|
||||
label='Publish starting on...'
|
||||
v-model='publishStartDate'
|
||||
prepend-icon='event'
|
||||
readonly)
|
||||
readonly
|
||||
outline
|
||||
background-color='grey lighten-2'
|
||||
clearable
|
||||
hint='Leave empty for no start date'
|
||||
persistent-hint
|
||||
:disabled='!isPublished'
|
||||
)
|
||||
v-date-picker(
|
||||
v-model='publishStartDate'
|
||||
:min='(new Date()).toISOString().substring(0, 10)'
|
||||
color='primary'
|
||||
reactive
|
||||
scrollable
|
||||
landscape
|
||||
)
|
||||
v-spacer
|
||||
v-btn(
|
||||
@ -97,20 +106,18 @@
|
||||
v-btn(
|
||||
flat=''
|
||||
color='primary'
|
||||
@click='$refs.menuPublishStart.save(date)'
|
||||
@click='$refs.menuPublishStart.save(publishStartDate)'
|
||||
) OK
|
||||
v-flex(xs4)
|
||||
v-menu(
|
||||
v-flex(xs12, md4)
|
||||
v-dialog(
|
||||
ref='menuPublishEnd'
|
||||
lazy=''
|
||||
lazy
|
||||
:close-on-content-click='false'
|
||||
v-model='isPublishEndShown'
|
||||
transition='scale-transition'
|
||||
offset-y=''
|
||||
full-width=''
|
||||
:nudge-right='40'
|
||||
min-width='290px'
|
||||
:return-value.sync='publishEndDate'
|
||||
full-width
|
||||
width='460px'
|
||||
:disabled='!isPublished'
|
||||
)
|
||||
v-text-field(
|
||||
slot='activator'
|
||||
@ -118,11 +125,20 @@
|
||||
v-model='publishEndDate'
|
||||
prepend-icon='event'
|
||||
readonly
|
||||
outline
|
||||
background-color='grey lighten-2'
|
||||
clearable
|
||||
hint='Leave empty for no end date'
|
||||
persistent-hint
|
||||
:disabled='!isPublished'
|
||||
)
|
||||
v-date-picker(
|
||||
v-model='publishEndDate'
|
||||
:min='(new Date()).toISOString().substring(0, 10)'
|
||||
color='primary'
|
||||
reactive
|
||||
scrollable
|
||||
landscape
|
||||
)
|
||||
v-spacer
|
||||
v-btn(
|
||||
@ -133,11 +149,14 @@
|
||||
v-btn(
|
||||
flat=''
|
||||
color='primary'
|
||||
@click='$refs.menuPublishEnd.save(date)'
|
||||
@click='$refs.menuPublishEnd.save(publishEndDate)'
|
||||
) OK
|
||||
|
||||
v-tour(name='editorPropertiesTour', :steps='tourSteps')
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import { sync } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
@ -145,7 +164,13 @@ export default {
|
||||
return {
|
||||
isShown: false,
|
||||
isPublishStartShown: false,
|
||||
isPublishEndShown: false
|
||||
isPublishEndShown: false,
|
||||
tourSteps: [
|
||||
{
|
||||
target: '.dialog-header',
|
||||
content: `First-time tour help here. <strong>TODO</strong>!`
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -159,6 +184,10 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.isShown = true
|
||||
_.delay(() => {
|
||||
this.$refs.iptTitle.focus()
|
||||
// this.$tours['editorPropertiesTour'].start()
|
||||
}, 500)
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
|
||||
@ -6,11 +6,13 @@
|
||||
// @import "../libs/animate/animate";
|
||||
|
||||
@import 'components/markdown-content';
|
||||
@import 'components/btn';
|
||||
@import 'components/data-table';
|
||||
@import 'components/dialog';
|
||||
|
||||
// @import '../libs/twemoji/twemoji-awesome';
|
||||
@import '../libs/prism/prism.css';
|
||||
@import '~vue-tour/dist/vue-tour.css';
|
||||
// @import 'node_modules/diff2html/dist/diff2html.min';
|
||||
|
||||
@import 'pages/welcome';
|
||||
|
||||
3
client/scss/components/_btn.scss
Normal file
3
client/scss/components/_btn.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.v-btn.is-icon {
|
||||
min-width: auto;
|
||||
}
|
||||
@ -6,9 +6,10 @@ const state = {
|
||||
tags: [],
|
||||
path: '',
|
||||
isPublished: true,
|
||||
publishEtartDate: '',
|
||||
publishStartDate: '',
|
||||
publishEndDate: '',
|
||||
locale: 'en'
|
||||
locale: 'en',
|
||||
mode: 'create'
|
||||
}
|
||||
|
||||
export default {
|
||||
|
||||
@ -236,6 +236,7 @@
|
||||
"vue-router": "3.0.1",
|
||||
"vue-simple-breakpoints": "1.0.3",
|
||||
"vue-template-compiler": "2.5.16",
|
||||
"vue-tour": "1.0.1",
|
||||
"vuedraggable": "2.16.0",
|
||||
"vuetify": "1.1.1",
|
||||
"vuex": "3.0.1",
|
||||
|
||||
14
yarn.lock
14
yarn.lock
@ -9266,6 +9266,10 @@ pn@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
|
||||
|
||||
popper.js@^1.12.9:
|
||||
version "1.14.3"
|
||||
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095"
|
||||
|
||||
portfinder@^1.0.13:
|
||||
version "1.0.13"
|
||||
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
|
||||
@ -12849,7 +12853,15 @@ vue-template-es2015-compiler@^1.6.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
|
||||
|
||||
vue@2.5.16:
|
||||
vue-tour@1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/vue-tour/-/vue-tour-1.0.1.tgz#70062f265db8391fc25f44da8ffcf80dd72169e6"
|
||||
dependencies:
|
||||
hash-sum "^1.0.2"
|
||||
popper.js "^1.12.9"
|
||||
vue "^2.5.13"
|
||||
|
||||
vue@2.5.16, vue@^2.5.13:
|
||||
version "2.5.16"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user