Fixed the message headers design (markup and scss)

Create a "PseudoField" component that mimics Material Design input fields

UI/Templates/MailerUI/UIxMailViewTemplate.wox

@@ -8,57 +8,61 @@
    xmlns:uix="OGo:uix">
 
 <md-content md-scroll-y="md-scroll-y"  class="md-padding">
-    <header class="msg-header">
-      <hgroup>
-        <h3 class="sg-md-headline" data-ng-bind="message.subject"><!-- subject --></h3>
-        <div class="msg-header-group">
-          <div layout="row" layout-align="start center">
-            <label>
-              <var:string label:value="From"/>
-            </label>
-            <div class="sg-avatar">
-              <!--avatar-->
-            </div>
-            <div class="sg-md-body-multi name">
-              <a data-ng-href="mailto:{{message.from[0].email}}" data-ng-bind="message.from[0].full"><!-- from --></a>
-            </div>
-          </div>
+  <header class="msg-header">
 
-          <div layout="row" layout-align="start center">
-            <label>
-              <var:string label:value="To"/>
-            </label>
-            <div class="sg-md-body-multi">
-              <a data-ng-href="mailto:{{message.to[0].email}}" data-ng-bind="message.to[0].full"><!-- to --></a>
-            </div>
+      <div class="msg-header-content">
+        <h3 class="sg-md-title-msg" data-ng-bind="message.subject"><!-- subject --></h3>
+        <div class="PseudoField--compact">
+          <label class="PseudoField-label">
+            <var:string label:value="From"/>
+          </label>
+          <div class="PseudoField-inputLike">
+            <a data-ng-href="mailto:{{message.from[0].email}}" data-ng-bind="message.from[0].full"><!-- from --></a>
           </div>
         </div>
 
-        <p class="flags">
-          <span class="label radius" data-ng-repeat="flag in message.flags">{{flag}}</span>
-        </p>
-      </hgroup>
-      <div class="sg-icon-bar">
-
-          <a class="button tiny radius"
-              data-ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'reply'})"><i class="md-icon-reply"><!-- reply --></i></a>
-          <a class="button tiny radius"
-              data-ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'replyall'})"><i class="md-icon-reply-all"><!-- reply all --></i></a>
-          <a class="button tiny radius"
-              data-ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'forward'})"><i class="md-icon-forward"><!-- forward --></i></a>
-          <a class="button tiny radius"
-              data-ui-sref="mail.account.mailbox.message.edit({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid})"
-              data-ng-show="message.isDraft"><i class="md-icon-create"><!-- edit --></i></a>
-          <span class="button tiny radius alert"
-              data-ng-click="doDelete(message)"><i class="md-icon-delete"><!-- delete --></i></span>
-        <span class="button tiny radius"
-              data-ng-show="message.hasUnsafeContent"
-              data-ng-click="loadImages()"><var:string label:value="Load Images"/></span>
+        <div class="PseudoField--compact">
+          <label class="PseudoField-label">
+            <var:string label:value="To"/>
+          </label>
+          <div class="PseudoField-inputLike">
+            <a data-ng-href="mailto:{{message.to[0].email}}" data-ng-bind="message.to[0].full"><!-- to --></a>
+          </div>
+        </div>
       </div>
-    </header>
+
+<!--      <p class="flags">
+        &lt;!&ndash; Todo: change the text for an icon (conditional ?) The read/unread flag doesn't make sense at his place&ndash;&gt;
+        <span class="PseudoField-label" data-ng-repeat="flag in message.flags">{{flag}}</span>
+      </p>
+-->
+
+    <div class="sg-icon-bar">
+        <a class="button tiny radius"
+            data-ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'reply'})"><i class="md-icon-reply"><!-- reply --></i></a>
+        <a class="button tiny radius"
+            data-ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'replyall'})"><i class="md-icon-reply-all"><!-- reply all --></i></a>
+        <a class="button tiny radius"
+            data-ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'forward'})"><i class="md-icon-forward"><!-- forward --></i></a>
+        <a class="button tiny radius"
+            data-ui-sref="mail.account.mailbox.message.edit({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid})"
+            data-ng-show="message.isDraft"><i class="md-icon-create"><!-- edit --></i></a>
+        <span class="button tiny radius alert"
+            data-ng-click="doDelete(message)"><i class="md-icon-delete"><!-- delete --></i></span>
+      <span class="button tiny radius"
+            data-ng-show="message.hasUnsafeContent"
+            data-ng-click="loadImages()"><var:string label:value="Load Images"/></span>
+    </div>
+  </header>
   <md-divider><!-- divider --></md-divider>
-  <div class="msg-date sg-md-body-multi"><span data-ng-bind="message.date"><!-- date --></span></div>
-  <div class="mailer_mailcontent"
-       data-ng-bind-html="message.$content()"><!-- msg --></div>
+
+  <div class="msg-body">
+    <div class="msg-date sg-md-body-multi">
+      <date data-ng-bind="message.date"><!-- date --></date>
+    </div>
+    <div class="mailer_mailcontent"
+         data-ng-bind-html="message.$content()"><!-- msg --></div>
+  </div>
+
 </md-content>
 </container>

UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss

