Merge pull request #1165 from bartbutenaers/icons-in-sidebar-fix

DRAFT - Node icons in sidebar

nodes/config/ui_base.html

@@ -172,6 +172,10 @@
     /* indent the widgets */
     .nrdb2-sb-widgets-list-header .nrdb2-sb-widget-icon {
         margin-left: 3.5rem;
+        display: inline-block;
+        height: 14px;
+        width: 14px;
+        text-align: center;
     }
     /* apply subflow icon */
     .nrdb2-sb-widgets-list-header .nrdb2-sb-widget-icon.nrdb2-sb-subflow-icon {
@@ -1038,7 +1042,12 @@
             addItem: function (container, i, /** @type {DashboardItem} */ widget) {
                 const titleRow = $('<div>', { class: 'nrdb2-sb-list-header nrdb2-sb-widgets-list-header' }).appendTo(container)
                 $('<i class="nrdb2-sb-list-handle nrdb2-sb-widget-list-handle fa fa-bars"></i>').appendTo(titleRow)
-                let widgetIcon = 'fa fa-image'
+
+                let widgetIcon = widget.node._def.icon || 'fa fa-question'
+                if (widget.node._def.icon.startsWith('font-awesome/')) {
+                    widgetIcon = 'fa ' + widget.node._def.icon.replace('font-awesome/', '')
+                }
+
                 if (widget.isSubflowInstance) {
                     // In this MVP, subflow instances are constrained to stay within own group.
                     container.parent().addClass('red-ui-editableList-item-constrained')
@@ -1047,7 +1056,16 @@
                     // apply a tooltip to further clarify this is a subflow
                     titleRow.attr('title', widget.subflowName || 'Subflow instance')
                 }
-                $('<i>', { class: 'nrdb2-sb-icon nrdb2-sb-widget-icon ' + widgetIcon }).appendTo(titleRow)
+
+                if (widgetIcon == 'nrdb2-sb-subflow-icon' || widgetIcon.startsWith('fa fa-')) {
+                    // Some ui nodes require a FontAwesome icon
+                    $('<i>', { class: 'nrdb2-sb-icon nrdb2-sb-widget-icon ' + widgetIcon }).appendTo(titleRow)
+                } else {
+                    // Some ui nodes require a custom icon (png, svg, ...)
+                    const href = 'icons/' + widget.node._def.set.module + '/' + widgetIcon
+                    $('<image>', { class: 'nrdb2-sb-icon nrdb2-sb-widget-icon', href, width: 14, height: 14 }).appendTo(titleRow)
+                }
+
                 $('<span>', { class: 'nrdb2-sb-title' }).text(widget.label?.trim() || widget.id).appendTo(titleRow)
                 const actions = $('<div>', { class: 'nrdb2-sb-list-header-actions' }).appendTo(titleRow)
                 addRowActions(actions, widget)