frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5062 from GogoVega/tab-config-changed-badge

Browse Source 
Add the `changed` badge to the config node
This commit is contained in:
Nick O'Leary 2025-02-25 09:55:45 +00:00 committed by GitHub
commit 45bcb74dae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 47 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js vendored
View File

@ -56,7 +56,16 @@ RED.sidebar.config = (function() {
} else { } else {
$('<span class="red-ui-palette-node-config-label" data-i18n="sidebar.config.'+name+'">').appendTo(header); $('<span class="red-ui-palette-node-config-label" data-i18n="sidebar.config.'+name+'">').appendTo(header);
} }
$('<span class="red-ui-sidebar-node-config-filter-info"></span>').appendTo(header); $('<span class="red-ui-sidebar-node-config-filter-info"></span>').appendTo(header);
const changeBadgeContainer = $('<svg class="red-ui-sidebar-config-category-changed red-ui-flow-node-changed" width="10" height="10" viewBox="-1 -1 12 12"></svg>').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 = $('<ul class="red-ui-palette-content red-ui-sidebar-node-config-list"></ul>').appendTo(container); category = $('<ul class="red-ui-palette-content red-ui-sidebar-node-config-list"></ul>').appendTo(container);
category.on("click", function(e) { category.on("click", function(e) {
$(content).find(".red-ui-palette-node").removeClass("selected"); $(content).find(".red-ui-palette-node").removeClass("selected");
@ -150,9 +159,6 @@ RED.sidebar.config = (function() {
$('<li class="red-ui-palette-node-config-type">'+node.type+'</li>').appendTo(list); $('<li class="red-ui-palette-node-config-type">'+node.type+'</li>').appendTo(list);
currentType = node.type; currentType = node.type;
} }
if (node.changed) {
labelText += "!!"
}
var entry = $('<li class="red-ui-palette-node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list); var entry = $('<li class="red-ui-palette-node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list);
var nodeDiv = $('<div class="red-ui-palette-node-config red-ui-palette-node"></div>').appendTo(entry); var nodeDiv = $('<div class="red-ui-palette-node-config red-ui-palette-node"></div>').appendTo(entry);
entry.data('node',node.id); entry.data('node',node.id);
@ -181,15 +187,29 @@ RED.sidebar.config = (function() {
} }
} }
if (node.changed) {
const nodeDivAnnotations = $('<svg class="red-ui-palette-node-annotations red-ui-flow-node-changed" width="10" height="10" viewBox="-1 -1 12 12"></svg>').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) { if (!node.valid) {
nodeDiv.addClass("red-ui-palette-node-config-invalid") const nodeDivAnnotations = $('<svg class="red-ui-palette-node-annotations red-ui-flow-node-error" width="10" height="10"></svg>').appendTo(nodeDiv);
const nodeDivAnnotations = $('<svg class="red-ui-palette-node-annotations red-ui-flow-node-error" width="10" height="10"></svg>').appendTo(nodeDiv) const errorBadge = document.createElementNS("http://www.w3.org/2000/svg", "path");
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));
nodeDivAnnotations.append($(errorBadge))
nodeDiv.addClass("red-ui-palette-node-config-invalid");
RED.popover.tooltip(nodeDivAnnotations, function () { RED.popover.tooltip(nodeDivAnnotations, function () {
if (node.validationErrors && node.validationErrors.length > 0) { if (node.validationErrors && node.validationErrors.length > 0) {
return RED._("editor.errors.invalidProperties")+"<br> - "+node.validationErrors.join("<br> - ") return RED._("editor.errors.invalidProperties") + "<br> - " + node.validationErrors.join("<br> - ");
} }
}) })
} }
@ -252,6 +272,10 @@ RED.sidebar.config = (function() {
$(this).remove(); $(this).remove();
delete categories[id]; 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 globalConfigNodes = [];
var configList = {}; var configList = {};

14
packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss vendored
View File

@ -84,6 +84,11 @@ ul.red-ui-sidebar-node-config-list {
background: var(--red-ui-node-config-background); background: var(--red-ui-node-config-background);
color: var(--red-ui-primary-text-color); color: var(--red-ui-primary-text-color);
cursor: pointer; 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 { ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
color: var(--red-ui-secondary-text-color); 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 { .red-ui-palette-node-config-invalid {
border-color: var(--red-ui-form-input-border-error-color) 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 { .red-ui-palette-node-annotations {
position: absolute; position: absolute;
left: calc(100% - 15px); left: calc(100% - 15px);