Added the mask to avoid switching card, when in editing mode.

This commit is contained in:
Giulio Cesare Solaroli 2014-08-27 18:03:37 +02:00
parent 44c51770d9
commit fc0805916e
2 changed files with 40 additions and 16 deletions

View File

@ -148,7 +148,9 @@ Clipperz.PM.UI.Components.Cards.Edit = React.createClass({
}
//console.log("RENDER CARD EDIT");
return React.DOM.div({'className':React.addons.classSet(classes)},[
return React.DOM.div({'className':'editWrapper'}, [
React.DOM.div({'className':'mask'}),
React.DOM.div({'className':React.addons.classSet(classes)},[
Clipperz.PM.UI.Components.Cards.EditToolbar(this.props),
React.DOM.div({'className':'content'}, [
this.renderLabel(this.props['label']),
@ -158,6 +160,7 @@ Clipperz.PM.UI.Components.Cards.Edit = React.createClass({
this.renderAddNewField(),
this.renderDirectLogins(this.props['directLogins'])
])
])
]);
},

View File

@ -265,29 +265,50 @@ div.cardContent {
@include flexbox();
& > div.view, & > div.edit {
div.editWrapper {
@include flex(auto);
@include mask();
@include flexbox;
& > div.edit {
@include flex(auto);
@include flexbox;
@include flex-direction(column);
position: relative;
z-index: 10+1;
.content {
background-color: yellow;
}
}
}
& > div.view /*, & > div.editWrapper > div.edit */ {
@include flex(auto);
@include flexbox;
@include flex-direction(column);
// .cardDetailToolbar {
// @include flex(none);
// height: $mainCardToolbarHeight;
// line-height: $mainCardToolbarHeight;
// }
}
.content {
@include flex(auto);
overflow-y: scroll;
}
}
}
}
#cardDetailPage {
& > .view, & > .edit {
& > .view, & > .editWrapper > .edit {
@include flexbox();
@include flex-direction(column);
height: 100%;