Commit 1430c650 authored by Laura Fuentes Grau's avatar Laura Fuentes Grau

Opacity now changeable through color picker #251

parent 45d7e554
......@@ -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"}
/>
......
......@@ -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>
......
......@@ -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':
......
......@@ -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;
......
......@@ -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 (
......
......@@ -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 (
......
......@@ -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'
};
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment