From f5e46a663a9cfbfff18a358a9489a55daba989f0 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Tue, 7 Jul 2020 11:01:05 +0100
Subject: [PATCH] Remove hardcoded css and allow group to default from theme
 Fixes #2633

---
 .../editor-client/src/js/ui/group.js          | 24 +++++++++++++++----
 .../src/js/ui/touch/radialMenu.js             | 10 ++++----
 .../@node-red/editor-client/src/js/ui/view.js | 17 +++++++------
 .../editor-client/src/sass/colors.scss        |  1 +
 .../editor-client/src/sass/flow.scss          |  6 +++++
 .../editor-client/src/sass/radialMenu.scss    |  6 ++++-
 6 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
index ffce9f179..9dbd9c19b 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
@@ -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) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js
index a7c9704d9..9ed7f823c 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js
@@ -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);
                         }
                     }
                 }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
index 76ac58ebf..4d9b4ef61 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
@@ -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,10 +4358,13 @@ 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+")")
-                            .attr("text-anchor",labelAnchor);
+                        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;
                             g.selectAll(".red-ui-flow-group-label-text").remove();
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
index d8ffd9402..5e2771a8f 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
@@ -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;
\ No newline at end of file
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
index 0d41e43f6..70d988b65 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
@@ -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;
 }
 
 
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss
index 114919460..deeabc4fc 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss
@@ -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 {