From 0ffae6d3738f4f37c567694b4c6bb8a442cfeba0 Mon Sep 17 00:00:00 2001
From: Markus Grigull <web@grigull.me>
Date: Tue, 1 Aug 2017 14:29:29 +0200
Subject: [PATCH] Add color to label widget

Remove name edit control from default dialog
Remove text from plots
---
 .../dialog/edit-widget-control-creator.js           |  7 +++++--
 src/components/dialog/edit-widget-text-control.js   |  9 ++++-----
 src/components/dialog/edit-widget.js                |  7 +++----
 src/components/widget-factory.js                    |  9 +++++++--
 src/components/widget-label.js                      |  9 ++++++++-
 src/components/widget-plot-table.js                 |  4 +---
 src/components/widget-plot.js                       |  4 +---
 src/components/widget-table.js                      |  2 --
 src/components/widget-value.js                      |  2 +-
 src/containers/widget.js                            |  2 --
 src/styles/widgets.css                              | 13 ++++++++++---
 11 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/src/components/dialog/edit-widget-control-creator.js b/src/components/dialog/edit-widget-control-creator.js
index 375aa4a..bfe6fab 100644
--- a/src/components/dialog/edit-widget-control-creator.js
+++ b/src/components/dialog/edit-widget-control-creator.js
@@ -43,7 +43,8 @@ export default function createControls(widgetType = null, widget = null, session
             }
             dialogControls.push(
                 <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => valueBoundOnChange(e)} />,
-                <EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
+                <EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTextSizeControl key={3} widget={widget} handleChange={e => handleChange(e)} />
             )
         }
         break;
@@ -106,7 +107,9 @@ export default function createControls(widgetType = null, widget = null, session
             break;
         case 'Label':
             dialogControls.push(
-                <EditWidgetTextSizeControl key={1} widget={widget} handleChange={e => handleChange(e)} />
+                <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} handleChange={e => handleChange(e)} validate={id => validateForm(id)} />,
+                <EditWidgetTextSizeControl key={1} widget={widget} handleChange={e => handleChange(e)} />,
+                <EditWidgetColorControl key={2} widget={widget} controlId={'fontColor'} label={'Text color'} handleChange={e => handleChange(e)} />
             );
             break;
         default:
diff --git a/src/components/dialog/edit-widget-text-control.js b/src/components/dialog/edit-widget-text-control.js
index b9eef66..a87407a 100644
--- a/src/components/dialog/edit-widget-text-control.js
+++ b/src/components/dialog/edit-widget-text-control.js
@@ -37,15 +37,14 @@ class EditWidgetTextControl extends Component {
   }
 
   render() {
-
     return (
-        <FormGroup controlId={ this.props.controlId }>
-          <ControlLabel> { this.props.label } </ControlLabel>
-          <FormControl type="text" placeholder={ this.props.placeholder } value={ this.state.widget[this.props.controlId] || '' } onChange={(e) => this.props.handleChange(e)} />
+        <FormGroup controlId={this.props.controlId} validationState={this.props.validate(this.props.controlId)}>
+          <ControlLabel>{this.props.label}</ControlLabel>
+          <FormControl type="text" placeholder={this.props.placeholder} value={this.state.widget[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)} />
           <FormControl.Feedback />
         </FormGroup>
     );
   }
 }
 
-export default EditWidgetTextControl;
\ No newline at end of file
+export default EditWidgetTextControl;
diff --git a/src/components/dialog/edit-widget.js b/src/components/dialog/edit-widget.js
index 57ee278..90416f4 100644
--- a/src/components/dialog/edit-widget.js
+++ b/src/components/dialog/edit-widget.js
@@ -20,7 +20,7 @@
  ******************************************************************************/
 
 import React, { Component, PropTypes } from 'react';
-import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
+//import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Dialog from './dialog';
 
