Fixed #34 (Reorder fields within cards)
This commit is contained in:
Dario Chiappetta
parent
4cdaee4a6f
commit
4a869380b0
3
.gitignore
vendored
3
.gitignore
vendored
@ -3,4 +3,5 @@ target
|
||||
backend/java
|
||||
scripts/builder/backends/javaBuilder.py
|
||||
scripts/btcTranfer
|
||||
scripts/deltaDeploy
|
||||
scripts/deltaDeploy
|
||||
/.project
|
||||
|
||||
@ -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 {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
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 {
|
||||
.content .cardField .fieldEditAction .dragHandlerContainer {
|
||||
width: 40px;
|
||||
height: 25px;
|
||||
display: block; }
|
||||
.content .cardField .fieldEditAction .dragHandlerContainer .dragHandler {
|
||||
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; }
|
||||
.content .cardField .fieldEditAction .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; }
|
||||
cursor: grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: -webkit-grab; }
|
||||
.content .cardField .fieldEditAction .dragHandlerContainer .dragHandler:active {
|
||||
cursor: grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: -webkit-grabbing; }
|
||||
.content .cardField .fieldEditAction .dragHandlerContainer .dragHandler:before {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
position: relative;
|
||||
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 {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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");
|
||||
}
|
||||
|
||||
this.setState({
|
||||
'draggedFieldReference': null,
|
||||
'fromFieldPosition': -1,
|
||||
'toFieldPosition': -1,
|
||||
'dropPosition': -1
|
||||
})
|
||||
// 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,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']);
|
||||
var y = anEvent.clientY - dragElement.getBoundingClientRect().top;
|
||||
var h = dragElement.getBoundingClientRect().height;
|
||||
this.handleOverField(anEvent.currentTarget, anEvent.clientY);
|
||||
|
||||
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) {
|
||||
//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,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;
|
||||
|
||||
@ -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;
|
||||
border:1px solid #E8E8E8;
|
||||
// border:1px solid red;
|
||||
border-top:0;
|
||||
border-bottom:0;
|
||||
@include cursor-grab();
|
||||
|
||||
&:active {
|
||||
@include cursor-grabbing();
|
||||
}
|
||||
|
||||
&:before {
|
||||
.dragHandler {
|
||||
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;
|
||||
width: $dragHandlerWidth;
|
||||
height: $dragHandlerHeight;
|
||||
|
||||
margin-left: 15px;
|
||||
border:1px solid #E8E8E8;
|
||||
// border:1px solid red;
|
||||
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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user