mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-16 00:00:03 +01:00
Box widget opacity now editable
This commit is contained in:
parent
3c055ebeaa
commit
ea42510f39
4 changed files with 16 additions and 10 deletions
|
@ -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 (
|
||||
|
|
Loading…
Add table
Reference in a new issue