Manage badge locations with pure CSS + cleanup

This commit is contained in:
GogoVega
2024-10-25 11:31:35 +02:00
parent b8eeef182c
commit 6da890bf88
2 changed files with 15 additions and 15 deletions

View File

@@ -188,30 +188,25 @@ 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" style="left:calc(100% - 15px);"></svg>').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 = $('<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) {
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 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") + "<br> - " + node.validationErrors.join("<br> - ");