From 1430c650ae3bf01458a0dee2b186cc2fd9854461 Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau 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 this.onClose(c)} valid={true}>
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 ( {this.props.label}
- Change color } > + {tooltipText} } > 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( handleChange(e)} />, 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' };