Keep attachments when forwarding a mail #509

- Extract the attachment file box to a partial
- Adds logic to show/hide the download arrow icon

8 files changed, 31 insertions, 13 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 65c7ee09..8428f4a3 100644
--- a/web-ui/app/js/mail_view/ui/attachment_list.js
+++ b/web-ui/app/js/mail_view/ui/attachment_list.js
@@ -50,13 +50,15 @@ define(
             this.renderAttachmentListView = function (data) {
                 var currentHtml = this.select('attachmentListItem').html();
                 var item = this.buildAttachmentListItem(data);
-                this.select('attachmentListItem').html(currentHtml + '<li>' + item + '</li>');
+                this.select('attachmentListItem').html(currentHtml + item);
             };
 
             this.buildAttachmentListItem = function (attachment) {
-                return '<a href="' + this.attr.attachmentBaseUrl + '/' + attachment.ident + '?filename=' +
-                    attachment.name + '&encoding=' + attachment.encoding + '">' + attachment.name + ' <span class="attachment-size"> (' + viewHelper.formatSize(attachment.size) + ')' +
-                    '</span></a>';
+                var attachmentData = {ident: attachment.ident,
+                                      encoding: attachment.encoding,
+                                      name: attachment.name,
+                                      size: attachment.size};
+                return templates.compose.attachmentItem(attachmentData);
             };
 
             this.addJqueryFileUploadConfig = function() {
diff --git a/web-ui/app/js/mail_view/ui/forward_box.js b/web-ui/app/js/mail_view/ui/forward_box.js
index fe748365..2f848430 100644
--- a/web-ui/app/js/mail_view/ui/forward_box.js
+++ b/web-ui/app/js/mail_view/ui/forward_box.js
@@ -44,7 +44,8 @@ define(
         this.renderInlineCompose('forward-box', {
           subject: this.attr.subject,
           recipients: { to: [], cc: []},
-          body: viewHelper.quoteMail(mail)
+          body: viewHelper.quoteMail(mail),
+          attachments: mail.attachments
         });
 
         this.on(this.select('subjectDisplay'), 'click', this.showSubjectInput);
diff --git a/web-ui/app/js/mail_view/ui/mail_view.js b/web-ui/app/js/mail_view/ui/mail_view.js
index 093f498d..ba4d6e85 100644
--- a/web-ui/app/js/mail_view/ui/mail_view.js
+++ b/web-ui/app/js/mail_view/ui/mail_view.js
@@ -46,11 +46,15 @@ define(
       this.displayMail = function (event, data) {
         this.attr.mail = data.mail;
 
-        var signed, encrypted;
+        var signed, encrypted, attachments;
 
         data.mail.security_casing = data.mail.security_casing || {};
         signed = this.checkSigned(data.mail);
         encrypted = this.checkEncrypted(data.mail);
+        attachments = data.mail.attachments.map(function (attachment) { 
+            attachment.received = true;
+            return attachment;
+        });
 
         if(data.mail.mailbox === 'sent') {
           encrypted = undefined;
@@ -64,7 +68,7 @@ define(
           tags: data.mail.tags,
           encryptionStatus: encrypted,
           signatureStatus: signed,
-          attachments: data.mail.attachments
+          attachments: attachments
         }));
 
         this.$node.find('.bodyArea').html(viewHelpers.formatMailBody(data.mail));
diff --git a/web-ui/app/js/mixins/with_compose_inline.js b/web-ui/app/js/mixins/with_compose_inline.js
index 83a1a1fb..b8266f28 100644
--- a/web-ui/app/js/mixins/with_compose_inline.js
+++ b/web-ui/app/js/mixins/with_compose_inline.js
@@ -29,6 +29,7 @@ define(
       this.defaultAttrs({
         subjectDisplay: '#reply-subject',
         subjectInput: '#subject-container input',
+        forwardBox: '#forward-box',
         recipientsDisplay: '#all-recipients'
       });
 
diff --git a/web-ui/app/js/views/templates.js b/web-ui/app/js/views/templates.js
index c799b052..e5a3c435 100644
--- a/web-ui/app/js/views/templates.js
+++ b/web-ui/app/js/views/templates.js
@@ -28,6 +28,7 @@ define(['hbs/templates'], function (templates) {
       recipients: window.Pixelated['app/templates/compose/recipients.hbs'],
       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'],
       uploadAttachmentFailed: window.Pixelated['app/templates/compose/upload_attachment_failed.hbs']
     },
     tags: {
@@ -74,6 +75,7 @@ define(['hbs/templates'], function (templates) {
   Handlebars.registerPartial('tag_inner', Templates.tags.tagInner);
   Handlebars.registerPartial('recipients', Templates.compose.recipients);
   Handlebars.registerPartial('attachments_list', Templates.compose.attachmentsList);
+  Handlebars.registerPartial('attachment_item', Templates.compose.attachmentItem);
   Handlebars.registerPartial('uploadAttachmentFailed', Templates.compose.uploadAttachmentFailed);
 
   return Templates;
diff --git a/web-ui/app/templates/compose/attachment_item.hbs b/web-ui/app/templates/compose/attachment_item.hbs
new file mode 100644
index 00000000..a69f209e
--- /dev/null
+++ b/web-ui/app/templates/compose/attachment_item.hbs
@@ -0,0 +1,8 @@
+<li>
+    <a href="/attachment/{{ this.ident }}?encoding={{ this.encoding }}&filename={{ this.name }}">
+        {{ this.name }} <span class="attachment-size">({{ formatSize this.size}})</span>
+        {{#if received}}
+            <i class="fa fa-arrow-down download-icon"></i>
+        {{/if}}
+    </a>
+</li>
diff --git a/web-ui/app/templates/compose/attachments_list.hbs b/web-ui/app/templates/compose/attachments_list.hbs
index e21e311f..73113023 100644
--- a/web-ui/app/templates/compose/attachments_list.hbs
+++ b/web-ui/app/templates/compose/attachments_list.hbs
@@ -13,10 +13,7 @@
         <div class="attachmentsArea column large-12">
             <ul id="attachment-list-item">
                 {{#each attachments }}
-                    <li>
-                        <a href="/attachment/{{ this.ident }}?encoding={{ this.encoding }}&filename={{ this.name }}">{{ this.name }} <span class="attachment-size">({{ formatSize this.size}})</span>
-                            <i class="fa fa-arrow-down download-icon"></i></a>
-                    </li>
+                    {{> attachment_item this }} 
                 {{/each }}
             </ul>
         </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 86a9297f..2308c227 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
@@ -32,8 +32,11 @@ describeMixin('mail_view/ui/attachment_list', function () {
 
             $(document).trigger(Pixelated.events.mail.uploadedAttachment, stubAttachment);
 
-            var expected_li = '<li><a href="/attachment/faked?filename=haha.txt&amp;encoding=base64">haha.txt <span class="attachment-size"> (4.39 Kb)</span></a></li>';
-            expect(this.component.select('attachmentListItem').html()).toEqual(expected_li);
+            expect(this.component.select('attachmentListItem').html()).toContain('href="/attachment/faked');
+            expect(this.component.select('attachmentListItem').html()).toContain('filename=haha.txt');
+            expect(this.component.select('attachmentListItem').html()).toContain('encoding=base64');
+            expect(this.component.select('attachmentListItem').html()).toContain('haha.txt');
+            expect(this.component.select('attachmentListItem').html()).toContain('(4.39 Kb');
         });
 
         xit('should start uploading attachments', function () {