Revert "Revert "Issue #549 - Implemented UI part of remote attachments""

This reverts commit 48144118cf0e861ad1ca0ae7900a8cd12d4313db.

6 files changed, 51 insertions, 8 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 942148c1..b3b26710 100644
--- a/web-ui/app/js/mail_view/ui/attachment_list.js
+++ b/web-ui/app/js/mail_view/ui/attachment_list.js
@@ -55,15 +55,25 @@ define(
             this.renderAttachmentListView = function (data) {
                 var currentHtml = this.select('attachmentListItem').html();
                 var item = this.buildAttachmentListItem(data);
-                this.select('attachmentListItem').html(currentHtml + item);
+                this.select('attachmentListItem').append(item);
             };
 
             this.buildAttachmentListItem = function (attachment) {
                 var attachmentData = {ident: attachment.ident,
                                       encoding: attachment.encoding,
                                       name: attachment.name,
-                                      size: attachment.size};
-                return templates.compose.attachmentItem(attachmentData);
+                                      size: attachment.size,
+                                      removable: true};
+
+                var element = $(templates.compose.attachmentItem(attachmentData));
+                var self = this;
+                element.find('i.remove-icon').bind('click', function(event) {
+                    var element = $(this);
+                    var ident = element.closest('li').attr('data-ident');
+                    self.trigger(document, events.mail.removeAttachment, {ident: ident});
+                    event.preventDefault();
+                });
+                return element;
             };
 
             this.performPreUploadCheck = function(e, data) {
diff --git a/web-ui/app/js/mail_view/ui/draft_box.js b/web-ui/app/js/mail_view/ui/draft_box.js
index 88051f30..07a7e472 100644
--- a/web-ui/app/js/mail_view/ui/draft_box.js
+++ b/web-ui/app/js/mail_view/ui/draft_box.js
@@ -64,7 +64,15 @@ define(
           },
           subject: mail.header.subject,
           body: body,
-          attachments: mail.attachments
+          attachments: this.convertToRemovableAttachments(mail.attachments)
+        });
+
+        var self = this;
+        this.$node.find('i.remove-icon').bind('click', function(event) {
+          var element = $(this);
+          var ident = element.closest('li').attr('data-ident');
+          self.trigger(document, events.mail.removeAttachment, {ident: ident});
+          event.preventDefault();
         });
 
         this.enableFloatlabel('input.floatlabel');
@@ -77,6 +85,13 @@ define(
         this.on(this.select('closeMailButton'), 'click', this.showNoMessageSelected);
       };
 
+      this.convertToRemovableAttachments = function(attachments) {
+        return attachments.map(function(attachment) {
+          attachment.removable = true;
+          return attachment;
+        });
+      };
+
       this.mailDeleted = function(event, data) {
         if (_.contains(_.pluck(data.mails, 'ident'),  this.attr.ident)) {
           this.trigger(events.dispatchers.rightPane.openNoMessageSelected);
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 a1b8dc41..3d643b2f 100644
--- a/web-ui/app/js/mail_view/ui/forward_box.js
+++ b/web-ui/app/js/mail_view/ui/forward_box.js
@@ -46,14 +46,29 @@ define(
           subject: this.attr.subject,
           recipients: { to: [], cc: []},
           body: viewHelper.quoteMail(mail),
-          attachments: mail.attachments
+          attachments: this.convertToRemovableAttachments(mail.attachments)
         });
 
+        var self = this;
+        this.$node.find('i.remove-icon').bind('click', function(event) {
+          var element = $(this);
+          var ident = element.closest('li').attr('data-ident');
+          self.trigger(document, events.mail.removeAttachment, {ident: ident});
+          event.preventDefault();
+        });
+        
         this.on(this.select('subjectDisplay'), 'click', this.showSubjectInput);
         this.select('recipientsDisplay').hide();
         this.select('recipientsFields').show();
       };
 
+      this.convertToRemovableAttachments = function(attachments) {
+        return attachments.map(function(attachment) {
+          attachment.removable = true;
+          return attachment;
+        });
+      };
+
       this.showSubjectInput = function() {
         this.select('subjectDisplay').hide();
         this.select('subjectInput').show();
diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js
index b1073437..1ec27c46 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -148,7 +148,8 @@ define(function () {
       startUploadAttachment: 'mail:start:upload:attachment',
       failedUploadAttachment: 'mail:failed:upload:attachment',
       appendAttachment: 'mail:append:attachment',
-      resetAttachments: 'mail:reset:attachments'
+      resetAttachments: 'mail:reset:attachments',
+      removeAttachment: 'mail:remove:attachment'
     },
     mails: {
       available: 'mails:available',
diff --git a/web-ui/app/templates/compose/attachment_item.hbs b/web-ui/app/templates/compose/attachment_item.hbs
index a69f209e..6fefda2f 100644
--- a/web-ui/app/templates/compose/attachment_item.hbs
+++ b/web-ui/app/templates/compose/attachment_item.hbs
@@ -1,8 +1,11 @@
-<li>
+<li data-ident="{{ this.ident }}">
     <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}}
+        {{#if removable}}
+            <i class="fa fa-close remove-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 e6e45cf3..4d3f1cac 100644
--- a/web-ui/app/templates/compose/attachments_list.hbs
+++ b/web-ui/app/templates/compose/attachments_list.hbs
@@ -18,4 +18,3 @@
 
     <br>
 </div>
-