diff --git a/src/widget/edit-widget/edit-widget-control-creator.js b/src/widget/edit-widget/edit-widget-control-creator.js index 78d1b28..ae457b7 100644 --- a/src/widget/edit-widget/edit-widget-control-creator.js +++ b/src/widget/edit-widget/edit-widget-control-creator.js @@ -129,7 +129,8 @@ export default function CreateControls(widgetType = null, widget = null, session case 'Box': DialogControls.push( handleChange(e)} />, - handleChange(e)} /> + handleChange(e)} />, + handleChange(e)} /> ); break; case 'Label': diff --git a/src/widget/edit-widget/edit-widget-number-control.js b/src/widget/edit-widget/edit-widget-number-control.js index 7b4ffa5..5354863 100644 --- a/src/widget/edit-widget/edit-widget-number-control.js +++ b/src/widget/edit-widget/edit-widget-number-control.js @@ -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 ( {this.props.label} - this.props.handleChange(e)} /> + this.props.handleChange(e)} /> ); } diff --git a/src/widget/widget-factory.js b/src/widget/widget-factory.js index 7c6f416..eaa80d9 100644 --- a/src/widget/widget-factory.js +++ b/src/widget/widget-factory.js @@ -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': diff --git a/src/widget/widgets/box.js b/src/widget/widgets/box.js index 758dec3..ff470f3 100644 --- a/src/widget/widgets/box.js +++ b/src/widget/widgets/box.js @@ -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 (