Issue #679: Fix CSS and markup for attachments

9 files changed, 130 insertions, 112 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 ef2960f7..fc4c0544 100644
--- a/web-ui/app/js/mail_view/ui/attachment_list.js
+++ b/web-ui/app/js/mail_view/ui/attachment_list.js
@@ -35,7 +35,7 @@ define(
                 attachmentUploadItemAbort: '#attachment-upload-item-abort',
                 attachmentBaseUrl: '/attachment',
                 attachments: [],
-                closeIcon: '.close-icon',
+                closeIcon: '#upload-error-close',
                 uploadError: '#upload-error',
                 dismissButton: '#dismiss-button',
                 uploadFileButton: '#upload-file-button'
@@ -171,8 +171,6 @@ define(
                     }
                 }).bind('fileuploadstart', function (e) {
                     self.trigger(document, events.mail.uploadingAttachment);
-                }).bind('fileuploadadd', function (e) {
-                    $('.attachmentsAreaWrap').show();
                 });
             };
 
diff --git a/web-ui/app/scss/views/_compose-view.scss b/web-ui/app/scss/views/_compose-view.scss
index 146aacf5..296a491a 100644
--- a/web-ui/app/scss/views/_compose-view.scss
+++ b/web-ui/app/scss/views/_compose-view.scss
@@ -1,5 +1,110 @@
 .compose-view {
     overflow: auto;
+
+    &__buttons {
+        &-attachment {
+            cursor: pointer;
+            outline: 0;
+            margin-left: 18px;
+            padding-top: 0px;
+            -ms-transform: rotate(224deg);
+            -webkit-transform: rotate(224deg);
+            transform: rotate(224deg);
+
+            i.fa-paperclip {
+                font-size: 1.7em;
+            }
+
+            &--busy {
+                color: lighten($recipients_font_color, 10%);
+                cursor: progress;
+            }
+        }
+    }
+
+    &__attachments {
+        &-wrapper {
+            padding: 0;
+            margin-top: 30px;
+        }
+
+        &-list {
+            &-item {
+                display: block;
+                position: relative;
+                margin-bottom: 8px;
+                padding: 5px;
+                border: 1px solid $border_light_grey;
+                border-radius: 2px;
+                background-color: $background_light_grey;
+
+                &-label {
+                    color: $attachment_text;
+                    text-decoration: none;
+
+                    &:hover, &:focus {
+                        color: $attachment_icon;
+                        outline: none;
+                    }
+                }
+
+                &-icon {
+                    color: #a2a2a2;
+                    float: right;
+                    margin-top: 7px;
+                    cursor: pointer;
+                }
+
+                &-progress {
+                    width: 0%;
+                    position: absolute;
+                    right: 0;
+                    left: 0;
+                    top: 0;
+                    bottom: 0;
+                    min-height: 100%;
+
+                    &-bar {
+                        height: 100%;
+                        background-color: rgba($light_blue, 0.3);
+                    }
+                }
+
+            }
+
+            &--upload {
+                display: none;
+            }
+
+        }
+
+        &-error {
+            background-color: $background_light_grey;
+            border-radius: 2px;
+            border: 1px solid $error;
+            display: block;
+            font-size: 0.9rem;
+            margin-bottom: 20px;
+            padding: 5px;
+            width: 100%;
+
+            &-close {
+                float: left;
+                margin: 5px 5px 0 0;
+            }
+
+            & > * {
+                color: $error;
+            }
+
+            & > a {
+                display: inline-block;
+                text-decoration: underline;
+                padding: 5px;
+            }
+        }
+    }
+
 }
 
 // COMPOSE PANE
