Fixed #34 (Reorder fields within cards)

.gitignore

@@ -3,4 +3,5 @@ target
 backend/java
 scripts/builder/backends/javaBuilder.py
 scripts/btcTranfer
-scripts/deltaDeploy
+scripts/deltaDeploy
+/.project

frontend/delta/css/clipperz.css

@@ -119,7 +119,6 @@ http://jonibologna.com/flexbox-cheatsheet/
     -ms-transform: rotate(0deg) translate(0, 0);
     -o-transform: rotate(0deg) translate(0, 0);
     transform: rotate(0deg) translate(0, 0); }
-
   100% {
     -webkit-transform: rotate(359deg) translate(0, 0);
     -moz-transform: rotate(359deg) translate(0, 0);
@@ -133,7 +132,6 @@ http://jonibologna.com/flexbox-cheatsheet/
     -ms-transform: rotate(0deg) translate(0, 0);
     -o-transform: rotate(0deg) translate(0, 0);
     transform: rotate(0deg) translate(0, 0); }
-
   100% {
     -webkit-transform: rotate(359deg) translate(0, 0);
     -moz-transform: rotate(359deg) translate(0, 0);
@@ -147,7 +145,6 @@ http://jonibologna.com/flexbox-cheatsheet/
     -ms-transform: rotate(0deg) translate(0, 0);
     -o-transform: rotate(0deg) translate(0, 0);
     transform: rotate(0deg) translate(0, 0); }
-
   100% {
     -webkit-transform: rotate(359deg) translate(0, 0);
     -moz-transform: rotate(359deg) translate(0, 0);
@@ -161,7 +158,6 @@ http://jonibologna.com/flexbox-cheatsheet/
     -ms-transform: rotate(0deg) translate(0, 0);
     -o-transform: rotate(0deg) translate(0, 0);
     transform: rotate(0deg) translate(0, 0); }
