4 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 eb515865..3def6870 100644
--- a/web-ui/app/js/mail_view/ui/attachment_list.js
+++ b/web-ui/app/js/mail_view/ui/attachment_list.js
@@ -38,6 +38,9 @@ define(
                 uploadFileButton: '#upload-file-button'
             });
 
+            var ONE_MEGABYTE = 1024*1024;
+            var ATTACHMENT_SIZE_LIMIT = ONE_MEGABYTE;
+
             this.showAttachment = function (ev, data) {
                 this.trigger(document, events.mail.appendAttachment, data);
                 this.renderAttachmentListView(data);
@@ -50,15 +53,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.checkAttachmentSize = function(e, data) {
@@ -89,8 +102,7 @@ define(
                     self.trigger(document, events.mail.startUploadAttachment);
                 };
 
-                var ONE_MEGABYTE = 1000000;
-                if (data.originalFiles[0].size > ONE_MEGABYTE) {
+                if (data.originalFiles[0].size > ATTACHMENT_SIZE_LIMIT) {
                     uploadErrors.push('Filesize is too big');
                 }
                 if (uploadErrors.length > 0) {
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 f6186d41..57dd346a 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -147,7 +147,8 @@ define(function () {
       uploadingAttachment: 'mail:uploading:attachment',
       startUploadAttachment: 'mail:start:upload:attachment',
       appendAttachment: 'mail:append:attachment',
-      resetAttachments: 'mail:reset:attachments'
+      resetAttachments: 'mail:reset:attachments',
+      removeAttachment: 'mail:remove:attachment'
     },
     mails: {
       available: 'mails:available',