Webmail: normalize format of addresses in JSON

UI/WebServerResources/js/Mailer/message-model.js

@@ -64,6 +64,21 @@
     return path.join('/');
   };
 
+  /**
+   * @function $shortAddress
+   * @memberof Message.prototype
+   * @desc Format the first address of a specific type with a short description.
+   * @returns a string of the name or the email of the envelope address type
+   */
+  Message.prototype.$shortAddress = function(type) {
+    var address = '';
+    if (this[type] && this[type].length > 0) {
+      address = this[type][0].name || this[type][0].email || '';
+    }
+
+    return address;
+  };
+
   /**
    * @function $content
    * @memberof Message.prototype
@@ -102,9 +117,9 @@
         angular.extend(_this, data);
         _this.id = _this.$absolutePath();
         // Build long representation of email addresses
-        _.each(['from', 'to', 'cc', 'bcc', 'replyTo'], function(type) {
-          _.each(_this[type + 'Addresses'], function(data, i) {
-            if (data.name != data.address)
+        _.each(['from', 'to', 'cc', 'bcc', 'reply-to'], function(type) {
+          _.each(_this[type], function(data, i) {
+            if (data.name && data.name != data.address)
               data.full = data.name + ' <' + data.address + '>';
             else
               data.full = '<' + data.address + '>';

UI/WebServerResources/scss/MailerUI.scss

@@ -159,13 +159,15 @@ $column-gutter: 0;
         }
     }
 
-    #messagesList {
+    #messagesList, #messageEditor {
         position: absolute;
         overflow: auto;
         overflow-x: hidden;
         top: $topbar-height;
         bottom: 0;
         left: 23.07692%;
+    }
+    #messagesList {
         background-color: $f-dropdown-list-hover-bg;
         @include grid-column($columns:13);
         @media #{$medium-up} {
@@ -260,17 +262,21 @@ $column-gutter: 0;
             @include grid-column($columns:6);
         }
         h1, h2, h3, h4, h5, h6 {
-            margin-left: rem-calc(12);
-            margin-top: 0;
+            margin: 0;
             padding-top: rem-calc(12);
         }
         h1 {
             margin-bottom: 0;
         }
+        h2 {
+            font-weight: lighter;
+        }
         .header {
             background-color: $secondary-color;
+            padding-left: rem-calc(12);
+            padding-right: rem-calc(12);
             padding-bottom: 0.2em;
-            h1, h4, h6 {
+            h1, h2, h4, h6 {
                 color: #fff;
             }
             .label {
@@ -280,8 +286,8 @@ $column-gutter: 0;
                 color: $primary-color;
                 color: scale-color($primary-color, $lightness: 52%);
             }
-            label {
-                
+            .flags {
+                float: right;
             }
         }
             /*
@@ -340,6 +346,9 @@ $column-gutter: 0;
             }
 
     }
+    #messageEditor {
+        right: 0;
+    }
 }
 
 h1 {