Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-16 00:00:03 +01:00
Code Issues Releases Wiki Activity

Box widget opacity now editable

Browse source
This commit is contained in:
Laura Fuentes Grau 2020-04-23 17:52:58 +02:00
parent 3c055ebeaa
commit ea42510f39
4 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/widget/edit-widget/edit-widget-control-creator.js
View file

@ -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':

20
src/widget/edit-widget/edit-widget-number-control.js
View file

@ -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>
);
}

1
src/widget/widget-factory.js
View file

@ -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':

2
src/widget/widgets/box.js
View file

@ -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 (