From f5ad08e888a3c8472ae6c27b63bc2a8427527cd8 Mon Sep 17 00:00:00 2001
From: Laura Fuentes Grau <laurafuentesgrau@gmail.com>
Date: Wed, 30 Dec 2020 21:01:21 +0100
Subject: [PATCH] implement better way to disable color picker opacity

---
 src/widget/edit-widget/color-picker.js         |  7 ++-----
 .../edit-widget/edit-widget-color-control.js   |  4 ++--
 .../edit-widget/edit-widget-control-creator.js | 18 +++++++++---------
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/widget/edit-widget/color-picker.js b/src/widget/edit-widget/color-picker.js
index 03f40a4..f49700b 100644
--- a/src/widget/edit-widget/color-picker.js
+++ b/src/widget/edit-widget/color-picker.js
@@ -85,7 +85,7 @@ class ColorPicker extends React.Component {
   };
 
   render() {
-    let disableOpacity = false;
+
     let hexColor;
     let opacity = 1;
     let parts = this.props.controlId.split('.');
@@ -94,9 +94,6 @@ class ColorPicker extends React.Component {
       isCustomProperty = false;
     }
 
-    if((this.state.widget.type === "Box" && parts[1] === "border_color") || this.props.controlId === 'strokeStyle' || this.state.widget.type === "Button" && (parts[1] === "border_color" || parts[1] === "font_color")){
-      disableOpacity = true;
-    }
     if(this.props.controlId === 'strokeStyle'){
       if(typeof this.state.widget.customProperties.zones[this.props.zoneIndex] !== 'undefined'){
     hexColor = this.state.widget.customProperties.zones[this.props.zoneIndex]['strokeStyle'];
@@ -117,7 +114,7 @@ class ColorPicker extends React.Component {
           <form>
               <SketchPicker
                   color={rgbColor}
-                  disableAlpha={disableOpacity} 
+                  disableAlpha={this.props.disableOpacity} 
                   onChangeComplete={ this.handleChangeComplete }
                   width={"300"}
               />
diff --git a/src/widget/edit-widget/edit-widget-color-control.js b/src/widget/edit-widget/edit-widget-color-control.js
index d2b8dc1..aba342e 100644
--- a/src/widget/edit-widget/edit-widget-color-control.js
+++ b/src/widget/edit-widget/edit-widget-color-control.js
@@ -82,7 +82,7 @@ class EditWidgetColorControl extends Component {
     }
 
     let tooltipText = "Change color and opacity";
-    if(this.state.widget.type === "Box" && parts[1] === "border_color" || this.state.widget.type === "Button" && (parts[1] === "border_color" || parts[1] === "font_color")){
+    if(this.props.disableOpacity){
       tooltipText = "Change border color";
     }
 
@@ -99,7 +99,7 @@ class EditWidgetColorControl extends Component {
         </OverlayTrigger>
         </div>
 
-        <ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} />
+        <ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} disableOpacity={this.props.disableOpacity}/>
       </FormGroup>
 
     )
diff --git a/src/widget/edit-widget/edit-widget-control-creator.js b/src/widget/edit-widget/edit-widget-control-creator.js
index 6247205..da3d7b6 100644
--- a/src/widget/edit-widget/edit-widget-control-creator.js
+++ b/src/widget/edit-widget/edit-widget-control-creator.js
@@ -62,8 +62,8 @@ export default function CreateControls(widgetType = null, widget = null, session
               DialogControls.push(
                 <EditWidgetSignalControl key={0} widget={widget} controlId={'signalIDs'} signals={signals} handleChange={(e) => handleChange(e)} direction={'out'}/>,
                 <EditWidgetTextControl key={1} widget={widget} controlId={'customProperties.threshold'} label={'Threshold'} placeholder={'0.5'} handleChange={e => handleChange(e)} />,
-                <EditWidgetColorControl key={2} widget={widget} controlId={'customProperties.on_color'} label={'Color On'} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetColorControl key={3} widget={widget} controlId={'customProperties.off_color'} label={'Color Off'} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetColorControl key={2} widget={widget} controlId={'customProperties.on_color'} label={'Color On'} handleChange={(e) => handleChange(e)} disableOpacity={false}/>,
+                <EditWidgetColorControl key={3} widget={widget} controlId={'customProperties.off_color'} label={'Color Off'} handleChange={(e) => handleChange(e)} disableOpacity={false}/>,
               );
               break;
         case 'Plot':
@@ -116,22 +116,22 @@ export default function CreateControls(widgetType = null, widget = null, session
                 <EditWidgetCheckboxControl key={2} widget={widget} controlId={'customProperties.toggle'} input text="Toggle" handleChange={e => handleChange(e)} />,
                 <EditWidgetNumberControl key={3} widget={widget} controlId={'customProperties.on_value'} label={'On Value'} defaultValue={1} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetNumberControl key={4} widget={widget} controlId={'customProperties.off_value'} label={'Off Value'} defaultValue={0} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetColorControl key={5} widget={widget} controlId={'customProperties.background_color'} label={'Background Color and Opacity'} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetColorControl key={6} widget={widget} controlId={'customProperties.border_color'} label={'Border Color'} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetColorControl key={7} widget={widget} controlId={'customProperties.font_color'} label={'Font Color'} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetColorControl key={5} widget={widget} controlId={'customProperties.background_color'} label={'Background Color and Opacity'} handleChange={(e) => handleChange(e)} disableOpacity={false}/>,
+                <EditWidgetColorControl key={6} widget={widget} controlId={'customProperties.border_color'} label={'Border Color'} handleChange={(e) => handleChange(e)} disableOpacity={true}/>,
+                <EditWidgetColorControl key={7} widget={widget} controlId={'customProperties.font_color'} label={'Font Color'} handleChange={(e) => handleChange(e)} disableOpacity={true}/>,
             );
             break;
         case 'Box':
             DialogControls.push(
-                <EditWidgetColorControl key={0} widget={widget} controlId={'customProperties.border_color'} label={'Border color'} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetColorControl key={1} widget={widget} controlId={'customProperties.background_color'} label={'Background color'} handleChange={e => handleChange(e)} />,
+                <EditWidgetColorControl key={0} widget={widget} controlId={'customProperties.background_color'} label={'Background Color and Opacity'} handleChange={e => handleChange(e)} disableOpacity={false}/>,
+                <EditWidgetColorControl key={1} widget={widget} controlId={'customProperties.border_color'} label={'Border Color'} handleChange={(e) => handleChange(e)} disableOpacity={true}/>,
             );
             break;
         case 'Label':
             DialogControls.push(
                 <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
                 <EditWidgetTextSizeControl key={1} widget={widget} handleChange={e => handleChange(e)} />,
-                <EditWidgetColorControl key={2} widget={widget} controlId={'customProperties.fontColor'} label={'Text color'} handleChange={e => handleChange(e)} />
+                <EditWidgetColorControl key={2} widget={widget} controlId={'customProperties.fontColor'} label={'Text color'} handleChange={e => handleChange(e)} disableOpacity={false}/>
             );
             break;
         /*case 'HTML':
@@ -155,7 +155,7 @@ export default function CreateControls(widgetType = null, widget = null, session
             break;
         case 'Line':
             DialogControls.push(
-                <EditWidgetColorControl key={0} widget={widget} controlId={'customProperties.border_color'} label={'Line color'} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetColorControl key={0} widget={widget} controlId={'customProperties.border_color'} label={'Line color'} handleChange={(e) => handleChange(e)} disableOpacity={false}/>,
                 <EditWidgetNumberControl key={1} widget={widget} controlId={'customProperties.rotation'} label={'Rotation (degrees)'} defaultValue={0} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetNumberControl key={2} widget={widget} controlId={'customProperties.border_width'} label={'Line width'} defaultValue={0} handleChange={(e) => handleChange(e)} />
             );