mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
wip: make dashboard manually resizable #230
This commit is contained in:
parent
8523b9e354
commit
b317cc095a
4 changed files with 43 additions and 12 deletions
|
@ -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 <div className={boxClasses} >
|
||||
<div className='section-header box-header'>
|
||||
<div className="section-title">
|
||||
|
@ -424,10 +446,10 @@ class Dashboard extends Component {
|
|||
|
||||
<div className="box box-content" onContextMenu={ (e) => e.preventDefault() }>
|
||||
{this.state.editing &&
|
||||
<WidgetToolbox grid={grid} onGridChange={this.setGrid.bind(this)} widgets={this.state.widgets} />
|
||||
<WidgetToolbox grid={grid} onGridChange={this.setGrid.bind(this)} onDashboardSizeChange={this.setDashboardSize.bind(this)} widgets={this.state.widgets} />
|
||||
}
|
||||
{!draggable?(
|
||||
<WidgetArea widgets={this.state.widgets} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
|
||||
<WidgetArea widgets={this.state.widgets} dropZoneHeight = {dropZoneHeight} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
|
||||
{this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => (
|
||||
<WidgetContextMenu
|
||||
key={widgetKey}
|
||||
|
@ -448,7 +470,7 @@ class Dashboard extends Component {
|
|||
))}
|
||||
</WidgetArea>
|
||||
) : (
|
||||
<WidgetArea widgets={this.state.widgets} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
|
||||
<WidgetArea widgets={this.state.widgets} editing={this.state.editing} dropZoneHeight= {dropZoneHeight} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
|
||||
{this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => (
|
||||
<Widget
|
||||
key={widgetKey}
|
||||
|
|
|
@ -387,7 +387,7 @@ body {
|
|||
|
||||
.section-buttons-group-right {
|
||||
height: auto !important;
|
||||
|
||||
padding: 5px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
|
|
@ -44,13 +44,8 @@ class WidgetArea extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const maxHeight = Object.values(this.props.widgets).reduce((currentHeight, widget) => {
|
||||
const absolutHeight = widget.y + widget.height;
|
||||
|
||||
return absolutHeight > currentHeight ? absolutHeight : currentHeight;
|
||||
}, 0);
|
||||
|
||||
return <Dropzone height={maxHeight + 80} onDrop={this.handleDrop} editing={this.props.editing} widgets={this.props.widgets}>
|
||||
return <Dropzone height={this.props.dropZoneHeight} onDrop={this.handleDrop} editing={this.props.editing} widgets={this.props.widgets}>
|
||||
{this.props.children}
|
||||
|
||||
<Grid size={this.props.grid} disabled={this.props.grid === 1 || this.props.editing !== true} />
|
||||
|
|
|
@ -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 {
|
|||
<div>
|
||||
<span>Grid: { this.props.grid > 1 ? this.props.grid : 'Disabled' }</span>
|
||||
<Slider value={this.props.grid} style={{ width: '80px' }} step={5} onChange={this.onGridChange} />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className='section-buttons-group-right'>
|
||||
<div>
|
||||
<Button variant="dark" key={0} onClick={() => this.props.onDashboardSizeChange(1)} >
|
||||
<Icon icon="plus" />
|
||||
</Button>
|
||||
<Button variant="dark" key={1} onClick={() => this.props.onDashboardSizeChange(-1)} >
|
||||
<Icon icon="minus" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
|
@ -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;
|
||||
|
|
Loading…
Add table
Reference in a new issue