feat: UI improvements
This commit is contained in:
Nicolas Giard
@@ -106,6 +106,8 @@
|
||||
v-list-tile(@click='logout')
|
||||
v-list-tile-action: v-icon(color='red') exit_to_app
|
||||
v-list-tile-title Logout
|
||||
|
||||
page-selector(mode='create', v-model='newPageModal')
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -129,7 +131,8 @@ export default {
|
||||
menuIsShown: true,
|
||||
searchIsLoading: false,
|
||||
searchIsShown: true,
|
||||
search: ''
|
||||
search: '',
|
||||
newPageModal: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -155,7 +158,7 @@ export default {
|
||||
this.searchIsLoading = true
|
||||
},
|
||||
pageNew () {
|
||||
|
||||
this.newPageModal = true
|
||||
},
|
||||
pageEdit () {
|
||||
window.location.assign(`/e/${this.path}`)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template lang="pug">
|
||||
v-dialog(v-model='isShown', lazy, max-width='850px')
|
||||
v-card
|
||||
v-card.page-selector
|
||||
.dialog-header
|
||||
span Select Page Location
|
||||
v-spacer
|
||||
@@ -13,36 +13,36 @@
|
||||
)
|
||||
.d-flex(style='min-height:400px;')
|
||||
v-flex(xs4).grey.lighten-3
|
||||
v-toolbar(color='grey lighten-2', dense, flat)
|
||||
.body-2.grey--text.text--darken-2 Folders
|
||||
v-toolbar(color='grey darken-3', dark, dense, flat)
|
||||
.body-2 Folders
|
||||
v-spacer
|
||||
v-divider.mx-3(vertical)
|
||||
v-btn(icon): v-icon(color='grey') arrow_upward
|
||||
v-btn(icon): v-icon(color='grey darken-2') create_new_folder
|
||||
v-list.grey.lighten-3(dense)
|
||||
v-list-tile.primary(dark)
|
||||
v-list-tile-avatar: v-icon folder_open
|
||||
v-list-tile-title.white--text / (Site Root)
|
||||
v-divider
|
||||
v-list-tile
|
||||
v-list-tile-avatar: v-icon folder
|
||||
v-list-tile-title Folder B
|
||||
v-btn(icon): v-icon create_new_folder
|
||||
v-treeview(
|
||||
v-model='tree'
|
||||
:items='treeFolders'
|
||||
:load-children='fetchFolders'
|
||||
activatable
|
||||
open-on-click
|
||||
hoverable
|
||||
)
|
||||
template(slot='prepend', slot-scope='{ item, open, leaf }')
|
||||
v-icon {{ open ? 'folder_open' : 'folder' }}
|
||||
v-flex(xs8)
|
||||
v-toolbar(color='grey lighten-4', dense, flat)
|
||||
.body-2.grey--text.text--darken-2 Pages
|
||||
v-toolbar(color='grey darken-2', dark, dense, flat)
|
||||
.body-2 Pages
|
||||
v-divider.ml-4(vertical)
|
||||
v-text-field(
|
||||
prepend-inner-icon='search'
|
||||
label='Search...'
|
||||
hide-details
|
||||
solo
|
||||
background-color='grey darken-2'
|
||||
flat
|
||||
background-color='grey lighten-4'
|
||||
clearable
|
||||
)
|
||||
v-divider.mx-3(vertical)
|
||||
v-btn(icon): v-icon(color='grey') forward
|
||||
v-btn(icon): v-icon(color='grey') delete
|
||||
v-btn(icon): v-icon forward
|
||||
v-btn(icon): v-icon delete
|
||||
v-list(dense)
|
||||
v-list-tile
|
||||
v-list-tile-avatar: v-icon insert_drive_file
|
||||
@@ -71,7 +71,7 @@
|
||||
v-card-chin
|
||||
v-spacer
|
||||
v-btn(outline, @click='close') Cancel
|
||||
v-btn(color='primary')
|
||||
v-btn(color='primary', @click='open')
|
||||
v-icon(left) check
|
||||
span Select
|
||||
</template>
|
||||
@@ -82,24 +82,57 @@ export default {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'create'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchLoading: true,
|
||||
location: '/new-page'
|
||||
searchLoading: false,
|
||||
location: '/new-page',
|
||||
tree: [],
|
||||
treeChildren: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isShown: {
|
||||
get() { return this.value },
|
||||
set(val) { this.$emit('input', val) }
|
||||
},
|
||||
treeFolders() {
|
||||
return [
|
||||
{
|
||||
id: '/',
|
||||
name: '/ (root)',
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.isShown = false
|
||||
},
|
||||
open() {
|
||||
if (this.mode === 'create') {
|
||||
window.location.assign(`/e${this.location}`)
|
||||
}
|
||||
},
|
||||
async fetchFolders(item) {
|
||||
console.info(item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
|
||||
.page-selector {
|
||||
.v-treeview-node__label {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -39,13 +39,13 @@
|
||||
.subheading {{ $t('editor:save.processing') }}
|
||||
.caption.blue--text.text--lighten-3 {{ $t('editor:save.pleaseWait') }}
|
||||
v-dialog(v-model='dialogEditorSelector', persistent, max-width='550')
|
||||
v-card(color='blue darken-3', dark)
|
||||
v-card.radius-7(color='blue darken-3', dark)
|
||||
v-card-text.text-xs-center.py-4
|
||||
.subheading Which editor do you want to use?
|
||||
.subheading Which editor do you want to use for this page?
|
||||
v-container(grid-list-lg, fluid)
|
||||
v-layout(row, wrap, justify-center)
|
||||
v-flex(xs4)
|
||||
v-card(
|
||||
v-card.radius-7(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
@@ -54,7 +54,7 @@
|
||||
v-icon(large, color='primary') code
|
||||
.body-2.mt-2 Code
|
||||
v-flex(xs4)
|
||||
v-card(
|
||||
v-card.radius-7(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
@@ -63,7 +63,7 @@
|
||||
v-icon(large, color='primary') list_alt
|
||||
.body-2.mt-2 Markdown
|
||||
v-flex(xs4)
|
||||
v-card.grey(
|
||||
v-card.radius-7.grey(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
@@ -71,6 +71,7 @@
|
||||
v-card-text.text-xs-center(@click='selectEditor("wysiwyg")')
|
||||
v-icon(large, color='grey darken-1') web
|
||||
.body-2.mt-2.grey--text.text--darken-2 Visual Builder
|
||||
.caption.blue--text.text--lighten-2 This cannot be changed later.
|
||||
|
||||
v-snackbar(
|
||||
:color='notification.style'
|
||||
|
||||
@@ -19,12 +19,14 @@
|
||||
v-btn.pl-0(v-if='$vuetify.breakpoint.xsOnly', flat, @click='toggleNavigation')
|
||||
v-icon(color='grey darken-2', left) menu
|
||||
span Navigation
|
||||
v-breadcrumbs.pl-0(v-else, divider='/')
|
||||
v-breadcrumbs-item: v-icon home
|
||||
v-breadcrumbs-item Universe
|
||||
v-breadcrumbs-item Galaxy
|
||||
v-breadcrumbs-item Solar System
|
||||
v-breadcrumbs-item Planet Earth
|
||||
v-breadcrumbs.breadcrumbs-nav.pl-0(
|
||||
v-else
|
||||
:items='breadcrumbs'
|
||||
divider='/'
|
||||
)
|
||||
template(slot='item', slot-scope='props')
|
||||
v-icon(v-if='props.item.path === "/"', small) home
|
||||
v-btn.ma-0(v-else, :href='props.item.path', small, flat) {{props.item.name}}
|
||||
template(v-if='!isPublished')
|
||||
v-spacer
|
||||
.caption.red--text Unpublished
|
||||
@@ -150,6 +152,13 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
navOpen: false,
|
||||
breadcrumbs: [
|
||||
{ path: '/', name: 'Home' },
|
||||
{ path: '/universe', name: 'Universe' },
|
||||
{ path: '/universe/galaxy', name: 'Galaxy' },
|
||||
{ path: '/universe/galaxy/solar-system', name: 'Solar System' },
|
||||
{ path: '/universe/galaxy/solar-system/planet-earth', name: 'Planet Earth' }
|
||||
],
|
||||
toc: [
|
||||
{
|
||||
name: 'Introduction',
|
||||
@@ -220,4 +229,19 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.breadcrumbs-nav {
|
||||
.v-btn {
|
||||
min-width: 0;
|
||||
&__content {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
.v-breadcrumbs__divider:nth-child(2n) {
|
||||
padding: 0 6px;
|
||||
}
|
||||
.v-breadcrumbs__divider:nth-child(2) {
|
||||
padding: 0 6px 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user