Improved the UI for the Parent Page Route dropdown when adding a new Page / Folder

CHANGELOG.md

@@ -1,3 +1,9 @@
+# v1.9.0-rc.5
+## MM/DD/2019
+
+1. [](#improved)
+    * Improved the UI for the Parent Page Route dropdown when adding a new Page / Folder
+
 # v1.9.0-rc.4
 ## 03/20/2019
 

themes/grav/app/forms/fields/selectize.js

@@ -3,6 +3,22 @@ import 'selectize';
 import '../../utils/selectize-required-fix';
 import '../../utils/selectize-option-click';
 
+const PagesRoute = {
+    option: function(item, escape) {
+        const label = escape(item.text).split(' ');
+        const arrows = label.shift();
+        const slug = label.shift();
+
+        return `<div class="selectize-route-option">
+            <span class="text-grey">${arrows}</span>
+            <span>
+                <span class="text-update">${slug.replace('(', '/').replace(')', '')}</span>
+                <span>${label.join(' ')}</span>
+            </span>
+        </div>`;
+    }
+};
+
 export default class SelectizeField {
     constructor(options = {}) {
         this.options = Object.assign({}, options);
@@ -20,6 +36,10 @@ export default class SelectizeField {
         let data = (isInput ? element.closest('[data-grav-selectize]') : element).data('grav-selectize') || {};
         let field = (isInput ? element : element.find('input, select'));
 
+        if (field.attr('name') === 'data[route]') {
+            data = $.extend({}, data, { render: PagesRoute });
+        }
+
         if (!field.length || field.get(0).selectize) { return; }
         const plugins = $.merge(data.plugins ? data.plugins : [], ['required-fix']);
         field.selectize($.extend({}, data, { plugins }));

themes/grav/scss/preset.scss

@@ -136,6 +136,14 @@ a {
     }
 }
 
+.text-gray, .text-grey {
+    color: $nav-text;
+}
+
+.text-update {
+    color: $update-bg;
+}
+
 // Typography
 blockquote {
     border-left: 10px solid darken($content-bg, 10%);

themes/grav/scss/template/_pages.scss

@@ -324,6 +324,25 @@
     }
 }
 
+.selectize-route-option {
+    display: flex;
+
+    > :first-child {
+        flex: 0 0 auto;
+        width: auto;
+        margin-right: 10px;
+    }
+
+    > :last-child {
+        flex: 1 1 auto;
+
+        > * {
+            display: block;
+        }
+    }
+
+}
+
 .hidden {
     display: none!important;
 }