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

converted EditWidgetColorControl

Browse source 
Signed-off-by: iripiri <ikoester@eonerc.rwth-aachen.de>
This commit is contained in:
Amir Nakhaei 2024-01-07 20:38:27 +01:00 • committed by al3xa23
parent 56bddc7c2c
commit 55a751d885
2 changed files with 89 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,112 +0,0 @@
/**
* This file is part of VILLASweb.
*
* VILLASweb is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* VILLASweb is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import React, { Component } from 'react';
import { Form, Container, Row, Col, OverlayTrigger, Tooltip, Button} from 'react-bootstrap';
import ColorPicker from '../../common/color-picker'
import Icon from "../../common/icon";
// schemeCategory20 no longer available in d3
class EditWidgetColorControl extends Component {
constructor(props) {
super(props);
this.state = {
color: null,
opacity: null,
showColorPicker: false,
originalColor: null
};
}
static getDerivedStateFromProps(props, state){
let parts = props.controlId.split('.');
let isCustomProperty = true;
if (parts.length === 1){
isCustomProperty = false;
}
let color = (isCustomProperty ? props.widget[parts[0]][parts[1]] : props.widget[props.controlId]);
let opacity = (isCustomProperty ? props.widget[parts[0]][parts[1] + "_opacity"] : props.widget[props.controlId + "_opacity"]);
return {
color: color,
opacity: opacity,
};
}
openColorPicker = () =>{
this.setState({showColorPicker: true, originalColor: this.state.color});
}
closeColorPickerEditModal = (data) => {
this.setState({showColorPicker: false})
if(typeof data === 'undefined'){
this.setState({ color: this.state.originalColor });
} else {
// color picker with result data {hexcolor, opacity}
this.setState({color: data.hexcolor, opacity: data.opacity})
this.props.handleChange({target: { id: this.props.controlId, value: data.hexcolor} })
this.props.handleChange({target: { id: this.props.controlId + "_opacity", value: data.opacity} })
}
}
render() {
let style = {
backgroundColor: this.state.color,
opacity: this.state.opacity,
width: '80px',
height: '40px',
}
let tooltipText = "Change color and opacity";
if(this.props.disableOpacity){
tooltipText = "Change border color";
}
return ( <Container style={this.props.style}>
<Row>
<Col>
<Form.Label>{this.props.label}</Form.Label>
</Col>
<Col>
<div className='section-buttons-group-right'>
<OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}> {tooltipText} </Tooltip>} >
<Button style={style} onClick={this.openColorPicker.bind(this)} >
<Icon icon="paint-brush"/>
</Button>
</OverlayTrigger>
</div>
<ColorPicker
show={this.state.showColorPicker}
onClose={(data) => this.closeColorPickerEditModal(data)}
hexcolor={this.state.color}
opacity={this.state.opacity}
disableOpacity={this.props.disableOpacity}
/>
</Col>
</Row>
</Container>
);
}
}
export default EditWidgetColorControl;

89
src/widget/edit-widget/edit-widget-color-control.jsx Normal file
View file

@ -0,0 +1,89 @@
import React, { useState, useEffect } from 'react';
import { Form, Container, Row, Col, OverlayTrigger, Tooltip, Button} from 'react-bootstrap';
import ColorPicker from '../../common/color-picker';
import Icon from "../../common/icon";
const EditWidgetColorControl = (props) => {
const [color, setColor] = useState(null);
const [opacity, setOpacity] = useState(null);
const [showColorPicker, setShowColorPicker] = useState(false);
const [originalColor, setOriginalColor] = useState(null);
useEffect(() => {
const parts = props.controlId.split('.');
const isCustomProperty = parts.length !== 1;
const newColor = isCustomProperty ?
props.widget[parts[0]][parts[1]] :
props.widget[props.controlId];
const newOpacity = isCustomProperty ?
props.widget[parts[0]][parts[1] + "_opacity"] :
props.widget[props.controlId + "_opacity"];
setColor(newColor);
setOpacity(newOpacity);
}, [props.controlId, props.widget]);
const openColorPicker = () => {
setShowColorPicker(true);
setOriginalColor(color);
};
const closeColorPickerEditModal = (data) => {
setShowColorPicker(false);
if (data === undefined) {
setColor(originalColor);
} else {
setColor(data.hexcolor);
setOpacity(data.opacity);
props.handleChange({ target: { id: props.controlId, value: data.hexcolor } });
props.handleChange({ target: { id: props.controlId + "_opacity", value: data.opacity } });
}
};
const style = {
backgroundColor: color,
opacity: opacity,
width: '80px',
height: '40px',
};
const tooltipText = props.disableOpacity ? "Change border color" : "Change color and opacity";
return (
<Container style={props.style}>
<Row>
<Col>
<Form.Label>{props.label}</Form.Label>
</Col>
<Col>
<div className='section-buttons-group-right'>
<OverlayTrigger
key={0}
placement={'right'}
overlay={
<Tooltip id={`tooltip-${"color"}`}>
{tooltipText}
</Tooltip>
}
>
<Button style={style} onClick={openColorPicker}>
<Icon icon="paint-brush" />
</Button>
</OverlayTrigger>
</div>
<ColorPicker
show={showColorPicker}
onClose={closeColorPickerEditModal}
hexcolor={color}
opacity={opacity}
disableOpacity={props.disableOpacity}
/>
</Col>
</Row>
</Container>
);
};
export default EditWidgetColorControl;