mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Add background to node status
This commit is contained in:
parent
11f9ad8ca3
commit
56ed32e4a1
@ -4160,21 +4160,27 @@ RED.view = (function() {
|
||||
nodeEl.__statusGroup__.style.display = "none";
|
||||
} else {
|
||||
nodeEl.__statusGroup__.style.display = "inline";
|
||||
let backgroundWidth = 12
|
||||
var fill = status_colours[d.status.fill]; // Only allow our colours for now
|
||||
if (d.status.shape == null && fill == null) {
|
||||
backgroundWidth = 0
|
||||
nodeEl.__statusShape__.style.display = "none";
|
||||
nodeEl.__statusBackground__.setAttribute("x", 17)
|
||||
nodeEl.__statusGroup__.setAttribute("transform","translate(-14,"+(d.h+3)+")");
|
||||
} else {
|
||||
nodeEl.__statusGroup__.setAttribute("transform","translate(3,"+(d.h+3)+")");
|
||||
var statusClass = "red-ui-flow-node-status-"+(d.status.shape||"dot")+"-"+d.status.fill;
|
||||
nodeEl.__statusShape__.style.display = "inline";
|
||||
nodeEl.__statusShape__.setAttribute("class","red-ui-flow-node-status "+statusClass);
|
||||
nodeEl.__statusBackground__.setAttribute("x", 3)
|
||||
}
|
||||
if (d.status.hasOwnProperty('text')) {
|
||||
nodeEl.__statusLabel__.textContent = d.status.text;
|
||||
} else {
|
||||
nodeEl.__statusLabel__.textContent = "";
|
||||
}
|
||||
const textSize = nodeEl.__statusLabel__.getBBox()
|
||||
nodeEl.__statusBackground__.setAttribute('width', backgroundWidth + textSize.width + 6)
|
||||
}
|
||||
delete d.dirtyStatus;
|
||||
}
|
||||
@ -4580,17 +4586,30 @@ RED.view = (function() {
|
||||
statusEl.style.display = "none";
|
||||
node[0][0].__statusGroup__ = statusEl;
|
||||
|
||||
var statusRect = document.createElementNS("http://www.w3.org/2000/svg","rect");
|
||||
statusRect.setAttribute("class","red-ui-flow-node-status");
|
||||
statusRect.setAttribute("x",6);
|
||||
statusRect.setAttribute("y",1);
|
||||
statusRect.setAttribute("width",9);
|
||||
statusRect.setAttribute("height",9);
|
||||
statusRect.setAttribute("rx",2);
|
||||
statusRect.setAttribute("ry",2);
|
||||
statusRect.setAttribute("stroke-width","3");
|
||||
statusEl.appendChild(statusRect);
|
||||
node[0][0].__statusShape__ = statusRect;
|
||||
var statusBackground = document.createElementNS("http://www.w3.org/2000/svg","rect");
|
||||
statusBackground.setAttribute("class","red-ui-flow-node-status-background");
|
||||
statusBackground.setAttribute("x",3);
|
||||
statusBackground.setAttribute("y",-1);
|
||||
statusBackground.setAttribute("width",200);
|
||||
statusBackground.setAttribute("height",13);
|
||||
statusBackground.setAttribute("rx",1);
|
||||
statusBackground.setAttribute("ry",1);
|
||||
|
||||
statusEl.appendChild(statusBackground);
|
||||
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");
|
||||
statusLabel.setAttribute("class","red-ui-flow-node-status-label");
|
||||
|
@ -304,7 +304,11 @@ g.red-ui-flow-node-selected {
|
||||
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 {
|
||||
@include disable-selection;
|
||||
stroke-width: 0;
|
||||
|
Loading…
Reference in New Issue
Block a user