Issue #620: Refactor read view

6 files changed, 210 insertions, 214 deletions

diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss
deleted file mode 100644
index 9ae64a57..00000000
--- a/web-ui/app/scss/_read.scss
+++ /dev/null
@@ -1,188 +0,0 @@
-/* MAIL PANE */
-
-#mail-view {
-    .msg-header {
-        display: flex;
-        flex-wrap: nowrap;
-        top: 0;
-        z-index: 10;
-        background-color: white;
-        font-size: 0.9em;
-        padding: 0px 0;
-        margin: 1px 0 0 0;
-
-        .recipients {
-            padding-bottom: 5px;
-            line-height: 1.5em;
-
-            i {
-                padding: 0 5px;
-            }
-
-            .from {
-                font-weight: 700;
-            }
-        }
-
-        .close-mail-button {
-            position: relative;
-            float: none;
-            flex-shrink: 0;
-            display: inline-block;
-            vertical-align: top;
-            height: 27px;
-            margin-right: 3px;
-        }
-
-        .full-view-header {
-            display: inline-block;
-            padding-top: 5px;
-            width: 95%;
-            flex-shrink: 1;
-        }
-
-        .headline-area {
-            clear: both;
-            border-top: 1px solid $lighter_gray;
-        }
-    }
-
-    h3 {
-        margin-bottom: 0;
-    }
-
-    .tagsArea {
-        clear: both;
-        margin: 0 0 10px;
-
-        @include tags;
-
-        ul li {
-            &.tag:hover {
-                &:before {
-                    content: "click to remove";
-                    text-transform: lowercase;
-                    font-size: 0.5rem;
-
-                    @include tooltip(18px, 8px);
-                }
-            }
-        }
-    }
-}
-
-.bodyArea {
-    padding: 10px 30px 0 30px;
-    box-sizing: border-box;
-
-    iframe {
-        box-sizing: inherit;
-        border: none;
-        width: 100%;
-    }
-}
-
-.attachmentsAreaWrap {
-    padding: 0 30px;
-
-    .attachmentsArea {
-        border-top: 1px solid $lighter_gray;
-        padding: 10px 0 0;
-
-        li {
-            position: relative;
-            display: block;
-            border: 1px solid $border_light_grey;
-            border-radius: 2px;
-            background-color: $background_light_grey;
-            margin-bottom: 8px;
-
-            a {
-                color: $attachment_text;
-                display: block;
-                text-decoration: none;
-                line-height: inherit;
-                padding: 4px 5px;
-
-                &:hover, &:focus {
-                    i.download-icon {
-                        color: lighten($attachment_icon, 15);
-                    }
-
-                    color: $attachment_icon;
-                    outline: none;
-                }
-
-                i.download-icon {
-                    position: absolute;
-                    color: $attachment_icon;
-                    right: 0;
-                    padding: 7px 10px;
-                }
-
-                i.remove-icon {
-                    float: right;
-                    padding-right: 5px;
-                    padding-top: 7px;
-                    color: $medium_light_grey;
-                }
-            }
-        }
-    }
-}
-
-#mail-actions {
-    text-align: right;
-    padding: 10px 0;
-
-    button {
-        display: inline-block;
-        display: inline;
-        line-height: 2em;
-        border: 1px solid $lighter_gray;
-
-        #reply-button-top {
-            @include border-right-radius(0);
-
-            padding: 0 20px;
-        }
-
-        #view-more-actions {
-            @include border-left-radius(0);
-
-            padding: 0 5px;
-            margin-left: -4px;
-        }
-
-        &:hover {
-            @include btn-transition;
-
-            background: darken($contrast, 5%);
-        }
-    }
-
-    ul#more-actions {
-        padding: 5px 0;
-        width: 170px;
-        text-align: left;
-        display: block;
-        position: absolute;
-        background: $white;
-        border: 1px solid $lighter_gray;
-        right: 0;
-        top: 40px;
-        z-index: 10;
-
-        li {
-            span, a {
-                padding: 5px 10px;
-                display: block;
-
-                &:hover {
-                    cursor: pointer;
-                    background: $contrast;
-                }
-            }
-        }
-    }
-}
diff --git a/web-ui/app/scss/_reply.scss b/web-ui/app/scss/_reply.scss
index 76689d16..622bdd5a 100644
--- a/web-ui/app/scss/_reply.scss
+++ b/web-ui/app/scss/_reply.scss
@@ -1,6 +1,6 @@
 
 #reply-section {
