Issue #648: Refactor mail-list

12 files changed, 232 insertions, 210 deletions

diff --git a/service/test/functional/features/steps/common.py b/service/test/functional/features/steps/common.py
index 21794eb7..ccad842c 100644
--- a/service/test/functional/features/steps/common.py
+++ b/service/test/functional/features/steps/common.py
@@ -168,7 +168,7 @@ def click_button(context, title, element='button'):
 
 
 def mail_list_with_subject_exists(context, subject):
-    return find_element_by_xpath(context, "//*[@class='subject' and contains(.,'%s')]" % subject)
+    return find_element_by_xpath(context, "//*[@class='mail-list-entry__item-subject' and contains(.,'%s')]" % subject)
 
 
 def mail_subject(context):
diff --git a/service/test/functional/features/steps/mail_list.py b/service/test/functional/features/steps/mail_list.py
index d19de6cd..82faa7af 100644
--- a/service/test/functional/features/steps/mail_list.py
+++ b/service/test/functional/features/steps/mail_list.py
@@ -32,7 +32,7 @@ def open_current_mail(context):
 
 
 def get_first_email(context):
-    return wait_until_elements_are_visible_by_locator(context, (By.CSS_SELECTOR, '#mail-list li span a'))[0]
+    return wait_until_elements_are_visible_by_locator(context, (By.CSS_SELECTOR, '.mail-list-entry__item'))[0]
 
 
 @then('I see that mail under the \'{tag}\' tag')
@@ -78,13 +78,13 @@ def impl(context):
 @given('I have mails')
 @then(u'I have mails')
 def impl(context):
-    emails = wait_until_elements_are_visible_by_locator(context, (By.CSS_SELECTOR, '#mail-list li span a'))
+    emails = wait_until_elements_are_visible_by_locator(context, (By.CSS_SELECTOR, '.mail-list-entry__item'))
     assert len(emails) > 0
 
 
 @when('I mark the first unread email as read')
 def impl(context):
-    emails = wait_until_elements_are_visible_by_locator(context, (By.CSS_SELECTOR, '#mail-list li'))
+    emails = wait_until_elements_are_visible_by_locator(context, (By.CSS_SELECTOR, '.mail-list-entry'))
 
     for email in emails:
         if 'status-read' not in email.get_attribute('class'):
@@ -98,7 +98,7 @@ def impl(context):
 @when('I delete the email')
 def impl(context):
     def last_email():
-        return wait_until_element_is_visible_by_locator(context, (By.CSS_SELECTOR, '#mail-list li'))
+        return wait_until_element_is_visible_by_locator(context, (By.CSS_SELECTOR, '.mail-list-entry'))
     mail = last_email()
     context.current_mail_id = mail.get_attribute('id')
     mail.find_element_by_tag_name('input').click()
@@ -112,7 +112,7 @@ def _wait_for_mail_list_to_be_empty(context):
     def mail_list_is_empty(_):
         with ImplicitWait(context, timeout=0.1):
             try:
-                return 0 == len(context.browser.find_elements_by_css_selector('#mail-list li'))
+                return 0 == len(context.browser.find_elements_by_css_selector('.mail-list-entry'))
             except TimeoutException:
                 return False
 
diff --git a/service/test/functional/features/steps/tag_list.py b/service/test/functional/features/steps/tag_list.py
index a3315835..8550a886 100644
--- a/service/test/functional/features/steps/tag_list.py
+++ b/service/test/functional/features/steps/tag_list.py
@@ -49,7 +49,7 @@ def impl(context, tag):
             e = find_element_by_id(context, 'tag-%s' % tag)
             e.click()
 
-            wait_until_element_is_visible_by_locator(context, (By.CSS_SELECTOR, "#mail-list li span a[href*='%s']" % tag), timeout=20)
+            wait_until_element_is_visible_by_locator(context, (By.CSS_SELECTOR, ".mail-list-entry__item[href*='%s']" % tag), timeout=20)
             success = True
         except TimeoutException:
             pass
diff --git a/web-ui/app/js/mail_list/ui/mail_items/mail_item.js b/web-ui/app/js/mail_list/ui/mail_items/mail_item.js
index c075b0b5..be664289 100644
--- a/web-ui/app/js/mail_list/ui/mail_items/mail_item.js
+++ b/web-ui/app/js/mail_list/ui/mail_items/mail_item.js
@@ -68,6 +68,7 @@ define(
       this.attr.mail.tagsForListView = _.without(this.attr.mail.tags, this.attr.tag);
       var mailItemHtml = templates.mails[this.attr.templateType](this.attr.mail);
       this.$node.html(mailItemHtml);
+      this.$node.addClass("mail-list-entry");
       this.$node.addClass(viewHelper.formatStatusClasses(this.attr.mail.status));
       if (this.attr.selected) { this.doSelect(); }
       this.on(this.$node.find('a'), 'click', this.triggerOpenMail);
diff --git a/web-ui/app/scss/_styles.scss b/web-ui/app/scss/_styles.scss
index b4ffbd75..510297ef 100644
--- a/web-ui/app/scss/_styles.scss
+++ b/web-ui/app/scss/_styles.scss
@@ -128,100 +128,6 @@
   }
 }
 
