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 b8e3aa0ba..8cb413bef 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"); @@ -150,9 +159,6 @@ RED.sidebar.config = (function() { $('
  • '+node.type+'
  • ').appendTo(list); currentType = node.type; } - if (node.changed) { - labelText += "!!" - } var entry = $('
  • ').appendTo(list); var nodeDiv = $('
    ').appendTo(entry); entry.data('node',node.id); @@ -181,15 +187,29 @@ RED.sidebar.config = (function() { } } + if (node.changed) { + const nodeDivAnnotations = $('').appendTo(nodeDiv); + const changeBadge = document.createElementNS("http://www.w3.org/2000/svg", "circle"); + changeBadge.setAttribute("cx", "5"); + changeBadge.setAttribute("cy", "5"); + changeBadge.setAttribute("r", "5"); + nodeDivAnnotations.append($(changeBadge)); + + const categoryHeader = list.parent().find(".red-ui-sidebar-config-tray-header.red-ui-palette-header"); + categoryHeader.addClass("red-ui-sidebar-config-changed"); + nodeDiv.addClass("red-ui-palette-node-config-changed"); + } + if (!node.valid) { - nodeDiv.addClass("red-ui-palette-node-config-invalid") - const nodeDivAnnotations = $('').appendTo(nodeDiv) - const errorBadge = document.createElementNS("http://www.w3.org/2000/svg","path"); - errorBadge.setAttribute("d","M 0,9 l 10,0 -5,-8 z"); - nodeDivAnnotations.append($(errorBadge)) + const nodeDivAnnotations = $('').appendTo(nodeDiv); + const errorBadge = document.createElementNS("http://www.w3.org/2000/svg", "path"); + errorBadge.setAttribute("d", "M 0,9 l 10,0 -5,-8 z"); + nodeDivAnnotations.append($(errorBadge)); + + nodeDiv.addClass("red-ui-palette-node-config-invalid"); RED.popover.tooltip(nodeDivAnnotations, function () { if (node.validationErrors && node.validationErrors.length > 0) { - return RED._("editor.errors.invalidProperties")+"
    - "+node.validationErrors.join("
    - ") + return RED._("editor.errors.invalidProperties") + "
    - " + node.validationErrors.join("
    - "); } }) } @@ -252,6 +272,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 aed01240a..d2bc31dd1 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 @@ -84,6 +84,11 @@ ul.red-ui-sidebar-node-config-list { background: var(--red-ui-node-config-background); color: var(--red-ui-primary-text-color); cursor: pointer; + &.red-ui-palette-node-config-invalid.red-ui-palette-node-config-changed { + .red-ui-palette-node-annotations.red-ui-flow-node-error { + left: calc(100% - 28px); + } + } } ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type { color: var(--red-ui-secondary-text-color); @@ -115,6 +120,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);