diff --git a/src/components/dialog/edit-widget-control-creator.js b/src/components/dialog/edit-widget-control-creator.js index c6f9f4c..375aa4a 100644 --- a/src/components/dialog/edit-widget-control-creator.js +++ b/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 validateForm(id)} handleChange={(e) => handleChange(e)} />) } break; + case 'Label': + dialogControls.push( + handleChange(e)} /> + ); + break; default: - console.log('Non-valid widget type'); + console.log('Non-valid widget type: ' + widgetType); } return dialogControls; diff --git a/src/components/dialog/edit-widget-text-size-control.js b/src/components/dialog/edit-widget-text-size-control.js new file mode 100644 index 0000000..0c66ebb --- /dev/null +++ b/src/components/dialog/edit-widget-text-size-control.js @@ -0,0 +1,42 @@ +/** + * File: edit-widget-text-size-control.js + * Author: Ricardo Hernandez-Montoya + * 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 . + **********************************************************************************/ + +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 ( + + Text size + this.props.handleChange(e)}> + {sizes.map((size, index) => ( + + ))} + + + ); + } +} + +export default EditWidgetTextSizeControl; \ No newline at end of file diff --git a/src/components/widget-factory.js b/src/components/widget-factory.js index b2104f2..80f9d91 100644 --- a/src/components/widget-factory.js +++ b/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; diff --git a/src/components/widget-label.js b/src/components/widget-label.js index 5c81a84..84a9d76 100644 --- a/src/components/widget-label.js +++ b/src/components/widget-label.js @@ -25,7 +25,7 @@ class WidgetLabel extends Component { render() { return (
-

{this.props.widget.name}

+

{this.props.widget.name}

); } diff --git a/src/containers/widget.js b/src/containers/widget.js index a67fb80..1484767 100644 --- a/src/containers/widget.js +++ b/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 = @@ -163,7 +161,6 @@ class Widget extends Component { element = } else if (widget.type === 'Label') { element = - borderedWidget = true; } else if (widget.type === 'PlotTable') { element = this.props.onWidgetStatusChange(w, this.props.index) } /> borderedWidget = true; @@ -181,12 +178,12 @@ class Widget extends Component { element = } - 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 ( diff --git a/src/styles/widgets.css b/src/styles/widgets.css index 7e72ad0..1255d4e 100644 --- a/src/styles/widgets.css +++ b/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 */