mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-16 00:00:03 +01:00
Widget and Context Menu layering now works. Box Widget always has lowest z value when dropped: #165 & #79
This commit is contained in:
parent
5e4c26f6af
commit
30f80ecdee
5 changed files with 20 additions and 18 deletions
|
@ -206,10 +206,12 @@ class Dashboard extends Component {
|
|||
|
||||
widgetChange(widget, index, callback = null){
|
||||
|
||||
let tempChanges = this.state.widgetChangeData;
|
||||
tempChanges.push(widget);
|
||||
AppDispatcher.dispatch({
|
||||
type: 'widgets/start-edit',
|
||||
token: this.state.sessionToken,
|
||||
data: widget
|
||||
});
|
||||
|
||||
this.setState({ widgetChangeData: tempChanges})
|
||||
|
||||
}
|
||||
|
||||
|
|
|
@ -28,20 +28,20 @@ const dropzoneTarget = {
|
|||
position.y -= dropzoneRect.top;
|
||||
|
||||
// Z-Index is one more the top most children
|
||||
let foundZ = props.children.reduce( (maxZ, currentChildren) => {
|
||||
if (currentChildren.props != null) {
|
||||
let foundZ = props.widgets.reduce( (maxZ, currentWidget) => {
|
||||
if (currentWidget != null) {
|
||||
// Is there a simpler way? Is not easy to expose a getter in a Container.create(Component)
|
||||
let widget = currentChildren.props.data;
|
||||
if (widget && widget.z) {
|
||||
if (widget.z > maxZ) {
|
||||
return widget.z;
|
||||
if (currentWidget.z > maxZ) {
|
||||
return currentWidget.z;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return maxZ;
|
||||
}, 0);
|
||||
position.z = foundZ >= 100? foundZ : ++foundZ;
|
||||
}, 0)
|
||||
position.z = foundZ >= 100? foundZ : foundZ += 10;
|
||||
if(monitor.getItem().name === "Box"){
|
||||
position.z = 0;
|
||||
}
|
||||
|
||||
props.onDrop(monitor.getItem(), position);
|
||||
}
|
||||
|
|
|
@ -50,7 +50,7 @@ class WidgetArea extends React.Component {
|
|||
return absolutHeight > currentHeight ? absolutHeight : currentHeight;
|
||||
}, 0);
|
||||
|
||||
return <Dropzone height={maxHeight + 80} onDrop={this.handleDrop} editing={this.props.editing}>
|
||||
return <Dropzone height={maxHeight + 80} 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} />
|
||||
|
|
|
@ -26,7 +26,7 @@ class WidgetContainer extends React.Component {
|
|||
height: Number(this.props.widget.height),
|
||||
left: Number(this.props.widget.x),
|
||||
top: Number(this.props.widget.y),
|
||||
zindex: Number(this.props.widget.z),
|
||||
zIndex: Number(this.props.widget.z),
|
||||
position: 'absolute'
|
||||
};
|
||||
|
||||
|
|
|
@ -34,7 +34,7 @@ class WidgetContextMenu extends React.Component {
|
|||
};
|
||||
|
||||
moveAbove = event => {
|
||||
this.props.widget.z++;
|
||||
this.props.widget.z += 10;
|
||||
if (this.props.widget.z > 100) {
|
||||
this.props.widget.z = 100;
|
||||
}
|
||||
|
@ -53,7 +53,7 @@ class WidgetContextMenu extends React.Component {
|
|||
};
|
||||
|
||||
moveUnderneath = event => {
|
||||
this.props.widget.z--;
|
||||
this.props.widget.z -= 10;
|
||||
if (this.props.widget.z < 0) {
|
||||
this.props.widget.z = 0;
|
||||
}
|
||||
|
@ -90,7 +90,7 @@ class WidgetContextMenu extends React.Component {
|
|||
render() {
|
||||
const isLocked = this.props.widget.locked;
|
||||
const ContextMenu = () => (
|
||||
<Menu id={'widgetMenu'+ this.props.index}>
|
||||
<Menu id={'widgetMenu'+ this.props.index} style={{zIndex: 1000}}>
|
||||
<Item disabled={isLocked} onClick={this.editWidget}>Edit</Item>
|
||||
<Item disabled={isLocked} onClick={this.deleteWidget}>Delete</Item>
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue