[WO-329] Use flexbox in read-view, refactor address-headers in write and read views

src/sass/_scaffolding.scss

@@ -49,7 +49,7 @@ textarea {
     background: $color-grey-lighter;
     border: 3px solid transparent;
     background-clip: content-box;
-    cursor: pointer;
+    cursor: pointer !important;
     &:hover {
         background-color: $color-blue;
     }

src/sass/all.scss

@@ -21,6 +21,7 @@
 @import "components/layout";
 @import "components/popover";
 @import "components/input";
+@import "components/mail-addresses";
 
 // Views
 @import "views/shared";

src/sass/components/_mail-addresses.scss

@@ -0,0 +1,17 @@
+.mail-addresses {
+    p {
+        margin: 0.4em 0 0.2em;
+        cursor: text;
+    }
+
+    .label {
+        margin-bottom: 0.2em;
+        margin-right: 0.5em;
+    }
+
+    label {
+        display: inline-block;
+        width: 2.75em;
+        color: $color-grey;
+    }
+}

src/sass/views/_read.scss

@@ -1,19 +1,19 @@
 .view-read {
+    display: flex;
+    flex-direction: column;
     margin: 0px;
     padding: 10px 15px;
     height: 100%;
+    width: 100%;
     color: $color-grey-dark;
 
     .headers {
+        flex-shrink: 0;
         margin-bottom: 1em;
 
-        p {
-            margin: 0px;
-            padding: 0px;
-        }
-
         .subject {
             font-size: $font-size-bigger;
+            margin: 0;
         }
 
         .date {
@@ -21,24 +21,31 @@
             font-size: $font-size-small;
             margin-top: 0.25em;
             margin-bottom: 1.5em;
-            padding: 0px;
         }
 
-        .address {
+        .mail-addresses {
-            color: $color-grey;
-            padding: 0.2em 0;
-
             .label {
-                margin-left: 0.3em;
+                cursor: pointer;
+            }
 
-                &:hover {
+            p {
-                    cursor: pointer;
+                margin-top: 0.2em;
-                }
+                margin-bottom: 0;
+            }
+        }
+
+        .controls {
+            float: right;
+            margin: 0 15px 10px;
+
+            button {
+                margin-left: 7px;
             }
         }
     }
 
     .attachments {
+        flex-shrink: 0;
         position: relative;
         width: inherit;
         border: 1px;
@@ -72,54 +79,50 @@
     }
 
     .seperator-line {
+        flex-shrink: 0;
         height: 1px;
         color: $color-grey-lighter;
         background-color: $color-grey-lighter;
     }
 
     .body {
+        flex-grow: 1;
+        position: relative;
         margin-top: 1.75em;
         cursor: text;
-        padding-bottom: 250px;
         line-height: 1.5em;
-        height: 100%;
         overflow-y: scroll;
         user-select: text;
 
         .working {
-            margin: 0 auto;
+            position: absolute;
-            height: 100%;
+            top: 50%;
-            width: 230px;
+            width: 100%;
-            display: table;
+            transform: translateY(-50%);
+            vertical-align: middle;
+            text-align: center;
 
-            .container {
+            .spinner {
-                display: table-cell;
+                font-size: 2em;
+                margin-right: 0.2em;
                 vertical-align: middle;
 
-                .spinner {
+                // todo: outsource component
-                    position: relative;
+                display: inline-block;
+                height: 1em;
+                width: 1em;
+                animation: rotation .6s linear infinite;
+                border-left: 0.17em solid $color-grey-light;
+                border-right: 0.17em solid $color-grey-light;
+                border-bottom: 0.17em solid $color-grey-light;
+                border-top: 0.17em solid $color-grey;
+                border-radius: 100%;
+            }
 
-                    div {
+            strong {
-                        position: absolute;
+                color: $color-grey-input;
-                        top: 0;
+                font-size: 2em;
-                        left: 0;
+                vertical-align: middle;
-                        height: 30px;
-                        width: 30px;
-                        animation: rotation .6s linear infinite;
-                        border-left: 5px solid $color-grey-light;
-                        border-right: 5px solid $color-grey-light;
-                        border-bottom: 5px solid $color-grey-light;
-                        border-top: 5px solid $color-grey;
-                        border-radius: 100%;
-                    }
-                }
-
-                h1 {
-                    margin: 0;
-                    padding-left: 40px;
-                    line-height: 30px;
-                    color: $color-grey-input;
-                }
             }
         }
 
@@ -137,6 +140,7 @@
     }
 
     iframe {
+        flex-grow: 1;
         width: 100%;
     }
 
@@ -175,13 +179,4 @@
 
         }
     }
-}
-
-.controls {
-    float: right;
-    margin: 10px 15px;
-
-    button {
-        margin-left: 7px;
-    }
 }

src/sass/views/_write.scss

@@ -20,31 +20,12 @@
         border: 0!important;
     }
 
