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

implement better way to disable color picker opacity

Browse source
This commit is contained in:
Laura Fuentes Grau 2020-12-30 21:01:21 +01:00
parent 826dc6a90a
commit f5ad08e888
3 changed files with 13 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/widget/edit-widget/color-picker.js
View file

@ -85,7 +85,7 @@ class ColorPicker extends React.Component {
};
render() {
let disableOpacity = false;
let hexColor;
let opacity = 1;
let parts = this.props.controlId.split('.');
@ -94,9 +94,6 @@ class ColorPicker extends React.Component {
isCustomProperty = false;
}
if((this.state.widget.type === "Box" && parts[1] === "border_color") || this.props.controlId === 'strokeStyle' || this.state.widget.type === "Button" && (parts[1] === "border_color" || parts[1] === "font_color")){
disableOpacity = true;
}
if(this.props.controlId === 'strokeStyle'){
if(typeof this.state.widget.customProperties.zones[this.props.zoneIndex] !== 'undefined'){
hexColor = this.state.widget.customProperties.zones[this.props.zoneIndex]['strokeStyle'];
@ -117,7 +114,7 @@ class ColorPicker extends React.Component {
<form>
<SketchPicker
color={rgbColor}
disableAlpha={disableOpacity}
disableAlpha={this.props.disableOpacity}
onChangeComplete={ this.handleChangeComplete }
width={"300"}
/>

4
src/widget/edit-widget/edit-widget-color-control.js
View file

@ -82,7 +82,7 @@ class EditWidgetColorControl extends Component {
}
let tooltipText = "Change color and opacity";
if(this.state.widget.type === "Box" && parts[1] === "border_color" || this.state.widget.type === "Button" && (parts[1] === "border_color" || parts[1] === "font_color")){
if(this.props.disableOpacity){
tooltipText = "Change border color";
}
@ -99,7 +99,7 @@ class EditWidgetColorControl extends Component {
</OverlayTrigger>
</div>
<ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} />
<ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} disableOpacity={this.props.disableOpacity}/>
</FormGroup>
)

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

@ -62,8 +62,8 @@ export default function CreateControls(widgetType = null, widget = null, session
DialogControls.push(
<EditWidgetSignalControl key={0} widget={widget} controlId={'signalIDs'} signals={signals} handleChange={(e) => handleChange(e)} direction={'out'}/>,
<EditWidgetTextControl key={1} widget={widget} controlId={'customProperties.threshold'} label={'Threshold'} placeholder={'0.5'} handleChange={e => handleChange(e)} />,
<EditWidgetColorControl key={2} widget={widget} controlId={'customProperties.on_color'} label={'Color On'} handleChange={(e) => handleChange(e)} />,
<EditWidgetColorControl key={3} widget={widget} controlId={'customProperties.off_color'} label={'Color Off'} handleChange={(e) => handleChange(e)} />,
<EditWidgetColorControl key={2} widget={widget} controlId={'customProperties.on_color'} label={'Color On'} handleChange={(e) => handleChange(e)} disableOpacity={false}/>,
<EditWidgetColorControl key={3} widget={widget} controlId={'customProperties.off_color'} label={'Color Off'} handleChange={(e) => handleChange(e)} disableOpacity={false}/>,
);
break;
case 'Plot':
@ -116,22 +116,22 @@ export default function CreateControls(widgetType = null, widget = null, session
<EditWidgetCheckboxControl key={2} widget={widget} controlId={'customProperties.toggle'} input text="Toggle" handleChange={e => handleChange(e)} />,
<EditWidgetNumberControl key={3} widget={widget} controlId={'customProperties.on_value'} label={'On Value'} defaultValue={1} handleChange={(e) => handleChange(e)} />,
<EditWidgetNumberControl key={4} widget={widget} controlId={'customProperties.off_value'} label={'Off Value'} defaultValue={0} handleChange={(e) => handleChange(e)} />,
<EditWidgetColorControl key={5} widget={widget} controlId={'customProperties.background_color'} label={'Background Color and Opacity'} handleChange={(e) => handleChange(e)} />,
<EditWidgetColorControl key={6} widget={widget} controlId={'customProperties.border_color'} label={'Border Color'} handleChange={(e) => handleChange(e)} />,
<EditWidgetColorControl key={7} widget={widget} controlId={'customProperties.font_color'} label={'Font Color'} handleChange={(e) => handleChange(e)} />,
<EditWidgetColorControl key={5} widget={widget} controlId={'customProperties.background_color'} label={'Background Color and Opacity'} handleChange={(e) => handleChange(e)} disableOpacity={false}/>,
<EditWidgetColorControl key={6} widget={widget} controlId={'customProperties.border_color'} label={'Border Color'} handleChange={(e) => handleChange(e)} disableOpacity={true}/>,
<EditWidgetColorControl key={7} widget={widget} controlId={'customProperties.font_color'} label={'Font Color'} handleChange={(e) => handleChange(e)} disableOpacity={true}/>,
);
break;
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={0} widget={widget} controlId={'customProperties.background_color'} label={'Background Color and Opacity'} handleChange={e => handleChange(e)} disableOpacity={false}/>,
<EditWidgetColorControl key={1} widget={widget} controlId={'customProperties.border_color'} label={'Border Color'} handleChange={(e) => handleChange(e)} disableOpacity={true}/>,
);
break;
case 'Label':
DialogControls.push(
<EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} />,
<EditWidgetTextSizeControl key={1} widget={widget} handleChange={e => handleChange(e)} />,
<EditWidgetColorControl key={2} widget={widget} controlId={'customProperties.fontColor'} label={'Text color'} handleChange={e => handleChange(e)} />
<EditWidgetColorControl key={2} widget={widget} controlId={'customProperties.fontColor'} label={'Text color'} handleChange={e => handleChange(e)} disableOpacity={false}/>
);
break;
/*case 'HTML':
@ -155,7 +155,7 @@ export default function CreateControls(widgetType = null, widget = null, session
break;
case 'Line':
DialogControls.push(
<EditWidgetColorControl key={0} widget={widget} controlId={'customProperties.border_color'} label={'Line color'} handleChange={(e) => handleChange(e)} />,
<EditWidgetColorControl key={0} widget={widget} controlId={'customProperties.border_color'} label={'Line color'} handleChange={(e) => handleChange(e)} disableOpacity={false}/>,
<EditWidgetNumberControl key={1} widget={widget} controlId={'customProperties.rotation'} label={'Rotation (degrees)'} defaultValue={0} handleChange={(e) => handleChange(e)} />,
<EditWidgetNumberControl key={2} widget={widget} controlId={'customProperties.border_width'} label={'Line width'} defaultValue={0} handleChange={(e) => handleChange(e)} />
);