Button color selection

src/components/dialog/edit-widget-color-control.js

@@ -0,0 +1,70 @@
+/**
+ * File: edit-widget-color-control.js
+ * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
+ * Date: 24.04.2017
+ * Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
+ *   This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
+ *   Unauthorized copying of this file, via any medium is strictly prohibited.
+ **********************************************************************************/
+
+import React, { Component } from 'react';
+import { FormGroup, Col, Row, Radio, ControlLabel } from 'react-bootstrap';
+import classNames from 'classnames';
+import { scaleOrdinal, schemeCategory20 } from 'd3-scale';
+
+class EditWidgetColorControl extends Component {
+
+  static get ColorPalette() {
+    let colorCount = 0;
+    const colors = [];
+    const colorScale = scaleOrdinal(schemeCategory20);
+    while (colorCount < 20) { colors.push(colorScale(colorCount)); colorCount++; }
+    colors.unshift('#000', '#FFF'); // include black and white
+
+    return colors;
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      widget: {}
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+      // Update state's widget with props
+    this.setState({ widget: nextProps.widget });
+  }
+
+  render() {
+
+    return (
+      <FormGroup bsClass="color-control">
+        <Row>
+          <Col componentClass={ControlLabel} style={{whiteSpace: 'nowrap' }} sm={2}>
+            { this.props.label }
+          </Col>
+          <Col sm={10} bsClass='colors-column'>
+          {
+            EditWidgetColorControl.ColorPalette.map( (color, idx ) => {
+                let colorStyle = {
+                  background: color,
+                  borderColor: color
+                };
+
+                let checkedClass = classNames({
+                  'checked': idx === this.state.widget[this.props.controlId]
+                });
+                
+                return (<Radio key={idx} name={this.props.controlId} style={colorStyle} className={checkedClass} value={idx} inline onChange={(e) => this.props.handleChange({target: { id: this.props.controlId, value: idx}})} />)
+              }
+            )
+          }
+          </Col>
+        </Row>
+      </FormGroup> )
+  }
+}
+
+export default EditWidgetColorControl;

src/components/dialog/edit-widget.js

@@ -13,6 +13,7 @@ import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 import Dialog from './dialog';
 
 import EditWidgetTextControl from './edit-widget-text-control';
+import EditWidgetColorControl from './edit-widget-color-control';
 import EditWidgetTimeControl from './edit-widget-time-control';
 import EditImageWidgetControl from './edit-widget-image-control';
 import EditWidgetSimulatorControl from './edit-widget-simulator-control';
@@ -113,6 +114,11 @@ class EditWidgetDialog extends Component {
         dialogControls.push(
           <EditWidgetOrientation key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
         )
+      } else if (this.props.widget.type === 'Button') {
+        dialogControls.push(
+          <EditWidgetColorControl key={1} widget={this.state.temporal} controlId={'background_color'} label={'Background'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />,
+          <EditWidgetColorControl key={2} widget={this.state.temporal} controlId={'font_color'} label={'Font color'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />
+        )
       }
     }
 

src/components/widget-button.js

@@ -9,6 +9,8 @@
 
 import React, { Component } from 'react';
 
+import EditWidgetColorControl from './dialog/edit-widget-color-control';
+
 class WidgetButton extends Component {
 
   action(e) {
@@ -17,12 +19,21 @@ class WidgetButton extends Component {
   }
 
   render() {
+
+    let colors = EditWidgetColorControl.ColorPalette;
+
+    let colorStyle = {
+      background: colors[this.props.widget.background_color],
+      color: colors[this.props.widget.font_color],
+      borderColor: colors[this.props.widget.font_color]
+    }
+    
     return (
       <div className="button-widget full">
           { this.props.editing ? (
-                <button className="full btn btn-default" type="button" disabled onClick={ this.action } >{this.props.widget.name}</button>
+                <button className="full btn btn-default" type="button" disabled onClick={ this.action } style={colorStyle}>{this.props.widget.name}</button>
             ) : (
-                <button className="full btn btn-default" type="button" onClick={ this.action } >{this.props.widget.name}</button>
+                <button className="full btn btn-default" type="button" onClick={ this.action } style={colorStyle}>{this.props.widget.name}</button>
             )
           }
       </div>

src/components/widget-factory.js

@@ -77,6 +77,8 @@ class WidgetFactory {
                 widget.minHeight = 50;
                 widget.width = 100;
                 widget.height = 100;
+                widget.background_color = 1;
+                widget.font_color = 0;
                 break;
             case 'NumberInput':
                 widget.minWidth = 200;

src/styles/widgets.css

@@ -145,6 +145,39 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
 }
 /* End match */
 
+/* Begin edit menu: Colors */
+.color-control input[type="radio"] {
+    display: none;
+}
+
+.color-control .radio-inline.checked {
+    border-color: #000 !important;
+}
+
+.color-control .radio-inline {
+    height: 24px;
+    flex: 1 1 auto;
+    border: 2px solid;
+    /* Reset bootstrap padding */
+    padding-left: 0px;
+}
+
+.color-control .radio-inline + .radio-inline {
+    /* Reset bootstrap margin */
+    margin-left: 0px;
+}
+
+.color-control .radio-inline:hover {
+    border-color: #444 !important;
+}
+
+.color-control div[class*="colors-column-"] {
+    display: flex;
+    padding: 2px 20px;
+}
+
+/* End edit menu: Colors */
+
 /* PlotTable widget */
 .plot-table-widget, .plot-widget, .value-widget, .image-widget, .label-widget {
     width: 100%;
@@ -270,8 +303,10 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
 .button-widget button {
     border-radius: 25px;
     border-style: double;
-    border-width: 5px;
+    border-width: 4px;
     overflow-x: hidden;
+    font-weight: 500;
+    font-size: 1.2em;
 }
 
 .button-widget button:hover {