Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

show border hint while editing for widgets without border

Browse source
This commit is contained in:
Ricardo Hernandez-Montoya 2017-04-11 12:20:37 +02:00
parent e8ecd01f5f
commit d7af57c692
2 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/containers/widget.js
View file

@ -11,6 +11,7 @@ import React, { Component } from 'react';
import { Container } from 'flux/utils';
import { ContextMenuTrigger } from 'react-contextmenu';
import Rnd from 'react-rnd';
import classNames from 'classnames';
import AppDispatcher from '../app-dispatcher';
import SimulatorDataStore from '../stores/simulator-data-store';
@ -117,6 +118,7 @@ class Widget extends Component {
// get widget element
const widget = this.props.data;
var borderedWidget = false;
var element = null;
// dummy is passed to widgets to keep updating them while in edit mode
@ -124,14 +126,18 @@ 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} />
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;
} else if (widget.type === 'Image') {
element = <WidgetImage widget={widget} files={this.state.files} />
borderedWidget = true;
} else if (widget.type === 'Button') {
element = <WidgetButton widget={widget} editing={this.props.editing} />
} else if (widget.type === 'NumberInput') {
@ -142,6 +148,12 @@ class Widget extends Component {
element = <WidgetGauge widget={widget} data={this.state.simulatorData} editing={this.props.editing} simulation={this.props.simulation} />
}
let widgetClasses = classNames({
'widget': !this.props.editing,
'editing-widget': this.props.editing,
'border': borderedWidget
});
if (this.props.editing) {
return (
<Rnd
@ -150,7 +162,7 @@ class Widget extends Component {
minWidth={ widget.minWidth }
minHeight={ widget.minHeight }
bounds={'parent'}
className="editing-widget"
className={ widgetClasses }
onResizeStart={ (direction, styleSize, clientSize, event) => this.borderWasClicked(event) }
onResizeStop={(direction, styleSize, clientSize, delta) => this.resizeStop(direction, styleSize, clientSize, delta)}
onDragStop={(event, ui) => this.dragStop(event, ui)}
@ -165,7 +177,7 @@ class Widget extends Component {
);
} else {
return (
<div className="widget" style={{ width: Number(widget.width), height: Number(widget.height), left: Number(widget.x), top: Number(widget.y), 'zIndex': Number(widget.z), position: 'absolute' }}>
<div className={ widgetClasses } style={{ width: Number(widget.width), height: Number(widget.height), left: Number(widget.x), top: Number(widget.y), 'zIndex': Number(widget.z), position: 'absolute' }}>
{element}
</div>
);

14
src/styles/widgets.css
View file

@ -8,11 +8,20 @@
**********************************************************************************/
.widget {
background-color: #fff;
background-color: #fff;
}
.border {
border: 1px solid lightgray;
}
.editing-widget {
background-color: #fff;
background-color: #fff;
}
.editing-widget:not(.border):hover {
outline: 1px solid lightgray;
outline-offset: -10px;
}
/* Area to trigger the context menu */
@ -134,7 +143,6 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
width: 100%;
height: 100%;
padding: 3px 6px;
border: 1px solid lightgray;
}
.plot-table-widget {