Interface redesign (attachments, new preview pane layout)

This commit is contained in:
RainLoop Team 2015-01-04 23:30:07 +04:00
parent 6755a0ce51
commit e3e7c1d963
64 changed files with 1286 additions and 1009 deletions

View file

@ -51,6 +51,9 @@
var
self = this,
fResizeSub = function () {
Utils.windowResize();
},
fCcAndBccCheckHelper = function (aValue) {
if (false === self.showCcAndBcc() && 0 < aValue.length)
{
@ -89,6 +92,7 @@
this.emptyToError = ko.observable(false);
this.attachmentsInProcessError = ko.observable(false);
this.attachmentsInErrorError = ko.observable(false);
this.showCcAndBcc = ko.observable(false);
this.cc.subscribe(fCcAndBccCheckHelper, this);
@ -101,21 +105,45 @@
this.attachments = ko.observableArray([]);
this.attachmentsInProcess = this.attachments.filter(function (oItem) {
return oItem && '' === oItem.tempName();
return oItem && !oItem.complete();
});
this.attachmentsInReady = this.attachments.filter(function (oItem) {
return oItem && '' !== oItem.tempName();
return oItem && oItem.complete();
});
this.attachments.subscribe(function () {
this.triggerForResize();
this.attachmentsInError = this.attachments.filter(function (oItem) {
return oItem && '' !== oItem.error();
});
this.attachmentsCount = ko.computed(function () {
return this.attachments().length;
}, this);
this.attachmentsInErrorCount = ko.computed(function () {
return this.attachmentsInError().length;
}, this);
this.attachmentsInProcessCount = ko.computed(function () {
return this.attachmentsInProcess().length;
}, this);
this.isDraftFolderMessage = ko.computed(function () {
return '' !== this.draftFolder() && '' !== this.draftUid();
}, this);
this.attachmentsPlace = ko.observable(false);
this.attachments.subscribe(fResizeSub);
this.attachmentsPlace.subscribe(fResizeSub);
this.attachmentsInErrorCount.subscribe(function (iN) {
if (0 === iN)
{
this.attachmentsInErrorError(false);
}
}, this);
this.composeUploaderButton = ko.observable(null);
this.composeUploaderDropPlace = ko.observable(null);
this.dragAndDropEnabled = ko.observable(false);
@ -227,6 +255,7 @@
this.saveMessageResponse = _.bind(this.saveMessageResponse, this);
this.sendCommand = Utils.createCommand(this, function () {
var
sTo = Utils.trim(this.to()),
sSentFolder = Data.sentFolder(),
@ -236,6 +265,12 @@
if (0 < this.attachmentsInProcess().length)
{
this.attachmentsInProcessError(true);
this.attachmentsPlace(true);
}
else if (0 < this.attachmentsInError().length)
{
this.attachmentsInErrorError(true);
this.attachmentsPlace(true);
}
else if (0 === sTo.length)
{
@ -1111,6 +1146,7 @@
if (oAttachment)
{
oAttachment.tempName(sTempName);
oAttachment.waiting(false).uploading(false).complete(true);
}
}
}
@ -1118,7 +1154,7 @@
}
else
{
self.setMessageAttachmentFailedDowbloadText();
self.setMessageAttachmentFailedDownloadText();
}
}, aDownloads);
@ -1480,7 +1516,7 @@
if (oItem)
{
oItem.progress(' - ' + window.Math.floor(iLoaded / iTotal * 100) + '%');
oItem.progress(window.Math.floor(iLoaded / iTotal * 100));
}
}, this))
@ -1499,9 +1535,14 @@
this.attachments.push(oAttachment);
this.attachmentsPlace(true);
if (0 < mSize && 0 < iAttachmentSizeLimit && iAttachmentSizeLimit < mSize)
{
oAttachment.error(Utils.i18n('UPLOAD/ERROR_FILE_IS_TOO_BIG'));
oAttachment
.waiting(false).uploading(true).complete(true)
.error(Utils.i18n('UPLOAD/ERROR_FILE_IS_TOO_BIG'));
return false;
}
@ -1529,8 +1570,7 @@
if (oItem)
{
oItem.waiting(false);
oItem.uploading(true);
oItem.waiting(false).uploading(true).complete(false);
}
}, this))
@ -1562,6 +1602,7 @@
oAttachment
.waiting(false)
.uploading(false)
.complete(true)
.error(sError)
;
}
@ -1570,6 +1611,7 @@
oAttachment
.waiting(false)
.uploading(false)
.complete(true)
;
oAttachment.initByUploadJson(oAttachmentJson);
@ -1639,7 +1681,7 @@
oAttachment.fromMessage = true;
oAttachment.cancel = this.cancelAttachmentHelper(oMessage.requestHash);
oAttachment.waiting(false).uploading(true);
oAttachment.waiting(false).uploading(true).complete(true);
this.attachments.push(oAttachment);
}
@ -1663,13 +1705,15 @@
oAttachment.fromMessage = false;
oAttachment.cancel = this.cancelAttachmentHelper(oDropboxFile['link']);
oAttachment.waiting(false).uploading(true);
oAttachment.waiting(false).uploading(true).complete(false);
this.attachments.push(oAttachment);
this.attachmentsPlace(true);
if (0 < mSize && 0 < iAttachmentSizeLimit && iAttachmentSizeLimit < mSize)
{
oAttachment.uploading(false);
oAttachment.uploading(false).complete(true);
oAttachment.error(Utils.i18n('UPLOAD/ERROR_FILE_IS_TOO_BIG'));
return false;
}
@ -1677,7 +1721,7 @@
Remote.composeUploadExternals(function (sResult, oData) {
var bResult = false;
oAttachment.uploading(false);
oAttachment.uploading(false).complete(true);
if (Enums.StorageResultType.Success === sResult && oData && oData.Result)
{
@ -1717,13 +1761,15 @@
oAttachment.fromMessage = false;
oAttachment.cancel = this.cancelAttachmentHelper(oDriveFile['downloadUrl']);
oAttachment.waiting(false).uploading(true);
oAttachment.waiting(false).uploading(true).complete(false);
this.attachments.push(oAttachment);
this.attachmentsPlace(true);
if (0 < mSize && 0 < iAttachmentSizeLimit && iAttachmentSizeLimit < mSize)
{
oAttachment.uploading(false);
oAttachment.uploading(false).complete(true);
oAttachment.error(Utils.i18n('UPLOAD/ERROR_FILE_IS_TOO_BIG'));
return false;
}
@ -1731,7 +1777,7 @@
Remote.composeUploadDrive(function (sResult, oData) {
var bResult = false;
oAttachment.uploading(false);
oAttachment.uploading(false).complete(true);
if (Enums.StorageResultType.Success === sResult && oData && oData.Result)
{
@ -1803,7 +1849,7 @@
oAttachment.fromMessage = true;
oAttachment.cancel = this.cancelAttachmentHelper(oItem.download);
oAttachment.waiting(false).uploading(true);
oAttachment.waiting(false).uploading(true).complete(false);
this.attachments.push(oAttachment);
}
@ -1825,7 +1871,7 @@
}
};
ComposePopupView.prototype.setMessageAttachmentFailedDowbloadText = function ()
ComposePopupView.prototype.setMessageAttachmentFailedDownloadText = function ()
{
_.each(this.attachments(), function(oAttachment) {
if (oAttachment && oAttachment.fromMessage)
@ -1833,6 +1879,7 @@
oAttachment
.waiting(false)
.uploading(false)
.complete(true)
.error(Utils.getUploadErrorDescByCode(Enums.UploadErrorCode.FileNoUploaded))
;
}
@ -1869,6 +1916,8 @@
this.requestReadReceipt(false);
this.markAsImportant(false);
this.attachmentsPlace(false);
this.aDraftInfo = null;
this.sInReplyTo = '';
this.bFromDraft = false;

View file

@ -81,7 +81,7 @@
this.dragOverBodyArea = ko.observable(null);
this.messageListItemTemplate = ko.computed(function () {
return Enums.Layout.NoPreview !== Data.layout() ?
return Enums.Layout.SidePreview === Data.layout() ?
'MailMessageListItem' : 'MailMessageListItemNoPreviewPane';
});

View file

@ -345,27 +345,8 @@
}
}, this);
// $('.attachmentsPlace', oDom).magnificPopup({
// 'delegate': '.attachmentImagePreview:visible',
// 'type': 'image',
// 'gallery': {
// 'enabled': true,
// 'preload': [1, 1],
// 'navigateByImgClick': true
// },
// 'callbacks': {
// 'open': function() {
// Globals.useKeyboardShortcuts(false);
// },
// 'close': function() {
// Globals.useKeyboardShortcuts(true);
// }
// },
// 'mainClass': 'mfp-fade',
// 'removalDelay': 400
// });
this.pswpDom = $('.pswp', oDom)[0];
if (this.pswpDom)
{
oDom
@ -375,18 +356,31 @@
oPs = null,
oEl = oEvent.currentTarget || null,
aItems = []
// fThumbBoundsFn = function (index) {
// var oRes = null, oEl = aItems[index], oPos = null;
// if (oEl && oEl.el)
// {
// oPos = oEl.el.find('.iconBG').offset();
// oRes = oPos && oPos.top && oPos.left ?
// {x: oPos.left, y: oPos.top, w: 60} : null;
// }
//
// return oRes;
// }
;
oDom.find('.attachmentImagePreview[data-index]').each(function (index, oSubElement) {
var $oItem = $(oSubElement);
var
$oItem = $(oSubElement)
;
aItems.push({
w: 600, h: 400,
// 'el': $oItem,
'w': 600, 'h': 400,
'src': $oItem.attr('href'),
'title': $oItem.attr('title') || ''
});
});
if (aItems && 0 < aItems.length)
@ -400,6 +394,7 @@
'errorMsg': '<div class="pswp__error-msg">' + sErrorMessage + '</div>',
'showHideOpacity': true,
'tapToToggleControls': false,
// 'getThumbBoundsFn': fThumbBoundsFn,
'timeToIdle': 0,
'timeToIdleOutside': 0,
'history': false,
@ -414,7 +409,7 @@
item.w = item.img.width;
item.h = item.img.height;
oPs.updateSize();
oPs.updateSize(true);
}
});
@ -434,13 +429,13 @@
// setup maito protocol
return !(!!oEvent && 3 !== oEvent['which'] && Utils.mailToHelper($(this).attr('href'), require('View/Popup/Compose')));
})
.on('click', '.attachmentsPlace .attachmentPreview', function (oEvent) {
.on('click', '.attachmentsPlace .attachmentIconParent', function (oEvent) {
if (oEvent && oEvent.stopPropagation)
{
oEvent.stopPropagation();
}
})
.on('click', '.attachmentsPlace .attachmentItem', function () {
.on('click', '.attachmentsPlace .attachmentItem .attachmentNameParent', function () {
var
oAttachment = ko.dataFor(this)