Fixed #34 (Reorder fields within cards)

2024-12-21 16:37:55 +01:00 · 2015-08-19 13:23:00 +02:00 · 2015-08-19 13:23:00 +02:00 · 4a869380b0
commit 4a869380b0
parent 4cdaee4a6f
5 changed files with 302 additions and 155 deletions
--- a/.gitignore
+++ b/.gitignore
@ -4,3 +4,4 @@ backend/java
 scripts/builder/backends/javaBuilder.py
 scripts/btcTranfer
 scripts/deltaDeploy
+/.project
--- a/frontend/delta/css/clipperz.css
+++ b/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,7 +2490,11 @@ div.cardList.narrow {
        cursor: grabbing;
        cursor: -moz-grabbing;
        cursor: -webkit-grabbing; }
-    .content .cardField .fieldEditAction .dragHandler {
+    .content .cardField .fieldEditAction .dragHandlerContainer {
+      width: 40px;
+      height: 25px;
+      display: block; }
+      .content .cardField .fieldEditAction .dragHandlerContainer .dragHandler {
        display: block;
        box-sizing: border-box;
        width: 4px;
@ -2513,11 +2506,11 @@ div.cardList.narrow {
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab; }
-      .content .cardField .fieldEditAction .dragHandler:active {
+        .content .cardField .fieldEditAction .dragHandlerContainer .dragHandler:active {
          cursor: grabbing;
          cursor: -moz-grabbing;
          cursor: -webkit-grabbing; }
-      .content .cardField .fieldEditAction .dragHandler:before {
+        .content .cardField .fieldEditAction .dragHandlerContainer .dragHandler:before {
          display: block;
          box-sizing: border-box;
          content: '';
@ -2529,7 +2522,7 @@ div.cardList.narrow {
          border-top: 0;
          border-bottom: 0;
          z-index: 2; }
-      .content .cardField .fieldEditAction .dragHandler:after {
+        .content .cardField .fieldEditAction .dragHandlerContainer .dragHandler:after {
          display: block;
          box-sizing: border-box;
          content: '';
@ -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 {
--- a/frontend/delta/css/clipperz.css.map
+++ b/frontend/delta/css/clipperz.css.map
--- a/frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js
+++ b/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, {
-			'draggedFieldReference': fieldReference,
-			'fromFieldPosition': fieldPosition,
-			'toFieldPosition': -1,
-			'dropPosition': -1
-		}));
+		this.fieldMoveStart(fieldReference, fieldPosition, false);
 	},
+
+	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");
 		}

+		// Delayed because
+		//  - A quick touch would prevent the state to update correctly otherwise (don't know why)
+		//  - It takes a little time to actually move the field
+		MochiKit.Async.callLater(0.1, MochiKit.Base.bind(function () {
 			this.setState({
 				'draggedFieldReference': null,
 				'fromFieldPosition': -1,
 				'toFieldPosition': -1,
 				'dropPosition': -1
-		})
+			});
+		}, this));
 	},

 	//............................................................................
@ -118,22 +145,23 @@ console.log("DROP");	//, anEvent);
 //		this.setState({'toFieldPosition': this.positionOfField(anEvent.currentTarget.dataset['reference'])});
 	},
 */
-	dragOver: function (anEvent) {
-//console.log("DRAG OVER", anEvent);
-//console.log("DRAG OVER", anEvent.currentTarget.dataset['index']);
+	handleOverField: function(aTarget, aClientY) {
+// console.log("OVER FIELD", aTarget.dataset['index']);
+
 		var	toFieldPosition;
 		var	dropPosition;

-		if (typeof(anEvent.currentTarget.dataset['index']) != 'undefined') {
-			var dragElement = MochiKit.DOM.getElement(anEvent.currentTarget.dataset['reference']);
-			var	y = anEvent.clientY - dragElement.getBoundingClientRect().top;
+		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 = +anEvent.currentTarget.dataset['index'];
+		hoveringIndex = +aTarget.dataset['index'];
 		draggingIndex = +this.state['fromFieldPosition'];
 		
 		isHoveringTopPart = (y < h/2);
@ -149,19 +177,109 @@ console.log("DROP");	//, anEvent);
 		}
 		
 		toFieldPosition = -1;
-//console.log(hoveringIndex, draggingIndex, isHoveringTopPart, dropPosition);
-//console.log("isHoveringTopPart", isHoveringTopPart);
-		} else {
-			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});
 		}
+	},
+
+	dragOver: function (anEvent) {
+//console.log("DRAG OVER", anEvent);
+//console.log("DRAG OVER", anEvent.currentTarget.dataset['index']);
+		var	toFieldPosition;
+		var	dropPosition;
+
+		if (typeof(anEvent.currentTarget.dataset['index']) != 'undefined') {
+			this.handleOverField(anEvent.currentTarget, anEvent.clientY);
+
+//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});
+			}
+		}

 		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) {
-//console.log("DRAG OVER DROP TARGET", anEvent.currentTarget.dataset['dropIndex']/*, anEvent*/);
-		var	toFieldPosition = anEvent.currentTarget.dataset['dropIndex'];
+	handleOverDropTarget: function(toFieldPosition) {
+//console.log("OVER DROP TARGET", toFieldPosition);

 		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,8 +486,12 @@ console.log("DROP");	//, anEvent);
 		cardFieldClasses[aField['actionType']] = true;
 		cardFieldClasses['hidden'] = aField['isHidden'];
 		if (this.state['draggedFieldReference'] == aField['_reference']) {
+			if (this.state.touchStyle) {
+				cardFieldClasses['draggedTouch'] = true;
+			} else {
 				cardFieldClasses['dragged'] = true;
 			}
+		}

 		cardFieldValueClasses['fieldValue'] = true;
 		cardFieldValueClasses[aField['actionType']] = 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;
--- a/frontend/delta/scss/style/card.scss
+++ b/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,6 +470,12 @@ $cardViewBasePadding: 10px;

 			$dragHandlerHeight: 24px;
 			$dragHandlerWidth: 4px;
+
+			.dragHandlerContainer {
+				width: 40px;
+				height: 25px;
+				display: block;
+
 				.dragHandler {
 					display: block;
 					box-sizing: border-box;
@ -513,6 +526,10 @@ $cardViewBasePadding: 10px;
 				}
 			}

+
+
+		}
+		
 		.fieldValues {
 			@include flex(1);
 			padding: $cardViewBasePadding;