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

Manage badge locations with pure CSS + cleanup

Browse Source
This commit is contained in:
GogoVega 2024-10-25 11:31:35 +02:00
parent b8eeef182c
commit 6da890bf88
No known key found for this signature in database
GPG Key ID: E1E048B63AC5AC2B
2 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -188,30 +188,25 @@ RED.sidebar.config = (function() {
} }
if (node.changed) { 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 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 changedBadge = document.createElementNS("http://www.w3.org/2000/svg", "circle"); const changeBadge = document.createElementNS("http://www.w3.org/2000/svg", "circle");
changedBadge.setAttribute("cx", "5"); changeBadge.setAttribute("cx", "5");
changedBadge.setAttribute("cy", "5"); changeBadge.setAttribute("cy", "5");
changedBadge.setAttribute("r", "5"); changeBadge.setAttribute("r", "5");
nodeDivAnnotations.append($(changedBadge)); nodeDivAnnotations.append($(changeBadge));
const categoryHeader = list.parent().find(".red-ui-sidebar-config-tray-header.red-ui-palette-header"); const categoryHeader = list.parent().find(".red-ui-sidebar-config-tray-header.red-ui-palette-header");
categoryHeader.addClass("red-ui-sidebar-config-changed"); 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));
if (node.changed) { nodeDiv.addClass("red-ui-palette-node-config-invalid");
nodeDivAnnotations.css("left", "calc(100% - 28px)");
} else {
nodeDivAnnotations.css("left", "calc(100% - 15px)");
}
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> - ");

7
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);
@ -126,7 +131,7 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
} }
.red-ui-palette-node-annotations { .red-ui-palette-node-annotations {
position: absolute; position: absolute;
//left: calc(100% - 15px); left: calc(100% - 15px);
top: -8px; top: -8px;
display: block; display: block;
} }