Skip to content

W
wiki-js
Commit c7b675bb authored by NGPixel's avatar NGPixel
Browse files
Options

fix: editor properties UI

parent 760939f8
Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 84 deletions
client/app.js
View file @ c7b675bb
...@@ -18,6 +18,7 @@ import Velocity from 'velocity-animate' ...@@ -18,6 +18,7 @@ import Velocity from 'velocity-animate'
import Hammer from 'hammerjs' import Hammer from 'hammerjs'
import moment from 'moment' import moment from 'moment'
import VueMoment from 'vue-moment' import VueMoment from 'vue-moment'
import VueTour from 'vue-tour'
import store from './store' import store from './store'
// ==================================== // ====================================
...@@ -98,6 +99,7 @@ Vue.use(helpers) ...@@ -98,6 +99,7 @@ Vue.use(helpers)
Vue.use(VeeValidate, { events: '' }) Vue.use(VeeValidate, { events: '' })
Vue.use(Vuetify) Vue.use(Vuetify)
Vue.use(VueMoment, { moment }) Vue.use(VueMoment, { moment })
Vue.use(VueTour)
Vue.prototype.Velocity = Velocity Vue.prototype.Velocity = Velocity
......
client/components/editor.vue
View file @ c7b675bb
...@@ -4,9 +4,12 @@ ...@@ -4,9 +4,12 @@
template(slot='actions') template(slot='actions')
v-btn(outline, color='green', @click.native.stop='save') v-btn(outline, color='green', @click.native.stop='save')
v-icon(color='green', left) check v-icon(color='green', left) check
span.white--text Save span.white--text(v-if='mode === "create"') {{ $t('common:actions.create') }}
v-btn(icon): v-icon(color='red') close span.white--text(v-else) {{ $t('common:actions.save') }}
v-btn(icon, @click.native.stop='openModal(`properties`)'): v-icon(color='white') sort_by_alpha 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 v-content
editor-code editor-code
component(:is='currentModal') component(:is='currentModal')
...@@ -24,6 +27,7 @@ ...@@ -24,6 +27,7 @@
<script> <script>
import _ from 'lodash' import _ from 'lodash'
import { get } from 'vuex-pathify'
import { AtomSpinner } from 'epic-spinners' import { AtomSpinner } from 'epic-spinners'
import savePageMutation from 'gql/editor/save.gql' import savePageMutation from 'gql/editor/save.gql'
...@@ -46,6 +50,16 @@ export default { ...@@ -46,6 +50,16 @@ export default {
dialogProgress: false dialogProgress: false
} }
}, },
computed: {
mode: get('editor/mode')
},
mounted() {
if (this.mode === 'create') {
_.delay(() => {
this.openModal('properties')
}, 500)
}
},
methods: { methods: {
openModal(name) { openModal(name) {
this.currentModal = `editorModal${_.startCase(name)}` this.currentModal = `editorModal${_.startCase(name)}`
......
client/components/editor/editor-modal-properties.vue
View file @ c7b675bb
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
v-bottom-sheet( v-bottom-sheet(
v-model='isShown' v-model='isShown'
inset inset
persistent
) )
.dialog-header .dialog-header
v-icon(color='white') sort_by_alpha v-icon(color='white') sort_by_alpha
...@@ -19,6 +18,7 @@ ...@@ -19,6 +18,7 @@
v-card-text v-card-text
v-subheader.pl-0 Page Info v-subheader.pl-0 Page Info
v-text-field( v-text-field(
ref='iptTitle'
outline outline
background-color='grey lighten-2' background-color='grey lighten-2'
label='Title' label='Title'
...@@ -43,101 +43,120 @@ ...@@ -43,101 +43,120 @@
v-divider v-divider
v-card-text v-card-text
v-subheader.pl-0 Tags v-subheader.pl-0 Tags
v-select( v-combobox(
background-color='grey lighten-2' background-color='grey lighten-2'
chips chips
deletable-chips deletable-chips
hide-details hide-details
label='Tags' label='Tags'
outline outline
tags multiple
v-model='tags' v-model='tags'
single-line single-line
) )
v-divider v-divider
v-card-text v-card-text.pb-5
v-subheader.pl-0 Publishing State v-subheader.pl-0 Publishing State
v-layout(row, wrap) v-container.pa-0(fluid, grid-list-lg)
v-flex(xs4) v-layout(row, wrap)
v-switch( v-flex(xs12, md4)
label='Published' v-switch(
v-model='isPublished' label='Published'
color='primary' v-model='isPublished'
) color='primary'
v-flex(xs4)
v-menu(
ref='menuPublishStart'
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'
)
v-text-field(
slot='activator'
label='Publish starting on...'
v-model='publishStartDate'
prepend-icon='event'
readonly)
v-date-picker(
v-model='publishStartDate'
:min='(new Date()).toISOString().substring(0, 10)'
reactive
)
v-spacer
v-btn(
flat=''
color='primary'
@click='isPublishStartShown = false'
) Cancel
v-btn(
flat=''
color='primary'
@click='$refs.menuPublishStart.save(date)'
) OK
v-flex(xs4)
v-menu(
ref='menuPublishEnd'
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'
)
v-text-field(
slot='activator'
label='Publish ending on...'
v-model='publishEndDate'
prepend-icon='event'
readonly
) )
v-date-picker( v-flex(xs12, md4)
v-model='publishEndDate' v-dialog(
:min='(new Date()).toISOString().substring(0, 10)' ref='menuPublishStart'
reactive lazy
:close-on-content-click='false'
v-model='isPublishStartShown'
:return-value.sync='publishStartDate'
full-width
width='460px'
:disabled='!isPublished'
) )
v-spacer v-text-field(
v-btn( slot='activator'
flat='' label='Publish starting on...'
v-model='publishStartDate'
prepend-icon='event'
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' color='primary'
@click='isPublishEndShown = false' reactive
) Cancel scrollable
v-btn( landscape
flat='' )
v-spacer
v-btn(
flat=''
color='primary'
@click='isPublishStartShown = false'
) Cancel
v-btn(
flat=''
color='primary'
@click='$refs.menuPublishStart.save(publishStartDate)'
) OK
v-flex(xs12, md4)
v-dialog(
ref='menuPublishEnd'
lazy
:close-on-content-click='false'
v-model='isPublishEndShown'
:return-value.sync='publishEndDate'
full-width
width='460px'
:disabled='!isPublished'
)
v-text-field(
slot='activator'
label='Publish ending on...'
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' color='primary'
@click='$refs.menuPublishEnd.save(date)' reactive
) OK scrollable
landscape
)
v-spacer
v-btn(
flat=''
color='primary'
@click='isPublishEndShown = false'
) Cancel
v-btn(
flat=''
color='primary'
@click='$refs.menuPublishEnd.save(publishEndDate)'
) OK
v-tour(name='editorPropertiesTour', :steps='tourSteps')
</template> </template>
<script> <script>
import _ from 'lodash'
import { sync } from 'vuex-pathify' import { sync } from 'vuex-pathify'
export default { export default {
...@@ -145,7 +164,13 @@ export default { ...@@ -145,7 +164,13 @@ export default {
return { return {
isShown: false, isShown: false,
isPublishStartShown: false, isPublishStartShown: false,
isPublishEndShown: false isPublishEndShown: false,
tourSteps: [
{
target: '.dialog-header',
content: `First-time tour help here. <strong>TODO</strong>!`
}
]
} }
}, },
computed: { computed: {
...@@ -159,6 +184,10 @@ export default { ...@@ -159,6 +184,10 @@ export default {
}, },
mounted() { mounted() {
this.isShown = true this.isShown = true
_.delay(() => {
this.$refs.iptTitle.focus()
// this.$tours['editorPropertiesTour'].start()
}, 500)
}, },
methods: { methods: {
close() { close() {
......
client/scss/app.scss
View file @ c7b675bb
...@@ -6,11 +6,13 @@ ...@@ -6,11 +6,13 @@
// @import "../libs/animate/animate"; // @import "../libs/animate/animate";
@import 'components/markdown-content'; @import 'components/markdown-content';
@import 'components/btn';
@import 'components/data-table'; @import 'components/data-table';
@import 'components/dialog'; @import 'components/dialog';
// @import '../libs/twemoji/twemoji-awesome'; // @import '../libs/twemoji/twemoji-awesome';
@import '../libs/prism/prism.css'; @import '../libs/prism/prism.css';
@import '~vue-tour/dist/vue-tour.css';
// @import 'node_modules/diff2html/dist/diff2html.min'; // @import 'node_modules/diff2html/dist/diff2html.min';
@import 'pages/welcome'; @import 'pages/welcome';
......
client/scss/components/_btn.scss 0 → 100644
View file @ c7b675bb
.v-btn.is-icon {
min-width: auto;
}
client/store/editor.js
View file @ c7b675bb
...@@ -6,9 +6,10 @@ const state = { ...@@ -6,9 +6,10 @@ const state = {
tags: [], tags: [],
path: '', path: '',
isPublished: true, isPublished: true,
publishEtartDate: '', publishStartDate: '',
publishEndDate: '', publishEndDate: '',
locale: 'en' locale: 'en',
mode: 'create'
} }
export default { export default {
......
package.json
View file @ c7b675bb
...@@ -236,6 +236,7 @@ ...@@ -236,6 +236,7 @@
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vue-simple-breakpoints": "1.0.3", "vue-simple-breakpoints": "1.0.3",
"vue-template-compiler": "2.5.16", "vue-template-compiler": "2.5.16",
"vue-tour": "1.0.1",
"vuedraggable": "2.16.0", "vuedraggable": "2.16.0",
"vuetify": "1.1.1", "vuetify": "1.1.1",
"vuex": "3.0.1", "vuex": "3.0.1",
......
yarn.lock
View file @ c7b675bb
This diff was suppressed by a .gitattributes entry.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment