Skip to content

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

feat: editor page properties

parent fd8bf4db
Show whitespace changes
Inline Side-by-side
Showing with 218 additions and 96 deletions
client/components/admin/admin-theme.vue
View file @ 760939f8
...@@ -49,6 +49,7 @@ ...@@ -49,6 +49,7 @@
<script> <script>
import _ from 'lodash' import _ from 'lodash'
import { sync } from 'vuex-pathify'
import themeSaveMutation from 'gql/admin/theme/theme-mutation-save.gql' import themeSaveMutation from 'gql/admin/theme/theme-mutation-save.gql'
...@@ -60,21 +61,17 @@ export default { ...@@ -60,21 +61,17 @@ export default {
{ text: 'Default', author: 'requarks.io', value: 'default' } { text: 'Default', author: 'requarks.io', value: 'default' }
], ],
selectedTheme: 'default', selectedTheme: 'default',
darkMode: false,
darkModeInitial: false darkModeInitial: false
} }
}, },
watch: { computed: {
darkMode(newValue, oldValue) { darkMode: sync('admin/theme@dark')
this.$store.commit('admin/setThemeDarkMode', newValue)
}
}, },
mounted() { mounted() {
this.darkMode = this.$store.state.admin.theme.dark
this.darkModeInitial = this.darkMode this.darkModeInitial = this.darkMode
}, },
beforeDestroy() { beforeDestroy() {
this.$store.commit('admin/setThemeDarkMode', this.darkModeInitial) this.darkMode = this.darkModeInitial
}, },
methods: { methods: {
async save () { async save () {
......
client/components/editor.vue
View file @ 760939f8
...@@ -7,25 +7,37 @@ ...@@ -7,25 +7,37 @@
span.white--text Save span.white--text Save
v-btn(icon): v-icon(color='red') close v-btn(icon): v-icon(color='red') close
v-btn(icon, @click.native.stop='openModal(`properties`)'): v-icon(color='white') sort_by_alpha v-btn(icon, @click.native.stop='openModal(`properties`)'): v-icon(color='white') sort_by_alpha
v-btn(icon, @click.native.stop='openModal(`access`)'): v-icon(color='white') vpn_lock
v-content v-content
editor-code editor-code
component(:is='currentModal') component(:is='currentModal')
v-dialog(v-model='dialogProgress', persistent, max-width='350') v-dialog(v-model='dialogProgress', persistent, max-width='350')
v-card(color='blue darken-3', dark) v-card(color='blue darken-3', dark)
v-card-text.text-xs-center.py-4 v-card-text.text-xs-center.py-4
v-progress-circular(indeterminate, color='white', :width='1') atom-spinner.is-inline(
:animation-duration='1000'
:size='60'
color='#FFF'
)
.subheading Processing .subheading Processing
.caption.blue--text.text--lighten-3 Please wait... .caption.blue--text.text--lighten-3 Please wait...
</template> </template>
<script> <script>
import _ from 'lodash' import _ from 'lodash'
import { AtomSpinner } from 'epic-spinners'
import savePageMutation from 'gql/editor/save.gql'
import editorStore from '@/store/editor'
/* global WIKI */
WIKI.$store.registerModule('editor', editorStore)
export default { export default {
components: { components: {
AtomSpinner,
editorCode: () => import(/* webpackChunkName: "editor-code" */ './editor/editor-code.vue'), editorCode: () => import(/* webpackChunkName: "editor-code" */ './editor/editor-code.vue'),
editorModalAccess: () => import(/* webpackChunkName: "editor" */ './editor/editor-modal-access.vue'),
editorModalProperties: () => import(/* webpackChunkName: "editor" */ './editor/editor-modal-properties.vue') editorModalProperties: () => import(/* webpackChunkName: "editor" */ './editor/editor-modal-properties.vue')
}, },
data() { data() {
...@@ -49,8 +61,14 @@ export default { ...@@ -49,8 +61,14 @@ export default {
hideProgressDialog() { hideProgressDialog() {
this.dialogProgress = false this.dialogProgress = false
}, },
save() { async save() {
this.showProgressDialog('saving') this.showProgressDialog('saving')
// const resp = await this.$apollo.mutate({
// mutation: savePageMutation,
// variables: {
// }
// })
} }
} }
} }
...@@ -58,4 +76,8 @@ export default { ...@@ -58,4 +76,8 @@ export default {
<style lang='scss'> <style lang='scss'>
.atom-spinner.is-inline {
display: inline-block;
}
</style> </style>
client/components/editor/editor-code.vue
View file @ 760939f8
<template lang='pug'> <template lang='pug'>
.editor-code .editor-code
v-toolbar.editor-code-toolbar.px-3(dense, color='primary', dark) v-toolbar.editor-code-toolbar(dense, color='primary', dark)
v-btn(icon).mx-0 v-btn(icon).mx-0
svg.icons.is-18(role='img') svg.icons.is-18(role='img')
title Bold title Bold
......
client/components/editor/editor-modal-access.vue deleted 100644 → 0
View file @ fd8bf4db
<template lang='pug'>
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='close')
v-icon close
v-card.pa-3(tile)
v-form
v-container(fluid)
v-layout(row, wrap)
v-flex(xs12)
v-switch(label='Published', v-model='isPublished', color='primary')
v-flex(xs6)
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(xs6)
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-model='publishEndDate', :min='(new Date()).toISOString().substring(0, 10)', reactive)
v-spacer
v-btn(flat='', color='primary', @click='isPublishEndShown = false') Cancel
v-btn(flat='', color='primary', @click='$refs.menuPublishEnd.save(date)') OK
v-card-actions
v-btn(color='green', dark) Save
v-btn(@click.native='close') Cancel
</template>
<script>
export default {
data() {
return {
isShown: false,
isPublished: true,
isPublishStartShown: false,
isPublishEndShown: false,
publishStartDate: '',
publishEndDate: ''
}
},
mounted() {
this.isShown = true
},
methods: {
close() {
this.isShown = false
this.$parent.$parent.closeModal()
}
}
}
</script>
<style lang='scss'>
</style>
client/components/editor/editor-modal-properties.vue
View file @ 760939f8
<template lang='pug'> <template lang='pug'>
v-bottom-sheet(v-model='isShown', inset, persistent) v-bottom-sheet(
v-toolbar(color='blue-grey', flat) v-model='isShown'
inset
persistent
)
.dialog-header
v-icon(color='white') sort_by_alpha v-icon(color='white') sort_by_alpha
v-toolbar-title.white--text Page Properties .subheading.white--text.ml-2 Page Properties
v-spacer v-spacer
v-btn(icon, dark, @click.native='close') v-btn(
v-icon close outline
v-card.pa-3(tile) dark
@click.native='close'
)
v-icon(left) close
span Close
v-card(tile)
v-card-text v-card-text
v-form v-subheader.pl-0 Page Info
v-text-field(label='Title', counter='255') v-text-field(
v-text-field(label='Short Description', counter='255') outline
v-select(label='Tags', chips, tags, deletable-chips) background-color='grey lighten-2'
v-text-field(label='Path', prefix='/', append-icon='folder') label='Title'
v-card-actions counter='255'
v-btn(color='green', dark) Save v-model='title'
v-btn(@click.native='close') Cancel )
v-text-field(
outline
background-color='grey lighten-2'
label='Short Description'
counter='255'
v-model='description'
)
v-text-field(
outline
background-color='grey lighten-2'
label='Path'
prefix='/'
append-icon='folder'
v-model='path'
)
v-divider
v-card-text
v-subheader.pl-0 Tags
v-select(
background-color='grey lighten-2'
chips
deletable-chips
hide-details
label='Tags'
outline
tags
v-model='tags'
single-line
)
v-divider
v-card-text
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-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-model='publishEndDate'
:min='(new Date()).toISOString().substring(0, 10)'
reactive
)
v-spacer
v-btn(
flat=''
color='primary'
@click='isPublishEndShown = false'
) Cancel
v-btn(
flat=''
color='primary'
@click='$refs.menuPublishEnd.save(date)'
) OK
</template> </template>
<script> <script>
import { sync } from 'vuex-pathify'
export default { export default {
data() { data() {
return { return {
isShown: false isShown: false,
isPublishStartShown: false,
isPublishEndShown: false
} }
}, },
computed: {
title: sync('editor/title'),
description: sync('editor/description'),
tags: sync('editor/tags'),
path: sync('editor/path'),
isPublished: sync('editor/isPublished'),
publishStartDate: sync('editor/publishStartDate'),
publishEndDate: sync('editor/publishEndDate')
},
mounted() { mounted() {
this.isShown = true this.isShown = true
}, },
......
client/graph/editor/save.gql 0 → 100644
View file @ 760939f8
mutation {
page {
create {
page
}
}
}
client/store/admin.js
View file @ 760939f8
export default { import { make } from 'vuex-pathify'
namespaced: true,
state: { const state = {
theme: { theme: {
dark: false dark: false
} }
}, }
mutations: {
setThemeDarkMode(state, payload) { export default {
state.theme.dark = payload namespaced: true,
} state,
} mutations: make.mutations(state)
} }
client/store/editor.js 0 → 100644
View file @ 760939f8
import { make } from 'vuex-pathify'
const state = {
title: '',
description: '',
tags: [],
path: '',
isPublished: true,
publishEtartDate: '',
publishEndDate: '',
locale: 'en'
}
export default {
namespaced: true,
state,
mutations: make.mutations(state)
}
client/store/index.js
View file @ 760939f8
import _ from 'lodash' import _ from 'lodash'
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import pathify from 'vuex-pathify'
Vue.use(Vuex) Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
strict: process.env.NODE_ENV !== 'production', strict: process.env.NODE_ENV !== 'production',
plugins: [
pathify.plugin
],
state: { state: {
loadingStack: [], loadingStack: [],
notification: { notification: {
......
package.json
View file @ 760939f8
...@@ -173,6 +173,7 @@ ...@@ -173,6 +173,7 @@
"css-loader": "0.28.11", "css-loader": "0.28.11",
"cssnano": "4.0.0-rc.2", "cssnano": "4.0.0-rc.2",
"duplicate-package-checker-webpack-plugin": "3.0.0", "duplicate-package-checker-webpack-plugin": "3.0.0",
"epic-spinners": "1.0.3",
"eslint": "5.0.1", "eslint": "5.0.1",
"eslint-config-requarks": "1.0.7", "eslint-config-requarks": "1.0.7",
"eslint-config-standard": "11.0.0", "eslint-config-standard": "11.0.0",
...@@ -238,6 +239,7 @@ ...@@ -238,6 +239,7 @@
"vuedraggable": "2.16.0", "vuedraggable": "2.16.0",
"vuetify": "1.1.1", "vuetify": "1.1.1",
"vuex": "3.0.1", "vuex": "3.0.1",
"vuex-pathify": "1.1.0",
"vuex-persistedstate": "2.5.4", "vuex-persistedstate": "2.5.4",
"webpack": "4.14.0", "webpack": "4.14.0",
"webpack-bundle-analyzer": "2.13.1", "webpack-bundle-analyzer": "2.13.1",
......
yarn.lock
View file @ 760939f8
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