feat: redirect editor UI (wip)
This commit is contained in:
NGPixel
@@ -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: {
|
||||
|
||||
@@ -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
224
client/components/editor/editor-redirect.vue
Normal 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>
|
||||
Reference in New Issue
Block a user