clipperz
/
password-manager-mirror
mirror of http://git.whoc.org.uk/git/password-manager.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Fixed #34 (Reorder fields within cards)

master-GE
Dario Chiappetta 2015-08-19 13:23:00 +02:00
parent 4cdaee4a6f
commit 4a869380b0
5 changed files with 302 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

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

115
frontend/delta/css/clipperz.css
View File

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

2
frontend/delta/css/clipperz.css.map
View File

File diff suppressed because one or more lines are too long

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

@ -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) { dragStart: function (anEvent) {
var fieldReference = anEvent.currentTarget.dataset['reference']; var fieldReference = anEvent.currentTarget.dataset['reference'];
var fieldPosition = this.positionOfField(fieldReference); 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 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) { drag: function (anEvent) {
//console.log("DRAG", anEvent); //console.log("DRAG", anEvent);
@ -89,26 +107,35 @@ Clipperz.PM.UI.Components.Cards.EditClass = React.createClass({
console.log("DROP"); //, anEvent); 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'] var dragPosition = this.state['dropPosition']; // this.state['toFieldPosition']
draggedElement.style.top = '';
if (dragPosition != -1) { if (dragPosition != -1) {
var reference = this.props['_reference']; var reference = this.props['_reference'];
//console.log("MOVE FIELD POSITION", this.state['toFieldPosition'], this.state['draggedFieldReference']); //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.method(this.record(), 'moveFieldToPosition', this.state['draggedFieldReference'], dragPosition),
MochiKit.Base.partial(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'refreshCardEditDetail', reference), MochiKit.Base.partial(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'refreshCardEditDetail', reference),
], {trace:false}); ], {trace:false});
} else { } else {
//console.log("CANCELLED FIELD MOVE"); //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'])}); // 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) { dragOver: function (anEvent) {
//console.log("DRAG OVER", anEvent); //console.log("DRAG OVER", anEvent);
//console.log("DRAG OVER", anEvent.currentTarget.dataset['index']); //console.log("DRAG OVER", anEvent.currentTarget.dataset['index']);
@ -125,43 +191,95 @@ console.log("DROP"); //, anEvent);
var dropPosition; var dropPosition;
if (typeof(anEvent.currentTarget.dataset['index']) != 'undefined') { 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(hoveringIndex, draggingIndex, isHoveringTopPart, dropPosition);
//console.log("isHoveringTopPart", isHoveringTopPart); //console.log("isHoveringTopPart", isHoveringTopPart);
} else { } else {
// TODO: this case is not handled by touch events
// (shouldn't this never happen anyway?)
dropPosition = anEvent.currentTarget.dataset['dropIndex']; dropPosition = anEvent.currentTarget.dataset['dropIndex'];
toFieldPosition = dropPosition; 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(); 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) { dragLeave: function (anEvent) {
//console.log("DRAG LEAVE", anEvent.currentTarget.dataset['reference'], this.positionOfField(anEvent.currentTarget.dataset['reference'])); //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"); //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']) { if (toFieldPosition != this.state['toFieldPosition']) {
//console.log("TARGET: DRAG OVER - READY TO DROP", anEvent.currentTarget.dataset['dropIndex']); //console.log("TARGET: DRAG OVER - READY TO DROP", anEvent.currentTarget.dataset['dropIndex']);
this.setState({'toFieldPosition':toFieldPosition}); 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(); anEvent.stopPropagation();
}, },
@ -362,7 +486,11 @@ console.log("DROP"); //, anEvent);
cardFieldClasses[aField['actionType']] = true; cardFieldClasses[aField['actionType']] = true;
cardFieldClasses['hidden'] = aField['isHidden']; cardFieldClasses['hidden'] = aField['isHidden'];
if (this.state['draggedFieldReference'] == aField['_reference']) { if (this.state['draggedFieldReference'] == aField['_reference']) {
cardFieldClasses['dragged'] = true; if (this.state.touchStyle) {
cardFieldClasses['draggedTouch'] = true;
} else {
cardFieldClasses['dragged'] = true;
}
} }
cardFieldValueClasses['fieldValue'] = true; cardFieldValueClasses['fieldValue'] = true;
@ -376,15 +504,24 @@ console.log("DROP"); //, anEvent);
}, [ }, [
React.DOM.div({'className':'fieldEditAction'}, [ React.DOM.div({'className':'fieldEditAction'}, [
React.DOM.span({'className':'removeField', 'onClick':this.removeField(field)}, "remove field"), React.DOM.span({'className':'removeField', 'onClick':this.removeField(field)}, "remove field"),
React.DOM.span({'className':'dragHandler', React.DOM.div({'className':'dragHandlerContainer',
'draggable':true, 'draggable':true,
'data-reference':ref, 'data-reference':ref,
'data-document-id':ref, 'data-document-id':ref,
'data-index':this.positionOfField(ref), 'data-index':this.positionOfField(ref),
'onDragStart':this.dragStart, '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':'fieldValues'}, [
React.DOM.div({'className':'fieldLabel'}, [ React.DOM.div({'className':'fieldLabel'}, [
@ -417,7 +554,6 @@ console.log("DROP"); //, anEvent);
'onDragLeave': this.dragLeaveDropTarget, 'onDragLeave': this.dragLeaveDropTarget,
// 'onDrop': this.dropDropTarget, // 'onDrop': this.dropDropTarget,
// 'onDragEnd':this.dragEndDropTarget // 'onDragEnd':this.dragEndDropTarget
}); });
var dropAreaNodeIndex = (dropAreaPositionIndex < dragFrom) ? dropAreaPositionIndex : dropAreaPositionIndex + 1; var dropAreaNodeIndex = (dropAreaPositionIndex < dragFrom) ? dropAreaPositionIndex : dropAreaPositionIndex + 1;

99
frontend/delta/scss/style/card.scss
View File

@ -411,6 +411,13 @@ $cardViewBasePadding: 10px;
display: none; display: none;
} }
&.draggedTouch {
position: absolute;
width: 100%;
background-color: white;
opacity: .8;
}
.fieldEditAction { .fieldEditAction {
@include user-select(text); @include user-select(text);
@include flex(none); @include flex(none);
@ -463,54 +470,64 @@ $cardViewBasePadding: 10px;
$dragHandlerHeight: 24px; $dragHandlerHeight: 24px;
$dragHandlerWidth: 4px; $dragHandlerWidth: 4px;
.dragHandler {
.dragHandlerContainer {
width: 40px;
height: 25px;
display: block; 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; display: block;
box-sizing: border-box; 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-top:0;
border-bottom: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 { .fieldValues {