From 7eed1cdc54c537ee08a12c00d4d355c14a1c1f54 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Tue, 18 Apr 2017 14:03:33 +0200 Subject: [PATCH] let visualization area expand and shrink with new widgets --- src/containers/visualization.js | 68 ++++++++++++++++++++++++--------- src/styles/app.css | 18 ++++----- 2 files changed, 57 insertions(+), 29 deletions(-) diff --git a/src/containers/visualization.js b/src/containers/visualization.js index 6085b06..813dae5 100644 --- a/src/containers/visualization.js +++ b/src/containers/visualization.js @@ -50,11 +50,13 @@ class Visualization extends Component { editModal: prevState.editModal || false, modalData: prevState.modalData || null, modalIndex: prevState.modalIndex || null, - + + maxWidgetHeight: prevState.maxWidgetHeight || 0, + dropZoneHeight: prevState.dropZoneHeight || 0, last_widget_key: prevState.last_widget_key || 0 }; } - + componentWillMount() { AppDispatcher.dispatch({ type: 'visualizations/start-load' @@ -116,6 +118,8 @@ class Visualization extends Component { widgets: tempVisualization.widgets? this.transformToWidgetsDict(tempVisualization.widgets) : {} }); + this.computeHeightWithWidgets(visualization.widgets); + this.setState({ visualization: visualization, project: null }); AppDispatcher.dispatch({ @@ -210,6 +214,8 @@ class Visualization extends Component { var visualization = Object.assign({}, this.state.visualization, { widgets: new_widgets }); + + this.increaseHeightWithWidget(widget); this.setState({ visualization: visualization }); } @@ -227,9 +233,48 @@ class Visualization extends Component { var visualization = Object.assign({}, this.state.visualization, { widgets: new_widgets }); + + // Check if the height needs to be increased, the section may have shrunk if not + if (!this.increaseHeightWithWidget(updated_widget)) { + this.computeHeightWithWidgets(visualization.widgets); + } this.setState({ visualization: visualization }, callback); } + /* + * Set the initial height state based on the existing widgets + */ + computeHeightWithWidgets(widgets) { + // Compute max height from widgets + let maxHeight = Object.keys(widgets).reduce( (maxHeightSoFar, widgetKey) => { + let thisWidget = widgets[widgetKey]; + let thisWidgetHeight = thisWidget.y + thisWidget.height; + + return thisWidgetHeight > maxHeightSoFar? thisWidgetHeight : maxHeightSoFar; + }, 0); + + this.setState({ + maxWidgetHeight: maxHeight, + dropZoneHeight: maxHeight + 40 + }); + } + /* + * Adapt the area's height with the position of the new widget. + * Return true if the height increased, otherwise false. + */ + increaseHeightWithWidget(widget) { + let increased = false; + let thisWidgetHeight = widget.y + widget.height; + if (thisWidgetHeight > this.state.maxWidgetHeight) { + increased = true; + this.setState({ + maxWidgetHeight: thisWidgetHeight, + dropZoneHeight: thisWidgetHeight + 40 + }); + } + return increased; + } + editWidget(e, data) { this.setState({ editModal: true, modalData: this.state.visualization.widgets[data.key], modalIndex: data.key }); } @@ -324,25 +369,10 @@ class Visualization extends Component { } render() { - // calculate widget area height - var height = 0; - var current_widgets = this.state.visualization.widgets; - if (current_widgets) { - Object.keys(current_widgets).forEach( (widget_key) => { - var widget = current_widgets[widget_key]; - if (widget.y + widget.height > height) { - height = widget.y + widget.height; - } - }); - - // add padding - height += 40; - } - return ( -
+
@@ -383,7 +413,7 @@ class Visualization extends Component {
} - this.handleDrop(item, position)} editing={this.state.editing}> + this.handleDrop(item, position)} editing={this.state.editing}> {current_widgets != null && Object.keys(current_widgets).map( (widget_key) => ( this.widgetChange(w, k)} onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)} editing={this.state.editing} index={widget_key} grid={this.state.grid} /> diff --git a/src/styles/app.css b/src/styles/app.css index f1972a0..a22bcaa 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -47,8 +47,7 @@ body { .app-footer { width: 100%; height: 60px; - position: absolute; - bottom: 0px; + float: right; padding-top: 20px; text-align: center; @@ -57,14 +56,12 @@ body { } .app-content { - position: absolute; - bottom: 0px; - top: 60px; - right: 0px; - left: 200px; - min-height: 400px; + display: flex; + float: right; + min-height: calc(100vh - 140px); + width: calc(100% - 220px); - margin: 20px 20px 60px 20px; + margin: 20px 20px 0px 20px; padding: 15px 20px; background-color: #fff; @@ -207,7 +204,8 @@ body { } .section { - height: 100%; + min-height: 100%; + width: 100%; } .section-header div {