Issue #620: Refactor read view

8 files changed, 265 insertions, 270 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;
+            }
+        }
+    }
+}
diff --git a/web-ui/app/templates/mails/full_view.hbs b/web-ui/app/templates/mails/full_view.hbs
index 3ff109e9..0bc9d999 100644
--- a/web-ui/app/templates/mails/full_view.hbs
+++ b/web-ui/app/templates/mails/full_view.hbs
@@ -1,29 +1,25 @@
+<button class="close-mail-button">
+    <i class="fa fa-times"></i>
+</button>
 
-<div id="fullView-{{ ident }}" class="{{statuses}}">
-
-    <header class="msg-header row">
-
-        <button class="close-mail-button">
-            <i class="fa fa-times"></i>
-        </button>
-
-
-      <div class="full-view-header">
+<div id="fullView-{{ ident }}" class="mail-read-view {{statuses}}">
+    <header class="mail-read-view__header row">
 
+        <!-- TODO -->
         <div class="column large-12 no-padding security-status">
             {{#if signatureStatus}}
             <span class="{{signatureStatus}}">
               {{t signatureStatus }}
             </span>
-            {{/if}}
-            {{#if encryptionStatus}}
+            {{/if}} {{#if encryptionStatus}}
             <span class="{{encryptionStatus}}">
               {{t encryptionStatus }}
             </span>
             {{/if}}
         </div>
-        <div class="recipients column large-10 no-padding">
-            <span class="from">
+
+        <div class="mail-read-view__header-recipients">
+            <span class="mail-read-view__header-recipients--highlight-sender">
               {{#if header.from }}
                 {{ header.from }}
               {{else}}
@@ -33,52 +29,55 @@
             <i class="fa fa-long-arrow-right"></i>
             {{{formatRecipients header}}}
         </div>
-        <div class="recipients column large-2 text-right">
-            <span class="received-date">{{ formatDate header.date }}</span>
+
+        <div class="mail-read-view__header-date">
+            {{ formatDate header.date }}
         </div>
-        <div class="headline-area">
-            <h3 class="subjectArea column large-10 no-padding">
-                <span class="subject">{{ header.subject }}</span>
 
-                <div class="tagsArea">
-                    <ul class="tags">
-                    <i class="tags-label fa fa-tags"></i>
-                        {{#each tags }}
-                          <li class="tag" data-tag="{{this}}">{{ this }}</li>
-                        {{/each }}
+        <hr>
 
-                        <li class="new-tag">
-                            <input type="text" id="new-tag-input" placeholder="{{t 'Press Enter to add tag'}}"/>
-                        </li>
-                        <li class="add-new">
-                            <button id="new-tag-button" class="no-style"><i class="fa fa-plus"></i></button>
-                        </li>
-                    </ul>
-                </div>
-            </h3>
-            <nav id="mail-actions" class="column large-2 no-padding">
-            </nav>
+        <div class="mail-read-view__header-subject">
+            <h3>{{ header.subject }}</h3>
         </div>
 
-      </div>
+        <nav id="mail-actions" class="mail-read-view__header-actions"></nav>
+
+        <div class="mail-read-view__header-tags">
+            <ul class="tags">
+                <i class="tags-label fa fa-tags"></i>
+                {{#each tags }}
+                <li class="tag" data-tag="{{this}}">{{ this }}</li>
+                {{/each }}
+
+                <li class="new-tag">
+                    <input type="text" id="new-tag-input" placeholder="{{t 'Press Enter to add tag'}}"
+                    />
+                </li>
+
+                <li class="add-new">
+                    <button id="new-tag-button" class="no-style"><i class="fa fa-plus"></i>
+                    </button>
+                </li>
+            </ul>
+        </div>
     </header>
 
-    <div class="bodyArea column large-12">
-        <iframe id="read-sandbox" sandbox="allow-popups allow-scripts" src="sandbox/sandbox.html" scrolling="no"></iframe>
-    </div>
+    <iframe class="mail-read-view__body" id="read-sandbox" sandbox="allow-popups allow-scripts" src="sandbox/sandbox.html" scrolling="no"></iframe>
 
     {{#if attachments}}
-      <div class="attachmentsAreaWrap">
-        <div class="attachmentsArea column large-12">
-        <p><strong><i class="fa fa-paperclip"></i> {{ attachments.length }} attachment(s):</strong></p>
-          <ul>
-          {{#each attachments }}
-            <li>
-              <a href="/attachment/{{ this.ident }}?content_type={{ this.content-type }}&encoding={{ this.encoding }}&filename={{ this.name }}">{{ this.name }} ({{ formatSize this.size}})<i class="fa fa-arrow-down download-icon"></i></a>
-            </li>
-          {{/each }}
-          </ul>
+        <hr>
+
+        <div id="attachmentsArea" class="mail-read-view__attachments">
+            <p class="mail-read-view__attachments-header"><i class="fa fa-paperclip"></i> {{ attachments.length }} attachment(s):</p>
+            <ul>
+                {{#each attachments }}
+                <li class="mail-read-view__attachments-item">
+                    <a class="mail-read-view__attachments-item-label" href="/attachment/{{ this.ident }}?content_type={{ this.content-type }}&encoding={{ this.encoding }}&filename={{ this.name }}">{{ this.name }} ({{ formatSize this.size}})
+                    <i class="fa fa-arrow-down mail-read-view__attachments-item-download"></i></a>
+                </li>
+                {{/each }}
+            </ul>
         </div>
-      </div>
     {{/if}}
 </div>
+
diff --git a/web-ui/app/templates/mails/mail_actions.hbs b/web-ui/app/templates/mails/mail_actions.hbs
index 94b79ab9..0b717373 100644
--- a/web-ui/app/templates/mails/mail_actions.hbs
+++ b/web-ui/app/templates/mails/mail_actions.hbs
@@ -1,6 +1,6 @@
-<button id="reply-button-top" class="no-style"><i class="fa fa-reply"></i></button>
-<button id="view-more-actions" class="no-style"><i class="fa fa-caret-down"></i></button>
-<ul id="more-actions">
-    <li><span id="reply-all-button-top">{{t 'Reply to All'}}</span></li>
-    <li><span id="delete-button-top">{{t 'Delete this message'}}</span></li>
+<button id="reply-button-top" class="mail-read-view__header-actions-button mail-read-view__header-actions-button--reply"><i class="fa fa-reply"></i></button>
+<button id="view-more-actions" class="mail-read-view__header-actions-button mail-read-view__header-actions-button--more"><i class="fa fa-caret-down"></i></button>
+<ul id="more-actions" class="mail-read-view__header-actions-dropdown">
+    <li id="reply-all-button-top" class="mail-read-view__header-actions-dropdown-entry">{{t 'Reply to All'}}</li>
+    <li id="delete-button-top" class="mail-read-view__header-actions-dropdown-entry">{{t 'Delete this message'}}</li>
 </ul>