feat: UI improvements

client/components/common/nav-header.vue

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

client/components/common/page-selector.vue

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

client/components/editor.vue

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

client/themes/default/components/page.vue

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