Issue #549 - Implemented UI part of remote attachments

7 files changed, 61 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 f0581c67..3def6870 100644
--- a/web-ui/app/js/mail_view/ui/attachment_list.js
+++ b/web-ui/app/js/mail_view/ui/attachment_list.js
@@ -53,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) {
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',
diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss
index 93e33c27..1b6f8334 100644
--- a/web-ui/app/scss/_read.scss
+++ b/web-ui/app/scss/_read.scss
@@ -31,7 +31,7 @@
         height: 27px;
         margin-right: 3px;
       }
-      
+
       .full-view-header {
         display:inline-block;
         padding-top: 5px;
@@ -81,14 +81,14 @@
         border-radius: 2px;
         background-color: #F5F5F5;
         margin-bottom: 8px;
-    
+
       a {
         color: $attachment_text;
         display: block;
         text-decoration: none;
         line-height: inherit;
         padding: 4px 5px;
-      
+
         &:hover, &:focus {
           i.download-icon {
             color: lighten($attachment_icon, 15);
@@ -104,6 +104,13 @@
           right: 0;
           padding: 7px 10px;
         }
+
+        i.remove-icon {
+          float: right;
+          padding-right: 5px;
+          padding-top: 7px;
+          color: #999;
+        }
       }
     }
   }
@@ -154,5 +161,3 @@
     }
   }
 }
-
-
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 73113023..936db2c9 100644
--- a/web-ui/app/templates/compose/attachments_list.hbs
+++ b/web-ui/app/templates/compose/attachments_list.hbs
@@ -21,4 +21,3 @@
 
     <br>
 </div>
-