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
scripts/builder/backends/javaBuilder.py
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);
-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 {

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) {
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;

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

@ -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 {