Fixed UI behavior on window resize, fixed Attachment UI in card View
This commit is contained in:
Dario Chiappetta
parent
0abd559e81
commit
db47e5b7fb
@ -119,6 +119,7 @@ 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);
|
||||
@ -132,6 +133,7 @@ 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);
|
||||
@ -145,6 +147,7 @@ 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);
|
||||
@ -158,6 +161,7 @@ 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);
|
||||
@ -476,61 +480,73 @@ 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; } }
|
||||
/*
|
||||
@ -1683,6 +1699,7 @@ div.help {
|
||||
font-weight: 100;
|
||||
margin-right: 10px;
|
||||
padding-left: 1px;
|
||||
padding-right: 30px;
|
||||
line-height: 27px;
|
||||
/* boxed style test */
|
||||
/* background-color: $clipperz-orange;
|
||||
@ -1707,9 +1724,12 @@ div.help {
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
line-height: 22px;
|
||||
/*line-height: 22px;*/
|
||||
color: #ccc;
|
||||
/*color:white;*/ }
|
||||
/*color:white;*/
|
||||
position: absolute;
|
||||
margin-left: 5px;
|
||||
line-height: 31px; }
|
||||
.tagEditor ul li.tag span.tagRemoveButton:hover {
|
||||
color: #9b0000; }
|
||||
.tagEditor input {
|
||||
@ -2475,13 +2495,13 @@ span.count {
|
||||
#extraFeaturesPanel .extraFeatureIndex footer {
|
||||
font-size: 8pt;
|
||||
padding: 5px 5px 5px 5px;
|
||||
border-top: 1px solid #999; }
|
||||
border-top: 1px solid #999999; }
|
||||
#extraFeaturesPanel .extraFeatureIndex footer span {
|
||||
color: #999; }
|
||||
color: #999999; }
|
||||
#extraFeaturesPanel .extraFeatureIndex footer span:after {
|
||||
content: ":"; }
|
||||
#extraFeaturesPanel .extraFeatureIndex footer a {
|
||||
color: #999;
|
||||
color: #999999;
|
||||
text-decoration: none;
|
||||
padding-left: 5px;
|
||||
font-weight: bold; }
|
||||
@ -3279,7 +3299,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: #eee;
|
||||
background-color: #eeeeee;
|
||||
color: #999; }
|
||||
div.cardList ul li .favicon {
|
||||
width: 48px;
|
||||
@ -3379,7 +3399,7 @@ div.cardList.narrow {
|
||||
content: ""; }
|
||||
|
||||
#cardDetailPage .view.archived, .cardDetail .view.archived {
|
||||
background-color: #eee; }
|
||||
background-color: #eeeeee; }
|
||||
#cardDetailPage .view .cardDetailToolbar, .cardDetail .view .cardDetailToolbar {
|
||||
background-color: #1863a1;
|
||||
color: white; }
|
||||
@ -3559,6 +3579,9 @@ div.cardList.narrow {
|
||||
list-style-type: none; }
|
||||
.cardAttachments .skippedFiles ul li .filename {
|
||||
font-weight: bold; }
|
||||
.cardAttachments .skippedFiles a {
|
||||
text-decoration: underline;
|
||||
cursor: pointer; }
|
||||
.cardAttachments .attachmentList {
|
||||
margin-left: 44px;
|
||||
padding-right: 8px; }
|
||||
@ -3640,7 +3663,8 @@ div.cardList.narrow {
|
||||
width: 30px;
|
||||
cursor: pointer;
|
||||
font-size: 20pt;
|
||||
color: #aaa; }
|
||||
color: #aaa;
|
||||
margin-top: 1px; }
|
||||
.cardAttachments .attachmentList li .actions a.cancel, .cardAttachments .attachmentList li .actions a.remove {
|
||||
font-family: 'clipperz-icons';
|
||||
-webkit-font-feature-settings: "liga" 1, "dlig" 1;
|
||||
@ -3655,7 +3679,7 @@ div.cardList.narrow {
|
||||
.cardAttachments .attachmentList li .actions a.download:hover {
|
||||
color: #1863a1; }
|
||||
.cardAttachments .attachmentList li .progress {
|
||||
width: 30px;
|
||||
width: 50px;
|
||||
text-align: center; }
|
||||
.cardAttachments .attachmentList li .progress .radialProgressIndicator {
|
||||
width: 25px;
|
||||
@ -3733,6 +3757,7 @@ div.cardList.narrow {
|
||||
max-width: 30%; }
|
||||
.content .tagEditor.readWrite ul li .tagLabel {
|
||||
width: calc(100% - 30px);
|
||||
width: 100%;
|
||||
display: inline-block; }
|
||||
.content .tagEditor.readWrite ul li input {
|
||||
width: 100%; }
|
||||
@ -3823,7 +3848,7 @@ div.cardList.narrow {
|
||||
cursor: grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: -webkit-grab;
|
||||
background: repeating-linear-gradient(0deg, white, white 2px, #ddd 2px, #ddd 3px);
|
||||
background: repeating-linear-gradient(0deg, white, white 2px, #dddddd 2px, #dddddd 3px);
|
||||
width: 28px;
|
||||
height: 20px;
|
||||
margin-left: 6px;
|
||||
@ -4070,7 +4095,7 @@ div.cardList.narrow {
|
||||
min-width: 220px;
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
background-color: #333;
|
||||
background-color: #333333;
|
||||
color: #fff;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
@ -4085,7 +4110,7 @@ div.cardList.narrow {
|
||||
margin-left: 0px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid #333;
|
||||
border-top: 5px solid #333333;
|
||||
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
@ -493,14 +493,18 @@ Clipperz.log(">>> Connection.messageExceptionHandler: " + anError.message, anEr
|
||||
if (anError instanceof MochiKit.Async.CancelledError) {
|
||||
result = anError;
|
||||
} else {
|
||||
if ((anError.message == 'Trying to communicate without an active connection') ||
|
||||
(anError.message == 'No tollManager available for current session')
|
||||
var errorPayload;
|
||||
|
||||
errorPayload = Clipperz.Base.evalJSON(anError.req.responseText);
|
||||
if ((errorPayload.message == 'Trying to communicate without an active connection') ||
|
||||
(errorPayload.message == 'No tollManager available for current session') ||
|
||||
(errorPayload.message == 'HashCash verification failed. The provided toll is not valid.')
|
||||
) {
|
||||
result = this.reestablishConnection(anOriginalMessageArguments);
|
||||
} else if (anError.message == 'Session with stale data') {
|
||||
} else if (errorPayload.message == 'Session with stale data') {
|
||||
MochiKit.Signal.signal(this, 'EXCEPTION');
|
||||
} else {
|
||||
result = anError;
|
||||
result = errorPayload;
|
||||
}
|
||||
}
|
||||
Clipperz.log("<<< Connection.messageExceptionHandler")
|
||||
|
||||
@ -689,7 +689,7 @@ Clipperz.Base.extend(Clipperz.PM.DataModel.Record, Clipperz.PM.DataModel.Encrypt
|
||||
result = someFilteredResults[0];
|
||||
break;
|
||||
default:
|
||||
//console.log("Warning: Record.fieldWithLabel('" + aLabel + "') is returning more than one result: " + someFilteredResults.length);
|
||||
Clipperz.log("Warning: Record.fieldWithLabel('" + aLabel + "') is returning more than one result: " + someFilteredResults.length);
|
||||
result = someFilteredResults[0];
|
||||
break;
|
||||
}
|
||||
@ -715,7 +715,7 @@ Clipperz.Base.extend(Clipperz.PM.DataModel.Record, Clipperz.PM.DataModel.Encrypt
|
||||
var transientStateKey;
|
||||
|
||||
if (typeof(aVersionReference) == 'undefined') {
|
||||
console.log("ERROR; getVersionKey aVersionReference is undefined");
|
||||
Clipperz.log("ERROR; getVersionKey aVersionReference is undefined");
|
||||
}
|
||||
|
||||
transientStateKey = 'versionKeys' + '.' + aVersionReference;
|
||||
@ -900,7 +900,7 @@ Clipperz.Base.extend(Clipperz.PM.DataModel.Record, Clipperz.PM.DataModel.Encrypt
|
||||
]
|
||||
}, {trace:true});
|
||||
deferredResult.addCallback(MochiKit.Base.values);
|
||||
deferredResult.addCallback(MochiKit.Base.bind(function (someValues) {
|
||||
deferredResult.addCallback(MochiKit.Base.bind(function(someValues) {
|
||||
return MochiKit.Iter.some(someValues, MochiKit.Base.operator.identity);
|
||||
}, this));
|
||||
|
||||
|
||||
@ -699,7 +699,7 @@ Clipperz.Base.extend(Clipperz.PM.DataModel.User, Object, {
|
||||
result = someFilteredResults[0];
|
||||
break;
|
||||
default:
|
||||
//console.log("Warning: User.recordWithLabel('" + aLabel + "') is returning more than one result: " + someFilteredResults.length);
|
||||
Clipperz.log("Warning: User.recordWithLabel('" + aLabel + "') is returning more than one result: " + someFilteredResults.length);
|
||||
result = someFilteredResults[0];
|
||||
break;
|
||||
}
|
||||
|
||||
@ -126,7 +126,9 @@ MochiKit.Base.update(Clipperz.PM.UI.AttachmentController.prototype, {
|
||||
var reference = anAttachment.reference()
|
||||
var queueElement = this.getQueueElement(reference);
|
||||
|
||||
if (queueElement) {
|
||||
var isElementInProgress = (queueElement && queueElement['status'] != 'DONE' && queueElement['status'] != 'CANCELED' && queueElement['status'] != 'FAILED');
|
||||
|
||||
if (isElementInProgress) {
|
||||
deferredResult = new Clipperz.Async.Deferred("Clipperz.PM.UI.AttachmentController.cancelAttachment", {trace:false});
|
||||
deferredResult.addMethod(this, 'updateFileInQueue', reference, {'status': 'CANCELED'});
|
||||
if (queueElement['deferredRequest']) {
|
||||
|
||||
@ -41,6 +41,7 @@ Clipperz.PM.UI.Components.Cards.DetailClass = React.createClass({
|
||||
result['allTags'] = this.props['allTags'];
|
||||
result['preferences'] = this.props['preferences'];
|
||||
result['attachmentQueueInfo'] = this.props['attachmentQueueInfo'];
|
||||
result['proxyInfo'] = this.props['proxyInfo'];
|
||||
}
|
||||
|
||||
return result;
|
||||
|
||||
@ -678,6 +678,9 @@ console.log("DROP"); //, anEvent);
|
||||
]);
|
||||
}, this.state['skippedFiles'])
|
||||
),
|
||||
React.DOM.a({
|
||||
'onClick': MochiKit.Base.method(this, 'setState', {'skippedFiles': []}),
|
||||
}, 'close'),
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@ -145,7 +145,7 @@ Clipperz.PM.UI.Components.Cards.TagEditorClass = React.createClass({
|
||||
return React.DOM.div({'className':Clipperz.PM.UI.Components.classNames(classes)}, [
|
||||
React.DOM.ul({},[
|
||||
MochiKit.Base.map(this.renderTag, this.props['selectedTags']),
|
||||
this.isReadOnly() ? null : React.DOM.li({}, React.DOM.input({'type':'text', 'list':'tagListData', 'onKeyDown':this.handleKeyDown, 'onBlur':this.handleBlur, 'placeholder': "tag"})),
|
||||
this.isReadOnly() ? null : React.DOM.li({}, React.DOM.input({'type':'text', 'list':'tagListData', 'onKeyDown':this.handleKeyDown, 'onBlur':this.handleBlur, 'placeholder': "add tag"})),
|
||||
]),
|
||||
this.isReadOnly() ? null : this.renderEditField()
|
||||
]);
|
||||
|
||||
@ -63,7 +63,6 @@ Clipperz.PM.UI.Components.Cards.TextAreaClass = React.createClass({
|
||||
handleKeyDown: function (anEvent) {
|
||||
switch (anEvent.keyCode) {
|
||||
case 27: // escape
|
||||
// console.log("ESCAPE");
|
||||
Mousetrap.trigger('esc');
|
||||
break;
|
||||
}
|
||||
|
||||
@ -31,6 +31,7 @@ Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({
|
||||
propTypes: {
|
||||
'label': React.PropTypes.string /*.isRequired */ ,
|
||||
'loading': React.PropTypes.bool,
|
||||
'proxyInfo': React.PropTypes.object.isRequired,
|
||||
},
|
||||
|
||||
getInitialState: function () {
|
||||
@ -265,7 +266,7 @@ Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({
|
||||
renderAttachmentProgress: function(aStatus, aServerStatus, aProgress) {
|
||||
var result;
|
||||
|
||||
var queueOperationsInProgress = (aStatus != 'DONE' && aStatus != 'CANCELED' && aStatus != 'FAILED');
|
||||
var queueOperationsInProgress = (aStatus && aStatus != 'DONE' && aStatus != 'CANCELED' && aStatus != 'FAILED');
|
||||
|
||||
result = null;
|
||||
if (aStatus == 'UPLOADING' || aStatus == 'DOWNLOADING') {
|
||||
@ -321,9 +322,10 @@ Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({
|
||||
renderAttachmentActions: function(aStatus, aServerStatus, anAttachment) {
|
||||
var result;
|
||||
|
||||
var queueOperationsInProgress = (aStatus != 'DONE' && aStatus != 'CANCELED' && aStatus != 'FAILED');
|
||||
var queueOperationsInProgress = (aStatus && aStatus != 'DONE' && aStatus != 'CANCELED' && aStatus != 'FAILED');
|
||||
|
||||
result = null;
|
||||
if (this.props['proxyInfo']['proxyType'] != 'OFFLINE_COPY') {
|
||||
if (aServerStatus == 'AVAILABLE' && ! queueOperationsInProgress) {
|
||||
result = React.DOM.a({
|
||||
'className': 'download',
|
||||
@ -335,6 +337,7 @@ Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({
|
||||
'onClick': MochiKit.Base.method(this, 'handleCancelDownload', anAttachment)
|
||||
}, "remove field");
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
@ -1368,6 +1368,7 @@ Clipperz.log("THE BROWSER IS OFFLINE");
|
||||
} else if (aPageName == 'cardDetailPage') {
|
||||
extraProperties = {
|
||||
'attachmentQueueInfo': this.attachmentQueueInfo(),
|
||||
'proxyInfo': this.proxyInfo(),
|
||||
};
|
||||
} else if (aPageName == 'errorPage') {
|
||||
extraProperties = {
|
||||
@ -1939,7 +1940,7 @@ Clipperz.log("THE BROWSER IS OFFLINE");
|
||||
|
||||
isPageInEditMode: function() {
|
||||
var currentPage = this.pages()[this.currentPage()];
|
||||
return currentPage.props['mode'] == 'edit';
|
||||
return currentPage ? currentPage.props['mode'] == 'edit' : false;
|
||||
},
|
||||
|
||||
enterEditMode: function () {
|
||||
@ -2093,11 +2094,28 @@ Clipperz.log("THE BROWSER IS OFFLINE");
|
||||
//============================================================================
|
||||
|
||||
matchMediaQuery_handler: function (newQueryStyle) {
|
||||
var wasInEditMode = this.isPageInEditMode();
|
||||
var currentPage = this.currentPage();
|
||||
var selectedCardInfo = this.selectedCardInfo();
|
||||
|
||||
this._mediaQueryStyle = newQueryStyle;
|
||||
|
||||
if (this.currentPage() == 'cardDetailPage') {
|
||||
if (currentPage == 'cardDetailPage') {
|
||||
this.moveOutPage(this.currentPage(), 'mainPage');
|
||||
}
|
||||
|
||||
if (selectedCardInfo) {
|
||||
this.pages()[currentPage].setProps({'mode': 'view'});
|
||||
|
||||
if (currentPage == 'mainPage' && newQueryStyle == 'narrow') {
|
||||
this.selectCard(selectedCardInfo, true);
|
||||
}
|
||||
if (wasInEditMode) {
|
||||
MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'enterEditMode'));
|
||||
MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'updateSelectedCard', this.selectedCardInfo(), false, true));
|
||||
}
|
||||
}
|
||||
|
||||
this.resetPanels();
|
||||
this.refreshCurrentPage();
|
||||
},
|
||||
|
||||
@ -54,6 +54,7 @@ $tagEditor_lineHeight: 27px;
|
||||
|
||||
margin-right: 10px;
|
||||
padding-left: 1px;
|
||||
padding-right: 30px;
|
||||
line-height: $tagEditor_lineHeight;
|
||||
|
||||
/* boxed style test */
|
||||
@ -80,10 +81,14 @@ $tagEditor_lineHeight: 27px;
|
||||
@include userSelectNone();
|
||||
|
||||
cursor: pointer;
|
||||
line-height: 22px;
|
||||
/*line-height: 22px;*/
|
||||
color: #ccc;
|
||||
/*color:white;*/
|
||||
|
||||
position: absolute;
|
||||
margin-left: 5px;
|
||||
line-height: 31px;
|
||||
|
||||
&:hover {
|
||||
color: rgb(155, 0, 0);
|
||||
};
|
||||
|
||||
@ -411,6 +411,11 @@ $cardViewBasePadding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.attachmentList {
|
||||
@ -488,6 +493,7 @@ $cardViewBasePadding: 10px;
|
||||
cursor:pointer;
|
||||
font-size: 20pt;
|
||||
color: #aaa;
|
||||
margin-top:1px;
|
||||
|
||||
&.cancel, &.remove {
|
||||
@include icon-font();
|
||||
@ -505,7 +511,7 @@ $cardViewBasePadding: 10px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
width: 30px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
|
||||
.radialProgressIndicator {
|
||||
@ -665,6 +671,7 @@ $cardViewBasePadding: 10px;
|
||||
|
||||
.tagLabel {
|
||||
width: calc(100% - 30px);
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user