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

feat: redirect editor UI (wip)

Browse Source
This commit is contained in:
NGPixel
2020-05-10 18:43:45 -04:00
parent 85a5af6f06
commit 7508d92f92
7 changed files with 319 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
client/components/common/page-selector.vue
View File

@@ -20,7 +20,7 @@
v-show='searchLoading'
)
.d-flex
v-flex.grey(xs5, :class='darkMode ? `darken-4` : `lighten-3`')
v-flex.grey(xs5, :class='$vuetify.theme.dark ? `darken-4` : `lighten-3`')
v-toolbar(color='grey darken-3', dark, dense, flat)
.body-2 Virtual Folders
v-spacer
@@ -57,7 +57,7 @@
color='primary'
)
template(v-for='(page, idx) of currentPages')
v-list-item(:key='`page-` + page.id', :value='page.path')
v-list-item(:key='`page-` + page.id', :value='page')
v-list-item-icon: v-icon mdi-text-box
v-list-item-title {{page.title}}
v-divider(v-if='idx < pages.length - 1')
@@ -69,7 +69,7 @@
icon='mdi-alert'
)
.body-2 This folder is empty.
v-card-actions.grey.pa-2(:class='darkMode ? `darken-2` : `lighten-1`')
v-card-actions.grey.pa-2(:class='$vuetify.theme.dark ? `darken-2` : `lighten-1`', v-if='!mustExist')
v-select(
solo
dark
@@ -101,8 +101,7 @@
<script>
import _ from 'lodash'
import { get } from 'vuex-pathify'
import pageTreeQuery from 'gql/common/common-pages-query-tree.gql'
import gql from 'graphql-tag'
const localeSegmentRegex = /^[A-Z]{2}(-[A-Z]{2})?$/i
@@ -129,6 +128,10 @@ export default {
openHandler: {
type: Function,
default: () => {}
},
mustExist: {
type: Boolean,
default: false
}
},
data() {
@@ -172,7 +175,6 @@ export default {
}
},
computed: {
darkMode: get('site/dark'),
isShown: {
get() { return this.value },
set(val) { this.$emit('input', val) }
@@ -184,6 +186,9 @@ export default {
if (!this.currentPath) {
return false
}
if (this.mustExist && !this.currentPage) {
return false
}
const firstSection = _.head(this.currentPath.split('/'))
if (firstSection.length <= 1) {
return false
@@ -235,7 +240,7 @@ export default {
},
currentPage (newValue, oldValue) {
if (!_.isEmpty(newValue)) {
this.currentPath = newValue
this.currentPath = newValue.path
}
},
currentLocale (newValue, oldValue) {
@@ -262,7 +267,8 @@ export default {
open() {
const exit = this.openHandler({
locale: this.currentLocale,
path: this.currentPath
path: this.currentPath,
id: (this.mustExist && this.currentPage) ? this.currentPage.pageId : 0
})
if (exit !== false) {
this.close()
@@ -271,7 +277,20 @@ export default {
async fetchFolders (item) {
this.searchLoading = true
const resp = await this.$apollo.query({
query: pageTreeQuery,
query: gql`
query ($parent: Int!, $mode: PageTreeMode!, $locale: String!) {
pages {
tree(parent: $parent, mode: $mode, locale: $locale) {
id
path
title
isFolder
pageId
parent
}
}
}
`,
fetchPolicy: 'network-only',
variables: {
parent: item.id,

4
client/components/editor.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
v-app.editor(:dark='darkMode')
v-app.editor(:dark='$vuetify.theme.dark')
nav-header(dense)
template(slot='mid')
v-text-field.editor-title-input(
@@ -81,6 +81,7 @@ export default {
editorCode: () => import(/* webpackChunkName: "editor-code", webpackMode: "lazy" */ './editor/editor-code.vue'),
editorCkeditor: () => import(/* webpackChunkName: "editor-ckeditor", webpackMode: "lazy" */ './editor/editor-ckeditor.vue'),
editorMarkdown: () => import(/* webpackChunkName: "editor-markdown", webpackMode: "lazy" */ './editor/editor-markdown.vue'),
editorRedirect: () => import(/* webpackChunkName: "editor-redirect", webpackMode: "lazy" */ './editor/editor-redirect.vue'),
editorModalEditorselect: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-editorselect.vue'),
editorModalProperties: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-properties.vue'),
editorModalUnsaved: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-unsaved.vue'),
@@ -148,7 +149,6 @@ export default {
},
computed: {
currentEditor: sync('editor/editor'),
darkMode: get('site/dark'),
activeModal: sync('editor/activeModal'),
mode: get('editor/mode'),
welcomeMode() { return this.mode === `create` && this.path === `home` },

66
client/components/editor/editor-modal-blocks.vue
View File

@@ -1,38 +1,22 @@
<template lang='pug'>
v-card.editor-modal-blocks.animated.fadeInLeft(flat, tile)
v-container.pa-3(grid-list-lg, fluid)
v-layout(row, wrap)
v-flex(xs12, lg4, xl3)
v-card.radius-7(light)
v-row(dense)
v-col(
v-for='(item, idx) of blocks'
:key='`block-` + item.key'
cols='12'
lg='4'
xl='3'
)
v-card.radius-7(light, flat, @click='selectBlock(item)')
v-card-text
.d-flex
v-toolbar.radius-7(color='teal lighten-5', dense, flat, height='44')
.body-2.teal--text Blocks
v-list(two-line)
template(v-for='(item, idx) of blocks')
v-list-item(@click='selectBlock(item)')
v-list-item-avatar
v-avatar.radius-7(color='teal')
v-icon(dark) dashboard
v-list-item-content
v-list-item-title.body-2 {{item.title}}
v-list-item-sub-title {{item.description}}
v-list-item-avatar(v-if='block.key === item.key')
v-icon.animated.fadeInLeft(color='teal') arrow_forward_ios
v-divider(v-if='idx < blocks.length - 1')
v-flex(xs3)
v-card.radius-7.animated.fadeInLeft(light, v-if='block.key')
v-card-text
v-toolbar.radius-7(color='teal lighten-5', dense, flat)
v-icon.mr-3(color='teal') dashboard
.body-2.teal--text {{block.title}}
.d-flex.mt-3
v-toolbar.radius-7(flat, color='grey lighten-4', dense, height='44')
.body-2 Coming soon
v-btn.ml-3.my-0.mr-0.radius-7(color='teal', large, @click='', disabled)
v-icon(left) save_alt
span Insert
.d-flex.align-center
v-avatar.radius-7(color='teal')
v-icon(dark) {{item.icon}}
.pl-3
.body-2: strong.teal--text {{item.title}}
.caption.grey--text {{item.description}}
</template>
<script>
@@ -49,13 +33,19 @@ export default {
data() {
return {
blocks: [
{ key: 'hero', title: 'Hero', description: 'A large banner with a title.' },
{ key: 'toc', title: 'Table of Contents', description: 'A list of children pages.' }
// { key: 'form', title: 'Form', description: '' }
],
block: {
key: false
}
{
key: 'childlist',
title: 'List Children Pages',
description: 'Display a links list of all children of this page.',
icon: 'mdi-format-list-text'
},
{
key: 'tabs',
title: 'Tabs',
description: 'Organize content within tabs.',
icon: 'mdi-tab'
}
]
}
},
computed: {

60
client/components/editor/editor-modal-editorselect.vue
View File

@@ -106,43 +106,27 @@
v-flex(xs4)
v-hover
template(v-slot:default='{ hover }')
v-card.radius-7.teal.animated.fadeInUp(
v-card.radius-7.animated.fadeInUp(
hover
light
ripple
)
v-card-text.text-center(@click='')
v-card-text.text-center(@click='fromTemplate')
img(src='/svg/icon-cube.svg', alt='From Template', style='width: 42px; opacity: .5;')
.body-2.mt-1.teal--text.text--lighten-2 From Template
.caption.teal--text.text--lighten-1 Use an existing page / tree
v-fade-transition
v-overlay(
v-if='hover'
absolute
color='teal'
opacity='.8'
)
.body-2.mt-7 Coming Soon
.body-2.mt-1.teal--text From Template
.caption.grey--text Use an existing page...
v-flex(xs4)
v-hover
template(v-slot:default='{ hover }')
v-card.radius-7.teal.animated.fadeInUp.wait-p1s(
v-card.radius-7.animated.fadeInUp.wait-p1s(
hover
light
ripple
)
v-card-text.text-center(@click='')
img(src='/svg/icon-tree-structure.svg', alt='Tree View', style='width: 42px; opacity: .5;')
.body-2.mt-1.teal--text.text--lighten-2 Tree View
.caption.teal--text.text--lighten-1 List children pages
v-fade-transition
v-overlay(
v-if='hover'
absolute
color='teal'
opacity='.8'
)
.body-2.mt-7 Coming Soon
v-card-text.text-center(@click='selectEditor("redirect")')
img(src='/svg/icon-route.svg', alt='Redirection', style='width: 42px; opacity: .5;')
.body-2.mt-1.teal--text Redirection
.caption.grey--text Redirect the user to...
v-flex(xs4)
v-hover
template(v-slot:default='{ hover }')
@@ -190,11 +174,13 @@
opacity='.8'
)
.body-2 Coming Soon
page-selector(mode='select', v-model='templateDialogIsShown', :open-handler='fromTemplateHandle', :path='path', :locale='locale', must-exist)
</template>
<script>
import _ from 'lodash'
import { sync } from 'vuex-pathify'
import { sync, get } from 'vuex-pathify'
export default {
props: {
@@ -204,22 +190,36 @@ export default {
}
},
data() {
return { }
return {
templateDialogIsShown: false
}
},
computed: {
isShown: {
get() { return this.value },
set(val) { this.$emit('input', val) }
},
currentEditor: sync('editor/editor')
currentEditor: sync('editor/editor'),
locale: get('page/locale'),
path: get('page/path')
},
methods: {
selectEditor(name) {
selectEditor (name) {
this.currentEditor = `editor${_.startCase(name)}`
this.isShown = false
},
goBack() {
goBack () {
window.history.go(-1)
},
fromTemplate () {
this.templateDialogIsShown = true
},
fromTemplateHandle ({ id }) {
this.templateDialogIsShown = false
this.isShown = false
this.$nextTick(() => {
window.location.assign(`/e/${this.locale}/${this.path}?from=${id}`)
})
}
}
}

224
client/components/editor/editor-redirect.vue Normal file
View File

@@ -0,0 +1,224 @@
<template lang='pug'>
.editor-redirect
.editor-redirect-main
.editor-redirect-editor
v-container.px-2.pt-1(fluid)
v-row(dense)
v-col(
cols='12'
lg='8'
offset-lg='2'
xl='6'
offset-xl='3'
)
v-card.pt-2
v-card-text
.pb-1
.subtitle-2.primary--text When a user reaches this page
.caption.grey--text.text--darken-1 and matches one of these rules...
v-timeline(dense)
v-slide-x-reverse-transition(group, hide-on-leave)
v-timeline-item(
key='cond-add-new'
hide-dot
)
v-btn(
color='primary'
@click=''
)
v-icon(left) mdi-plus
span Add Conditional Rule
v-timeline-item(
key='cond-none'
small
color='grey'
)
v-card.grey.lighten-5(flat)
v-card-text
.body-2: strong No conditional rule
em Add conditional rules to direct users to a different page based on their group.
v-timeline-item(
key='cond-rule-1'
small
color='primary'
)
v-card.blue-grey.lighten-5(flat)
v-card-text
.d-flex.align-center
.body-2: strong User is a member of any of these groups:
v-select.ml-3(
color='primary'
:items='groups'
item-text='name'
item-value='id'
multiple
solo
flat
hide-details
dense
chips
small-chips
)
v-divider.my-3
.d-flex.align-center
.body-2.mr-3 then redirect to
v-btn-toggle.mr-3(
v-model='fallbackMode'
mandatory
color='primary'
borderless
dense
)
v-btn.text-none(value='page') Page
v-btn.text-none(value='url') External URL
v-btn.mr-3(
v-if='fallbackMode === `page`'
color='primary'
)
v-icon(left) mdi-magnify
span Select Page...
v-text-field(
v-if='fallbackMode === `url`'
label='External URL'
outlined
hint='Required - Title of the API'
hide-details
v-model='fallbackUrl'
dense
single-line
)
v-divider.mb-5
.subtitle-2.primary--text Otherwise, redirect to...
.caption.grey--text.text--darken-1.pb-2 This fallback rule is mandatory and used if none of the conditional rules above applies.
.d-flex.align-center
v-btn-toggle.mr-3(
v-model='fallbackMode'
mandatory
color='primary'
borderless
dense
)
v-btn.text-none(value='page') Page
v-btn.text-none(value='url') External URL
v-btn.mr-3(
v-if='fallbackMode === `page`'
color='primary'
)
v-icon(left) mdi-magnify
span Select Page...
v-text-field(
v-if='fallbackMode === `url`'
label='External URL'
outlined
hint='Required - Title of the API'
hide-details
v-model='fallbackUrl'
dense
single-line
)
v-system-bar.editor-redirect-sysbar(dark, status, color='grey darken-3')
.caption.editor-redirect-sysbar-locale {{locale.toUpperCase()}}
.caption.px-3 /{{path}}
template(v-if='$vuetify.breakpoint.mdAndUp')
v-spacer
.caption Redirect
v-spacer
.caption 0 rules
</template>
<script>
import _ from 'lodash'
import gql from 'graphql-tag'
import { v4 as uuid } from 'uuid'
import { get, sync } from 'vuex-pathify'
export default {
data() {
return {
fallbackMode: 'page',
fallbackUrl: 'https://'
}
},
computed: {
isMobile() {
return this.$vuetify.breakpoint.smAndDown
},
locale: get('page/locale'),
path: get('page/path'),
mode: get('editor/mode'),
activeModal: sync('editor/activeModal')
},
methods: {
},
mounted() {
this.$store.set('editor/editorKey', 'redirect')
if (this.mode === 'create') {
this.$store.set('editor/content', '<h1>Title</h1>\n\n<p>Some text here</p>')
}
},
apollo: {
groups: {
query: gql`
{
groups {
list {
id
name
}
}
}
`,
fetchPolicy: 'network-only',
update: (data) => data.groups.list,
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'editor-redirect-groups')
}
}
}
}
</script>
<style lang='scss'>
$editor-height: calc(100vh - 64px - 24px);
$editor-height-mobile: calc(100vh - 56px - 16px);
.editor-redirect {
&-main {
display: flex;
width: 100%;
}
&-editor {
background-color: darken(mc('grey', '100'), 4.5%);
flex: 1 1 50%;
display: block;
height: $editor-height;
position: relative;
@at-root .theme--dark & {
background-color: darken(mc('grey', '900'), 4.5%);
}
}
&-sidebar {
width: 200px;
}
&-sysbar {
padding-left: 0 !important;
&-locale {
background-color: rgba(255,255,255,.25);
display:inline-flex;
padding: 0 12px;
height: 24px;
width: 63px;
justify-content: center;
align-items: center;
}
}
}
</style>