mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
WIP: replacing current color choosing mechanisms with a color picker #251
This commit is contained in:
Laura Fuentes Grau
parent
ae53a16701
commit
3bd4c20365
4 changed files with 148 additions and 42 deletions
36
package-lock.json
generated
36
package-lock.json
generated
|
|
@ -1179,6 +1179,11 @@
|
|||
"@hapi/hoek": "^8.3.0"
|
||||
}
|
||||
},
|
||||
"@icons/material": {
|
||||
"version": "0.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
|
||||
"integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw=="
|
||||
},
|
||||
"@jest/console": {
|
||||
"version": "24.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
|
||||
|
|
@ -8510,6 +8515,11 @@
|
|||
"object-visit": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"material-colors": {
|
||||
"version": "1.2.6",
|
||||
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
|
||||
"integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
|
||||
},
|
||||
"md5.js": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
|
||||
|
|
@ -11316,6 +11326,19 @@
|
|||
"resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-5.0.1.tgz",
|
||||
"integrity": "sha512-cN2tkxBWizhPQ2JHfe0aUSJtmMthKA17NZkTElpiQ2snQAAi1hssXZ2fv88rAPNNvG5ss4t0PbOZT0TIl9Lk3Q=="
|
||||
},
|
||||
"react-color": {
|
||||
"version": "2.18.1",
|
||||
"resolved": "https://registry.npmjs.org/react-color/-/react-color-2.18.1.tgz",
|
||||
"integrity": "sha512-X5XpyJS6ncplZs74ak0JJoqPi+33Nzpv5RYWWxn17bslih+X7OlgmfpmGC1fNvdkK7/SGWYf1JJdn7D2n5gSuQ==",
|
||||
"requires": {
|
||||
"@icons/material": "^0.2.4",
|
||||
"lodash": "^4.17.11",
|
||||
"material-colors": "^1.2.1",
|
||||
"prop-types": "^15.5.10",
|
||||
"reactcss": "^1.2.0",
|
||||
"tinycolor2": "^1.4.1"
|
||||
}
|
||||
},
|
||||
"react-contexify": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/react-contexify/-/react-contexify-4.1.1.tgz",
|
||||
|
|
@ -11847,6 +11870,14 @@
|
|||
"prop-types": "^15.6.2"
|
||||
}
|
||||
},
|
||||
"reactcss": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
|
||||
"integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
|
||||
"requires": {
|
||||
"lodash": "^4.0.1"
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
|
||||
|
|
@ -13796,6 +13827,11 @@
|
|||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||
},
|
||||
"tinycolor2": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
|
||||
"integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
|
||||
},
|
||||
"tmp": {
|
||||
"version": "0.0.33",
|
||||
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
"react": "^16.13.1",
|
||||
"react-bootstrap": "^1.2.2",
|
||||
"react-collapse": "^5.0.1",
|
||||
"react-color": "^2.18.1",
|
||||
"react-contexify": "^4.1.1",
|
||||
"react-d3": "^0.4.0",
|
||||
"react-dnd": "^10.0.2",
|
||||
|
|
|
|||
79
src/widget/edit-widget/color-picker.js
Normal file
79
src/widget/edit-widget/color-picker.js
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
/**
|
||||
* 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 from 'react';
|
||||
import { SketchPicker } from 'react-color';
|
||||
import Dialog from '../../common/dialogs/dialog';
|
||||
|
||||
|
||||
class ColorPicker extends React.Component {
|
||||
valid = true;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
color: 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]);
|
||||
|
||||
return {
|
||||
color: color
|
||||
};
|
||||
}
|
||||
|
||||
handleChangeComplete = (color) => {
|
||||
this.setState({ color: color.hex });
|
||||
};
|
||||
|
||||
onClose = canceled => {
|
||||
if (canceled) {
|
||||
if (this.props.onClose != null) {
|
||||
this.props.onClose();
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.valid && this.props.onClose != null) {
|
||||
this.props.onClose(this.state.color);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return <Dialog show={this.props.show} title='Color Picker' buttonTitle='Save' onClose={(c) => this.onClose(c)} valid={true}>
|
||||
<form>
|
||||
<SketchPicker
|
||||
color={this.state.color}
|
||||
onChangeComplete={ this.handleChangeComplete }
|
||||
width={"300"}
|
||||
/>
|
||||
|
||||
</form>
|
||||
</Dialog>;
|
||||
}
|
||||
}
|
||||
|
||||
export default ColorPicker;
|
||||
|
|
@ -16,10 +16,12 @@
|
|||
******************************************************************************/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { FormGroup, Col, Row, FormCheck, FormLabel } from 'react-bootstrap';
|
||||
import classNames from 'classnames';
|
||||
import { FormGroup, OverlayTrigger, Tooltip , FormLabel, Button } from 'react-bootstrap';
|
||||
import { scaleOrdinal } from 'd3-scale';
|
||||
import {schemeCategory10} from 'd3-scale-chromatic'
|
||||
import {schemeCategory10} from 'd3-scale-chromatic';
|
||||
import ColorPicker from './color-picker'
|
||||
import Icon from "../../common/icon";
|
||||
|
||||
// schemeCategory20 no longer available in d3
|
||||
|
||||
class EditWidgetColorControl extends Component {
|
||||
|
|
@ -38,9 +40,8 @@ class EditWidgetColorControl extends Component {
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
widget: {
|
||||
|
||||
}
|
||||
widget: {},
|
||||
showColorPicker: false
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -50,47 +51,36 @@ class EditWidgetColorControl extends Component {
|
|||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
openColorPicker = () =>{
|
||||
this.setState({showColorPicker: true})
|
||||
}
|
||||
|
||||
let parts = this.props.controlId.split('.');
|
||||
let isCustomProperty = true;
|
||||
if (parts.length === 1){
|
||||
isCustomProperty = false;
|
||||
closeEditModal = (data) => {
|
||||
this.setState({showColorPicker: false})
|
||||
if(data){
|
||||
this.props.handleChange({target: { id: this.props.controlId, value: data}});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const currentColor = this.state.widget[this.props.controlId];
|
||||
|
||||
return (
|
||||
<FormGroup bsclass="color-control">
|
||||
<Row>
|
||||
<Col className={FormLabel} style={{whiteSpace: 'nowrap' }} sm={3}>
|
||||
{ this.props.label }
|
||||
</Col>
|
||||
<Col sm={10} bsclass='colors-column'>
|
||||
{
|
||||
EditWidgetColorControl.ColorPalette.map( (color, idx ) => {
|
||||
let colorStyle = {
|
||||
background: color,
|
||||
borderColor: color
|
||||
};
|
||||
<FormGroup>
|
||||
<FormLabel>{this.props.label}</FormLabel>
|
||||
|
||||
let checkedClass = classNames({
|
||||
'checked': idx === (isCustomProperty ? this.state.widget[parts[0]][parts[1]] : this.state.widget[this.props.controlId])
|
||||
});
|
||||
<div className='section-buttons-group-right'>
|
||||
<OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}> Change color </Tooltip>} >
|
||||
<Button key={2} style={{ width: '260px', height: '40px', color:{currentColor} }} onClick={this.openColorPicker.bind(this)} >
|
||||
<Icon icon="paint-brush"/>
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
</div>
|
||||
|
||||
return (<FormCheck
|
||||
type='radio'
|
||||
key={idx}
|
||||
name={this.props.label}
|
||||
style={colorStyle}
|
||||
className={checkedClass}
|
||||
value={idx}
|
||||
inline
|
||||
defaultChecked={isCustomProperty ? this.state.widget[parts[0]][parts[1]] ===idx: this.state.widget[this.props.controlId] === idx}
|
||||
onChange={(e) => this.props.handleChange({target: { id: this.props.controlId, value: idx}})} />)
|
||||
}
|
||||
)
|
||||
}
|
||||
</Col>
|
||||
</Row>
|
||||
</FormGroup> )
|
||||
<ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} />
|
||||
</FormGroup>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue