diff options
| -rw-r--r-- | web-ui/app/js/mail_view/ui/attachment_list.js | 14 | ||||
| -rw-r--r-- | web-ui/app/js/views/templates.js | 2 | ||||
| -rw-r--r-- | web-ui/app/templates/compose/attachment_upload_item.hbs | 4 | ||||
| -rw-r--r-- | web-ui/app/templates/compose/attachments_list.hbs | 9 | ||||
| -rw-r--r-- | web-ui/test/spec/mail_view/ui/attachment_list.spec.js | 13 |
5 files changed, 23 insertions, 19 deletions
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 @@ +<li> + <div id="attachment-upload-item-progress" class="progress"><div class="progress-bar progress-bar-success"></div></div> + <a>{{ this.name }} <span class="attachment-size">({{ formatSize this.size}})</span><i id="attachment-upload-item-abort" class="fa fa-close remove-icon"></i></a> +</li> 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 }} </ul> - <ul id="attachment-upload-item"> - <li> - <div id="attachment-upload-item-progress" class="progress"> - <div class="progress-bar"></div> - </div> - <a>Uploading... <i id="attachment-upload-item-abort" class="fa fa-close remove-icon"></i></a> - </li> - </ul> + <ul id="attachment-upload-item"></ul> </div> </div> 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('<div id="attachment-list">' + '<ul id="attachment-list-item"></ul>' + - '<ul id="attachment-upload-item"><li><div id="attachment-upload-item-progress" class="progress"><div class="progress-bar progress-bar-success"></div></div><a>Uploading... <i id="attachment-upload-item-abort" class="fa fa-close remove-icon"></i></a></li></ul>' + + '<ul id="attachment-upload-item"></ul>' + '</div>'); }); @@ -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(); |