Commit 45d7e554 authored by Laura Fuentes Grau's avatar Laura Fuentes Grau

Color Picker now works for widgets using edit-widget-color-control #251

parent 3bd4c203
......@@ -27,25 +27,27 @@ class ColorPicker extends React.Component {
super(props);
this.state = {
color: null
widget: {}
};
}
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
widget: props.widget
};
}
handleChangeComplete = (color) => {
this.setState({ color: color.hex });
let parts = this.props.controlId.split('.');
let isCustomProperty = true;
if (parts.length === 1){
isCustomProperty = false;
}
let temp = this.state.widget;
isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex;
this.setState({ widget: temp });
};
onClose = canceled => {
......@@ -58,15 +60,20 @@ class ColorPicker extends React.Component {
}
if (this.valid && this.props.onClose != null) {
this.props.onClose(this.state.color);
this.props.onClose(this.state.widget);
}
};
render() {
let parts = this.props.controlId.split('.');
let isCustomProperty = true;
if (parts.length === 1){
isCustomProperty = false;
}
return <Dialog show={this.props.show} title='Color Picker' buttonTitle='Save' onClose={(c) => this.onClose(c)} valid={true}>
<form>
<SketchPicker
color={this.state.color}
color={isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId]}
onChangeComplete={ this.handleChangeComplete }
width={"300"}
/>
......
......@@ -17,8 +17,6 @@
import React, { Component } from 'react';
import { FormGroup, OverlayTrigger, Tooltip , FormLabel, Button } from 'react-bootstrap';
import { scaleOrdinal } from 'd3-scale';
import {schemeCategory10} from 'd3-scale-chromatic';
import ColorPicker from './color-picker'
import Icon from "../../common/icon";
......@@ -26,22 +24,13 @@ import Icon from "../../common/icon";
class EditWidgetColorControl extends Component {
static get ColorPalette() {
let colorCount = 0;
const colors = [];
const colorScale = scaleOrdinal(schemeCategory10);
while (colorCount < 10) { colors.push(colorScale(colorCount)); colorCount++; }
colors.unshift('#000', '#FFF'); // include black and white
return colors;
}
constructor(props) {
super(props);
this.state = {
widget: {},
showColorPicker: false
showColorPicker: false,
originalColor: null
};
}
......@@ -52,18 +41,44 @@ class EditWidgetColorControl extends Component {
}
openColorPicker = () =>{
this.setState({showColorPicker: true})
let parts = this.props.controlId.split('.');
let isCustomProperty = true;
if (parts.length === 1){
isCustomProperty = false;
}
let color = (isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]);
this.setState({showColorPicker: true, originalColor: color});
}
closeEditModal = (data) => {
this.setState({showColorPicker: false})
if(data){
this.props.handleChange({target: { id: this.props.controlId, value: data}});
if(typeof data === 'undefined'){
let parts = this.props.controlId.split('.');
let isCustomProperty = true;
if (parts.length === 1) {
isCustomProperty = false;
}
let temp = this.state.widget;
isCustomProperty ? temp[parts[0]][parts[1]] = this.state.originalColor : temp[this.props.controlId] = this.state.originalColor;
this.setState({ widget: temp });
}
}
render() {
const currentColor = this.state.widget[this.props.controlId];
let parts = this.props.controlId.split('.');
let isCustomProperty = true;
if (parts.length === 1){
isCustomProperty = false;
}
let color = (isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]);
let style = {
backgroundColor: color,
width: '260px',
height: '40px'
}
return (
<FormGroup>
......@@ -71,7 +86,7 @@ class EditWidgetColorControl extends Component {
<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)} >
<Button key={2} style={style} onClick={this.openColorPicker.bind(this)} >
<Icon icon="paint-brush"/>
</Button>
</OverlayTrigger>
......
......@@ -63,8 +63,8 @@ class WidgetFactory {
widget.minHeight = 5;
widget.width = 20;
widget.height = 20;
widget.customProperties.on_color = 6;
widget.customProperties.off_color = 8;
widget.customProperties.on_color = '#4287f5';
widget.customProperties.off_color = '#4287f5';
widget.customProperties.threshold = 0.5;
break;
case 'Value':
......@@ -102,7 +102,7 @@ class WidgetFactory {
widget.height = 35;
widget.name = 'Label';
widget.customProperties.textSize = 32;
widget.customProperties.fontColor = 0;
widget.customProperties.fontColor = '#4287f5';
widget.customProperties.resizeTopBottomLock = true;
break;
case 'Image':
......@@ -118,8 +118,8 @@ class WidgetFactory {
widget.minHeight = 50;
widget.width = 100;
widget.height = 100;
widget.customProperties.background_color = 1;
widget.customProperties.font_color = 0;
widget.customProperties.background_color = '#4287f5';
widget.customProperties.font_color = '#4287f5';
widget.customProperties.on_value = 1;
widget.customProperties.off_value = 0;
widget.customProperties.toggle = false;
......@@ -167,8 +167,8 @@ class WidgetFactory {
widget.minHeight = 50;
widget.width = 100;
widget.height = 100;
widget.customProperties.border_color = 0;
widget.customProperties.background_color = 9;
widget.customProperties.border_color = '#4287f5';
widget.customProperties.background_color = '#961520';
widget.customProperties.background_color_opacity = 0.5;
widget.z = 0;
break;
......@@ -183,7 +183,7 @@ class WidgetFactory {
case 'Line':
widget.height = 30;
widget.width = 150;
widget.customProperties.border_color = 0;
widget.customProperties.border_color = '#4287f5';
widget.customProperties.border_width = 2;
widget.customProperties.margin_top = 15;
widget.customProperties.rotation = 0;
......
......@@ -17,16 +17,13 @@
import React, { Component } from 'react';
import EditWidgetColorControl from '../edit-widget/edit-widget-color-control';
class WidgetBox extends Component {
render() {
let colors = EditWidgetColorControl.ColorPalette;
let colorStyle = {
borderColor: colors[this.props.widget.customProperties.border_color],
backgroundColor: colors[this.props.widget.customProperties.background_color],
borderColor: this.props.widget.customProperties.border_color,
backgroundColor: this.props.widget.customProperties.background_color,
opacity: this.props.widget.customProperties.background_color_opacity,
}
......
......@@ -17,13 +17,12 @@
import React, { Component } from 'react';
import EditWidgetColorControl from '../edit-widget/edit-widget-color-control';
class WidgetLabel extends Component {
render() {
const style = {
fontSize: this.props.widget.customProperties.textSize + 'px',
color: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.fontColor]
color: this.props.widget.customProperties.fontColor
};
return (
......
......@@ -17,7 +17,6 @@
import React, { Component } from 'react';
import EditWidgetColorControl from '../edit-widget/edit-widget-color-control';
class WidgetLamp extends Component {
constructor(props) {
......@@ -61,13 +60,12 @@ class WidgetLamp extends Component {
render() {
let colors = EditWidgetColorControl.ColorPalette;
let color;
if (Number(this.state.value) > Number(this.props.widget.customProperties.threshold))
color = colors[this.props.widget.customProperties.on_color];
color = this.props.widget.customProperties.on_color;
else
color = colors[this.props.widget.customProperties.off_color];
color = this.props.widget.customProperties.off_color;
let style = {
backgroundColor: color,
......
......@@ -17,12 +17,10 @@
import React, { Component } from 'react';
import EditWidgetColorControl from '../edit-widget/edit-widget-color-control';
class WidgetLine extends Component {
render() {
const lineStyle = {
borderColor: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.border_color],
borderColor: this.props.widget.customProperties.border_color,
transform: 'rotate(' + this.props.widget.customProperties.rotation + 'deg)',
borderWidth: '' + this.props.widget.customProperties.border_width + 'px'
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment