Issue #679: Fix CSS and markup for attachments

6 files changed, 24 insertions, 36 deletions

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>