-
   100% {
     -webkit-transform: rotate(359deg) translate(0, 0);
     -moz-transform: rotate(359deg) translate(0, 0);
@@ -479,73 +475,61 @@ div.overlay {
 @-webkit-keyframes overlay-spin {
   from {
     opacity: 1; }
-
   to {
     opacity: 0.25; } }
 @-moz-keyframes overlay-spin {
   from {
     opacity: 1; }
-
   to {
     opacity: 0.25; } }
 @-ms-keyframes overlay-spin {
   from {
     opacity: 1; }
-
   to {
     opacity: 0.25; } }
 @keyframes overlay-spin {
   from {
     opacity: 1; }
-
   to {
     opacity: 0.25; } }
 @-webkit-keyframes ios-overlay-show {
   0% {
     opacity: 0; }
-
   100% {
     opacity: 1; } }
 @-moz-keyframes ios-overlay-show {
   0% {
     opacity: 0; }
-
   100% {
     opacity: 1; } }
 @-ms-keyframes ios-overlay-show {
   0% {
     opacity: 0; }
-
   100% {
     opacity: 1; } }
 @keyframes ios-overlay-show {
   0% {
     opacity: 0; }
-
   100% {
     opacity: 1; } }
 @-webkit-keyframes ios-overlay-hide {
   0% {
     opacity: 1; }
-
   100% {
     opacity: 0; } }
 @-moz-keyframes ios-overlay-hide {
   0% {
     opacity: 1; }
-
   100% {
     opacity: 0; } }
 @-ms-keyframes ios-overlay-hide {
   0% {
     opacity: 1; }
-
   100% {
     opacity: 0; } }
 @keyframes ios-overlay-hide {
   0% {
     opacity: 1; }
-
   100% {
     opacity: 0; } }
 /*
@@ -1187,11 +1171,11 @@ div.dialogBox {
         flex: 1;
         font-size: 8pt; }
         #loginPage div.loginForm footer .applicationVersion span {
-          color: #999999; }
+          color: #999; }
           #loginPage div.loginForm footer .applicationVersion span:after {
             content: ":"; }
         #loginPage div.loginForm footer .applicationVersion a {
-          color: #999999;
+          color: #999;
           text-decoration: none;
           padding-left: 5px;
           font-weight: bold; }
@@ -1671,13 +1655,13 @@ span.count {
   #extraFeaturesPanel .extraFeatureIndex footer {
     font-size: 8pt;
     padding: 5px 5px 5px 5px;
-    border-top: 1px solid #999999; }
+    border-top: 1px solid #999; }
     #extraFeaturesPanel .extraFeatureIndex footer span {
-      color: #999999; }
+      color: #999; }
       #extraFeaturesPanel .extraFeatureIndex footer span:after {
         content: ":"; }
     #extraFeaturesPanel .extraFeatureIndex footer a {
-      color: #999999;
+      color: #999;
       text-decoration: none;
       padding-left: 5px;
       font-weight: bold; }
@@ -2237,7 +2221,7 @@ div.cardList ul {
       padding-right: 0px;
       box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2); }
     div.cardList ul li.archived {
-      background-color: #eeeeee;
+      background-color: #eee;
       color: #999; }
     div.cardList ul li .favicon {
       width: 48px;
@@ -2309,7 +2293,7 @@ div.cardList.narrow {
     content: ""; }
 
 #cardDetailPage .view.archived, .cardDetail .view.archived {
-  background-color: #eeeeee; }
+  background-color: #eee; }
 #cardDetailPage .view .cardDetailToolbar, .cardDetail .view .cardDetailToolbar {
   background-color: #1863a1;
   color: white; }
@@ -2457,6 +2441,11 @@ div.cardList.narrow {
   flex-direction: row; }
   .content .cardField.dragged {
     display: none; }
+  .content .cardField.draggedTouch {
+    position: absolute;
+    width: 100%;
+    background-color: white;
+    opacity: .8; }
   .content .cardField .fieldEditAction {
     -webkit-user-select: text;
     /* Chrome all / Safari all */
@@ -2492,7 +2481,7 @@ div.cardList.narrow {
       cursor: grab;
       cursor: -moz-grab;
       cursor: -webkit-grab;
-      background: repeating-linear-gradient(0deg, white, white 2px, #dddddd 2px, #dddddd 3px);
+      background: repeating-linear-gradient(0deg, white, white 2px, #ddd 2px, #ddd 3px);
       width: 28px;
       height: 20px;
       margin-left: 6px;
@@ -2501,46 +2490,50 @@ div.cardList.narrow {
         cursor: grabbing;
         cursor: -moz-grabbing;
         cursor: -webkit-grabbing; }
-    .content .cardField .fieldEditAction .dragHandler {
+    .content .cardField .fieldEditAction .dragHandlerContainer {
-      display: block;
+      width: 40px;
-      box-sizing: border-box;
+      height: 25px;
-      width: 4px;
+      display: block; }
-      height: 24px;
+      .content .cardField .fieldEditAction .dragHandlerContainer .dragHandler {
-      margin-left: 15px;
-      border: 1px solid #E8E8E8;
-      border-top: 0;
-      border-bottom: 0;
-      cursor: grab;
-      cursor: -moz-grab;
-      cursor: -webkit-grab; }
-      .content .cardField .fieldEditAction .dragHandler:active {
-        cursor: grabbing;
-        cursor: -moz-grabbing;
-        cursor: -webkit-grabbing; }
-      .content .cardField .fieldEditAction .dragHandler:before {
         display: block;
         box-sizing: border-box;
-        content: '';
-        position: relative;
-        left: -1px;
-        height: 100%;
         width: 4px;
-        border: 2px dotted #FFF;
+        height: 24px;
+        margin-left: 15px;
+        border: 1px solid #E8E8E8;
         border-top: 0;
         border-bottom: 0;
-        z-index: 2; }
+        cursor: grab;
-      .content .cardField .fieldEditAction .dragHandler:after {
+        cursor: -moz-grab;
-        display: block;
+        cursor: -webkit-grab; }
-        box-sizing: border-box;
+        .content .cardField .fieldEditAction .dragHandlerContainer .dragHandler:active {
-        content: '';
+          cursor: grabbing;
-        position: relative;
+          cursor: -moz-grabbing;
-        top: -24px;
+          cursor: -webkit-grabbing; }
-        left: 0px;
+        .content .cardField .fieldEditAction .dragHandlerContainer .dragHandler:before {
-        right: 0px;
+          display: block;
-        height: 100%;
+          box-sizing: border-box;
-        border: 1px solid #EEE;
+          content: '';
-        border-top: 0;
+          position: relative;
-        border-bottom: 0; }
+          left: -1px;
+          height: 100%;
+          width: 4px;
+          border: 2px dotted #FFF;
+          border-top: 0;
+          border-bottom: 0;
+          z-index: 2; }
+        .content .cardField .fieldEditAction .dragHandlerContainer .dragHandler:after {
+          display: block;
+          box-sizing: border-box;
+          content: '';
+          position: relative;
+          top: -24px;
+          left: 0px;
+          right: 0px;
+          height: 100%;
+          border: 1px solid #EEE;
+          border-top: 0;
+          border-bottom: 0; }
   .content .cardField .fieldValues {
     flex: 1;
     padding: 10px; }
@@ -2697,7 +2690,7 @@ div.cardList.narrow {
     min-width: 220px;
     width: 80%;
     max-width: 400px;
-    background-color: #333333;
+    background-color: #333;
     color: #fff;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
@@ -2712,7 +2705,7 @@ div.cardList.narrow {
       margin-left: 0px;
       width: 0;
       height: 0;
-      border-top: 5px solid #333333;
+      border-top: 5px solid #333;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent; }
     .passwordGenerator .passwordGeneratorBaloon form span {

frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js

@@ -62,6 +62,16 @@ Clipperz.PM.UI.Components.Cards.EditClass = React.createClass({
 	
 	//============================================================================
 
+	fieldMoveStart: function(aFieldReference, aFieldPosition, touchStyle) {
+		MochiKit.Async.callLater(0.1, MochiKit.Base.bind(this.setState, this, {
+			'draggedFieldReference': aFieldReference,
+			'fromFieldPosition': aFieldPosition,
+			'touchStyle': touchStyle,
+			'toFieldPosition': -1,
+			'dropPosition': -1
+		}));
+	},
+
 	dragStart: function (anEvent) {
 		var	fieldReference = anEvent.currentTarget.dataset['reference'];
 		var fieldPosition = this.positionOfField(fieldReference);
@@ -74,13 +84,21 @@ Clipperz.PM.UI.Components.Cards.EditClass = React.createClass({
 
 		anEvent.dataTransfer.setData('Text', ""); // Firefox wants this to be defined
 
-		MochiKit.Async.callLater(0.1, MochiKit.Base.bind(this.setState, this, {
+		this.fieldMoveStart(fieldReference, fieldPosition, false);
-			'draggedFieldReference': fieldReference,
-			'fromFieldPosition': fieldPosition,
-			'toFieldPosition': -1,
-			'dropPosition': -1
-		}));
 	},
+
+	touchStart: function (anEvent) {
+		var fieldReference = anEvent.currentTarget.dataset['reference'];
+		var fieldPosition = this.positionOfField(fieldReference);
+		var dragElement = MochiKit.DOM.getElement(fieldReference);
+
+		this.fieldMoveStart(fieldReference, fieldPosition, true);
+
+		anEvent.preventDefault();
+		anEvent.stopPropagation();
+	},
+
+
 /*
 	drag: function (anEvent) {
 //console.log("DRAG", anEvent);
@@ -89,26 +107,35 @@ Clipperz.PM.UI.Components.Cards.EditClass = React.createClass({
 console.log("DROP");	//, anEvent);
 	},
 */
-	dragEnd: function (anEvent) {
+	fieldMoveEnd: function (anEvent) {
+		var draggedElement = MochiKit.DOM.getElement(anEvent.target.dataset['reference']);
 		var	dragPosition = this.state['dropPosition'];	//	this.state['toFieldPosition']
 
+		draggedElement.style.top = '';
+
 		if (dragPosition != -1) {
 			var	reference = this.props['_reference'];
 //console.log("MOVE FIELD POSITION", this.state['toFieldPosition'], this.state['draggedFieldReference']);
-			Clipperz.Async.callbacks("Clipperz.PM.UI.Components.Cards.Edit.dragEnd-moveFieldToPosition", [
+			Clipperz.Async.callbacks("Clipperz.PM.UI.Components.Cards.Edit.fieldMoveEnd-moveFieldToPosition", [
 				MochiKit.Base.method(this.record(), 'moveFieldToPosition', this.state['draggedFieldReference'], dragPosition),
 				MochiKit.Base.partial(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'refreshCardEditDetail', reference),
 			], {trace:false});
+
 		} else {
 //console.log("CANCELLED FIELD MOVE");
 		}
 
-		this.setState({
+		// Delayed because
-			'draggedFieldReference': null,
+		//  - A quick touch would prevent the state to update correctly otherwise (don't know why)
-			'fromFieldPosition': -1,
+		//  - It takes a little time to actually move the field
-			'toFieldPosition': -1,
+		MochiKit.Async.callLater(0.1, MochiKit.Base.bind(function () {
-			'dropPosition': -1
+			this.setState({
-		})
+				'draggedFieldReference': null,
+				'fromFieldPosition': -1,
+				'toFieldPosition': -1,
+				'dropPosition': -1
+			});
+		}, this));
 	},
 
 	//............................................................................
@@ -118,6 +145,45 @@ console.log("DROP");	//, anEvent);
 //		this.setState({'toFieldPosition': this.positionOfField(anEvent.currentTarget.dataset['reference'])});
 	},
 */
+	handleOverField: function(aTarget, aClientY) {
+// console.log("OVER FIELD", aTarget.dataset['index']);
+
+		var	toFieldPosition;
+		var	dropPosition;
+
+		var dragElement = MochiKit.DOM.getElement(aTarget.dataset['reference']);
+// console.log('target', aTarget);
+// console.log('element', dragElement);
+		var	y = aClientY - dragElement.getBoundingClientRect().top;
+		var	h = dragElement.getBoundingClientRect().height;
+
+		var	hoveringIndex;
+		var	draggingIndex;
+		var	isHoveringTopPart;
+		
+		hoveringIndex = +aTarget.dataset['index'];
+		draggingIndex = +this.state['fromFieldPosition'];
+		
+		isHoveringTopPart = (y < h/2);
+		
+		if (isHoveringTopPart) {
+			dropPosition = hoveringIndex;
+		} else {
+			dropPosition = hoveringIndex + 1;
+		}
+		
+		if (hoveringIndex > draggingIndex) {
+			dropPosition = dropPosition - 1;
+		}
+		
+		toFieldPosition = -1;
+
+//console.log("-- ", dropPosition, this.state['dropPosition'], toFieldPosition, this.state['toFieldPosition']);
+		if ((dropPosition != this.state['dropPosition']) || (toFieldPosition != this.state['toFieldPosition'])) {
+			this.setState({'dropPosition': dropPosition, 'toFieldPosition': toFieldPosition});
+		}
+	},
+
 	dragOver: function (anEvent) {
 //console.log("DRAG OVER", anEvent);
 //console.log("DRAG OVER", anEvent.currentTarget.dataset['index']);
@@ -125,43 +191,95 @@ console.log("DROP");	//, anEvent);
 		var	dropPosition;
 
 		if (typeof(anEvent.currentTarget.dataset['index']) != 'undefined') {
-			var dragElement = MochiKit.DOM.getElement(anEvent.currentTarget.dataset['reference']);
+			this.handleOverField(anEvent.currentTarget, anEvent.clientY);
-			var	y = anEvent.clientY - dragElement.getBoundingClientRect().top;
-			var	h = dragElement.getBoundingClientRect().height;
 
-			var	hoveringIndex;
-			var	draggingIndex;
-			var	isHoveringTopPart;
-			
-			hoveringIndex = +anEvent.currentTarget.dataset['index'];
-			draggingIndex = +this.state['fromFieldPosition'];
-			
-			isHoveringTopPart = (y < h/2);
-			
-			if (isHoveringTopPart) {
-				dropPosition = hoveringIndex;
-			} else {
-				dropPosition = hoveringIndex + 1;
-			}
-			
-			if (hoveringIndex > draggingIndex) {
-				dropPosition = dropPosition - 1;
-			}
-			
-			toFieldPosition = -1;
 //console.log(hoveringIndex, draggingIndex, isHoveringTopPart, dropPosition);
 //console.log("isHoveringTopPart", isHoveringTopPart);
+
 		} else {
+			// TODO: this case is not handled by touch events
+			// (shouldn't this never happen anyway?)
+
 			dropPosition = anEvent.currentTarget.dataset['dropIndex'];
 			toFieldPosition = dropPosition;
+
+			//console.log("-- ", dropPosition, this.state['dropPosition'], toFieldPosition, this.state['toFieldPosition']);
+			if ((dropPosition != this.state['dropPosition']) || (toFieldPosition != this.state['toFieldPosition'])) {
+				this.setState({'dropPosition': dropPosition, 'toFieldPosition': toFieldPosition});
+			}
 		}
-//console.log("-- ", dropPosition, this.state['dropPosition'], toFieldPosition, this.state['toFieldPosition']);
+
-		if ((dropPosition != this.state['dropPosition']) || (toFieldPosition != this.state['toFieldPosition'])) {
-			this.setState({'dropPosition': dropPosition, 'toFieldPosition':toFieldPosition});
-		}
-		
 		anEvent.stopPropagation();
 	},
+
+	touchMove: function(anEvent) {
+		var hoveredElement;
+
+		var touch = anEvent.touches[0];
+		var draggedElement = MochiKit.DOM.getElement(anEvent.target.dataset['reference']);
+		
+		this.setDraggedElementTopValue(draggedElement, touch.clientY);
+
+		hoveredElement = this.getElementBelowDraggedElement(touch.clientX, touch.clientY, draggedElement);
+
+		if (hoveredElement) {
+			if (hoveredElement.className == 'dropArea') {
+				this.handleOverDropTarget(hoveredElement.dataset['dropIndex']);
+			} else {
+				var cardFieldElement = this.getCardFieldFromElement(hoveredElement);
+
+				if (cardFieldElement) {
+					this.handleOverField(cardFieldElement, anEvent.touches[0].clientY);
+				} else {
+					// console.log(hoveredElement);
+				}
+			}
+		}
+
+		anEvent.preventDefault();
+		anEvent.stopPropagation();
+	},
+
+	getElementBelowDraggedElement: function(aClientX, aClientY, aDraggedElement) {
+		var result;
+
+		aDraggedElement.style.display = 'none';
+		result = document.elementFromPoint(aClientX, aClientY);
+		aDraggedElement.style.display = '';
+
+		return result;
+	},
+
+	// TODO: This method uses empirical values, it could meke sense to reference actual
+	// elements' measures
+	setDraggedElementTopValue: function(aDraggedElement, aClientY) {
+		var topValue;
+		
+		topValue = aClientY - aDraggedElement.getBoundingClientRect().height;
+		topValue = (this.props.style != 'narrow') ? topValue-40 : topValue+54;
+		aDraggedElement.style.top = topValue+'px';
+	},
+
+	/** Returns anElement itself if it is a card field, or the closest ancestor of
+	 *  anElement holding the data-index property, or false if no such an ancestor
+	 *  exists. */
+	getCardFieldFromElement: function(anElement) {
+		var result;
+
+		if (typeof(anElement.dataset['index']) != 'undefined') {
+			result = anElement;
+		} else {
+			var parentElement = anElement.parentElement;
+			if (parentElement) {
+				result = this.getCardFieldFromElement(parentElement);
+			} else {
+				result = false;
+			}
+		}
+
+		return result;
+	},
+
 /*
 	dragLeave: function (anEvent) {
 //console.log("DRAG LEAVE", anEvent.currentTarget.dataset['reference'], this.positionOfField(anEvent.currentTarget.dataset['reference']));
@@ -192,14 +310,20 @@ console.log("DROP");	//, anEvent);
 //console.log("TARGET: DRAG ENTER");
 	},
 */
-	dragOverDropTarget: function (anEvent) {
+	handleOverDropTarget: function(toFieldPosition) {
-//console.log("DRAG OVER DROP TARGET", anEvent.currentTarget.dataset['dropIndex']/*, anEvent*/);
+//console.log("OVER DROP TARGET", toFieldPosition);
-		var	toFieldPosition = anEvent.currentTarget.dataset['dropIndex'];
+
-		
 		if (toFieldPosition != this.state['toFieldPosition']) {
 //console.log("TARGET: DRAG OVER - READY TO DROP", anEvent.currentTarget.dataset['dropIndex']);
 			this.setState({'toFieldPosition':toFieldPosition});
 		}
+	},
+
+	dragOverDropTarget: function (anEvent) {
+//console.log("DRAG OVER DROP TARGET", anEvent.currentTarget.dataset['dropIndex']/*, anEvent*/);
+		var	toFieldPosition = anEvent.currentTarget.dataset['dropIndex'];
+		
+		this.handleOverDropTarget(toFieldPosition);
 
 		anEvent.stopPropagation();
 	},
@@ -362,7 +486,11 @@ console.log("DROP");	//, anEvent);
 		cardFieldClasses[aField['actionType']] = true;
 		cardFieldClasses['hidden'] = aField['isHidden'];
 		if (this.state['draggedFieldReference'] == aField['_reference']) {
-			cardFieldClasses['dragged'] = true;
+			if (this.state.touchStyle) {
+				cardFieldClasses['draggedTouch'] = true;
+			} else {
+				cardFieldClasses['dragged'] = true;
+			}
 		}
 
 		cardFieldValueClasses['fieldValue'] = true;
@@ -376,15 +504,24 @@ console.log("DROP");	//, anEvent);
 		}, [
 			React.DOM.div({'className':'fieldEditAction'}, [
 				React.DOM.span({'className':'removeField', 'onClick':this.removeField(field)}, "remove field"),
-				React.DOM.span({'className':'dragHandler',
+				React.DOM.div({'className':'dragHandlerContainer',
 								'draggable':true, 
 								'data-reference':ref,
 								'data-document-id':ref,
 								'data-index':this.positionOfField(ref),
 
 								'onDragStart':this.dragStart,
-								'onDragEnd':this.dragEnd
+								'onDragEnd':this.fieldMoveEnd,
-				}, ' ')
+
+								'onTouchStart': this.touchStart,
+								'onTouchMove': this.touchMove,
+								'onTouchEnd': this.fieldMoveEnd,
+				}, React.DOM.span({
+					'className':'dragHandler',
+					'data-reference':ref,
+					'data-document-id':ref,
+					'data-index':this.positionOfField(ref),
+				}, ' '))
 			]),
 			React.DOM.div({'className':'fieldValues'}, [
 				React.DOM.div({'className':'fieldLabel'}, [
@@ -417,7 +554,6 @@ console.log("DROP");	//, anEvent);
 							'onDragLeave': this.dragLeaveDropTarget,
 //							'onDrop': this.dropDropTarget,
 //							'onDragEnd':this.dragEndDropTarget
-							
 						});
 
 		var dropAreaNodeIndex = (dropAreaPositionIndex < dragFrom) ? dropAreaPositionIndex : dropAreaPositionIndex + 1;

frontend/delta/scss/style/card.scss

@@ -411,6 +411,13 @@ $cardViewBasePadding: 10px;
 			display: none;
 		}
 		
+		&.draggedTouch {
+			position: absolute;
+			width: 100%;
+			background-color: white;
+			opacity: .8;
+		}
+		
 		.fieldEditAction {
 			@include user-select(text);
 			@include flex(none);
@@ -463,54 +470,64 @@ $cardViewBasePadding: 10px;
 
 			$dragHandlerHeight: 24px;
 			$dragHandlerWidth: 4px;
-			.dragHandler {
+
+			.dragHandlerContainer {
+				width: 40px;
+				height: 25px;
 				display: block;
-				box-sizing: border-box;
-				width:  $dragHandlerWidth;
-				height: $dragHandlerHeight;
 
-				margin-left: 15px;
+				.dragHandler {
-				border:1px solid #E8E8E8;
-//				border:1px solid red;
-				border-top:0;
-				border-bottom:0;
-				@include cursor-grab();
-
-				&:active {
-					@include cursor-grabbing();
-				}
-
-				&:before {
 					display: block;
 					box-sizing: border-box;
-					content:'';
+					width:  $dragHandlerWidth;
-					position: relative;
+					height: $dragHandlerHeight;
-					left:-1px;
+
-//					right:-2px;
+					margin-left: 15px;
-					height: 100%;
+					border:1px solid #E8E8E8;
-					width: $dragHandlerWidth;
+	//				border:1px solid red;
-					border:2px dotted #FFF;
-//					border:2px dotted blue;
 					border-top:0;
 					border-bottom:0;
-					z-index:2;
+					@include cursor-grab();
+
+					&:active {
+						@include cursor-grabbing();
+					}
+
+					&:before {
+						display: block;
+						box-sizing: border-box;
+						content:'';
+						position: relative;
+						left:-1px;
+	//					right:-2px;
+						height: 100%;
+						width: $dragHandlerWidth;
+						border:2px dotted #FFF;
+	//					border:2px dotted blue;
+						border-top:0;
+						border-bottom:0;
+						z-index:2;
+					}
+					&:after {
+						display: block;
+						box-sizing: border-box;
+						content:'';
+						position: relative;
+						top: -$dragHandlerHeight;
+						left:0px;
+						right:0px;
+						height:100%;
+						border:1px solid #EEE;
+	//					border:1px solid green;
+						border-top:0;
+						border-bottom:0;
+					}
+					
 				}
-				&:after {
+			}
-					display: block;
+
-					box-sizing: border-box;
+
-					content:'';
+
-					position: relative;
-					top: -$dragHandlerHeight;
-					left:0px;
-					right:0px;
-					height:100%;
-					border:1px solid #EEE;
-//					border:1px solid green;
-					border-top:0;
-					border-bottom:0;
-				}
-				
-			}			
 		}
 		
 		.fieldValues {