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

Merge pull request #3763 from node-red/pr_3756

Browse Source 
Ensure node icon shade has properly rounded corners
This commit is contained in:
Nick O'Leary 2022-07-12 13:18:22 +01:00 committed by GitHub
commit fca7beec01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4580,12 +4580,10 @@ RED.view = (function() {
icon_groupEl.setAttribute("y",0); icon_groupEl.setAttribute("y",0);
icon_groupEl.style["pointer-events"] = "none"; icon_groupEl.style["pointer-events"] = "none";
node[0][0].__iconGroup__ = icon_groupEl; node[0][0].__iconGroup__ = icon_groupEl;
var icon_shade = document.createElementNS("http://www.w3.org/2000/svg","rect"); var icon_shade = document.createElementNS("http://www.w3.org/2000/svg","path");
icon_shade.setAttribute("x",0); icon_shade.setAttribute("x",0);
icon_shade.setAttribute("y",0); icon_shade.setAttribute("y",0);
icon_shade.setAttribute("class","red-ui-flow-node-icon-shade") icon_shade.setAttribute("class","red-ui-flow-node-icon-shade")
icon_shade.setAttribute("width",30);
icon_shade.setAttribute("height",Math.min(50,d.h-4));
icon_groupEl.appendChild(icon_shade); icon_groupEl.appendChild(icon_shade);
node[0][0].__iconShade__ = icon_shade; node[0][0].__iconShade__ = icon_shade;
@ -4878,9 +4876,20 @@ RED.view = (function() {
} }
icon.attr("y",function(){return (d.h-d3.select(this).attr("height"))/2;}); icon.attr("y",function(){return (d.h-d3.select(this).attr("height"))/2;});
this.__iconShade__.setAttribute("height", d.h );
const iconShadeHeight = d.h
const iconShadeWidth = 30
this.__iconShade__.setAttribute("d", hideLabel ?
`M5 0 h${iconShadeWidth-10} a 5 5 0 0 1 5 5 v${iconShadeHeight-10} a 5 5 0 0 1 -5 5 h-${iconShadeWidth-10} a 5 5 0 0 1 -5 -5 v-${iconShadeHeight-10} a 5 5 0 0 1 5 -5` : (
"right" === d._def.align ?
`M 0 0 h${iconShadeWidth-5} a 5 5 0 0 1 5 5 v${iconShadeHeight-10} a 5 5 0 0 1 -5 5 h-${iconShadeWidth-5} v-${iconShadeHeight}` :
`M5 0 h${iconShadeWidth-5} v${iconShadeHeight} h-${iconShadeWidth-5} a 5 5 0 0 1 -5 -5 v-${iconShadeHeight-10} a 5 5 0 0 1 5 -5`
)
)
this.__iconShadeBorder__.style.display = hideLabel?'none':''
this.__iconShadeBorder__.setAttribute("d", this.__iconShadeBorder__.setAttribute("d",
"M " + (((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) ? 0 : 30) + " 1 l 0 " + (d.h - 2) "M " + (((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) ? 0.5 : 29.5) + " "+(d.selected?1:0.5)+" l 0 " + (d.h - (d.selected?2:1))
); );
faIcon.attr("y",(d.h+13)/2); faIcon.attr("y",(d.h+13)/2);
} }

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

@ -171,6 +171,7 @@
left:0; left:0;
width: 30px; width: 30px;
border-right: 1px solid var(--red-ui-node-icon-background-color); border-right: 1px solid var(--red-ui-node-icon-background-color);
border-radius: 4px 0px 0px 4px;
background-color: var(--red-ui-node-icon-background-color); background-color: var(--red-ui-node-icon-background-color);
} }
.red-ui-palette-icon-container-right { .red-ui-palette-icon-container-right {
@ -178,6 +179,7 @@
right: 0; right: 0;
border-right: none; border-right: none;
border-left: 1px solid var(--red-ui-node-icon-background-color); border-left: 1px solid var(--red-ui-node-icon-background-color);
border-radius: 0px 4px 4px 0px;
} }
.red-ui-palette-icon { .red-ui-palette-icon {
display: inline-block; display: inline-block;