-  padding: 0 30px;
+  padding-left: 30px;
   .reply-container {
     margin: 10px 0;
     padding: 10px;
diff --git a/web-ui/app/scss/_styles.scss b/web-ui/app/scss/_styles.scss
index 1ff588d7..98c70c68 100644
--- a/web-ui/app/scss/_styles.scss
+++ b/web-ui/app/scss/_styles.scss
@@ -574,9 +574,11 @@ section {
 
 button {
   border: 1px solid transparent;
+
   i {
     margin-left: 5px;
   }
+
   &#trash-button {
     background: $white;
     border: 1px solid $medium_light_grey;
@@ -587,30 +589,8 @@ button {
       background: $contrast;
     }
   }
-  &.close-mail-button {
-    background: transparent;
-    color: $medium_light_grey;
-    float: right;
-    &:hover {
-      color: darken($medium_light_grey, 10%);
-    }
-  }
-  &.close-mail-button {
-    position: absolute;
-    left: 0;
-    top: 0;
-    margin: 0;
-    padding: 3px 6px 5px;
-    background: $lighter_gray;
-    opacity: 0.7;
-    @include border-radius(0);
-    &:hover {
-      opacity: 1;
-    }
-    i {
-      margin: 0;
-    }
-  }
+
+
   &.no-style {
     background: transparent;
     color: $medium_light_grey;
diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss
index d27b3031..2ed81556 100644
--- a/web-ui/app/scss/style.scss
+++ b/web-ui/app/scss/style.scss
@@ -1,5 +1,6 @@
 // vendor stylesheets and resets
 @import "vendor/reset";
+@import "vendor/scut";
 @import "compass/css3";
 @import "vendor/foundation";
 
@@ -20,15 +21,16 @@
 
 // views
 @import "views/message-panel";
+@import "views/close-button";
 @import "views/no-message-selected";
 @import "views/no-mails-available";
+@import "views/read-view";
 
 // misc stuff
 @import "others";
 
 // TODO
 @import "compose";
-@import "read";
 @import "reply";
 @import "security";
 @import "styles";
diff --git a/web-ui/app/scss/views/_close-button.scss b/web-ui/app/scss/views/_close-button.scss
new file mode 100644
index 00000000..9285a145
--- /dev/null
+++ b/web-ui/app/scss/views/_close-button.scss
@@ -0,0 +1,21 @@
+.close-mail-button {
+    $button-size: 27px;
+
+    margin-right: 3px;
+    float: left;
+    background: $lighter_gray;
+    color: $medium_light_grey;
+    width: $button-size;
+    height: $button-size;
+    padding: 0;
+    border-radius: 0;
+
+    &:hover {
+        color: darken($medium_light_grey, 10%);
+    }
+
+    i {
+        padding: 0;
+        margin: 0;
+    }
+}
diff --git a/web-ui/app/scss/views/_read-view.scss b/web-ui/app/scss/views/_read-view.scss
new file mode 100644
index 00000000..6c229f9b
--- /dev/null
+++ b/web-ui/app/scss/views/_read-view.scss
@@ -0,0 +1,181 @@
+.mail-read-view {
+    $component-vertical-spacing: 10px;
+    $view-top-spacing: 3px;
+
+    // NB! Setting overflow: hidden on an element causes
+    // a new float context to be created, so elements that
+    // are floated inside an element that has overflow: hidden
+    // applied are cleared.
+    overflow-x: hidden;
+
+    hr {
+        margin: 0;
+    }
+
+    &__header {
+        @include scut-clearfix;
+
+        font-size: 0.9em;
+        margin: 0;
+        margin: $view-top-spacing 0 $component-vertical-spacing 0;
+
+        &-recipients {
+            display: inline;
+            margin-bottom: 5px;
+            line-height: 1.5em;
+
+            &-separator {
+                margin: 0 10px;
+            }
+
+            &--highlight-sender {
+                font-weight: bold;
+            }
+        }
+
+        &-date {
+            display: inline;
+            float: right;
+        }
+
+        &-subject {
+            display: inline;
+            float: left;
+            max-width: 80%;
+        }
+
+        &-actions {
+            display: inline;
+            float: right;
+            max-width: 20%;
+            background: $white;
+            white-space: nowrap;
+            margin-top: $component-vertical-spacing;
+
+            &-button {
+                color: $medium_light_grey;
+                background-color: inherit;
+                display: inline;
+                border: 1px solid $lighter_gray;
+                line-height: 2em;
+
+                margin-bottom: 0;
+
+                i {
+                    // workaround: remove padding and margin inserted by font-awesome
+                    margin: 0;
+                    padding: 0;
+                }
+
+                &:hover, &:active, &:focus {
+                    @include btn-transition;
+
+                    background: darken($contrast, 5%);
+                    color: inherit;
+                }
+
+                &--reply {
+                    padding: 0 20px;
+                    margin-right: -4px; // force buttons together
+
+                }
+
+                &--more {
+                    padding: 0 5px;
+                }
+            }
+
+            &-dropdown {
+                $container-right-padding: 10px;
+
+                background: inherit;
+                position: absolute;
+                border: 1px solid $lighter_gray;
+                right: $container-right-padding;
+
+                &-entry {
+                    box-sizing: border-box;
+                    background: inherit;
+                    padding: 5px 10px;
+                    display: block;
+                    border-bottom: 1px solid $lighter_gray;
+
+                    &:last-child {
+                        border-bottom: none;
+                    }
+
+                    &:hover {
+                        cursor: pointer;
+                        background: $contrast;
+                    }
+                }
+            }
+        }
+
+        &-tags {
+            clear: both;
+            margin: 0 0 10px;
+
+            // TODO refactor
+
+            @include tags;
+
+            ul li {
+                &.tag:hover {
+                    &:before {
+                        content: "click to remove";
+                        text-transform: lowercase;
+                        font-size: 0.5rem;
+
+                        @include tooltip(18px, 8px);
+                    }
+                }
+            }
+        }
+    }
+
+    &__body {
+        margin: $component-vertical-spacing 0;
+        width: 100%;
+        border: none;
+    }
+
+    &__attachments {
+        margin: $component-vertical-spacing 0;
+
+        &-header {
+            font-weight: bold;
+        }
+
+        &-item {
+            @include scut-clearfix;
+
+            display: block;
+            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 {
+                    i.download-icon {
+                        color: lighten($attachment_icon, 15);
+                    }
+
+                    color: $attachment_icon;
+                    outline: none;
+                }
+            }
+
+            &-download {
+                color: #a2a2a2;
+                float: right;
+                margin-top: 5px;
+            }
+        }
+    }
+}