From b317cc095a05038106035bc2a692db4d05b34b26 Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Thu, 25 Jun 2020 18:01:26 +0200 Subject: [PATCH] wip: make dashboard manually resizable #230 --- src/dashboard/dashboard.js | 30 ++++++++++++++++++++++++++---- src/styles/app.css | 2 +- src/widget/widget-area.js | 7 +------ src/widget/widget-toolbox.js | 16 +++++++++++++++- 4 files changed, 43 insertions(+), 12 deletions(-) diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js index 874eb10..86763a2 100644 --- a/src/dashboard/dashboard.js +++ b/src/dashboard/dashboard.js @@ -120,6 +120,7 @@ class Dashboard extends Component { editing: prevState.editing || false, paused: prevState.paused || false, + dropZoneHeight: prevState.dropZoneHeight || maxHeight +80, editModal: false, filesEditModal: prevState.filesEditModal || false, @@ -130,7 +131,6 @@ class Dashboard extends Component { widgetOrigIDs: prevState.widgetOrigIDs || [], maxWidgetHeight: maxHeight || null, - dropZoneHeight: maxHeight +80 || null, }; } @@ -389,6 +389,27 @@ class Dashboard extends Component { this.forceUpdate(); }; + setDashboardSize(value) { + const maxHeight = Object.values(this.state.widgets).reduce((currentHeight, widget) => { + const absolutHeight = widget.y + widget.height; + + return absolutHeight > currentHeight ? absolutHeight : currentHeight; + }, 0); + let tempSize = null; + if(value === -1){ + tempSize = this.state.dropZoneHeight - 50; + if(tempSize > maxHeight +80){ + this.setState({dropZoneHeight: tempSize}); + } + } + else{ + tempSize = this.state.dropZoneHeight + 50; + this.setState( {dropZoneHeight: tempSize}); + return tempSize; + } + + } + pauseData(){ this.setState({ paused: true }); }; @@ -402,6 +423,7 @@ class Dashboard extends Component { const grid = this.state.dashboard.grid; const boxClasses = classNames('section', 'box', { 'fullscreen-padding': this.props.isFullscreen }); let draggable = this.state.editing; + let dropZoneHeight = this.state.dropZoneHeight; return
@@ -424,10 +446,10 @@ class Dashboard extends Component {
e.preventDefault() }> {this.state.editing && - + } {!draggable?( - + {this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => ( ) : ( - + {this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => ( { - const absolutHeight = widget.y + widget.height; - return absolutHeight > currentHeight ? absolutHeight : currentHeight; - }, 0); - - return + return {this.props.children} diff --git a/src/widget/widget-toolbox.js b/src/widget/widget-toolbox.js index 60be4af..06bf481 100644 --- a/src/widget/widget-toolbox.js +++ b/src/widget/widget-toolbox.js @@ -18,6 +18,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import Slider from 'rc-slider'; +import { Button } from 'react-bootstrap'; +import Icon from "../common/icon"; import ToolboxItem from './toolbox-item'; @@ -57,6 +59,17 @@ class WidgetToolbox extends React.Component {
Grid: { this.props.grid > 1 ? this.props.grid : 'Disabled' } + +
+
+
+
+ +
; @@ -66,7 +79,8 @@ class WidgetToolbox extends React.Component { WidgetToolbox.propTypes = { widgets: PropTypes.array, grid: PropTypes.number, - onGridChange: PropTypes.func + onGridChange: PropTypes.func, + onDashboardSizeChange: PropTypes.func }; export default WidgetToolbox;