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

Remove hardcoded css and allow group to default from theme

Browse Source 
Fixes #2633
This commit is contained in:
Nick O'Leary 2020-07-07 11:01:05 +01:00
parent 64ec415a54
commit f5e46a663a
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
6 changed files with 47 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -83,7 +83,8 @@ RED.group = (function() {
}
var defaultGroupStyle = {
label: true
label: true,
"label-position": "nw"
};
var groupDef = {
@ -97,7 +98,7 @@ RED.group = (function() {
var style = this.style || {};
RED.colorPicker.create({
id:"node-input-style-stroke",
value: style.stroke || "#a4a4a4",
value: style.stroke || defaultGroupStyle.stroke || "#a4a4a4",
palette: colorPalette,
cellPerRow: colorCount,
cellWidth: 16,
@ -125,7 +126,7 @@ RED.group = (function() {
RED.colorPicker.create({
id:"node-input-style-color",
value: style.color || "#a4a4a4",
value: style.color || defaultGroupStyle.color ||"#a4a4a4",
palette: colorPalette,
cellPerRow: colorCount,
cellWidth: 16,
@ -167,6 +168,13 @@ RED.group = (function() {
if (this.style["fill-opacity"] === "1") {
delete this.style["fill-opacity"]
}
var node = this;
['stroke','fill','stroke-opacity','fill-opacity','color','label-position'].forEach(function(prop) {
if (node.style[prop] === defaultGroupStyle[prop]) {
delete node.style[prop]
}
})
this.resize = true;
},
set:{
@ -219,9 +227,17 @@ RED.group = (function() {
"stroke-opacity": groupStyle.strokeOpacity,
fill: convertColorToHex(groupStyle.fill),
"fill-opacity": groupStyle.fillOpacity,
label: true
label: true,
"label-position": "nw"
}
groupStyleDiv.remove();
groupStyleDiv = $("<div>",{
class:"red-ui-flow-group-label",
style: "position: absolute; top: -1000px;"
}).appendTo(document.body);
groupStyle = getComputedStyle(groupStyleDiv[0]);
defaultGroupStyle.color = convertColorToHex(groupStyle.fill);
groupStyleDiv.remove();
}
function convertColorToHex(c) {

10
packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js vendored
View File

@ -112,14 +112,14 @@ RED.touch.radialMenu = (function() {
if (!opt.disabled) {
if (p[0]>opt.x-30 && p[0]<opt.x+30 && p[1]>opt.y-30 && p[1]<opt.y+30) {
if (opt !== activeOption) {
opt.el.style("background","#999");
opt.el.classed("selected",true);
activeOption = opt;
}
} else if (opt === activeOption) {
opt.el.style("background","#fff");
activeOption = null;
} else {
opt.el.style("background","#fff");
if (opt === activeOption) {
activeOption = null;
}
opt.el.classed("selected",false);
}
}
}

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

@ -4203,11 +4203,11 @@ RED.view = (function() {
var selectGroup = groupSelectLayer.append('g').attr("class", "red-ui-flow-group").attr("id","group_select_"+d.id);
selectGroup.append('rect').classed("red-ui-flow-group-outline-select",true)
.classed("red-ui-flow-group-outline-select-background",true)
.attr('rx',groupBorderRadius).attr('ry',groupBorderRadius)
.attr("x",-4)
.attr("y",-4)
.style("stroke","rgba(255,255,255,0.8)")
.style("stroke-width",6)
.attr("y",-4);
selectGroup.append('rect').classed("red-ui-flow-group-outline-select",true)
.attr('rx',groupBorderRadius).attr('ry',groupBorderRadius)
@ -4358,9 +4358,12 @@ RED.view = (function() {
labelX = d.w/2;
labelAnchor = "middle"
}
label
.style("fill", d.style.hasOwnProperty('color')?d.style.color:"#999")
.attr("transform","translate("+labelX+","+labelY+")")
if (d.style.hasOwnProperty('color')) {
label.style("fill",d.style.color)
} else {
label.style("fill",null)
}
label.attr("transform","translate("+labelX+","+labelY+")")
.attr("text-anchor",labelAnchor);
if (d.labels) {
var ypos = 0;

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

@ -289,3 +289,4 @@ $group-default-fill: none;
$group-default-fill-opacity: 1;
$group-default-stroke: #999;
$group-default-stroke-opacity: 1;
$group-default-label-color: #a4a4a4;

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

@ -106,6 +106,11 @@
pointer-events: stroke;
stroke-opacity: 0;
stroke-width: 3;
&.red-ui-flow-group-outline-select-background {
stroke: $view-background;
stroke-width: 6;
}
}
.red-ui-flow-group-body {
pointer-events: none;
@ -117,6 +122,7 @@
}
.red-ui-flow-group-label {
@include disable-selection;
fill: $group-default-label-color;
}

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

@ -42,7 +42,11 @@
background: $secondary-background;
border: 2px solid $primary-border-color;
text-align: center;
line-height:50px
line-height:50px;
&.selected {
background: $workspace-button-background-hover;
}
}
.red-ui-editor-radial-menu-opt-disabled {