Issue #572 - Remove Attachment text, attachment box takes full width +

+ Attachment size color in lighter gray
+ Add space between each attachment

6 files changed, 29 insertions, 7 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 72782c6b..786fcb1e 100644
--- a/web-ui/app/js/mail_view/ui/attachment_list.js
+++ b/web-ui/app/js/mail_view/ui/attachment_list.js
@@ -50,8 +50,8 @@ define(
 
             this.buildAttachmentListItem = function (attachment) {
                 return '<a href="' + this.attr.attachmentBaseUrl + '/' + attachment.ident + '?filename=' +
-                    attachment.name + '&encoding=' + attachment.encoding + '">' + attachment.name + ' (' + viewHelper.formatSize(attachment.size) + ')' +
-                    '</a>';
+                    attachment.name + '&encoding=' + attachment.encoding + '">' + attachment.name + ' <span class="attachment-size"> (' + viewHelper.formatSize(attachment.size) + ')' +
+                    '</span></a>';
             };
 
             this.addJqueryFileUploadConfig = function() {
@@ -88,4 +88,4 @@ define(
         }
 
         return attachmentList;
-    });
\ No newline at end of file
+    });
diff --git a/web-ui/app/scss/_colors.scss b/web-ui/app/scss/_colors.scss
index 33b4f4e8..f4b7f21d 100644
--- a/web-ui/app/scss/_colors.scss
+++ b/web-ui/app/scss/_colors.scss
@@ -43,5 +43,6 @@ $wont_be_encrypted: $attention;
 $recipients_font_color: #AAA;
 
 /* Attachments */
-$attachment_text: #333;
+$attachment_text: #555;
 $attachment_icon: lighten($attachment_text, 30);
+$attachment_size: lighten($attachment_text, 30);
diff --git a/web-ui/app/scss/_compose.scss b/web-ui/app/scss/_compose.scss
index bd064015..3e81a06b 100644
--- a/web-ui/app/scss/_compose.scss
+++ b/web-ui/app/scss/_compose.scss
@@ -45,7 +45,13 @@
 
   span {
     padding: 3px;  
+
+    &.attachment-size {
+        color: $attachment_size;
+        cursor: pointer;
+    }
   }
+
   label.floatlabel {
     padding: 0.4rem !important;
     position: absolute;
@@ -117,6 +123,16 @@
     margin: 1px;
   }
 
+
+  .attachmentsAreaWrap {
+      padding: 0;
+
+      .attachmentsArea {
+          padding: 0;
+          border-top: 0;
+      }
+  }
+
   @include recipients;
 }
 
diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss
index 3d657ec7..ed462d38 100644
--- a/web-ui/app/scss/_read.scss
+++ b/web-ui/app/scss/_read.scss
@@ -68,6 +68,10 @@
   padding: 15px 30px 0 30px;
 }
 
+#attachment-list {
+  margin-top: 6px;
+}
+
 .attachmentsAreaWrap {
   padding: 0 30px;
 
@@ -80,6 +84,7 @@
         border: 1px solid #D9D9D9;
         border-radius: 2px;
         background-color: #F5F5F5;
+        margin-bottom: 7px;
     
       a {
         color: $attachment_text;
@@ -92,6 +97,7 @@
           i.download-icon {
             color: lighten($attachment_icon, 15);
           }
+
           color: $attachment_icon;
           outline: none;
         }
diff --git a/web-ui/app/templates/compose/compose_box.hbs b/web-ui/app/templates/compose/compose_box.hbs
index eb204501..06cc099a 100644
--- a/web-ui/app/templates/compose/compose_box.hbs
+++ b/web-ui/app/templates/compose/compose_box.hbs
@@ -32,11 +32,10 @@
     <!-- The container for the uploaded files -->
     <div class="attachmentsAreaWrap {{#unless attachments}}hide{{/unless}}">
         <div class="attachmentsArea column large-12">
-            <p><strong><i class="fa fa-paperclip"></i> Attachment(s):</strong></p>
             <ul id="attachment-list-item">
                 {{#each attachments }}
                     <li>
-                        <a href="/attachment/{{ this.ident }}?encoding={{ this.encoding }}&filename={{ this.name }}">{{ this.name }} ({{ formatSize this.size}})
+                        <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>
                 {{/each }}
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 ccede0d9..86a9297f 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,7 +32,7 @@ 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 (4.39 Kb)</a></li>';
+            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);
         });