@@ -124,7 +124,6 @@ class EditWidgetDialog extends Component {
   }
 
   render() {
-
     let controls = null;
     if (this.props.widget) {
       controls = createControls(
@@ -140,11 +139,11 @@ class EditWidgetDialog extends Component {
     return (
       <Dialog show={this.props.show} title="Edit Widget" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
         <form encType='multipart/form-data'>
-          <FormGroup controlId="name" validationState={this.validateForm('name')}>
+          {/*<FormGroup controlId="name" validationState={this.validateForm('name')}>
             <ControlLabel>Name</ControlLabel>
             <FormControl type="text" placeholder="Enter name" value={this.state.temporal.name} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
-          </FormGroup>
+          </FormGroup>*/}
           { controls || '' }
         </form>
       </Dialog>
diff --git a/src/components/widget-factory.js b/src/components/widget-factory.js
index 80f9d91..aa1a955 100644
--- a/src/components/widget-factory.js
+++ b/src/components/widget-factory.js
@@ -33,6 +33,7 @@ class WidgetFactory {
                 widget.minHeight = 20;
                 widget.width = 120;
                 widget.height = 70;
+                widget.textSize = 16;
                 break;
             case 'Plot':
                 widget.simulator = defaultSimulator;
@@ -52,9 +53,13 @@ class WidgetFactory {
                 widget.height = 200;
                 break;
             case 'Label':
-                widget.minWidth = 70;
+                widget.minWidth = 20;
                 widget.minHeight = 20;
-                widget.textSize = 18;
+                widget.width = 100;
+                widget.height = 35;
+                widget.name = 'Label';
+                widget.textSize = 32;
+                widget.fontColor = 0;
                 break;
             case 'PlotTable':
                 widget.simulator = defaultSimulator;
diff --git a/src/components/widget-label.js b/src/components/widget-label.js
index 84a9d76..58d2233 100644
--- a/src/components/widget-label.js
+++ b/src/components/widget-label.js
@@ -21,11 +21,18 @@
 
 import React, { Component } from 'react';
 
+import EditWidgetColorControl from './dialog/edit-widget-color-control';
+
 class WidgetLabel extends Component {
   render() {
+    const style = {
+      fontSize: this.props.widget.textSize + 'px',
+      color: EditWidgetColorControl.ColorPalette[this.props.widget.fontColor]
+    };
+
     return (
       <div className="label-widget">
-        <h4 style={{ fontSize: this.props.widget.textSize + 'px' }}>{this.props.widget.name}</h4>
+        <h4 style={style}>{this.props.widget.name}</h4>
       </div>
     );
   }
diff --git a/src/components/widget-plot-table.js b/src/components/widget-plot-table.js
index c674773..a998d09 100644
--- a/src/components/widget-plot-table.js
+++ b/src/components/widget-plot-table.js
@@ -141,8 +141,6 @@ class WidgetPlotTable extends Component {
 
     return (
       <div className="plot-table-widget" ref="wrapper">
-        <h4>{this.props.widget.name}</h4>
-
         <div className="content">
           <div className="table-plot-row">
             <div className="widget-table">
@@ -159,7 +157,7 @@ class WidgetPlotTable extends Component {
                 data={simulatorData}
                 time={this.props.widget.time} 
                 width={this.props.widget.width - 100}
-                height={this.props.widget.height - 100}
+                height={this.props.widget.height - 55}
               />
             </div>
           </div>
diff --git a/src/components/widget-plot.js b/src/components/widget-plot.js
index fb89a07..725e2b7 100644
--- a/src/components/widget-plot.js
+++ b/src/components/widget-plot.js
@@ -52,12 +52,10 @@ class WidgetPlot extends React.Component {
 
     return (
       <div className="plot-widget" ref="wrapper">
-        <h4>{this.props.widget.name}</h4>
-
         <div className="widget-plot">
           <Plot
             data={simulatorData}
-            height={this.props.widget.height - 100}
+            height={this.props.widget.height - 55}
             width={this.props.widget.width - 20}
             time={this.props.widget.time}
           />
diff --git a/src/components/widget-table.js b/src/components/widget-table.js
index 44d3966..697a48b 100644
--- a/src/components/widget-table.js
+++ b/src/components/widget-table.js
@@ -70,8 +70,6 @@ class WidgetTable extends Component {
   render() {
     return (
       <div className="table-widget">
-        <h4>{this.props.widget.name}</h4>
-
         <Table data={this.state.rows}>
           <TableColumn title="Signal" dataKey="name" width={120} />
           <TableColumn title="Value" dataKey="value" />
diff --git a/src/components/widget-value.js b/src/components/widget-value.js
index fdbb04b..d7337c5 100644
--- a/src/components/widget-value.js
+++ b/src/components/widget-value.js
@@ -53,7 +53,7 @@ class WidgetValue extends Component {
     var value_to_render = Number(this.state.value);
     return (
       <div className="single-value-widget">
-        <strong>{this.props.widget.name}</strong> <span>{ Number.isNaN(value_to_render)?  NaN : value_to_render.toFixed(3) } </span>
+        <strong  style={{ fontSize: this.props.widget.textSize + 'px' }}>{this.props.widget.name}</strong> <span  style={{ fontSize: this.props.widget.textSize + 'px' }}>{ Number.isNaN(value_to_render)?  NaN : value_to_render.toFixed(3) } </span>
       </div>
     );
   }
diff --git a/src/containers/widget.js b/src/containers/widget.js
index b58a69c..ced8980 100644
--- a/src/containers/widget.js
+++ b/src/containers/widget.js
@@ -156,14 +156,12 @@ class Widget extends Component {
       element = <WidgetValue widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
     } else if (widget.type === 'Plot') {
       element = <WidgetPlot widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
-      borderedWidget = true;
     } else if (widget.type === 'Table') {
       element = <WidgetTable widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
     } else if (widget.type === 'Label') {
       element = <WidgetLabel widget={widget} />
     } else if (widget.type === 'PlotTable') {
       element = <WidgetPlotTable widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} editing={this.props.editing} onWidgetChange={(w) => this.props.onWidgetStatusChange(w, this.props.index) } />
-      borderedWidget = true;
     } else if (widget.type === 'Image') {
       element = <WidgetImage widget={widget} files={this.state.files} token={this.state.sessionToken} />
     } else if (widget.type === 'Button') {
diff --git a/src/styles/widgets.css b/src/styles/widgets.css
index f085a7d..70c802c 100644
--- a/src/styles/widgets.css
+++ b/src/styles/widgets.css
@@ -20,7 +20,7 @@
  ******************************************************************************/
 
 .widget {
-    
+
 }
 
 .border {
@@ -300,11 +300,14 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
 /* End Plots */
 
 .single-value-widget {
+    padding: 0;
+    margin: 0;
+
     width: 100%;
     height: 100%;
     display: flex;
-    justify-content: center;
-    align-items: center;
+
+    word-wrap: break-word;
 }
 
 .single-value-widget > * {
@@ -466,6 +469,10 @@ div[class*="-widget"] label {
 /* End label widget */
 
 /* Begin table widget */
+.table-widget table {
+    background-color: #fff;
+}
+
 .table-widget td, .table-widget th {
     text-align: center;
 }