liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: editor properties UI

Browse Source
This commit is contained in:
NGPixel 2018-07-15 22:40:41 -04:00
parent 760939f808
commit c7b675bb1c
8 changed files with 149 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/app.js
View File

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

20
client/components/editor.vue
View File

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

187
client/components/editor/editor-modal-properties.vue
View File

@ -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,101 +43,120 @@
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-layout(row, wrap)
v-flex(xs4)
v-switch(
label='Published'
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-container.pa-0(fluid, grid-list-lg)
v-layout(row, wrap)
v-flex(xs12, md4)
v-switch(
label='Published'
v-model='isPublished'
color='primary'
)
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-flex(xs12, md4)
v-dialog(
ref='menuPublishStart'
lazy
:close-on-content-click='false'
v-model='isPublishStartShown'
:return-value.sync='publishStartDate'
full-width
width='460px'
:disabled='!isPublished'
)
v-date-picker(
v-model='publishEndDate'
:min='(new Date()).toISOString().substring(0, 10)'
reactive
v-text-field(
slot='activator'
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'
reactive
scrollable
landscape
)
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-spacer
v-btn(
flat=''
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'
@click='isPublishEndShown = false'
) Cancel
v-btn(
flat=''
color='primary'
@click='$refs.menuPublishEnd.save(date)'
) OK
reactive
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>
<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() {

2
client/scss/app.scss
View File

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

@ -0,0 +1,3 @@
.v-btn.is-icon {
min-width: auto;
}

5
client/store/editor.js
View File

@ -6,9 +6,10 @@ const state = {
tags: [],
path: '',
isPublished: true,
publishEtartDate: '',
publishStartDate: '',
publishEndDate: '',
locale: 'en'
locale: 'en',
mode: 'create'
}
export default {

1
package.json
View File

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

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