diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js index bfd595690..2f9a00bf0 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js @@ -56,7 +56,16 @@ RED.sidebar.config = (function() { } else { $('').appendTo(header); } + $('').appendTo(header); + + const changeBadgeContainer = $('').appendTo(header); + const changeBadge = document.createElementNS("http://www.w3.org/2000/svg", "circle"); + changeBadge.setAttribute("cx", "5"); + changeBadge.setAttribute("cy", "5"); + changeBadge.setAttribute("r", "5"); + changeBadgeContainer.append(changeBadge); + category = $('').appendTo(container); category.on("click", function(e) { $(content).find(".red-ui-palette-node").removeClass("selected"); @@ -179,12 +188,15 @@ RED.sidebar.config = (function() { } if (node.changed) { - const nodeDivAnnotations = $('').appendTo(nodeDiv); + const nodeDivAnnotations = $('').appendTo(nodeDiv); const changedBadge = document.createElementNS("http://www.w3.org/2000/svg", "circle"); changedBadge.setAttribute("cx", "5"); changedBadge.setAttribute("cy", "5"); changedBadge.setAttribute("r", "5"); nodeDivAnnotations.append($(changedBadge)); + + const categoryHeader = list.parent().find(".red-ui-sidebar-config-tray-header.red-ui-palette-header"); + categoryHeader.addClass("red-ui-sidebar-config-changed"); } if (!node.valid) { @@ -265,6 +277,10 @@ RED.sidebar.config = (function() { $(this).remove(); delete categories[id]; } + + // Remove the `changed` badge from the category header + const categoryHeader = $(this).find(".red-ui-sidebar-config-tray-header.red-ui-palette-header"); + categoryHeader.removeClass("red-ui-sidebar-config-changed"); }) var globalConfigNodes = []; var configList = {}; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss index aeb57a5a6..9f1884620 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss @@ -115,6 +115,15 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type { .red-ui-palette-node-config-invalid { border-color: var(--red-ui-form-input-border-error-color) } +.red-ui-sidebar-config-tray-header.red-ui-palette-header:not(.red-ui-sidebar-config-changed) .red-ui-flow-node-changed { + display: none; +} +.red-ui-sidebar-config-tray-header.red-ui-palette-header.red-ui-sidebar-config-changed .red-ui-flow-node-changed { + display: inline-block; + position: absolute; + top: 1px; + right: 1px; +} .red-ui-palette-node-annotations { position: absolute; //left: calc(100% - 15px);