From fc0805916e620830c6c6ec0324a3da0fbf2d10e4 Mon Sep 17 00:00:00 2001
From: Giulio Cesare Solaroli <giulio.cesare@clipperz.com>
Date: Wed, 27 Aug 2014 18:03:37 +0200
Subject: [PATCH] Added the mask to avoid switching card, when in editing mode.

---
 .../Clipperz/PM/UI/Components/Cards/Edit.js   | 23 +++++++------
 frontend/delta/scss/core/layout.scss          | 33 +++++++++++++++----
 2 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js
index 0232c32..08d92e0 100644
--- a/frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js
+++ b/frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js
@@ -144,19 +144,22 @@ Clipperz.PM.UI.Components.Cards.Edit = React.createClass({
 
 	render: function () {
 		var	classes = {
-			'edit':		true
+			'edit':	true
 		}
 
 //console.log("RENDER CARD EDIT");
-		return	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']),
-				this.renderTags(this.props['tags']),
-				this.renderNotes(this.props['notes']),
-				this.renderFields(this.props['fields']),
-				this.renderAddNewField(),
-				this.renderDirectLogins(this.props['directLogins'])
+		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']),
+					this.renderTags(this.props['tags']),
+					this.renderNotes(this.props['notes']),
+					this.renderFields(this.props['fields']),
+					this.renderAddNewField(),
+					this.renderDirectLogins(this.props['directLogins'])
+				])
 			])
 		]);
 	},
diff --git a/frontend/delta/scss/core/layout.scss b/frontend/delta/scss/core/layout.scss
index cf8a3b9..5f91d50 100644
--- a/frontend/delta/scss/core/layout.scss
+++ b/frontend/delta/scss/core/layout.scss
@@ -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;
-			}
+		}
+
+		.content {
+			@include flex(auto);
+			overflow-y: scroll;
 		}
 	}
 }
 
 
 #cardDetailPage {
-	& > .view, & > .edit {
+	& > .view, & > .editWrapper > .edit {
 		@include flexbox();
 		@include flex-direction(column);
 		height: 100%;