More parent field improvements

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

@@ -63,11 +63,17 @@ export default {
         IconpickerField,
         Instance: IconpickerInstance
     },
-    CronField: {CronField,
-        Insance: CronFieldInstance
+    CronField: {
+        CronField,
+        Instance: CronFieldInstance
     },
-    TextField: {TextField,
-        Insance: TextFieldInstance
+    TextField: {
+        TextField,
+        Instance: TextFieldInstance
+    },
+    ParentsField: {
+        ParentsField,
+        Instance: ParentsFieldInstance
     }
 };
 

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

@@ -29,7 +29,8 @@ $(document).on('click', '[data-field-parents]', (event) => {
             }
 
             Finder(content[0], response.data, {
-                labelKey: 'filename'
+                labelKey: 'filename',
+                createItemContent: createItemContent
             });
 
         }
@@ -39,5 +40,35 @@ $(document).on('click', '[data-field-parents]', (event) => {
 const createItemContent = (config, item) => {
     console.log(config, item);
 
-    return document.createDocumentFragment();
+    const data = item.children || config.data;
+    const frag = document.createDocumentFragment();
+
+    const label = $('<span />');
+    const iconPrepend = $('<i />');
+    const iconAppend = $('<i />');
+    const prependClasses = ['fa'];
+    const appendClasses = ['fa'];
+
+    // prepend icon
+    if (data || item.type === 'dir') {
+        prependClasses.push('fa-folder');
+    } else if (item.type === 'file') {
+        prependClasses.push('fa-file-o');
+    }
+
+    iconPrepend.addClass(prependClasses.join(' '));
+
+    // text label
+    label.text(item[config.labelKey]).prepend(iconPrepend);
+    label.appendTo(frag);
+
+    // append icon
+    if (data || item.type === 'dir') {
+        appendClasses.push('fa-caret-right');
+    }
+
+    iconAppend.addClass(appendClasses.join(' '));
+    iconAppend.appendTo(frag);
+
+    return frag;
 };

themes/grav/scss/template/_forms.scss

@@ -527,6 +527,7 @@ textarea.frontmatter {
 
 // parents
 [data-grav-field="parents"] {
+
     .form-input-wrapper {
         cursor: pointer;
 
@@ -536,6 +537,21 @@ textarea.frontmatter {
     }
 }
 
+[data-remodal-id="parents"] {
+    form > h1 {
+        margin-bottom: 0;
+    }
+    form > .button-bar {
+        margin-top: 0;
+    }
+
+    .fjs-item {
+        margin-left: 0;
+        list-style-type: none;
+        text-align: left;
+    }
+}
+
 // Sortables
 .form-order-wrapper {