Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-16 00:00:03 +01:00
Code Issues Releases Wiki Activity

Widget and Context Menu layering now works. Box Widget always has lowest z value when dropped: #165 & #79

Browse source
This commit is contained in:
Laura Fuentes Grau 2020-04-17 18:32:09 +02:00
parent 5e4c26f6af
commit 30f80ecdee
5 changed files with 20 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/dashboard/dashboard.js
View file

@ -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})
}

20
src/widget/dropzone.js
View file

@ -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);
}

2
src/widget/widget-area.js
View file

@ -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} />

2
src/widget/widget-container.js
View file

@ -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'
};

6
src/widget/widget-context-menu.js
View file

@ -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>