@@ -20,7 +20,7 @@
   md-item-content {
     padding: 0 0 0 $mg;
     margin: $mg 0;
-    transition: all 0.35s $swift-ease-in-timing-function 0.15s;
+    transition: all 0.20s $swift-ease-in-timing-function 0.12s;
     &:hover {
       background-color: sg-color($sogoPaper, 300);
       color: sg-color($sogoBlue, 800);

UI/WebServerResources/scss/components/toolbar/toolbar.scss

@@ -6,7 +6,7 @@ md-toolbar {
 }
 header {
   flex-direction: row;
-  align-items: flex-start;
+  align-items: stretch;
   justify-content: space-between;
   display: flex;
 }
@@ -24,8 +24,7 @@ hgroup {
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  height:(2 * $pitch);
-  margin-left: $mg;
+  margin: 0 0 $mg $mg;
     }
 .sg-icon-bar *.button {
   display: block;

UI/WebServerResources/scss/core/typography/typography.scss

@@ -222,22 +222,22 @@ $sg-font-bold: $sg-font-medium;
 // h elements definitions
 // ----------------------------------------------------------------------------
 $h1-font-size-Base: $sg-font-size-9;
-//$h1-margin-Base: 0.67em 0;
+$h1-margin-Base: 0;
 
 $h2-font-size-Base: $sg-font-size-8;
-//$h2-margin-Base: 0.83em 0;
+$h2-margin-Base: 0;
 
 $h3-font-size-Base: $sg-font-size-7;
-//$h3-margin-Base: 1em 0;
+$h3-margin-Base: 0;
 
 $h4-font-size-Base: $sg-font-size-6;
-//$h4-margin-Base: 1.33em 0;
+$h4-margin-Base: 0;
 
 $h5-font-size-Base: $sg-font-size-5;
-//$h5-margin-Base: 1.67em 0;
+$h5-margin-Base: 0;
 
 $h6-font-size-Base: $sg-font-size-4;
-//$h6-margin-Base: 2.33em 0;
+$h6-margin-Base: 0;
 
 /// Gogle Material Design Standard styles
 /// as specified (http://www.google.com/design/spec/style/typography.html#typography-standard-styles)

UI/WebServerResources/scss/core/variables.scss

@@ -24,7 +24,7 @@ $bottombar-color: #212121;
 // Layout
 // ------------------------------
 
-$baseline-grid:            8px !default;
+$baseline-grid: 8px !default;
 // shortcut aliases for $baseline-grid
 $bl: $baseline-grid;
 $line: $baseline-grid;

UI/WebServerResources/scss/views/MailerUI.scss

@@ -9,37 +9,81 @@
 [data-ui-view="message"] {
   max-width: grid-step(8);
 }
+
+// Message view header
+// Could be made into a more generic component
+// ----------------------------------------------------------------------------
 .msg-header {
-  padding-bottom: $mg;
+//  padding-bottom: $mg; We should add a padding class to preserve genericity
 }
-.msg-header-group {
+
+.msg-header-content {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: flex-start;
-
-
-
-  [layout="row"] + [layout="row"] {
-    margin-top: -1 * 1em;
-  }
 }
-.msg-header-group .sg-md-body-multi.name {}
+
+.msg-body {
+  padding-top: $mg;
+}
+
 .msg-date {
-  margin: $mg 0;
   text-align: right;
 }
+// sg-md title don't fit in message headers
+.sg-md-title-msg {
+  @extend .sg-md-title;
+  margin: 0;
+  margin-bottom: $line;
+  font-weight: $sg-font-regular;
+  white-space: normal;
+}
 
-.msg-header label {
-  font-size: sg-size(caption) - 1; // -1px to compensate for the uppercase and simulate Small caps
-  text-transform: uppercase;
-  margin-right: $mg;
-  width: ($pitch + $bl);
-  text-align: right;
-  line-height: $sg-line-height-2;
-  font-weight: 600;
+// Component: PseudoField
+// This component mimics the presentation of form fields according to Google's
+// Material Design specs (www.google.com/design/spec/components/text-fields.html)
+// It's used in message headers but could --and should-- be reused
+// The PseudoField element serves as a container for it's two children:
+// --label and --inputLike
+//
+// Typical use:
+// <div class="PseudoField">
+//   <label class="PseudoField-label">Some text</label>
+//   <p class="PseudoField-inputLike">Other input-like text</p>
+// </div>
+//
+// ----------------------------------------------------------------------------
+
+.PseudoField {
+  display: block; // Should be (reset to ?) a plain block element
+}
+.PseudoField-label {
+  display: inline-block;
+  margin-top: $mg;
+  font-size: sg-size(caption);
+  line-height: $sg-line-height-1; // 16px;
+  font-weight: $sg-font-bold;
   color: $colorGray;
 }
+.PseudoField-inputLike {
+  display: block;
+  padding: $line 0;
+  margin-bottom: $line;
+  font-size: sg-size(subhead);
+  line-height: 1;
+}
+.PseudoField-inputLike--underline {
+  @extend .PseudoField-inputLike;
+  border-bottom: 1px solid $colorGrayLight;
+}
+// The specs dimensions are too large to fit with angular-material
+// Here's a modifier
+.PseudoField--compact {
+  .PseudoField-label {
+    margin-top: 0;
+  }
+}
 
 .mailer_mailcontent {
   @extend .sg-md-body-multi;