mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
Merge branch 'adding-color-picker' into develop
# Conflicts: # src/widget/widget-factory.js # src/widget/widgets/line.js
This commit is contained in:
Sonja Happ
commit
eb3c942db7
12 changed files with 423 additions and 118 deletions
36
package-lock.json
generated
36
package-lock.json
generated
|
|
@ -1262,6 +1262,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",
|
||||
|
|
@ -8272,6 +8277,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",
|
||||
|
|
@ -11032,6 +11042,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",
|
||||
|
|
@ -11533,6 +11556,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",
|
||||
|
|
@ -13446,6 +13477,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",
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
"react-bootstrap": "^1.3.0",
|
||||
"react-bootstrap-time-picker": "^2.0.1",
|
||||
"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",
|
||||
|
|
|
|||
130
src/widget/edit-widget/color-picker.js
Normal file
130
src/widget/edit-widget/color-picker.js
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
/**
|
||||
* 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 = {
|
||||
widget: {}
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props, state){
|
||||
|
||||
return {
|
||||
widget: props.widget
|
||||
};
|
||||
}
|
||||
|
||||
hexToRgb = (hex,opacity) => {
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16),
|
||||
a: opacity
|
||||
} : null;
|
||||
}
|
||||
|
||||
handleChangeComplete = (color) => {
|
||||
|
||||
let temp = this.state.widget;
|
||||
|
||||
if(this.props.controlId === 'strokeStyle'){
|
||||
temp.customProperties.zones[this.props.zoneIndex]['strokeStyle'] = color.hex;
|
||||
}
|
||||
else{
|
||||
let parts = this.props.controlId.split('.');
|
||||
let isCustomProperty = true;
|
||||
|
||||
if (parts.length === 1){
|
||||
isCustomProperty = false;
|
||||
}
|
||||
|
||||
isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex;
|
||||
isCustomProperty ? temp[parts[0]][parts[1] + "_opacity"] = color.rgb.a : temp[this.props.controlId +"_opacity"] = color.rgb.a;
|
||||
}
|
||||
|
||||
this.setState({ widget: temp });
|
||||
};
|
||||
|
||||
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.widget);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
let disableOpacity = false;
|
||||
let hexColor;
|
||||
let opacity = 1;
|
||||
let parts = this.props.controlId.split('.');
|
||||
let isCustomProperty = true;
|
||||
if (parts.length === 1){
|
||||
isCustomProperty = false;
|
||||
}
|
||||
|
||||
if((this.state.widget.type === "Box" && parts[1] === "border_color") || this.props.controlId === 'strokeStyle'){
|
||||
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'];
|
||||
}
|
||||
}
|
||||
else{
|
||||
hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId];
|
||||
opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"];
|
||||
|
||||
}
|
||||
|
||||
|
||||
let rgbColor = this.hexToRgb(hexColor, opacity);
|
||||
|
||||
|
||||
|
||||
return <Dialog show={this.props.show} title='Color Picker' buttonTitle='Save' onClose={(c) => this.onClose(c)} valid={true}>
|
||||
<form>
|
||||
<SketchPicker
|
||||
color={rgbColor}
|
||||
disableAlpha={disableOpacity}
|
||||
onChangeComplete={ this.handleChangeComplete }
|
||||
width={"300"}
|
||||
/>
|
||||
|
||||
</form>
|
||||
</Dialog>;
|
||||
}
|
||||
}
|
||||
|
||||
export default ColorPicker;
|
||||
|
|
@ -16,31 +16,21 @@
|
|||
******************************************************************************/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { FormGroup, Col, Row, FormCheck, FormLabel } from 'react-bootstrap';
|
||||
import classNames from 'classnames';
|
||||
import { scaleOrdinal } from 'd3-scale';
|
||||
import {schemeCategory10} from 'd3-scale-chromatic'
|
||||
import { FormGroup, OverlayTrigger, Tooltip , FormLabel, Button } from 'react-bootstrap';
|
||||
import ColorPicker from './color-picker'
|
||||
import Icon from "../../common/icon";
|
||||
|
||||
// schemeCategory20 no longer available in d3
|
||||
|
||||
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: {
|
||||
|
||||
}
|
||||
widget: {},
|
||||
showColorPicker: false,
|
||||
originalColor: null
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -50,47 +40,69 @@ class EditWidgetColorControl extends Component {
|
|||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
openColorPicker = () =>{
|
||||
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(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() {
|
||||
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 opacity = (isCustomProperty ? this.props.widget[parts[0]][parts[1] + "_opacity"] : this.props.widget[this.props.controlId + "_opacity"]);
|
||||
let style = {
|
||||
backgroundColor: color,
|
||||
opacity: opacity,
|
||||
width: '260px',
|
||||
height: '40px'
|
||||
}
|
||||
|
||||
let tooltipText = "Change color and opacity";
|
||||
if(this.state.widget.type === "Box" && parts[1] === "border_color"){
|
||||
tooltipText = "Change border color";
|
||||
}
|
||||
|
||||
|
||||
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"}`}> {tooltipText} </Tooltip>} >
|
||||
<Button key={2} style={style} 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>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,12 +16,11 @@
|
|||
******************************************************************************/
|
||||
|
||||
import React from 'react';
|
||||
import { FormGroup, FormLabel, Button } from 'react-bootstrap';
|
||||
|
||||
import { FormGroup, FormControl, Table, FormLabel, Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
|
||||
import ColorPicker from './color-picker'
|
||||
|
||||
import Icon from '../../common/icon';
|
||||
import Table from '../../common/table';
|
||||
import TableColumn from '../../common/table-column';
|
||||
import {Collapse} from 'react-collapse';
|
||||
|
||||
class EditWidgetColorZonesControl extends React.Component {
|
||||
constructor(props) {
|
||||
|
|
@ -33,7 +32,12 @@ class EditWidgetColorZonesControl extends React.Component {
|
|||
zones: []
|
||||
}
|
||||
},
|
||||
selectedZones: []
|
||||
selectedZone: null,
|
||||
selectedIndex: null,
|
||||
showColorPicker: false,
|
||||
originalColor: null,
|
||||
minValue: 0,
|
||||
maxValue: 100
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -46,24 +50,39 @@ class EditWidgetColorZonesControl extends React.Component {
|
|||
addZone = () => {
|
||||
// add row
|
||||
const widget = this.state.widget;
|
||||
widget.customProperties.zones.push({ strokeStyle: 'ffffff', min: 0, max: 100 });
|
||||
widget.customProperties.zones.push({ strokeStyle: '#d3cbcb', min: 0, max: 100 });
|
||||
|
||||
if(widget.customProperties.zones.length > 0){
|
||||
let length = widget.customProperties.zones.length
|
||||
|
||||
this.setState({ widget });
|
||||
for(let i= 0 ; i < length; i++){
|
||||
widget.customProperties.zones[i].min = i* 100/length;
|
||||
widget.customProperties.zones[i].max = (i+1)* 100/length;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({ widget, selectedZone: null, selectedIndex: null });
|
||||
|
||||
this.sendEvent(widget);
|
||||
}
|
||||
|
||||
removeZones = () => {
|
||||
// remove zones
|
||||
const widget = this.state.widget;
|
||||
|
||||
let temp = this.state.widget;
|
||||
|
||||
this.state.selectedZones.forEach(row => {
|
||||
widget.customProperties.zones.splice(row, 1);
|
||||
});
|
||||
temp.customProperties.zones.splice(this.state.selectedIndex, 1);
|
||||
|
||||
this.setState({ selectedZones: [], widget });
|
||||
if(temp.customProperties.zones.length > 0){
|
||||
let length = temp.customProperties.zones.length
|
||||
|
||||
for(let i= 0 ; i < length; i++){
|
||||
temp.customProperties.zones[i].min = i* 100/length;
|
||||
temp.customProperties.zones[i].max = (i+1)* 100/length;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({widget: temp,selectedZone: null, selectedIndex: null});
|
||||
|
||||
this.sendEvent(widget);
|
||||
}
|
||||
|
||||
changeCell = (event, row, column) => {
|
||||
|
|
@ -83,6 +102,63 @@ class EditWidgetColorZonesControl extends React.Component {
|
|||
this.sendEvent(widget);
|
||||
}
|
||||
|
||||
editColorZone = (index) => {
|
||||
if(this.state.selectedIndex !== index){
|
||||
this.setState({selectedZone: this.state.widget.customProperties.zones[index], selectedIndex: index , minValue: this.state.widget.customProperties.zones[index].min, maxValue: this.state.widget.customProperties.zones[index].max});
|
||||
}
|
||||
else{
|
||||
this.setState({selectedZone: null, selectedIndex: null});
|
||||
}
|
||||
}
|
||||
|
||||
openColorPicker = () =>{
|
||||
|
||||
let color = this.state.selectedZone.strokeStyle;
|
||||
|
||||
this.setState({showColorPicker: true, originalColor: color});
|
||||
}
|
||||
|
||||
closeEditModal = (data) => {
|
||||
this.setState({showColorPicker: false})
|
||||
if(typeof data === 'undefined'){
|
||||
|
||||
let temp = this.state.selectedZone;
|
||||
temp.strokeStyle = this.state.originalColor;
|
||||
|
||||
this.setState({ selectedZone : temp });
|
||||
}
|
||||
}
|
||||
|
||||
handleMinChange = (e) => {
|
||||
|
||||
if(e.target.value < 0) return;
|
||||
this.setState({minValue: e.target.value});
|
||||
|
||||
let temp = this.state.widget;
|
||||
temp.customProperties.zones[this.state.selectedIndex]['min'] = e.target.value;
|
||||
|
||||
if(this.state.selectedIndex !== 0){
|
||||
temp.customProperties.zones[this.state.selectedIndex - 1]['max'] = e.target.value
|
||||
}
|
||||
|
||||
this.setState({ widget: temp });
|
||||
}
|
||||
|
||||
handleMaxChange = (e) => {
|
||||
|
||||
if(e.target.value > 100) return;
|
||||
this.setState({maxValue: e.target.value});
|
||||
|
||||
let temp = this.state.widget;
|
||||
temp.customProperties.zones[this.state.selectedIndex]['max'] = e.target.value;
|
||||
|
||||
if(this.state.selectedIndex !== this.state.widget.customProperties.zones.length -1){
|
||||
temp.customProperties.zones[this.state.selectedIndex + 1]['min'] = e.target.value
|
||||
}
|
||||
|
||||
this.setState({ widget: temp });
|
||||
}
|
||||
|
||||
sendEvent(widget) {
|
||||
// create event
|
||||
const event = {
|
||||
|
|
@ -95,37 +171,84 @@ class EditWidgetColorZonesControl extends React.Component {
|
|||
this.props.handleChange(event);
|
||||
}
|
||||
|
||||
checkedCell = (row, event) => {
|
||||
// update selected rows
|
||||
const selectedZones = this.state.selectedZones;
|
||||
|
||||
if (event.target.checked) {
|
||||
if (selectedZones.indexOf(row) === -1) {
|
||||
selectedZones.push(row);
|
||||
}
|
||||
} else {
|
||||
let index = selectedZones.indexOf(row);
|
||||
if (row > -1) {
|
||||
selectedZones.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({ selectedZones });
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
|
||||
let tempColor = 'FFFFFF';
|
||||
let collapse = false;
|
||||
if(this.state.selectedZone !== null){
|
||||
collapse = true;
|
||||
tempColor = this.state.selectedZone.strokeStyle;
|
||||
}
|
||||
|
||||
let pickerStyle = {
|
||||
backgroundColor: tempColor,
|
||||
width: '260px',
|
||||
height: '40px',
|
||||
marginTop: '20px'
|
||||
}
|
||||
|
||||
return <FormGroup>
|
||||
<FormLabel>Color zones</FormLabel>
|
||||
<Button onClick={this.addZone} style={{marginBottom: '10px', marginLeft: '120px'}} disabled={!this.props.widget.customProperties.colorZones}><Icon size='xs' icon="plus" /></Button>
|
||||
|
||||
<Table data={this.state.widget.customProperties.zones}>
|
||||
<TableColumn width="20" checkbox onChecked={this.checkedCell} />
|
||||
<TableColumn title="Color" dataKey="strokeStyle" inlineEditable onInlineChange={this.changeCell} />
|
||||
<TableColumn title="Minimum" dataKey="min" inlineEditable onInlineChange={this.changeCell} />
|
||||
<TableColumn title="Maximum" dataKey="max" inlineEditable onInlineChange={this.changeCell} />
|
||||
<div>
|
||||
{
|
||||
this.state.widget.customProperties.zones.map((zone, idx) => {
|
||||
let color = zone.strokeStyle;
|
||||
let width = (zone.max - zone.min)*(260/100);
|
||||
let style = {
|
||||
backgroundColor: color,
|
||||
width: width,
|
||||
height: '40px'
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (<Button
|
||||
style={style} key={idx} onClick={i => this.editColorZone(idx)} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="pen" /></Button>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
}
|
||||
</div>
|
||||
<Collapse isOpened={collapse} >
|
||||
<OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}>Change color</Tooltip>} >
|
||||
<Button key={0} style={pickerStyle} onClick={this.openColorPicker.bind(this)} >
|
||||
<Icon icon="paint-brush"/>
|
||||
</Button>
|
||||
</OverlayTrigger>
|
||||
<Table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Min:
|
||||
<FormControl
|
||||
type="number"
|
||||
step="any"
|
||||
placeholder="Min"
|
||||
value={this.state.minValue}
|
||||
onChange={e => this.handleMinChange(e)} />
|
||||
</td>
|
||||
<td>
|
||||
Max:
|
||||
<FormControl
|
||||
type="number"
|
||||
step="any"
|
||||
placeholder="Max"
|
||||
value={ this.state.maxValue}
|
||||
onChange={e => this.handleMaxChange(e)} />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
<Button onClick={this.addZone} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="plus" /> Add</Button>
|
||||
<Button onClick={this.removeZones} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="minus" /> Remove</Button>
|
||||
<Button onClick={this.removeZones}><Icon size='xs' icon="trash-alt" /></Button>
|
||||
</Collapse>
|
||||
|
||||
<ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} zoneIndex={this.state.selectedIndex} controlId={'strokeStyle'} />
|
||||
</FormGroup>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -122,7 +122,6 @@ export default function CreateControls(widgetType = null, widget = null, session
|
|||
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)} />,
|
||||
<EditWidgetNumberControl key={2} widget={widget} controlId={'customProperties.background_color_opacity'} label={'Background opacity (0.0 - 1.0)'} defaultValue={0.5} handleChange={(e) => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
case 'Label':
|
||||
|
|
|
|||
|
|
@ -63,8 +63,10 @@ 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.on_color_opacity = 1;
|
||||
widget.customProperties.off_color = '#4287f5';
|
||||
widget.customProperties.off_color_opacity = 1;
|
||||
widget.customProperties.threshold = 0.5;
|
||||
break;
|
||||
case 'Value':
|
||||
|
|
@ -102,7 +104,8 @@ class WidgetFactory {
|
|||
widget.height = 35;
|
||||
widget.name = 'Label';
|
||||
widget.customProperties.textSize = 32;
|
||||
widget.customProperties.fontColor = 0;
|
||||
widget.customProperties.fontColor = '#4287f5';
|
||||
widget.customProperties.fontColor_opacity = 1;
|
||||
widget.customProperties.resizeTopBottomLock = true;
|
||||
break;
|
||||
case 'Image':
|
||||
|
|
@ -118,8 +121,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,9 +170,10 @@ class WidgetFactory {
|
|||
widget.minHeight = 50;
|
||||
widget.width = 100;
|
||||
widget.height = 100;
|
||||
widget.customProperties.border_color = 0;
|
||||
widget.customProperties.background_color = 9;
|
||||
widget.customProperties.background_color_opacity = 0.5;
|
||||
widget.customProperties.border_color = '#4287f5';
|
||||
widget.customProperties.border_color_opacity = 1;
|
||||
widget.customProperties.background_color = '#961520';
|
||||
widget.customProperties.background_color_opacity = 1;
|
||||
widget.z = 0;
|
||||
break;
|
||||
/*case 'HTML':
|
||||
|
|
@ -183,7 +187,8 @@ class WidgetFactory {
|
|||
case 'Line':
|
||||
widget.height = 100;
|
||||
widget.width = 100;
|
||||
widget.customProperties.border_color = 0;
|
||||
widget.customProperties.border_color = '#4287f5';
|
||||
widget.customProperties.border_color_opacity = 1;
|
||||
widget.customProperties.border_width = 2;
|
||||
widget.customProperties.rotation = 0;
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -219,7 +219,7 @@ class WidgetGauge extends Component {
|
|||
const step = (maxValue - minValue) / 100;
|
||||
|
||||
zones = zones.map(zone => {
|
||||
return Object.assign({}, zone, { min: (zone.min * step) + +minValue, max: zone.max * step + +minValue, strokeStyle: '#' + zone.strokeStyle });
|
||||
return Object.assign({}, zone, { min: (zone.min * step) + +minValue, max: zone.max * step + +minValue, strokeStyle: zone.strokeStyle });
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,13 +17,13 @@
|
|||
|
||||
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,
|
||||
opacity: this.props.widget.customProperties.fontColor_opacity,
|
||||
};
|
||||
|
||||
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,16 +60,21 @@ class WidgetLamp extends Component {
|
|||
|
||||
render() {
|
||||
|
||||
let colors = EditWidgetColorControl.ColorPalette;
|
||||
let color;
|
||||
let opacity;
|
||||
|
||||
if (Number(this.state.value) > Number(this.props.widget.customProperties.threshold))
|
||||
color = colors[this.props.widget.customProperties.on_color];
|
||||
else
|
||||
color = colors[this.props.widget.customProperties.off_color];
|
||||
if (Number(this.state.value) > Number(this.props.widget.customProperties.threshold)){
|
||||
color = this.props.widget.customProperties.on_color;
|
||||
opacity = this.props.widget.customProperties.on_color_opacity;
|
||||
}
|
||||
else{
|
||||
color = this.props.widget.customProperties.off_color;
|
||||
opacity = this.props.widget.customProperties.off_color_opacity;
|
||||
}
|
||||
|
||||
let style = {
|
||||
backgroundColor: color,
|
||||
opacity: opacity
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -17,8 +17,6 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import EditWidgetColorControl from '../edit-widget/edit-widget-color-control';
|
||||
|
||||
class WidgetLine extends Component {
|
||||
// WidgetLine is newly created when widget props are changed and saved
|
||||
constructor(props) {
|
||||
|
|
@ -45,7 +43,7 @@ class WidgetLine extends Component {
|
|||
// or from the state (widget in edit mode)
|
||||
let width = this.props.widget.width;
|
||||
let height = this.props.widget.height;
|
||||
|
||||
|
||||
if (this.state.editing) {
|
||||
width = this.state.width;
|
||||
height = this.state.height;
|
||||
|
|
@ -83,7 +81,7 @@ class WidgetLine extends Component {
|
|||
|
||||
|
||||
const lineStyle = {
|
||||
stroke: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.border_color],
|
||||
stroke: '' + this.props.widget.customProperties.border_color,
|
||||
strokeWidth: '' + this.props.widget.customProperties.border_width + 'px'
|
||||
};
|
||||
|
||||
|
|
@ -93,4 +91,4 @@ class WidgetLine extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default WidgetLine;
|
||||
export default WidgetLine;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue