Issue #648: Refactor mail-list

3 files changed, 92 insertions, 95 deletions

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;
+        }
+    }
+}
+