-@mixin email-list {
-  ul#mail-list {
-    clear: both;
-    li {
-      position: relative;
-      padding: 8px 10px 10px 10px;
-      background: $contrast;
-      border-bottom: 1px solid white;
-      cursor: pointer;
-      font-weight: bold;
-      transition: background-color 150ms ease-out;
-      span {
-        display: inline-block;
-        vertical-align: top;
-        &:last-child {
-          width: 92%;
-        }
-        input[type=checkbox] {
-          @include check-box;
-          margin-right: 2px;
-        }
-        a {
-          color: $dark_grey;
-          display: block;
-          height: 62px;
-          margin-top: -8px;
-          padding-top: 3px;
-          width: 106%;
-        }
-      }
-
-      .subject {
-        display: block;
-        width: 90%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-
-        i.fa-pencil, i.fa-trash-o {
-            color: $indicator_icon_color;
-        }
-      }
-
-      .tags {
-        @include tags;
-
-        // HACK: overwrite default from ul li property
-        &-tag {
-            border-bottom: none;
-        }
-      }
-
-      .received-date, .sent-date {
-        position: absolute;
-        right: 10px;
-        font-size: 0.7em;
-      }
-
-      .attachment-indicator {
-        margin: 2px 0 0 25px;
-        font-size: initial;
-
-        i.fa-paperclip {
-            color: $indicator_icon_color;
-        }
-      }
-      .from {
-        white-space: nowrap;
-        font-size: 0.8em;
-        width: 80%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      &.status-read {
-        a {
-          font-weight: normal;
-          color: $attachment_text;
-        }
-      }
-      &:hover {
-        background: darken($contrast, 5%);
-      }
-      &.selected {
-        background: $white;
-        z-index: 3;
-        a {
-          color: $dark_grey;
-        }
-      }
-    }
-  }
-}
-
 @mixin mail-count($bg_color) {
   background: $bg_color;
   color: $white;
@@ -510,7 +416,6 @@ section {
 
   &#middle-pane {
     background: $contrast;
-    @include email-list;
   }
 
   &#right-pane {
diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss
index 0fe0684b..db9486fa 100644
--- a/web-ui/app/scss/style.scss
+++ b/web-ui/app/scss/style.scss
@@ -28,6 +28,7 @@
 @import "views/security-labels";
 @import "views/compose-view";
 @import "views/compose-button";
+@import "views/mail-list";
 
 // misc stuff
 @import "others";
diff --git a/web-ui/app/scss/views/_mail-list.scss b/web-ui/app/scss/views/_mail-list.scss
new file mode 100644
index 00000000..5b458fef
--- /dev/null
+++ b/web-ui/app/scss/views/_mail-list.scss
@@ -0,0 +1,91 @@
+.mail-list-entry {
+    @include scut-clearfix;
+
+    padding: 8px 10px 10px 10px;
+    border-bottom: 1px solid white;
+    transition: background-color 150ms ease-out;
+    cursor: pointer;
+    font-weight: bold;
+    height: 80px;
+    position: relative;
+
+    // Workaround:
+    // Foundation is of the opinion that a 1.6 line height for all lists
+    // is a totally good idea. Please remove when Foundation is gone
+    line-height: normal;
+
+    &.status-read {
+        font-weight: normal;
+    }
+
+    &.selected {
+        background: $white;
+        z-index: 10; // overlay the box-shadow of the right page (z-index: 2)
+    }
+
+    &:hover {
+        background: darken($contrast, 5%);
+    }
+
+    &__checkbox {
+        margin-right: 5px;
+        display: block;
+        float: left;
+        min-height: 100%;
+
+        & > input[type=checkbox] {
+            @include check-box;
+        }
+    }
+
+    &__item {
+        display: block;
+        color: $dark_grey;
+        padding-left: 24px;
+
+        &-from {
+            white-space: nowrap;
+            font-size: 0.8em;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+        }
+
+        &-date {
+            font-size: 0.7em;
+            float: right;
+            display: inline-block;
+        }
+
+        &-subject {
+            display: inline-block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 85%;
+        }
+
+        &-attachment {
+            width: 14px;
+            text-align: right;
+            display: inline-block;
+            float: right;
+            color: $indicator_icon_color;
+        }
+
+        &-tags {
+            @include tags;
+
+            // Workaround:
+            // Foundation is of the opinion that a 1.6 line height and a 0.6 rem margin-bottom
+            // for all lists is a totally good idea. Please remove when Foundation is gone
+            line-height: normal;
+            margin-bottom: 0;
+        }
+
+        &:hover, &:focus, &:active {
+            color: $dark_grey;
+        }
+    }
+}
+
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>
+
diff --git a/web-ui/test/custom_matchers.js b/web-ui/test/custom_matchers.js
index d68d21a8..3de7fb5b 100644
--- a/web-ui/test/custom_matchers.js
+++ b/web-ui/test/custom_matchers.js
@@ -5,10 +5,10 @@ define([], function() {
       compare: function (mail, node) {
         var result = {}, equals = {}, subject, tags, from, date, messages = [], notMessages = [];
 
-        subject = node.find('#mail-' + mail.ident + ' .subject')[0];
-        tags = _.map(node.find('#mail-' + mail.ident + ' .tags .tags-tag'), function (tag) { return tag.textContent; });
-        date = node.find('#mail-' + mail.ident + ' .received-date');
-        from = node.find('#mail-' + mail.ident + ' .from');
+        subject = node.find('#mail-' + mail.ident + ' .mail-list-entry__item-subject')[0];
+        tags = _.map(node.find('#mail-' + mail.ident + ' .mail-list-entry__item-tags .mail-list-entry__item-tags-tag'), function (tag) { return tag.textContent; });
+        date = node.find('#mail-' + mail.ident + ' .mail-list-entry__item-date');
+        from = node.find('#mail-' + mail.ident + ' .mail-list-entry__item-from');
 
         if (subject && subject.textContent.trim() === mail.header.subject) {
           equals.subject = true;