From 54e0de64a73b3e8b9db6a44fc757e486dcb63bca Mon Sep 17 00:00:00 2001 From: GogoVega <92022724+GogoVega@users.noreply.github.com> Date: Sat, 22 Jun 2024 15:24:41 +0200 Subject: [PATCH 1/3] Add the `changed` badge for the config node --- .../editor-client/src/js/ui/tab-config.js | 29 ++++++++++++++----- .../editor-client/src/sass/tab-config.scss | 2 +- 2 files changed, 22 insertions(+), 9 deletions(-) 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..bfd595690 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 @@ -150,9 +150,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 +178,31 @@ 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)); + } + 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"); + 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)) + nodeDivAnnotations.append($(errorBadge)); + + if (node.changed) { + nodeDivAnnotations.css("left", "calc(100% - 28px)"); + } else { + nodeDivAnnotations.css("left", "calc(100% - 15px)"); + } + 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("
    - "); } }) } 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..aeb57a5a6 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 @@ -117,7 +117,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; } From b8eeef182ca7da398b6a4867d4f5b50b3f96b4cd Mon Sep 17 00:00:00 2001 From: GogoVega <92022724+GogoVega@users.noreply.github.com> Date: Tue, 2 Jul 2024 16:12:02 +0200 Subject: [PATCH 2/3] Add `changed` badge for category header + fix cropped badge --- .../editor-client/src/js/ui/tab-config.js | 18 +++++++++++++++++- .../editor-client/src/sass/tab-config.scss | 9 +++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) 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); From 6da890bf8822239d35e82c192804d2fd2388897e Mon Sep 17 00:00:00 2001 From: GogoVega <92022724+GogoVega@users.noreply.github.com> Date: Fri, 25 Oct 2024 11:31:35 +0200 Subject: [PATCH 3/3] Manage badge locations with pure CSS + cleanup --- .../editor-client/src/js/ui/tab-config.js | 23 ++++++++----------- .../editor-client/src/sass/tab-config.scss | 7 +++++- 2 files changed, 15 insertions(+), 15 deletions(-) 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; }