Add text size control to edit label widget

Move label text to top left corner
Remove background color for widgets (testing).

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

@@ -30,6 +30,7 @@ import EditWidgetSignalControl from './edit-widget-signal-control';
 import EditWidgetSignalsControl from './edit-widget-signals-control';
 import EditWidgetOrientation from './edit-widget-orientation';
 import EditWidgetAspectControl from './edit-widget-aspect-control';
+import EditWidgetTextSizeControl from './edit-widget-text-size-control';
 
 export default function createControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulation, handleChange) {
     // Use a list to concatenate the controls according to the widget type
@@ -103,8 +104,13 @@ export default function createControls(widgetType = null, widget = null, session
                 <EditWidgetColorControl key={1} widget={widget} controlId={'border_color'} label={'Border color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />)
             }
             break;
+        case 'Label':
+            dialogControls.push(
+                <EditWidgetTextSizeControl key={1} widget={widget} handleChange={e => handleChange(e)} />
+            );
+            break;
         default:
-            console.log('Non-valid widget type');
+            console.log('Non-valid widget type: ' + widgetType);
         }
 
     return dialogControls;

src/components/dialog/edit-widget-text-size-control.js

@@ -0,0 +1,42 @@
+/**
+ * File: edit-widget-text-size-control.js
+ * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
+ * Date: 29.07.2017
+ *
+ * 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 { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
+
+class EditWidgetTextSizeControl extends React.Component {
+  render() {
+    const sizes = [11, 12, 14, 16, 18, 20, 22, 24, 28, 32, 36, 40, 46, 52, 60, 72];
+
+    return (
+      <FormGroup controlId="textSize">
+        <ControlLabel>Text size</ControlLabel>
+        <FormControl componentClass="select" value={this.props.widget.textSize} onChange={e => this.props.handleChange(e)}>
+          {sizes.map((size, index) => (
+            <option key={index} value={size}>{size}</option>
+          ))}
+        </FormControl>
+      </FormGroup>
+    );
+  }
+}
+
+export default EditWidgetTextSizeControl;

src/components/widget-factory.js

@@ -54,6 +54,7 @@ class WidgetFactory {
             case 'Label':
                 widget.minWidth = 70;
                 widget.minHeight = 20;
+                widget.textSize = 18;
                 break;
             case 'PlotTable':
                 widget.simulator = defaultSimulator;

src/components/widget-label.js

@@ -25,7 +25,7 @@ class WidgetLabel extends Component {
   render() {
     return (
       <div className="label-widget">
-        <h4>{this.props.widget.name}</h4>
+        <h4 style={{ fontSize: this.props.widget.textSize + 'px' }}>{this.props.widget.name}</h4>
       </div>
     );
   }

src/containers/widget.js

@@ -148,11 +148,9 @@ class Widget extends Component {
 
     // get widget element
     const widget = this.props.data;
-    var borderedWidget = this.props.editing;
+    let borderedWidget = false;
     var element = null;
 
-    //console.log('render: ' + widget.x + ', ' + widget.y);
-
     // dummy is passed to widgets to keep updating them while in edit mode
     if (widget.type === 'Value') {
       element = <WidgetValue widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
@@ -163,7 +161,6 @@ class Widget extends Component {
       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} />
-      borderedWidget = true;
     } 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;
@@ -181,12 +178,12 @@ class Widget extends Component {
       element = <WidgetBox widget={widget} editing={this.props.editing} />
     }
     
-    let widgetClasses = classNames({
-              'widget': !this.props.editing,
-              'editing-widget': this.props.editing,
-              'border': borderedWidget,
-              'unselectable': this.props.editing
-            });
+    const widgetClasses = classNames({
+      'widget': !this.props.editing,
+      'editing-widget': this.props.editing,
+      'border': borderedWidget,
+      'unselectable': this.props.editing
+    });
 
     if (this.props.editing) {
       return (

src/styles/widgets.css

@@ -20,7 +20,6 @@
  ******************************************************************************/
 
 .widget {
-    background-color: #fff;
     overflow: auto;
 }
 
@@ -28,7 +27,7 @@
     border: 1px solid lightgray;
 }
 
-.editing-widget {
+.editing-widget:hover {
     background-color: #fff;
 }
 
@@ -451,7 +450,18 @@ div[class*="-widget"] label {
 
 /* Begin label widget */
 .label-widget  {
-    text-align: center;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+
+    padding: 0;
+}
+
+.label-widget h4 {
+    padding: 0;
+    margin: 0;
 }
 /* End label widget */