-    .headers {
+    .mail-addresses {
         flex-shrink: 0;
         margin-top: 10px;
-
-        p {
-            margin: 0.4em 0 0.2em;
-            cursor: text;
-        }
-
-        .label {
-            margin-bottom: 0.2em;
-        }
-
-        label {
-            display: inline-block;
-            width: 2em;
-            color: $color-grey;
-        }
-
-        input {
-            margin-left: 0.3em;
-        }
     }
 
-    .headers-more {
+    .mail-addresses-more {
         float: right;
         margin: 0.4em 0;
 

src/tpl/read.html

@@ -1,24 +1,29 @@
-<div class="controls">
-  <button ng-click="state.mailList.remove(state.mailList.selected)" class="btn-icon" title="Delete mail">&#xe005;</button>
-  <button class="btn-icon" title="Reply to" reply-selection>&#xe002;</button>
-  <button ng-click="state.writer.write()" class="btn-icon" title="New mail">&#xe006;</button>
-</div><!--/.controls-->
-
 <div class="view-read" ng-controller="ReadCtrl">
   <div class="headers">
+    <div class="controls">
+      <button ng-click="state.mailList.remove(state.mailList.selected)" class="btn-icon" title="Delete mail">&#xe005;</button>
+      <button class="btn-icon" title="Reply to" reply-selection>&#xe002;</button>
+      <button ng-click="state.writer.write()" class="btn-icon" title="New mail">&#xe006;</button>
+    </div><!--/.controls-->
+
     <p class="subject" ng-click="state.read.toggle(false)">{{(state.mailList.selected.subject) ? state.mailList.selected.subject : 'No subject'}}</p>
     <p class="date">{{state.mailList.selected.sentDate | date:'EEEE, MMM d, yyyy h:mm a'}}</p>
-    <p class="address">
+    <div class="mail-addresses">
-      From: <span ng-repeat="u in state.mailList.selected.from" class="label" ng-class="{'label-primary': u.secure === false, 'label-primary-click': u.secure === false}" data-icon-append="{{(u.secure === false) ? '&#xe001;' : ''}}" ng-mouseover="getKeyId(u.address)" ng-click="invite(u)" popover="#fingerprint-info">{{u.name || u.address}}</span>
+      <p>
-    </p>
+        <label>From:</label>
-    <p class="address">
+        <span ng-repeat="u in state.mailList.selected.from" class="label" ng-class="{'label-primary': u.secure === false, 'label-primary-click': u.secure === false}" data-icon-append="{{(u.secure === false) ? '&#xe001;' : ''}}" ng-mouseover="getKeyId(u.address)" ng-click="invite(u)" popover="#fingerprint-info">{{u.name || u.address}}</span>
-      To: <span ng-repeat="u in state.mailList.selected.to" class="label" ng-class="{'label-primary': u.secure === false, 'label-primary-click': u.secure === false}" data-icon-append="{{(u.secure === false) ? '&#xe001;' : ''}}" ng-mouseover="getKeyId(u.address)" ng-click="invite(u)" popover="#fingerprint-info">{{u.name || u.address}}</span>
-    </p>
-    <div ng-switch="state.mailList.selected.cc && state.mailList.selected.cc.length > 0">
-      <p class="address" ng-switch-when="true">
-        Cc: <span ng-repeat="u in state.mailList.selected.cc" class="label" ng-class="{'label-primary': u.secure === false, 'label-primary-click': u.secure === false}" data-icon-append="{{(u.secure === false) ? '&#xe001;' : ''}}" ng-mouseover="getKeyId(u.address)" ng-click="invite(u)" popover="#fingerprint-info">{{u.name || u.address}}</span>
       </p>
-    </div>
+      <p>
+        <label>To:</label>
+        <span ng-repeat="u in state.mailList.selected.to" class="label" ng-class="{'label-primary': u.secure === false, 'label-primary-click': u.secure === false}" data-icon-append="{{(u.secure === false) ? '&#xe001;' : ''}}" ng-mouseover="getKeyId(u.address)" ng-click="invite(u)" popover="#fingerprint-info">{{u.name || u.address}}</span>
+      </p>
+      <div ng-switch="state.mailList.selected.cc && state.mailList.selected.cc.length > 0">
+        <p ng-switch-when="true">
+          <label>Cc:</label>
+          <span ng-repeat="u in state.mailList.selected.cc" class="label" ng-class="{'label-primary': u.secure === false, 'label-primary-click': u.secure === false}" data-icon-append="{{(u.secure === false) ? '&#xe001;' : ''}}" ng-mouseover="getKeyId(u.address)" ng-click="invite(u)" popover="#fingerprint-info">{{u.name || u.address}}</span>
+        </p>
+      </div>
+    </div><!--/.mail-addresses-->
   </div><!--/.headers-->
 
   <div ng-switch="state.mailList.selected.attachments !== undefined && state.mailList.selected.attachments.length > 0">
@@ -44,13 +49,8 @@
       </div>
     </div>
     <div class="working" ng-switch-default>
-      <div class="container">
+      <span class="spinner"></span>
-        <div class="spinner"><div></div></div>
+      <strong ng-bind="(state.mailList.selected.loadingBody === true || state.mailList.selected.body === undefined || state.mailList.selected.body === null) ? 'Loading...' : 'Decrypting...'"></strong>
-        <span ng-switch="state.mailList.selected.loadingBody === true || state.mailList.selected.body === undefined || state.mailList.selected.body === null">
-          <h1 ng-switch-when="true">Loading...</h1>
-          <h1 ng-switch-default>Decrypting...</h1>
-        </span>
-      </div><!--/.container-->
     </div>
   </div><!--/.body-->
 

src/tpl/write.html

@@ -6,30 +6,24 @@
   <div class="content">
 
     <div class="view-write">
-      <div class="headers">
+      <div class="mail-addresses">
-        <div class="headers-more">
+        <div class="mail-addresses-more">
           <button ng-click="showCC = true;" ng-hide="showCC">Cc</button>
           <button ng-click="showBCC = true;" ng-hide="showBCC">Bcc</button>
         </div>
         <p field="to">
           <label>To:</label>
-          <span ng-repeat="recipient in to track by $index">
+          <input ng-repeat="recipient in to track by $index" id="to{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(to, $index)" address-input="to" tabindex="1" ng-mouseover="getKeyId(recipient)" focus-me="state.writer.open && writerTitle !== 'Reply'">
-            <input id="to{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(to, $index)" address-input="to" tabindex="1" ng-mouseover="getKeyId(recipient)" focus-me="state.writer.open && writerTitle !== 'Reply'">
-          </span>
         </p>
         <p field="cc" ng-show="showCC === true">
           <label>Cc:</label>
-          <span ng-repeat="recipient in cc track by $index">
+          <input ng-repeat="recipient in cc track by $index" id="cc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(cc, $index)" address-input="cc" tabindex="1" ng-mouseover="getKeyId(recipient)">
-            <input id="cc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(cc, $index)" address-input="cc" tabindex="1" ng-mouseover="getKeyId(recipient)">
-          </span>
         </p>
         <p field="bcc" ng-show="showBCC === true">
           <label>Bcc:</label>
-          <span ng-repeat="recipient in bcc track by $index">
+          <input ng-repeat="recipient in bcc track by $index" id="bcc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(bcc, $index)" address-input="bcc" tabindex="1" ng-mouseover="getKeyId(recipient)">
-            <input id="bcc{{$index}}" value="{{recipient.address}}" ng-model="recipient.address" ng-trim="false" class="label" ng-class="{'label-blank': !recipient.address || recipient.secure === undefined, 'label-primary': recipient.secure === false}" auto-size="recipient.address" spellcheck="false" ng-change="onAddressUpdate(bcc, $index)" address-input="bcc" tabindex="1" ng-mouseover="getKeyId(recipient)">
-          </span>
         </p>
-      </div><!--/.headers-->
+      </div><!--/.mail-addresses-->
 
       <div class="subject-box">
         <div class="subject-line">