Commit 30f80ecd authored by Laura Fuentes Grau's avatar Laura Fuentes Grau

Widget and Context Menu layering now works. Box Widget always has lowest z...

Widget and Context Menu layering now works. Box Widget always has lowest z value when dropped: #165 & #79
parent 5e4c26f6
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment