Issue #648: Refactor mail-list

4 files changed, 128 insertions, 104 deletions

diff --git a/web-ui/app/templates/mails/draft.hbs b/web-ui/app/templates/mails/draft.hbs
index 675f1481..9f4192cc 100644
--- a/web-ui/app/templates/mails/draft.hbs
+++ b/web-ui/app/templates/mails/draft.hbs
@@ -1,31 +1,41 @@
-<span>
-  <input type="checkbox"/>
-</span>
-<span>
-  <a href="/#/{{ currentTag }}/mail/{{ ident }}">
-    <span class="sent-date">{{ formatDate header.date }}
-            {{#if attachments}}
-            <div class="attachment-indicator">
-                <i class="fa fa-paperclip"></i>
-            </div>
-        {{/if}}
-    </span>
+<div class="mail-list-entry__checkbox">
+    <input type="checkbox" {{#if isChecked }}checked="true"{{/if}} />
+</div>
+
+<a class="mail-list-entry__item" href="/#/{{ currentTag }}/mail/{{ ident }}">
+    <div>
+        <div class="mail-list-entry__item-from">
+            {{t 'to:'}}
+            {{#if header.to }}
+              {{ header.to }}
+            {{else}}
+              {{t 'no_recipient'}}
+            {{/if}}
+        </div> <!-- /.mail-list-entry__item-from -->
 
-    <div class="from">
-      {{t 'to:'}}
-      {{#if header.to }}
-        {{ header.to }}
-      {{else}}
-        {{t 'no_recipient'}}
-      {{/if}}
+        <span class="mail-list-entry__item-date">{{ formatDate header.date }}</span> <!-- /.mail-list-entry__item-date -->
     </div>
-    <div class="subject">
-      <i class="fa fa-pencil"></i>
-      {{#if header.subject }}
-        {{header.subject}}
-      {{else}}
-        {{t 'no_subject'}}
-      {{/if}}
+    <div>
+        <div class="mail-list-entry__item-subject">
+            <i class="fa fa-pencil"></i>
+            {{#if header.subject }}
+              {{header.subject}}
+            {{else}}
+              {{t 'no_subject'}}
+            {{/if}}
+        </div>
+
+        {{#if attachments}}
+            <div class="mail-list-entry__item-attachment"><i class="fa fa-paperclip"></i></div>
+        {{/if}}
     </div>
-  </a>
-</span>
+    <ul class="mail-list-entry__item-tags">
+        {{#each tagsForListView }}
+            <li class="mail-list-entry__item-tags-tag" data-tag="{{this}}">{{ this }}</li>
+        {{/each }}
+    </ul> <!-- /.mail-list-entry__item-tags -->
+</a>
+
+
+
+
diff --git a/web-ui/app/templates/mails/sent.hbs b/web-ui/app/templates/mails/sent.hbs
index 86b6e607..a637e3d2 100644
--- a/web-ui/app/templates/mails/sent.hbs
+++ b/web-ui/app/templates/mails/sent.hbs
@@ -1,35 +1,36 @@
-<span>
-  <input type="checkbox"/>
-</span>
-<span>
-  <a href="/#/{{ currentTag }}/mail/{{ ident }}">
-    <span class="sent-date">{{ formatDate header.date }}
+<div class="mail-list-entry__checkbox">
+    <input type="checkbox" {{#if isChecked }}checked="true"{{/if}} />
+</div>
+<a class="mail-list-entry__item" href="/#/{{ currentTag }}/mail/{{ ident }}">
+    <div>
+        <div class="mail-list-entry__item-from">
+            {{t 'to:'}}
+            {{#if header.to }}
+                {{ header.to }}
+            {{else}}
+                {{t 'no_recipient'}}
+            {{/if}}
+        </div> <!-- /.mail-list-entry__item-from -->
+
+        <span class="mail-list-entry__item-date">{{ formatDate header.date }}</span> <!-- /.mail-list-entry__item-date -->
+    </div>
+    <div>
+        <div class="mail-list-entry__item-subject">
+            {{#if header.subject }}
+                {{header.subject}}
+            {{else}}
+                {{t 'no_subject'}}
+            {{/if}}
+         </div>
+
         {{#if attachments}}
-            <div class="attachment-indicator">
-                <i class="fa fa-paperclip"></i>
-            </div>
+            <div class="mail-list-entry__item-attachment"><i class="fa fa-paperclip"></i></div>
         {{/if}}
-    </span>
+    </div>
+    <ul class="mail-list-entry__item-tags">
+        {{#each tagsForListView }}
+            <li class="mail-list-entry__item-tags-tag" data-tag="{{this}}">{{ this }}</li>
+        {{/each }}
+    </ul> <!-- /.mail-list-entry__item-tags -->
+</a>
 
-      <div class="from">
-          {{t 'to:'}}
-          {{#if header.to }}
-              {{ header.to }}
-          {{else}}
-              {{t 'no_recipient'}}
-          {{/if}}
-      </div>
-      <div class="subject">
-          {{#if header.subject }}
-              {{header.subject}}
-          {{else}}
-              {{t 'no_subject'}}
-          {{/if}}
-      </div>
-      <ul class="tags">
-          {{#each tagsForListView }}
-              <li class="tags-tag" data-tag="{{this}}">{{ this }}</li>
-          {{/each }}
-      </ul>
-  </a>
-</span>
diff --git a/web-ui/app/templates/mails/single.hbs b/web-ui/app/templates/mails/single.hbs
index 95f9adb7..aaede844 100644
--- a/web-ui/app/templates/mails/single.hbs
+++ b/web-ui/app/templates/mails/single.hbs
@@ -1,23 +1,28 @@
-<span>
-  <input type="checkbox" {{#if isChecked }}checked="true"{{/if}} />
-</span>
-<span>
-  <a href="/#/{{ currentTag }}/mail/{{ ident }}">
-    <span class="received-date">{{ formatDate header.date }}
-      {{#if attachments}}
-        <div class="attachment-indicator">
-          <i class="fa fa-paperclip"></i>
-        </div>
-      {{/if}}
-    </span>
-    <div class="from">{{#if header.from }}{{ header.from }}{{else}}{{t "you"}}{{/if}}</div>
-    <div class="subject">
-      {{ header.subject }}
+<div class="mail-list-entry__checkbox">
+    <input type="checkbox" {{#if isChecked }}checked="true"{{/if}} />
+</div>
+<a class="mail-list-entry__item" href="/#/{{ currentTag }}/mail/{{ ident }}">
+    <div>
+        <div class="mail-list-entry__item-from">
+            {{#if header.from }}
+                {{ header.from }}
+            {{else}}
+                {{t "you"}}
+            {{/if}}
+        </div> <!-- /.mail-list-entry__item-from -->
+
+        <span class="mail-list-entry__item-date">{{ formatDate header.date }}</span> <!-- /.mail-list-entry__item-date -->
     </div>
-    <ul class="tags">
-      {{#each tagsForListView }}
-          <li class="tags-tag" data-tag="{{this}}">{{ this }}</li>
-      {{/each }}
-    </ul>
-  </a>
-</span>
+    <div>
+        <div class="mail-list-entry__item-subject">{{ header.subject }}</div>
+
+        {{#if attachments}}
+            <div class="mail-list-entry__item-attachment"><i class="fa fa-paperclip"></i></div>
+        {{/if}}
+    </div>
+    <ul class="mail-list-entry__item-tags">
+        {{#each tagsForListView }}
+            <li class="mail-list-entry__item-tags-tag" data-tag="{{this}}">{{ this }}</li>
+        {{/each }}
+    </ul> <!-- /.mail-list-entry__item-tags -->
+</a>
diff --git a/web-ui/app/templates/mails/trash.hbs b/web-ui/app/templates/mails/trash.hbs
index ea8fe07f..b822d12f 100644
--- a/web-ui/app/templates/mails/trash.hbs
+++ b/web-ui/app/templates/mails/trash.hbs
@@ -1,24 +1,32 @@
-<span>
-  <input type="checkbox" {{#if isChecked }}checked="true"{{/if}} />
-</span>
-<span>
-  <a href="/#/{{ currentTag }}/mail/{{ ident }}">
-    <span class="received-date">{{ header.formattedDate }}
-      {{#if attachments}}
-        <div class="attachment-indicator">
-          <i class="fa fa-paperclip"></i>
+<div class="mail-list-entry__checkbox">
+    <input type="checkbox" {{#if isChecked }}checked="true"{{/if}} />
+</div>
+<a class="mail-list-entry__item" href="/#/{{ currentTag }}/mail/{{ ident }}">
+    <div>
+        <div class="mail-list-entry__item-from">
+            {{#if header.from }}
+                {{ header.from }}
+            {{else}}
+                {{t "you"}}
+            {{/if}}
+        </div> <!-- /.mail-list-entry__item-from -->
+
+        <span class="mail-list-entry__item-date">{{ formatDate header.date }}</span> <!-- /.mail-list-entry__item-date -->
+    </div>
+    <div>
+        <div class="mail-list-entry__item-subject">
+            <i class="fa fa-trash-o"></i>
+            {{ header.subject }}
         </div>
-      {{/if}}
-    </span>
-    <div class="from">{{#if header.from }}{{ header.from }}{{else}}{{t "you"}}{{/if}}</div>
-    <div class="subject">
-      <i class="fa fa-trash-o"></i>
-      {{ header.subject }}
+
+        {{#if attachments}}
+            <div class="mail-list-entry__item-attachment"><i class="fa fa-paperclip"></i></div>
+        {{/if}}
     </div>
-    <ul class="tags">
-      {{#each tagsForListView }}
-          <li class="tags-tag" data-tag="{{this}}">{{ this }}</li>
-      {{/each }}
-    </ul>
-  </a>
-</span>
+    <ul class="mail-list-entry__item-tags">
+        {{#each tagsForListView }}
+            <li class="mail-list-entry__item-tags-tag" data-tag="{{this}}">{{ this }}</li>
+        {{/each }}
+    </ul> <!-- /.mail-list-entry__item-tags -->
+</a>
+