From 1430c650ae3bf01458a0dee2b186cc2fd9854461 Mon Sep 17 00:00:00 2001
From: Laura Fuentes Grau <laurafuentesgrau@gmail.com>
Date: Sun, 2 Aug 2020 15:09:38 +0200
Subject: [PATCH] Opacity now changeable through color picker #251

---
 src/widget/edit-widget/color-picker.js        | 25 ++++++++++++++++++-
 .../edit-widget/edit-widget-color-control.js  |  9 ++++++-
 .../edit-widget-control-creator.js            |  1 -
 src/widget/widget-factory.js                  |  7 +++++-
 src/widget/widgets/label.js                   |  3 ++-
 src/widget/widgets/lamp.js                    | 10 ++++++--
 src/widget/widgets/line.js                    |  1 +
 7 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/widget/edit-widget/color-picker.js b/src/widget/edit-widget/color-picker.js
index b150f33..81a08b2 100644
--- a/src/widget/edit-widget/color-picker.js
+++ b/src/widget/edit-widget/color-picker.js
@@ -38,6 +38,16 @@ class ColorPicker extends React.Component {
     };
   }
 
+  hexToRgb = (hex,opacity) => {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16),
+      a: opacity
+    } : null;
+  }
+
   handleChangeComplete = (color) => {
     let parts = this.props.controlId.split('.');
     let isCustomProperty = true;
@@ -47,6 +57,8 @@ class ColorPicker extends React.Component {
 
     let temp = this.state.widget;
     isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex;
+    isCustomProperty ? temp[parts[0]][parts[1] + "_opacity"] = color.rgb.a : temp[this.props.controlId +"_opacity"] = color.rgb.a;
+
     this.setState({ widget: temp });
   };
 
@@ -65,15 +77,26 @@ class ColorPicker extends React.Component {
   };
 
   render() {
+    let disableOpacity = false;
     let parts = this.props.controlId.split('.');
     let isCustomProperty = true;
     if (parts.length === 1){
       isCustomProperty = false;
     }
+
+    if(this.state.widget.type === "Box" && parts[1] === "border_color"){
+      disableOpacity = true;
+    }
+
+    let hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId];
+    let opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"];
+    let rgbColor = this.hexToRgb(hexColor, opacity);
+
       return <Dialog show={this.props.show} title='Color Picker' buttonTitle='Save' onClose={(c) => this.onClose(c)} valid={true}>
           <form>
               <SketchPicker
-                  color={isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId]}
+                  color={rgbColor}
+                  disableAlpha={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 407a970..c50039f 100644
--- a/src/widget/edit-widget/edit-widget-color-control.js
+++ b/src/widget/edit-widget/edit-widget-color-control.js
@@ -73,19 +73,26 @@ class EditWidgetColorControl extends Component {
       isCustomProperty = false;
     }
     let color = (isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]);
+    let opacity = (isCustomProperty ? this.props.widget[parts[0]][parts[1] + "_opacity"] : this.props.widget[this.props.controlId + "_opacity"]);
     let style = {
       backgroundColor: color,
+      opacity: opacity,
       width: '260px', 
       height: '40px'
     }
 
+    let tooltipText = "Change color and opacity";
+    if(this.state.widget.type === "Box" && parts[1] === "border_color"){
+      tooltipText = "Change border color";
+    }
+
    
     return (
       <FormGroup>
         <FormLabel>{this.props.label}</FormLabel>
 
         <div className='section-buttons-group-right'>
-        <OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}> Change color </Tooltip>} >
+        <OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}> {tooltipText} </Tooltip>} >
         <Button key={2} style={style} onClick={this.openColorPicker.bind(this)}  >
           <Icon icon="paint-brush"/>
         </Button>
diff --git a/src/widget/edit-widget/edit-widget-control-creator.js b/src/widget/edit-widget/edit-widget-control-creator.js
index b26bc04..0cc0713 100644
--- a/src/widget/edit-widget/edit-widget-control-creator.js
+++ b/src/widget/edit-widget/edit-widget-control-creator.js
@@ -122,7 +122,6 @@ export default function CreateControls(widgetType = null, widget = null, session
             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)} />,
