[5.x] Add custom icon selection to CP Nav Preferences

resources/js/components/nav/Branch.vue

@@ -4,9 +4,9 @@
         <div class="page-move w-6" />
         <div class="flex items-center flex-1 p-2 rtl:mr-2 ltr:ml-2 text-xs leading-normal">
             <div class="flex items-center flex-1" :class="{ 'opacity-50': isHidden || isInHiddenSection }">
-                <template v-if="! isSection">
+                <template v-if="! isSection && ! isChild">
                     <i v-if="isAlreadySvg" class="w-4 h-4 rtl:ml-2 ltr:mr-2" v-html="icon"></i>
-                    <svg-icon v-else class="w-4 h-4 rtl:ml-2 ltr:mr-2" :name="icon" />
+                    <svg-icon v-else class="w-4 h-4 rtl:ml-2 ltr:mr-2" :name="'light/'+icon" />
                 </template>
 
                 <a
@@ -37,10 +37,10 @@
                 <slot name="branch-icon" :branch="item" />
 
                 <svg-icon v-if="isRenamedSection" class="inline-block w-4 h-4 text-gray-500" name="light/content-writing" v-tooltip="__('Renamed Section')" />
-                <svg-icon v-else-if="isHidden" class="inline-block w-4 h-4 text-gray-500" name="hidden" v-tooltip="isSection ? __('Hidden Section') : __('Hidden Item')" />
+                <svg-icon v-else-if="isHidden" class="inline-block w-4 h-4 text-gray-500" name="light/hidden" v-tooltip="isSection ? __('Hidden Section') : __('Hidden Item')" />
                 <svg-icon v-else-if="isPinnedAlias" class="inline-block w-4 h-4 text-gray-500" name="light/pin" v-tooltip="__('Pinned Item')" />
                 <svg-icon v-else-if="isAlias" class="inline-block w-4 h-4 text-gray-500" name="light/duplicate-ids" v-tooltip="__('Alias Item')" />
-                <svg-icon v-else-if="isMoved" class="inline-block w-4 text-gray-500" name="flip-vertical" v-tooltip="__('Moved Item')" />
+                <svg-icon v-else-if="isMoved" class="inline-block w-4 text-gray-500" name="regular/flip-vertical" v-tooltip="__('Moved Item')" />
                 <svg-icon v-else-if="isModified" class="inline-block w-4 h-4 text-gray-500" name="light/content-writing" v-tooltip="__('Modified Item')" />
                 <svg-icon v-else-if="isCustom" class="inline-block w-4 text-gray-500" name="light/user-edit" v-tooltip="isSection ? __('Custom Section') : __('Custom Item')" />
 
