frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Add background to node status

Browse Source
This commit is contained in:
Nick O'Leary 2023-06-23 16:09:34 +01:00
parent 11f9ad8ca3
commit 56ed32e4a1
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

@ -4160,21 +4160,27 @@ RED.view = (function() {
nodeEl.__statusGroup__.style.display = "none"; nodeEl.__statusGroup__.style.display = "none";
} else { } else {
nodeEl.__statusGroup__.style.display = "inline"; nodeEl.__statusGroup__.style.display = "inline";
let backgroundWidth = 12
var fill = status_colours[d.status.fill]; // Only allow our colours for now var fill = status_colours[d.status.fill]; // Only allow our colours for now
if (d.status.shape == null && fill == null) { if (d.status.shape == null && fill == null) {
backgroundWidth = 0
nodeEl.__statusShape__.style.display = "none"; nodeEl.__statusShape__.style.display = "none";
nodeEl.__statusBackground__.setAttribute("x", 17)
nodeEl.__statusGroup__.setAttribute("transform","translate(-14,"+(d.h+3)+")"); nodeEl.__statusGroup__.setAttribute("transform","translate(-14,"+(d.h+3)+")");
} else { } else {
nodeEl.__statusGroup__.setAttribute("transform","translate(3,"+(d.h+3)+")"); nodeEl.__statusGroup__.setAttribute("transform","translate(3,"+(d.h+3)+")");
var statusClass = "red-ui-flow-node-status-"+(d.status.shape||"dot")+"-"+d.status.fill; var statusClass = "red-ui-flow-node-status-"+(d.status.shape||"dot")+"-"+d.status.fill;
nodeEl.__statusShape__.style.display = "inline"; nodeEl.__statusShape__.style.display = "inline";
nodeEl.__statusShape__.setAttribute("class","red-ui-flow-node-status "+statusClass); nodeEl.__statusShape__.setAttribute("class","red-ui-flow-node-status "+statusClass);
nodeEl.__statusBackground__.setAttribute("x", 3)
} }
if (d.status.hasOwnProperty('text')) { if (d.status.hasOwnProperty('text')) {
nodeEl.__statusLabel__.textContent = d.status.text; nodeEl.__statusLabel__.textContent = d.status.text;
} else { } else {
nodeEl.__statusLabel__.textContent = ""; nodeEl.__statusLabel__.textContent = "";
} }
const textSize = nodeEl.__statusLabel__.getBBox()
nodeEl.__statusBackground__.setAttribute('width', backgroundWidth + textSize.width + 6)
} }
delete d.dirtyStatus; delete d.dirtyStatus;
} }
@ -4580,17 +4586,30 @@ RED.view = (function() {
statusEl.style.display = "none"; statusEl.style.display = "none";
node[0][0].__statusGroup__ = statusEl; node[0][0].__statusGroup__ = statusEl;
var statusRect = document.createElementNS("http://www.w3.org/2000/svg","rect"); var statusBackground = document.createElementNS("http://www.w3.org/2000/svg","rect");
statusRect.setAttribute("class","red-ui-flow-node-status"); statusBackground.setAttribute("class","red-ui-flow-node-status-background");
statusRect.setAttribute("x",6); statusBackground.setAttribute("x",3);
statusRect.setAttribute("y",1); statusBackground.setAttribute("y",-1);
statusRect.setAttribute("width",9); statusBackground.setAttribute("width",200);
statusRect.setAttribute("height",9); statusBackground.setAttribute("height",13);
statusRect.setAttribute("rx",2); statusBackground.setAttribute("rx",1);
statusRect.setAttribute("ry",2); statusBackground.setAttribute("ry",1);
statusRect.setAttribute("stroke-width","3");
statusEl.appendChild(statusRect); statusEl.appendChild(statusBackground);
node[0][0].__statusShape__ = statusRect; node[0][0].__statusBackground__ = statusBackground;
var statusIcon = document.createElementNS("http://www.w3.org/2000/svg","rect");
statusIcon.setAttribute("class","red-ui-flow-node-status");
statusIcon.setAttribute("x",6);
statusIcon.setAttribute("y",1);
statusIcon.setAttribute("width",9);
statusIcon.setAttribute("height",9);
statusIcon.setAttribute("rx",2);
statusIcon.setAttribute("ry",2);
statusIcon.setAttribute("stroke-width","3");
statusEl.appendChild(statusIcon);
node[0][0].__statusShape__ = statusIcon;
var statusLabel = document.createElementNS("http://www.w3.org/2000/svg","text"); var statusLabel = document.createElementNS("http://www.w3.org/2000/svg","text");
statusLabel.setAttribute("class","red-ui-flow-node-status-label"); statusLabel.setAttribute("class","red-ui-flow-node-status-label");

6
packages/node_modules/@node-red/editor-client/src/sass/flow.scss vendored
View File

@ -304,7 +304,11 @@ g.red-ui-flow-node-selected {
stroke: var(--red-ui-node-status-colors-#{"" + $current-color}); stroke: var(--red-ui-node-status-colors-#{"" + $current-color});
} }
} }
.red-ui-flow-node-status-background {
stroke: none;
fill: var(--red-ui-view-background);
fill-opacity: 0.9;
}
.red-ui-flow-node-status-label { .red-ui-flow-node-status-label {
@include disable-selection; @include disable-selection;
stroke-width: 0; stroke-width: 0;