From 374437dfad252e366ab2e93f78b87021a3cd67d4 Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Sat, 11 Jan 2020 20:03:53 +0100 Subject: [PATCH] context menu now integrated into widget --- src/dashboard/dashboard.js | 59 ++++++++++++++--------- src/dashboard/dropzone.js | 1 + src/dashboard/widget-context-menu.js | 13 ++++- src/widget/edit-widget-color-control.js | 1 - src/widget/edit-widget-min-max-control.js | 2 - src/widget/edit-widget.js | 11 +++-- src/widget/editable-widget-container.js | 3 +- src/widget/widget-container.js | 1 + src/widget/widget.js | 6 +-- src/widget/widgets/label.js | 1 + src/widget/widgets/slider.js | 1 + 11 files changed, 61 insertions(+), 38 deletions(-) diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js index f35eb67..a6b277f 100644 --- a/src/dashboard/dashboard.js +++ b/src/dashboard/dashboard.js @@ -57,14 +57,14 @@ class Dashboard extends Component { prevState = {}; } const sessionToken = LoginStore.getState().token; - + let maxHeight = null; let dashboard = Map(); let dashboards = DashboardStore.getState() let rawDashboard = dashboards[props.match.params.dashboard - 1]; - if (rawDashboard != null) { + if (rawDashboard) { dashboard = Map(rawDashboard); // convert widgets list to a dictionary to be able to reference widgets @@ -95,7 +95,7 @@ class Dashboard extends Component { - //ist das überhaupt nötiG?? + /* if (this.state.dashboard.has('id') === false) { AppDispatcher.dispatch({ type: 'dashboards/start-load', @@ -121,7 +121,7 @@ class Dashboard extends Component { token: this.state.sessionToken }); */ - } + let widgets = {}; @@ -129,13 +129,14 @@ class Dashboard extends Component { widgets[Dashboard.lastWidgetKey] = widget; Dashboard.lastWidgetKey++; } - let maxHeight = Object.keys(widgets).reduce( (maxHeightSoFar, widgetKey) => { + maxHeight = Object.keys(widgets).reduce( (maxHeightSoFar, widgetKey) => { let thisWidget = widgets[widgetKey]; let thisWidgetHeight = thisWidget.y + thisWidget.height; return thisWidgetHeight > maxHeightSoFar? thisWidgetHeight : maxHeightSoFar; }, 0); + } let simulationModels = []; //if (prevState.simulation != null) { @@ -162,8 +163,8 @@ class Dashboard extends Component { modalData: null, modalIndex: null, - maxWidgetHeight: maxHeight, - dropZoneHeight: maxHeight +80, + maxWidgetHeight: maxHeight || null, + dropZoneHeight: maxHeight +80 || null, }; } @@ -176,7 +177,7 @@ class Dashboard extends Component { } //!!!won't work anymore - componentWillMount() { + componentDidMount() { //document.addEventListener('keydown', this.handleKeydown.bind(this)); if (this.state.dashboard.has('id') === false) { AppDispatcher.dispatch({ @@ -355,7 +356,6 @@ class Dashboard extends Component { editWidget(widget, index){ - console.log("dashboard editWidget was called widget: " + widget +" index: " + index); this.setState({ editModal: true, modalData: widget, modalIndex: index }); }; @@ -442,7 +442,7 @@ class Dashboard extends Component { const widgets = this.state.dashboard.get('widgets'); const grid = this.state.dashboard.get('grid'); const boxClasses = classNames('section', 'box', { 'fullscreen-padding': this.props.isFullscreen }); - + let draggable = this.state.editing; return
@@ -466,8 +466,30 @@ class Dashboard extends Component { {this.state.editing && } - + {!draggable?( + {widgets != null && Object.keys(widgets).map(widgetKey => ( + + + + ))} + + ) : ( + {widgets != null && Object.keys(widgets).map(widgetKey => ( @@ -484,17 +506,8 @@ class Dashboard extends Component { ))} - {/* TODO: Create only one context menu for all widgets */} - {widgets != null && Object.keys(widgets).map(widgetKey => ( - - ))} - + )} + diff --git a/src/dashboard/dropzone.js b/src/dashboard/dropzone.js index 7a9af88..d73a295 100644 --- a/src/dashboard/dropzone.js +++ b/src/dashboard/dropzone.js @@ -52,6 +52,7 @@ const dropzoneTarget = { }; function collect(connect, monitor) { + return { connectDropTarget: connect.dropTarget(), isOver: monitor.isOver(), diff --git a/src/dashboard/widget-context-menu.js b/src/dashboard/widget-context-menu.js index c1cd082..ee53b4a 100644 --- a/src/dashboard/widget-context-menu.js +++ b/src/dashboard/widget-context-menu.js @@ -22,6 +22,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Menu, Item, Separator, MenuProvider } from 'react-contexify'; +import Widget from '../widget/widget'; class WidgetContextMenu extends React.Component { editWidget = event => { @@ -92,7 +93,6 @@ class WidgetContextMenu extends React.Component { }; render() { - const isLocked = this.props.widget.locked; const ContextMenu = () => ( @@ -115,7 +115,16 @@ class WidgetContextMenu extends React.Component { return
- {"Widget " + this.props.widget.name} +
diff --git a/src/widget/edit-widget-color-control.js b/src/widget/edit-widget-color-control.js index 212e487..cadafa8 100644 --- a/src/widget/edit-widget-color-control.js +++ b/src/widget/edit-widget-color-control.js @@ -55,7 +55,6 @@ class EditWidgetColorControl extends Component { } render() { - console.log("edit widgetcolorcontrol was called"); return ( diff --git a/src/widget/edit-widget-min-max-control.js b/src/widget/edit-widget-min-max-control.js index eae6d65..b45aac8 100644 --- a/src/widget/edit-widget-min-max-control.js +++ b/src/widget/edit-widget-min-max-control.js @@ -40,8 +40,6 @@ class EditWidgetMinMaxControl extends React.Component { } render() { - console.log("in minmax control, widget: "); - console.log(this.state.widget); return {this.props.label} this.props.handleChange(e)}> diff --git a/src/widget/edit-widget.js b/src/widget/edit-widget.js index f2c2161..021fcd7 100644 --- a/src/widget/edit-widget.js +++ b/src/widget/edit-widget.js @@ -69,7 +69,7 @@ class EditWidgetDialog extends React.Component { } handleChange(e) { - /*is this needed? + if (e.constructor === Array) { // Every property in the array will be updated console.log("####its an array!"); @@ -82,7 +82,8 @@ class EditWidgetDialog extends React.Component { }, {}); this.setState({ temporal: Object.assign({}, this.state.temporal, changes ) }); - */ + } + if(e.target.type !== 'text'){ let changeObject = {}; if (e.target.id === 'lockAspect') { @@ -103,7 +104,8 @@ class EditWidgetDialog extends React.Component { changeObject[e.target.id] = e.target.checked; } else if (e.target.type === 'number') { changeObject[e.target.id] = Number(e.target.value); - } + } + else { changeObject[e.target.id] = e.target.value; } @@ -148,14 +150,13 @@ class EditWidgetDialog extends React.Component { } //this.valid = name; - this.valid = true; + this.valid = name; // return state to control if (target === 'name') return name ? "success" : "error"; } render() { - console.log("####edit widget render was called"); let controls = null; if (this.props.widget) { controls = CreateControls( diff --git a/src/widget/editable-widget-container.js b/src/widget/editable-widget-container.js index 3fcddf0..27824b4 100644 --- a/src/widget/editable-widget-container.js +++ b/src/widget/editable-widget-container.js @@ -28,7 +28,7 @@ import { Menu } from 'react-contexify'; class EditableWidgetContainer extends React.Component { constructor(props) { super(props); - + this.rnd = null; } @@ -88,7 +88,6 @@ class EditableWidgetContainer extends React.Component { render() { const widget = this.props.widget; - console.log("editable-widget-container was called"); const resizing = { bottom: !widget.locked, diff --git a/src/widget/widget-container.js b/src/widget/widget-container.js index b5258ff..3218ba6 100644 --- a/src/widget/widget-container.js +++ b/src/widget/widget-container.js @@ -24,6 +24,7 @@ import PropTypes from 'prop-types'; class WidgetContainer extends React.Component { render() { + const containerStyle = { width: Number(this.props.widget.width), height: Number(this.props.widget.height), diff --git a/src/widget/widget.js b/src/widget/widget.js index 3bca049..41de002 100644 --- a/src/widget/widget.js +++ b/src/widget/widget.js @@ -56,6 +56,7 @@ class Widget extends React.Component { } static calculateState(prevState, props) { + let simulatorData = {}; if (props.paused) { @@ -81,7 +82,6 @@ class Widget extends React.Component { if (this.state.sessionToken == null) { return; } - console.log('widget componentwillmount called'); AppDispatcher.dispatch({ type: 'files/start-load', token: this.state.sessionToken, @@ -125,7 +125,7 @@ class Widget extends React.Component { simulationModel = model; } - //all types are lowercase!!! at least slider is + if (widget.type === 'CustomAction') { return } else if (widget.type === 'Action') { @@ -168,7 +168,7 @@ class Widget extends React.Component { const element = this.createWidget(this.props.data); if (this.props.editing) { - return + return {element} ; } diff --git a/src/widget/widgets/label.js b/src/widget/widgets/label.js index c9cafdf..2ee131f 100644 --- a/src/widget/widgets/label.js +++ b/src/widget/widgets/label.js @@ -25,6 +25,7 @@ import EditWidgetColorControl from '../edit-widget-color-control'; class WidgetLabel extends Component { render() { + const style = { fontSize: this.props.widget.customProperties.textSize + 'px', color: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.fontColor] diff --git a/src/widget/widgets/slider.js b/src/widget/widgets/slider.js index 4c41a4c..b536edd 100644 --- a/src/widget/widgets/slider.js +++ b/src/widget/widgets/slider.js @@ -95,6 +95,7 @@ class WidgetSlider extends Component { } render() { + let isVertical = this.props.widget.customProperties.orientation === WidgetSlider.OrientationTypes.VERTICAL.value; let fields = { name: this.props.widget.name,