Commit ea42510f authored by Laura Fuentes Grau's avatar Laura Fuentes Grau

Box widget opacity now editable

parent 3c055ebe
......@@ -129,7 +129,8 @@ export default function CreateControls(widgetType = null, widget = null, session
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={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'} defaultValue={0.5} handleChange={(e) => handleChange(e)} />
);
break;
case 'Label':
......
......@@ -25,21 +25,25 @@ class EditWidgetNumberControl extends Component {
this.state = {
widget: {
customProperties:{}
}
};
}
};
}
static getDerivedStateFromProps(props, state){
return{
widget: props.widget
};
}
widget: props.widget
};
}
render() {
render() {
let step = 1;
if(this.props.controlId ==='customProperties.background_color_opacity'){
step = 0.1;
}
return (
<FormGroup controlId={this.props.controlId}>
<FormLabel>{this.props.label}</FormLabel>
<FormControl type="number" step="any" value={this.state.widget[this.props.controlId]} onChange={e => this.props.handleChange(e)} />
<FormControl type="number" step={step} value={this.state.widget[this.props.controlId]} onChange={e => this.props.handleChange(e)} />
</FormGroup>
);
}
......
......@@ -170,6 +170,7 @@ class WidgetFactory {
widget.width = 100;
widget.height = 100;
widget.customProperties.border_color = 0;
widget.customProperties.background_color_opacity = 0.5;
widget.z = 0;
break;
case 'HTML':
......
......@@ -27,7 +27,7 @@ class WidgetBox extends Component {
let colorStyle = {
borderColor: colors[this.props.widget.customProperties.border_color],
backgroundColor: colors[this.props.widget.customProperties.background_color],
opacity: this.props.widget.customProperties.background_color_opacity
opacity: this.props.widget.customProperties.background_color_opacity,
}
return (
......
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