@@ -116,77 +221,6 @@
 
     .buttons-group {
         margin-top: 0px;
-
-        span#attachment-button {
-            cursor: pointer;
-            outline: 0;
-            margin-left: 18px;
-            padding-top: 0px;
-            -ms-transform: rotate(224deg);
-
-            /* IE 9 */
-            -webkit-transform: rotate(224deg);
-
-            /* Chrome, Safari, Opera */
-            transform: rotate(224deg);
-
-            i.fa-paperclip {
-                font-size: 1.7em;
-            }
-
-            &.busy {
-                color: lighten($recipients_font_color, 10%);
-                cursor: progress;
-            }
-        }
-    }
-
-    #attachment-upload-item {
-        display: none;
-
-        .progress {
-            width: 0%;
-            position: absolute;
-            right: 0;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            min-height: 100%;
-
-            .progress-bar {
-                height: 100%;
-                background-color: rgba($light_blue, 0.3);
-            }
-        }
-    }
-
-    .attachmentsAreaWrap {
-        padding: 0;
-
-        .attachmentsArea {
-            padding: 0;
-            border-top: 0;
-
-            #upload-error {
-                color: $error;
-                margin-bottom: 20px;
-
-                .close-icon {
-                    font-size: 1.0rem;
-                    cursor: pointer;
-                }
-
-                span, a {
-                    color: $error;
-                    font-size: 0.9rem;
-                }
-
-                a {
-                    text-decoration: underline;
-                    padding: 5px;
-                }
-            }
-        }
     }
 
     .recipients-area {
diff --git a/web-ui/app/scss/views/_read-view.scss b/web-ui/app/scss/views/_read-view.scss
index 25aaf92e..f69d51a5 100644
--- a/web-ui/app/scss/views/_read-view.scss
+++ b/web-ui/app/scss/views/_read-view.scss
@@ -134,8 +134,6 @@
         }
 
         &-item {
-            @include scut-clearfix;
-
             display: block;
             margin-bottom: 8px;
             padding: 5px;
diff --git a/web-ui/app/templates/compose/attachment_item.hbs b/web-ui/app/templates/compose/attachment_item.hbs
index 6fefda2f..7a64f6f5 100644
--- a/web-ui/app/templates/compose/attachment_item.hbs
+++ b/web-ui/app/templates/compose/attachment_item.hbs
@@ -1,11 +1,4 @@
-<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 data-ident="{{ this.ident }}" class="compose-view__attachments-list-item">
+    <a class="compose-view__attachments-list-item-label" href="/attachment/{{ this.ident }}?encoding={{ this.encoding }}&filename={{ this.name }}">{{ this.name }} <span class="attachment-size">({{ formatSize this.size}})</span></a>
+    {{#if removable}}<i class="fa fa-close remove-icon compose-view__attachments-list-item-icon"></i>{{/if}}
 </li>
diff --git a/web-ui/app/templates/compose/attachment_upload_item.hbs b/web-ui/app/templates/compose/attachment_upload_item.hbs
index ff783267..eb6c4ba6 100644
--- a/web-ui/app/templates/compose/attachment_upload_item.hbs
+++ b/web-ui/app/templates/compose/attachment_upload_item.hbs
@@ -1,4 +1,5 @@
-<li>
-    <div id="attachment-upload-item-progress" class="progress"><div class="progress-bar progress-bar-success"></div></div>
-    <a>{{ this.name }} <span class="attachment-size">({{ formatSize this.size}})</span><i id="attachment-upload-item-abort" class="fa fa-close remove-icon"></i></a>
+<li class="compose-view__attachments-list-item">
+    <div id="attachment-upload-item-progress" class="compose-view__attachments-list-item-progress"><div class="compose-view__attachments-list-item-progress-bar"></div></div>
+    <a class="compose-view__attachments-list-item-label">{{ this.name }} <span class="attachment-size">({{ formatSize this.size}})</span></a>
+    <i id="attachment-upload-item-abort" class="fa fa-close remove-icon compose-view__attachments-list-item-icon"></i>
 </li>
diff --git a/web-ui/app/templates/compose/attachments_list.hbs b/web-ui/app/templates/compose/attachments_list.hbs
index 4d3f1cac..6f34df9e 100644
--- a/web-ui/app/templates/compose/attachments_list.hbs
+++ b/web-ui/app/templates/compose/attachments_list.hbs
@@ -1,20 +1,14 @@
-<div id="attachment-list" class="buttons-group columns">
-    <span class="btn btn-success fileinput-button">
-        <!-- The file input field used as target for the file upload widget -->
-        <input id="fileupload" type="file" name="attachment">
-    </span>
+<div id="attachment-list" class="buttons-group columns compose-view__attachments">
+    <input id="fileupload" type="file" name="attachment" hidden>
 
     <!-- The container for the uploaded files -->
-    <div class="attachmentsAreaWrap {{#unless attachments}}hide{{/unless}}">
-        <div class="attachmentsArea column large-12">
-            <ul id="attachment-list-item">
-                {{#each attachments }}
-                    {{> attachment_item this }}
-                {{/each }}
-            </ul>
-            <ul id="attachment-upload-item"></ul>
-        </div>
+    <div class="compose-view__attachments-wrapper">
+        <ul id="attachment-list-item" class="compose-view__attachments-list">
+            {{#each attachments }}
+                {{> attachment_item this }}
+            {{/each }}
+        </ul>
+        <ul id="attachment-upload-item" class="compose-view__attachments-list compose-view__attachments-list--upload"></ul>
     </div>
 
-    <br>
 </div>
diff --git a/web-ui/app/templates/compose/compose_box.hbs b/web-ui/app/templates/compose/compose_box.hbs
index b88138b5..f69cb542 100644
--- a/web-ui/app/templates/compose/compose_box.hbs
+++ b/web-ui/app/templates/compose/compose_box.hbs
@@ -22,9 +22,9 @@
 
     {{> attachments_list }}
 
-        <div class="buttons-group columns">
+        <div class="buttons-group columns compose-view__buttons">
             <button id="send-button" tabindex="6"><i class="fa fa-send"></i></button>
-            <span id="attachment-button" tabindex="6"></span>
+            <span id="attachment-button" class="compose-view__buttons-attachment" tabindex="6"></span>
             <button id="trash-button" tabindex="7">{{t 'trash-button'}}<i class="fa fa-trash-o"></i></button>
             <div id="draft-save-status"></div>
         </div>
diff --git a/web-ui/app/templates/compose/inline_box.hbs b/web-ui/app/templates/compose/inline_box.hbs
index 59dc67bc..543e69de 100644
--- a/web-ui/app/templates/compose/inline_box.hbs
+++ b/web-ui/app/templates/compose/inline_box.hbs
@@ -12,9 +12,9 @@
 
 {{> attachments_list }}
 
-<div class="buttons-group columns">
+<div class="buttons-group columns  compose-view__buttons">
   <button id="send-button" tabindex=6><i class="fa fa-send"></i></button>
-  <span id="attachment-button" tabindex="6"></span>
+  <span id="attachment-button" class="compose-view__buttons-attachment" tabindex="6"></span>
   <button id="trash-button" tabindex=7>{{t 'trash-button'}}<i class="fa fa-trash-o"></i></button>
   <div id="draft-save-status"></div>
 </div>
diff --git a/web-ui/app/templates/compose/upload_attachment_failed.hbs b/web-ui/app/templates/compose/upload_attachment_failed.hbs
index 33ac1aac..dbb1437b 100644
--- a/web-ui/app/templates/compose/upload_attachment_failed.hbs
+++ b/web-ui/app/templates/compose/upload_attachment_failed.hbs
@@ -1,6 +1,6 @@
-<div id="upload-error">
-    <i class="fa fa-close close-icon"></i>
-    <span id="upload-error-message">Upload failed. This file exceeds the 1MB limit.</span>
+<div id="upload-error" class="compose-view__attachments-error">
+    <i id="upload-error-close" class="fa fa-close compose-view__attachments-error-close"></i>
+    <span id="upload-error-message"  class="compose-view__attachments-error-message">Upload failed. This file exceeds the 1MB limit.</span>
     <a href="#" id="upload-file-button">Choose another file</a>
     <a href="#" id="dismiss-button">Dismiss</a>
-</div> 
+</div>