From 511d621593a7c157f9f08994da1485a518f95796 Mon Sep 17 00:00:00 2001 From: Felix Hammerl Date: Wed, 3 Feb 2016 18:48:13 +0100 Subject: Issue #552 - Add upload abort Cancels an upload and restores the user interface to ready-for-upload state --- web-ui/app/js/mail_view/ui/attachment_icon.js | 1 + web-ui/app/js/mail_view/ui/attachment_list.js | 13 +++++++++++++ web-ui/app/js/mail_view/ui/send_button.js | 1 + web-ui/app/js/page/events.js | 1 + web-ui/app/scss/_compose.scss | 1 + web-ui/app/templates/compose/attachments_list.hbs | 2 +- web-ui/test/spec/mail_view/ui/attachment_icon.spec.js | 18 ++++++++++++++++++ web-ui/test/spec/mail_view/ui/attachment_list.spec.js | 17 ++++++++++++++++- 8 files changed, 52 insertions(+), 2 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/js/mail_view/ui/attachment_icon.js b/web-ui/app/js/mail_view/ui/attachment_icon.js index 6b9cb31c..e04fc02a 100644 --- a/web-ui/app/js/mail_view/ui/attachment_icon.js +++ b/web-ui/app/js/mail_view/ui/attachment_icon.js @@ -49,6 +49,7 @@ define( this.render(); this.on(document, events.mail.uploadingAttachment, this.uploadInProgress); this.on(document, events.mail.uploadedAttachment, this.uploadFinished); + this.on(document, events.mail.failedUploadAttachment, this.uploadFinished); } this.on(this.$node, 'click', function() { if (!this.attr.busy) { diff --git a/web-ui/app/js/mail_view/ui/attachment_list.js b/web-ui/app/js/mail_view/ui/attachment_list.js index 19a48a8d..936b2e81 100644 --- a/web-ui/app/js/mail_view/ui/attachment_list.js +++ b/web-ui/app/js/mail_view/ui/attachment_list.js @@ -31,6 +31,7 @@ define( attachmentListItem: '#attachment-list-item', attachmentUploadItem: '#attachment-upload-item', attachmentUploadItemProgress: '#attachment-upload-item-progress', + attachmentUploadItemAbort: '#attachment-upload-item-abort', attachmentBaseUrl: '/attachment', attachments: [], closeIcon: '.close-icon', @@ -119,6 +120,13 @@ define( this.select('attachmentUploadItem').hide(); }; + this.attachUploadAbort = function(e, data) { + this.on(this.select('attachmentUploadItemAbort'), 'click', function(e) { + data.abort(); + e.preventDefault(); + }); + }; + this.addJqueryFileUploadConfig = function() { var self = this; @@ -128,6 +136,7 @@ define( add: function(e, data) { if (self.performPreUploadCheck(e, data)) { self.showUploadProgressBar(); + self.attachUploadAbort(e, data); data.submit(); } else { self.showUploadError(); @@ -139,6 +148,10 @@ define( self.hideUploadProgressBar(); self.trigger(document, events.mail.uploadedAttachment, response.result); }, + fail: function(e, data){ + self.hideUploadProgressBar(); + self.trigger(document, events.mail.failedUploadAttachment); + }, progressall: function (e, data) { var progressRate = parseInt(data.loaded / data.total * 100, 10); self.select('attachmentUploadItemProgress').css('width', progressRate + '%'); diff --git a/web-ui/app/js/mail_view/ui/send_button.js b/web-ui/app/js/mail_view/ui/send_button.js index b1f35906..c4cf86dc 100644 --- a/web-ui/app/js/mail_view/ui/send_button.js +++ b/web-ui/app/js/mail_view/ui/send_button.js @@ -116,6 +116,7 @@ define([ this.on(document, events.mail.uploadingAttachment, this.uploadInProgress); this.on(document, events.mail.uploadedAttachment, this.uploadFinished); + this.on(document, events.mail.failedUploadAttachment, this.uploadFinished); this.on(document, events.dispatchers.rightPane.clear, this.teardown); this.on(document, events.ui.sendbutton.enable, this.resetButton); diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js index 57dd346a..1ec27c46 100644 --- a/web-ui/app/js/page/events.js +++ b/web-ui/app/js/page/events.js @@ -146,6 +146,7 @@ define(function () { uploadedAttachment: 'mail:uploaded:attachment', uploadingAttachment: 'mail:uploading:attachment', startUploadAttachment: 'mail:start:upload:attachment', + failedUploadAttachment: 'mail:failed:upload:attachment', appendAttachment: 'mail:append:attachment', resetAttachments: 'mail:reset:attachments', removeAttachment: 'mail:remove:attachment' diff --git a/web-ui/app/scss/_compose.scss b/web-ui/app/scss/_compose.scss index dfde3d19..a0c1d923 100644 --- a/web-ui/app/scss/_compose.scss +++ b/web-ui/app/scss/_compose.scss @@ -129,6 +129,7 @@ #attachment-upload-item { display: none; + line-height: 28px; .progress { width: 0%; diff --git a/web-ui/app/templates/compose/attachments_list.hbs b/web-ui/app/templates/compose/attachments_list.hbs index 639c395a..0091583d 100644 --- a/web-ui/app/templates/compose/attachments_list.hbs +++ b/web-ui/app/templates/compose/attachments_list.hbs @@ -14,10 +14,10 @@ diff --git a/web-ui/test/spec/mail_view/ui/attachment_icon.spec.js b/web-ui/test/spec/mail_view/ui/attachment_icon.spec.js index 1b2f182e..86ef420b 100644 --- a/web-ui/test/spec/mail_view/ui/attachment_icon.spec.js +++ b/web-ui/test/spec/mail_view/ui/attachment_icon.spec.js @@ -17,12 +17,30 @@ describeComponent('mail_view/ui/attachment_icon', function () { expect(this.component.attr.busy).toBe(true); }); + it('should be busy after upload event', function() { + $(document).trigger(Pixelated.events.mail.uploadingAttachment); + + expect(this.component.attr.busy).toBe(true); + }); + it('should not be busy', function() { this.component.uploadFinished(); expect(this.component.attr.busy).toBe(false); }); + it('should not be busy after upload finished event', function() { + $(document).trigger(Pixelated.events.mail.uploadedAttachment); + + expect(this.component.attr.busy).toBe(false); + }); + + it('should not be busy after upload failed event', function() { + $(document).trigger(Pixelated.events.mail.failedUploadAttachment); + + expect(this.component.attr.busy).toBe(false); + }); + it('should trigger start of attachment upload process', function () { var triggerUploadAttachment = spyOnEvent(document, Pixelated.events.mail.startUploadAttachment); diff --git a/web-ui/test/spec/mail_view/ui/attachment_list.spec.js b/web-ui/test/spec/mail_view/ui/attachment_list.spec.js index 1b351d36..79f4b81e 100644 --- a/web-ui/test/spec/mail_view/ui/attachment_list.spec.js +++ b/web-ui/test/spec/mail_view/ui/attachment_list.spec.js @@ -5,7 +5,7 @@ describeMixin('mail_view/ui/attachment_list', function () { beforeEach(function () { this.setupComponent('
' + '' + - '' + + '' + '
'); }); @@ -57,6 +57,21 @@ describeMixin('mail_view/ui/attachment_list', function () { }); }); + describe('Cancel', function() { + it('should cancel the upload', function() { + var fakeJQXHR = { + abort: function() {} + }; + spyOn(fakeJQXHR, 'abort'); + // this.component.showUploadProgressBar(); + this.component.attachUploadAbort(null, fakeJQXHR); + + this.component.select('attachmentUploadItemAbort').click(); + + expect(fakeJQXHR.abort).toHaveBeenCalled(); + }); + }); + describe('Error', function() { it('should show error message', function () { this.component.showUploadError(); -- cgit v1.2.3