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 2f9a00bf0..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 @@ -188,30 +188,25 @@ RED.sidebar.config = (function() { } if (node.changed) { - 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 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"); + errorBadge.setAttribute("d", "M 0,9 l 10,0 -5,-8 z"); nodeDivAnnotations.append($(errorBadge)); - if (node.changed) { - nodeDivAnnotations.css("left", "calc(100% - 28px)"); - } else { - nodeDivAnnotations.css("left", "calc(100% - 15px)"); - } - + 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("
- "); 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 9f1884620..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); @@ -126,7 +131,7 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type { } .red-ui-palette-node-annotations { position: absolute; - //left: calc(100% - 15px); + left: calc(100% - 15px); top: -8px; display: block; }