summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFelix Hammerl <fhammerl@thoughtworks.com>2016-02-04 11:35:53 +0100
committerFelix Hammerl <fhammerl@thoughtworks.com>2016-02-04 11:35:53 +0100
commit97dbf261bd8ca9708673fc1c569b3b26ad8cf67c (patch)
tree425c6d92cd0a062f9ec67827446bec0a15a88a1a
parent54932685e98f772041044f5a3181646e4f61a38f (diff)
Issue #551 - Show attachment name during upload
-rw-r--r--web-ui/app/js/mail_view/ui/attachment_list.js14
-rw-r--r--web-ui/app/js/views/templates.js2
-rw-r--r--web-ui/app/templates/compose/attachment_upload_item.hbs4
-rw-r--r--web-ui/app/templates/compose/attachments_list.hbs9
-rw-r--r--web-ui/test/spec/mail_view/ui/attachment_list.spec.js13
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();