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

Convert node-change/error icons to SVG

Browse Source
This commit is contained in:
Nick O'Leary 2019-05-08 19:05:30 +01:00
parent 50228c5970
commit db5e79a19b
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 50 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2054,10 +2054,14 @@ RED.view = (function() {
var labelWidth = 0;
var labelHeight = 4;
var labelHeights = [];
lines.forEach(function(l) {
var labelDimensions = calculateTextDimensions(l, "port_tooltip_label", 8,0);
var lineHeight = 0;
lines.forEach(function(l,i) {
var labelDimensions = calculateTextDimensions(l||" ", "port_tooltip_label", 8,0);
labelWidth = Math.max(labelWidth,labelDimensions[0]);
labelHeights.push(0.8*labelDimensions[1]);
if (i === 0) {
lineHeight = 0.8*labelDimensions[1];
}
labelHeight += 0.8*labelDimensions[1];
});
var labelWidth1 = (labelWidth/2)-5-2;
@ -2079,9 +2083,9 @@ RED.view = (function() {
anchor = "start";
} else if (direction === "top") {
path = "M0 0 l 5 -5 h "+(labelWidth1)+" q 2 0 2 -2 v -"+labelHeight+" q 0 -2 -2 -2 h -"+(labelWidth2)+" q -2 0 -2 2 v "+labelHeight+" q 0 2 2 2 h "+(labelWidth1)+" l 5 5"
lx = labelWidth/2 - 4;
ly = -labelHeight-labelHeight / 2 + 2;
anchor = "end";
lx = -labelWidth/2 + 4;
ly = -labelHeight-lineHeight + 6;
anchor = "start";
}
tooltip.append("path").attr("d",path);
lines.forEach(function(l,i) {
@ -2090,7 +2094,7 @@ RED.view = (function() {
.attr("x", lx)
.attr("y", ly)
.attr("text-anchor",anchor)
.text(l)
.text(l||" ")
});
return tooltip;
}
@ -2783,13 +2787,27 @@ RED.view = (function() {
.attr("class","node_status_label")
.attr("x",20).attr("y",10);
//node.append("circle").attr({"class":"centerDot","cx":0,"cy":0,"r":5});
//node.append("path").attr("class","node_error").attr("d","M 3,-3 l 10,0 l -5,-8 z");
//TODO: these ought to be SVG
node.append("image").attr("class","node_error hide").attr("xlink:href","red/images/icons/node-error.png").attr("x",0).attr("y",-6).attr("width",10).attr("height",9);
node.append("image").attr("class","node_changed hide").attr("xlink:href","red/images/icons/node-changed.png").attr("x",12).attr("y",-6).attr("width",10).attr("height",10);
node.append("g").attr("class","red-ui-view-node-changed hide").attr("transform","translate(20, -2)").append("circle").attr("r",5);
var nodeErrorButton = node.append("g").attr("class","red-ui-view-node-error hide").attr("transform","translate(0, -2)").append("path").attr("d","M -5,4 l 10,0 -5,-8 z");
// nodeErrorButton.on("mouseenter", function() {
// clearTimeout(portLabelHoverTimeout);
// portLabelHoverTimeout = setTimeout(function() {
// var pos = getElementPosition(nodeErrorButton.node());
// portLabelHoverTimeout = null;
// portLabelHover = showTooltip(
// (pos[0]),
// (pos[1]),
// tooltip,
// "top"
// );
// },500);
// }).on("mouseleave", function() {
// clearTimeout(portLabelHoverTimeout);
// if (portLabelHover) {
// portLabelHover.remove();
// portLabelHover = null;
// }
// });
});
node.each(function(d,i) {
@ -2967,12 +2985,12 @@ RED.view = (function() {
}
}
thisNode.selectAll(".node_changed")
.attr("x",function(d){return d.w-10})
thisNode.selectAll(".red-ui-view-node-changed")
.attr("transform",function(d){return "translate("+(d.w-10)+", -2)"})
.classed("hide",function(d) { return !(d.changed||d.moved); });
thisNode.selectAll(".node_error")
.attr("x",function(d){return d.w-10-((d.changed||d.moved)?13:0)})
thisNode.selectAll(".red-ui-view-node-error")
.attr("transform",function(d){ return "translate("+(d.w-10-((d.changed||d.moved)?14:0))+", -2)"})
.classed("hide",function(d) { return d.valid; });
thisNode.selectAll(".port_input").each(function(d,i) {

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

@ -91,10 +91,21 @@
fill-opacity: 0.5;
}
.node_error {
stroke: #ff0000;
stroke-width: 2;
fill: #ff7f0e;
.red-ui-view-node-error {
fill: rgb(255, 102, 0);
stroke: rgb(145, 16, 2);
stroke-width:1px;
cursor: default;
stroke-linejoin: round;
stroke-linecap: round;
}
.red-ui-view-node-changed {
fill: rgb(0, 188, 255);
stroke: rgb(28, 102, 140);
cursor: default;
stroke-width:1px;
stroke-linejoin: round;
stroke-linecap: round;
}
.node_badge {