clipperz/password-manager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js
View File

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

27
frontend/delta/scss/core/layout.scss
View File

@ -265,29 +265,50 @@ div.cardContent {
@include flexbox(); @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 flex(auto);
@include flexbox; @include flexbox;
@include flex-direction(column); @include flex-direction(column);
// .cardDetailToolbar { // .cardDetailToolbar {
// @include flex(none); // @include flex(none);
// height: $mainCardToolbarHeight; // height: $mainCardToolbarHeight;
// line-height: $mainCardToolbarHeight; // line-height: $mainCardToolbarHeight;
// } // }
}
.content { .content {
@include flex(auto); @include flex(auto);
overflow-y: scroll; overflow-y: scroll;
} }
} }
}
} }
#cardDetailPage { #cardDetailPage {
& > .view, & > .edit { & > .view, & > .editWrapper > .edit {
@include flexbox(); @include flexbox();
@include flex-direction(column); @include flex-direction(column);
height: 100%; height: 100%;