@@ -70,6 +70,7 @@ export default {
         root: Boolean,
         vm: Object,
         isOpen: Boolean,
+        isChild: Boolean,
         hasChildren: Boolean,
         disableSections: Boolean,
         topLevel: Boolean,
@@ -96,7 +97,9 @@ export default {
         },
 
         icon() {
-            return data_get(this.item.config, 'icon') || 'entries';
+            return data_get(this.item, 'config.icon')
+                || data_get(this.item, 'original.icon')
+                || 'entries';
         },
 
         isAlreadySvg() {

resources/js/components/nav/Builder.vue

@@ -85,6 +85,7 @@
                     :depth="vm.level"
                     :vm="vm"
                     :is-open="item.open"
+                    :is-child="isChildItemNode(item)"
                     :has-children="item.children.length > 0"
                     :disable-sections="true"
                     :top-level="true"
@@ -95,7 +96,7 @@
                         <dropdown-item
                             v-if="vm.level < 2"
                             :text="__('Add Item')"
-                            @click="addItem(item.children)" />
+                            @click="addItem(item.children, item)" />
                         <dropdown-item
                             :text="__('Edit')"
                             @click="editingItem = item" />
@@ -136,6 +137,7 @@
                     :depth="vm.level"
                     :vm="vm"
                     :is-open="item.open"
+                    :is-child="isChildItemNode(item)"
                     :has-children="item.children.length > 0"
                     @edit="editItem(item)"
                     @toggle-open="store.toggleOpen(item)"
@@ -144,7 +146,7 @@
                         <dropdown-item
                             v-if="vm.level < 3"
                             :text="__('Add Item')"
-                            @click="addItem(item.children)" />
+                            @click="addItem(item.children, item)" />
                         <dropdown-item
                             :text="__('Edit')"
                             @click="editItem(item)" />
@@ -174,13 +176,15 @@
         <item-editor
             v-if="creatingItem"
             :creating="true"
+            :is-child="creatingItemIsChild"
             @closed="resetItemEditor"
             @updated="itemAdded"
         />
 
         <item-editor
             v-if="editingItem"
             :item="editingItem"
+            :is-child="isChildItemNode(editingItem)"
             @closed="resetItemEditor"
             @updated="itemUpdated"
         />
@@ -275,6 +279,7 @@ export default {
             changed: false,
             targetDataArray: null,
             creatingItem: false,
+            creatingItemIsChild: false,
             editingItem: false,
             creatingSection: false,
             editingSection: false,
@@ -433,6 +438,18 @@ export default {
             return data_get(node, 'isSection', false);
         },
 
+        isParentItemNode(node) {
+            return ! this.isSectionNode(node) && ! this.isChildItemNode(node);
+        },
+
+        isChildItemNode(node) {
+            if (data_get(node, 'parent.isRoot')) {
+                return false;
+            }
+
+            return ! this.isSectionNode(node.parent);
+        },
+
         isCustomSectionNode(node) {
             return this.isSectionNode(node) && data_get(node, 'manipulations.action') === '@create';
         },
@@ -445,14 +462,6 @@ export default {
             return node;
         },
 
-        isChildItemNode(node) {
-            if (data_get(node, 'parent.isRoot')) {
-                return false;
-            }
-
-            return ! this.isSectionNode(node.parent);
-        },
-
         traverseTree(nodes, callback, parentPath = []) {
             const nodesArray = Array.isArray(nodes) ? nodes : [nodes];
 
@@ -473,9 +482,10 @@ export default {
             });
         },
 
-        addItem(targetDataArray) {
+        addItem(targetDataArray, parentItem) {
             this.targetDataArray = targetDataArray;
             this.creatingItem = true;
+            this.creatingItemIsChild = parentItem && this.isParentItemNode(parentItem);
         },
 
         addSection() {
@@ -489,6 +499,7 @@ export default {
                 action: '@create',
                 display: createdConfig.display,
                 url: createdConfig.url,
+                icon: createdConfig.icon,
             };
 
             this.targetDataArray.push(item);
@@ -518,9 +529,11 @@ export default {
 
         itemUpdated(updatedConfig, item) {
             item.text = updatedConfig.display;
+            item.config.icon = updatedConfig.icon;
 
             this.updateItemManipulation(item, 'display', updatedConfig.display);
             this.updateItemManipulation(item, 'url', updatedConfig.url);
+            this.updateItemManipulation(item, 'icon', updatedConfig.icon);
             this.updateItemAction(item);
 
             this.resetItemEditor();
@@ -674,6 +687,7 @@ export default {
         resetItemEditor() {
             this.editingItem = false;
             this.creatingItem = false;
+            this.creatingItemIsChild = false;
             this.targetDataArray = false;
         },
 

resources/js/components/nav/ItemEditor.vue

@@ -35,6 +35,19 @@
                             </div>
                         </div>
 
+                        <div class="form-group publish-field w-full" v-if="! isChild">
+                            <div class="field-inner">
+                                <label class="text-sm font-medium mb-2">{{ __('Icon') }}</label>
+                                <publish-field-meta
+                                    :config="{ handle: 'icon', type: 'icon', folder: 'light' }"
+                                    :initial-value="config.icon"
+                                    v-slot="{ meta, value, loading }"
+                                >
+                                    <icon-fieldtype v-if="!loading" handle="icon" :meta="meta" :value="value" @input="config.icon = $event" />
+                                </publish-field-meta>
+                            </div>
+                        </div>
+
                     </div>
                 </div>
 
@@ -61,11 +74,12 @@ export default {
     props: {
         creating: false,
         item: {},
+        isChild: false,
     },
 
     data() {
         return {
-            config: data_get(this.item, 'config', this.createNewItem()),
+            config: clone(data_get(this.item, 'config', this.createNewItem())),
             saveKeyBinding: null,
             validateDisplay: false,
             validateUrl: false,
@@ -89,6 +103,7 @@ export default {
             return {
                 display: '',
                 url: '',
+                icon: null,
             };
         },
 
@@ -108,6 +123,14 @@ export default {
                 return;
             }
 
+            let config = clone(this.config);
+
+            if (this.isChild) {
+                config.icon = null;
+            } else if (! config.icon) {
+                config.icon = data_get(this.item, 'original.icon');
+            }
+
             this.$emit('updated', this.config, this.item);
         },
 

resources/views/nav/updates.blade.php

@@ -1,6 +1,6 @@
 <li class="{{ $item->isActive() ? 'current' : '' }}">
     <a href="{{ $item->url() }}">
-        <i>{!! $item->icon() !!}</i><span v-pre>{{ __($item->name()) }}</span>
+        <i>{!! $item->svg() !!}</i><span v-pre>{{ __($item->name()) }}</span>
         <updates-badge class="rtl:mr-2 ltr:ml-2"></updates-badge>
     </a>
 </li>

resources/views/partials/nav-main.blade.php

@@ -12,7 +12,7 @@
                         @unless ($item->view())
                             <li class="{{ $item->isActive() ? 'current' : '' }}" v-pre>
                                 <a href="{{ $item->url() }}" {{ $item->attributes() }}>
-                                    <i>{!! $item->icon() !!}</i><span>{{ __($item->name()) }}</span>
+                                    <i>{!! $item->svg() !!}</i><span>{{ __($item->name()) }}</span>
                                 </a>
                                 @if ($item->children() && $item->isActive())
                                     <ul>

resources/views/partials/nav-mobile.blade.php

@@ -11,7 +11,7 @@
                     @unless ($item->view())
                         <li class="{{ $item->isActive() ? 'current' : '' }}" v-pre>
                             <a href="{{ $item->url() }}">
-                                <i>{!! $item->icon() !!}</i><span>{{ __($item->name()) }}</span>
+                                <i>{!! $item->svg() !!}</i><span>{{ __($item->name()) }}</span>
                             </a>
                             @if ($item->children() && $item->isActive())
                                 <ul>