feat: UI improvements

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>