From 97dbf261bd8ca9708673fc1c569b3b26ad8cf67c Mon Sep 17 00:00:00 2001 From: Felix Hammerl Date: Thu, 4 Feb 2016 11:35:53 +0100 Subject: Issue #551 - Show attachment name during upload --- web-ui/app/js/mail_view/ui/attachment_list.js | 14 ++++++++++---- web-ui/app/js/views/templates.js | 2 ++ web-ui/app/templates/compose/attachment_upload_item.hbs | 4 ++++ web-ui/app/templates/compose/attachments_list.hbs | 9 +-------- web-ui/test/spec/mail_view/ui/attachment_list.spec.js | 13 ++++++------- 5 files changed, 23 insertions(+), 19 deletions(-) create mode 100644 web-ui/app/templates/compose/attachment_upload_item.hbs 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 294a21a2..b3b26710 100644 --- a/web-ui/app/js/mail_view/ui/attachment_list.js +++ b/web-ui/app/js/mail_view/ui/attachment_list.js @@ -112,12 +112,18 @@ define( } }; - this.showUploadProgressBar = function() { + this.showUploadProgressBar = function(e, data) { + var element = $(templates.compose.attachmentUploadItem({ + name: data.originalFiles[0].name, + size: data.originalFiles[0].size + })); + this.select('attachmentUploadItem').append(element); this.select('attachmentUploadItem').show(); }; this.hideUploadProgressBar = function() { this.select('attachmentUploadItem').hide(); + this.select('attachmentUploadItem').empty(); }; this.attachUploadAbort = function(e, data) { @@ -139,7 +145,7 @@ define( this.select('inputFileUpload').fileupload({ add: function(e, data) { if (self.performPreUploadCheck(e, data)) { - self.showUploadProgressBar(); + self.showUploadProgressBar(e, data); self.attachUploadAbort(e, data); data.submit(); } else { @@ -149,13 +155,13 @@ define( url: self.attr.attachmentBaseUrl, dataType: 'json', done: function (e, response) { - self.hideUploadProgressBar(); self.detachUploadAbort(); + self.hideUploadProgressBar(); self.trigger(document, events.mail.uploadedAttachment, response.result); }, fail: function(e, data){ - self.hideUploadProgressBar(); self.detachUploadAbort(); + self.hideUploadProgressBar(); self.trigger(document, events.mail.failedUploadAttachment); }, progressall: function (e, data) { diff --git a/web-ui/app/js/views/templates.js b/web-ui/app/js/views/templates.js index f9d944b8..d4185471 100644 --- a/web-ui/app/js/views/templates.js +++ b/web-ui/app/js/views/templates.js @@ -29,6 +29,7 @@ define(['hbs/templates'], function (templates) { feedback: window.Pixelated['app/templates/compose/feedback_box.hbs'], attachmentsList: window.Pixelated['app/templates/compose/attachments_list.hbs'], attachmentItem: window.Pixelated['app/templates/compose/attachment_item.hbs'], + attachmentUploadItem: window.Pixelated['app/templates/compose/attachment_upload_item.hbs'], uploadAttachmentFailed: window.Pixelated['app/templates/compose/upload_attachment_failed.hbs'] }, tags: { @@ -77,6 +78,7 @@ define(['hbs/templates'], function (templates) { Handlebars.registerPartial('attachments_list', Templates.compose.attachmentsList); Handlebars.registerPartial('attachments_upload', Templates.compose.attachmentsList); Handlebars.registerPartial('attachment_item', Templates.compose.attachmentItem); + Handlebars.registerPartial('attachment_upload_item', Templates.compose.attachmentUploadItem); Handlebars.registerPartial('uploadAttachmentFailed', Templates.compose.uploadAttachmentFailed); return Templates; diff --git a/web-ui/app/templates/compose/attachment_upload_item.hbs b/web-ui/app/templates/compose/attachment_upload_item.hbs new file mode 100644 index 00000000..ff783267 --- /dev/null +++ b/web-ui/app/templates/compose/attachment_upload_item.hbs @@ -0,0 +1,4 @@ +
  • +
    + {{ this.name }} ({{ formatSize this.size}}) +
    • diff --git a/web-ui/app/templates/compose/attachments_list.hbs b/web-ui/app/templates/compose/attachments_list.hbs index 0091583d..4d3f1cac 100644 --- a/web-ui/app/templates/compose/attachments_list.hbs +++ b/web-ui/app/templates/compose/attachments_list.hbs @@ -12,14 +12,7 @@ {{> attachment_item this }} {{/each }} - + 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 79f4b81e..94559b63 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('
    ' + '' + - '' + + '' + '
    '); }); @@ -43,14 +43,13 @@ describeMixin('mail_view/ui/attachment_list', function () { describe('Upload', function() { describe('Progress Bar', function () { - it('should show progress bar', function() { - this.component.showUploadProgressBar(); + it('should show/hide progress bar', function() { + this.component.showUploadProgressBar(null, {originalFiles: [{name: 'foo.txt', size: 4500}]}); - expect(this.component.select('attachmentUploadItem').html()).toContain('Uploading...'); + expect(this.component.select('attachmentUploadItem').html()).toContain('foo.txt'); + expect(this.component.select('attachmentUploadItem').html()).toContain('(4.39 Kb'); expect(this.component.select('attachmentUploadItem').css('display')).toEqual('block'); - }); - it('should hide progress bar', function() { this.component.hideUploadProgressBar(); expect(this.component.select('attachmentUploadItem').css('display')).toEqual('none'); @@ -63,7 +62,7 @@ describeMixin('mail_view/ui/attachment_list', function () { abort: function() {} }; spyOn(fakeJQXHR, 'abort'); - // this.component.showUploadProgressBar(); + this.component.showUploadProgressBar(null, {originalFiles: [{name: 'foo.txt', size: 4500}]}); this.component.attachUploadAbort(null, fakeJQXHR); this.component.select('attachmentUploadItemAbort').click(); -- cgit v1.2.3