-                <EditWidgetNumberControl key={2} widget={widget} controlId={'customProperties.background_color_opacity'} label={'Background opacity (0.0 - 1.0)'} defaultValue={0.5} handleChange={(e) => handleChange(e)} />
             );
             break;
         case 'Label':
diff --git a/src/widget/widget-factory.js b/src/widget/widget-factory.js
index dd2c77b..29a0b6c 100644
--- a/src/widget/widget-factory.js
+++ b/src/widget/widget-factory.js
@@ -64,7 +64,9 @@ class WidgetFactory {
                 widget.width = 20;
                 widget.height = 20;
                 widget.customProperties.on_color = '#4287f5';
+                widget.customProperties.on_color_opacity = 1;
                 widget.customProperties.off_color = '#4287f5';
+                widget.customProperties.off_color_opacity = 1;
                 widget.customProperties.threshold = 0.5;
                 break;
             case 'Value':
@@ -103,6 +105,7 @@ class WidgetFactory {
                 widget.name = 'Label';
                 widget.customProperties.textSize = 32;
                 widget.customProperties.fontColor = '#4287f5';
+                widget.customProperties.fontColor_opacity = 1;
                 widget.customProperties.resizeTopBottomLock = true;
                 break;
           case 'Image':
@@ -168,8 +171,9 @@ class WidgetFactory {
                 widget.width = 100;
                 widget.height = 100;
                 widget.customProperties.border_color = '#4287f5';
+                widget.customProperties.border_color_opacity = 1;
                 widget.customProperties.background_color = '#961520';
-                widget.customProperties.background_color_opacity = 0.5;
+                widget.customProperties.background_color_opacity = 1;
                 widget.z = 0;
                 break;
             case 'HTML':
@@ -184,6 +188,7 @@ class WidgetFactory {
                 widget.height = 30;
                 widget.width = 150;
                 widget.customProperties.border_color = '#4287f5';
+                widget.customProperties.border_color_opacity = 1;
                 widget.customProperties.border_width = 2;
                 widget.customProperties.margin_top = 15;
                 widget.customProperties.rotation = 0;
diff --git a/src/widget/widgets/label.js b/src/widget/widgets/label.js
index 048e0e1..2a29e1f 100644
--- a/src/widget/widgets/label.js
+++ b/src/widget/widgets/label.js
@@ -22,7 +22,8 @@ class WidgetLabel extends Component {
   render() {
       const style = {
       fontSize: this.props.widget.customProperties.textSize + 'px',
-      color: this.props.widget.customProperties.fontColor
+      color: this.props.widget.customProperties.fontColor,
+      opacity: this.props.widget.customProperties.fontColor_opacity,
     };
 
     return (
diff --git a/src/widget/widgets/lamp.js b/src/widget/widgets/lamp.js
index a686f37..d43aadf 100644
--- a/src/widget/widgets/lamp.js
+++ b/src/widget/widgets/lamp.js
@@ -61,14 +61,20 @@ class WidgetLamp extends Component {
   render() {
 
     let color;
+    let opacity;
 
-    if (Number(this.state.value) > Number(this.props.widget.customProperties.threshold))
+    if (Number(this.state.value) > Number(this.props.widget.customProperties.threshold)){
       color = this.props.widget.customProperties.on_color;
-    else
+      opacity = this.props.widget.customProperties.on_color_opacity;
+    }
+    else{
       color = this.props.widget.customProperties.off_color;
+      opacity = this.props.widget.customProperties.off_color_opacity;
+    }
 
     let style = {
       backgroundColor: color,
+      opacity: opacity
     }
 
     return (
diff --git a/src/widget/widgets/line.js b/src/widget/widgets/line.js
index bee3112..e587f62 100644
--- a/src/widget/widgets/line.js
+++ b/src/widget/widgets/line.js
@@ -21,6 +21,7 @@ class WidgetLine extends Component {
   render() {
       const lineStyle = {
         borderColor: this.props.widget.customProperties.border_color,
+        opacity: this.props.widget.customProperties.border_color_opacity,
         transform: 'rotate(' + this.props.widget.customProperties.rotation + 'deg)',
         borderWidth: '' + this.props.widget.customProperties.border_width + 'px'
     };