From 80d6c0226a65841ce304c822d26aec576e578b39 Mon Sep 17 00:00:00 2001
From: iRouge <bfavreault@inverse.ca>
Date: Thu, 26 Feb 2015 22:32:22 -0500
Subject: [PATCH] Adjust UI for Contact, Contact editor, Messages and Message
 editor

---
 .../ContactsUI/UIxContactEditorTemplate.wox   |  16 +-
 .../ContactsUI/UIxContactFoldersView.wox      |  21 +-
 UI/Templates/MailerUI/UIxMailMainFrame.wox    |  29 +-
 .../scss/components/_palette.scss             |   5 +
 .../autoScrollList/autoScrollList.scss        |   3 +-
 .../scss/components/button/_button.scss       |   5 +
 .../scss/components/icon/icon.scss            |   4 -
 .../scss/components/select/select.scss        |  13 +-
 .../scss/components/toolbar/toolbar.scss      |   2 +-
 .../scss/core/typography/typography.scss      | 270 ++++++++++--------
 .../scss/core/variables.scss                  |   9 +-
 .../scss/views/ContactsUI.scss                |   9 +-
 .../scss/views/MailerUI.scss                  |   9 +-
 13 files changed, 218 insertions(+), 177 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index c051b548b..195804c6e 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -144,7 +144,6 @@
       <div class="section">
         <div class="attr" ng-repeat="phone in card.phones">
           <div layout="row" layout-align="center end">
-            <i class="md-icon-phone md-icon-lg cols-1"><!--icon--></i>
             <md-select ng-model="phone.type" label:placeholder="Type">
               <md-option ng-repeat="type in allTelTypes" ng-value="type">{{ type }}</md-option>
             </md-select>
@@ -202,17 +201,10 @@
     <!-- addresses -->
       <div class="section">
         <div class="attr" ng-repeat="address in card.addresses">
-
-
-          <div layout="row" layout-align="start end">
+          <div layout="row" layout-align="center end">
             <md-select ng-model="address.type" label:placeholder="Type">
               <md-option ng-repeat="type in allAddressTypes" ng-value="type">{{ type }}</md-option>
             </md-select>
-            <p>
-              <var:string label:value="Address"/>
-            </p>
-          </div>
-          <div layout="row" layout-align="center end">
             <md-input-container>
               <label>
                 <var:string label:value="street"/>
@@ -293,13 +285,13 @@
 
 
     <div  class="fieldset md-layout-margin" layout="row" layout-align="end center">
-      <md-button class="md-primary md-hue-3" ng-click="cancel()">
+      <md-button class="" ng-click="cancel()">
         <var:string label:value="Cancel"/>
       </md-button>
-      <md-button class="md-accent" ng-click="reset()">
+      <md-button class="" ng-click="reset()">
         <var:string label:value="Reset"/>
       </md-button>
-      <md-button class="md-accent md-hue-3" type="submit">
+      <md-button class="md-primary md-hue-3" type="submit">
         <var:string label:value="Save"/>
       </md-button>
     </div>
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 29bba5c2a..2f682db96 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -192,21 +192,24 @@
     <section layout="column" class="md-layout-fill">
       <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
         <div class="md-toolbar-tools" layout="row" layout-align="space-between start" ng-controller="toggleCtrl">
-          <div class="sg-toolbar-group-1">
-            <md-button ng-click="toggleLeft()" class="md-hide-gt-md">
+          <div class="sg-toolbar-group-1" layout="row">
+            <md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon">
               <span class="md-icon-menu"></span>
             </md-button>
-
-            <div class="sg-md-display-3">
-              15
+            <div class="sg-date-group" layout="column" layout-align="center end">
+              <p class="sg-day">monday</p>
+              <p class="sg-month">january</p>
+              <p class="sg-year">2015</p>
             </div>
+
+            <p class="sg-md-display-3">15</p>
           </div>
           <div class="sg-toolbar-group-2">
             <span class="md-icon-search"></span>
           </div>
         </div>
         <div class="md-toolbar-tools md-toolbar-tools-bottom" layout="row" layout-align="space-between center">
-          <div class="cols-7" layout="row" layout-align="space-between center" style="padding-right: 16px">
+          <div class="cols-6" layout="row" layout-align="space-between center" style="padding-right: 16px">
             <md-input-container class="sg-search-field-container">
               <label style="color: white"><i class="md-icon-search"><!--icon--></i>Search</label>
               <input name="folderSearch" type="search"
@@ -214,9 +217,9 @@
             </md-input-container>
 
             <div class="sg-toolbar-group">
-              <span>ALL
-                <span class="md-icon-arrow-drop-down"><!-- sort drop-down --></span>
-              </span>
+              <md-select class="sg-toolbar-sort md-contrast-light" label:placeholder="All">ALL
+
+              </md-select>
               <span class="md-icon-create"><!-- icon --></span>
             </div>
           </div>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index ee49eefb9..bc6c92d4d 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -291,32 +291,39 @@
     <section layout="column" class="md-layout-fill">
       <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
         <div class="md-toolbar-tools" layout="row" layout-align="space-between start" ng-controller="toggleCtrl">
-          <div class="sg-toolbar-group-1">
-            <md-button ng-click="toggleLeft()" class="md-hide-gt-md">
+          <div class="sg-toolbar-group-1" layout="row">
+            <md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon">
               <span class="md-icon-menu"></span>
             </md-button>
-
-            <div class="sg-md-display-3">
-              15
+            <div class="sg-date-group" layout="column" layout-align="center end">
+              <p class="sg-day">monday</p>
+              <p class="sg-month">january</p>
+              <p class="sg-year">2015</p>
             </div>
+
+            <p class="sg-md-display-3">15</p>
           </div>
           <div class="sg-toolbar-group-2">
             <span class="md-icon-search"></span>
           </div>
         </div>
         <div class="md-toolbar-tools md-toolbar-tools-bottom" layout="row" layout-align="space-between center">
-          <div class="cols-7" layout="row" layout-align="space-between center" style="padding-right: 16px">
-            <div class="md-icon-search"><!-- search-field --></div>
+          <div class="cols-6" layout="row" layout-align="space-between center" style="padding-right: 16px">
+            <md-input-container class="sg-search-field-container">
+              <label style="color: white"><i class="md-icon-search"><!--icon--></i>Search</label>
+              <input name="folderSearch" type="search"
+                     ng-model="search.filter" ng-keyup="doSearch($event)" style="color: white"/>
+            </md-input-container>
+
             <div class="sg-toolbar-group">
-              <span>ALL
-                <span class="md-icon-arrow-drop-down"><!-- sort drop-down --></span>
-              </span>
+              <md-select class="sg-toolbar-sort md-contrast-light" label:placeholder="All">ALL
+
+              </md-select>
               <span class="md-icon-create"><!-- icon --></span>
             </div>
           </div>
           <div class="spacer cols-8"><!-- spacer --></div>
         </div>
-
       </md-toolbar>
       <div layout="row" class="md-flex" layout-align="space-between" ui-view="mailbox"><!-- messages list --></div>
     </section>
diff --git a/UI/WebServerResources/scss/components/_palette.scss b/UI/WebServerResources/scss/components/_palette.scss
index 8e8c90e55..0ddc03533 100755
--- a/UI/WebServerResources/scss/components/_palette.scss
+++ b/UI/WebServerResources/scss/components/_palette.scss
@@ -14,6 +14,11 @@ $colorGray: rgba($colorBlack, .54);
 $colorGrayLight: rgba($colorBlack, .26);
 $colorGrayLighter: rgba($colorBlack, .12);
 
+// Whites for text
+// ----------------------------------------------------------------------------
+$colorWhite: #fff;
+
+
 // Color Palettes
 // At this stage of developpement --eg. version AngularMaterial v0.7.1--  ngMaterial theming is incomplete
 // and does not apply every specified hues, neither provide acces to it trough it's theming API
diff --git a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss b/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
index 554fea053..51ae3427f 100644
--- a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
+++ b/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
@@ -30,7 +30,8 @@
     &:active {
       color: sg-color($sogoBlue, 800);
     }
-    &:focus {
+    &:focus,
+    &._selected {
       background-color: sg-color($sogoBlue, 100);
     }
   }
diff --git a/UI/WebServerResources/scss/components/button/_button.scss b/UI/WebServerResources/scss/components/button/_button.scss
index 1d2f1eef9..c0a872012 100644
--- a/UI/WebServerResources/scss/components/button/_button.scss
+++ b/UI/WebServerResources/scss/components/button/_button.scss
@@ -33,4 +33,9 @@ button.icon {
   &:hover {
     color: sg-color($sogoBlue, 500);
   }
+}
+.sg-button-navicon {
+  width: $touch-zone;
+  height: $touch-zone;
+  margin-left: ($mg * -1);
 }
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/icon/icon.scss b/UI/WebServerResources/scss/components/icon/icon.scss
index 6d375dd04..6e412158e 100644
--- a/UI/WebServerResources/scss/components/icon/icon.scss
+++ b/UI/WebServerResources/scss/components/icon/icon.scss
@@ -37,7 +37,3 @@ src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAjEMAAsAA
   font-weight: normal;
   font-style: normal;
 }
-.md-icon-lg {
-  line-height: 1;
-  vertical-align: initial;
-}
diff --git a/UI/WebServerResources/scss/components/select/select.scss b/UI/WebServerResources/scss/components/select/select.scss
index 3e36eca65..d8a938171 100644
--- a/UI/WebServerResources/scss/components/select/select.scss
+++ b/UI/WebServerResources/scss/components/select/select.scss
@@ -2,4 +2,15 @@
 
 md-select {
   margin-bottom: 2px;
-}
\ No newline at end of file
+  margin-right: $bl;
+}
+
+// angular material overqualifies, so we are
+md-select.md-default-theme.sg-toolbar-sort {
+  margin: 0 $bl -6px 0;
+  color: $colorWhite;
+  md-select-label.md-select-label {
+    border: none;
+    color: inherit;
+  }
+}
diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
index 5ef11d48f..034263708 100644
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -45,7 +45,7 @@ hgroup {
   justify-content: space-between;
   &-1 {
     order: 1;
-    max-width: $messageList-width;
+    max-width: $listView-width;
   }
   &-2 {
     order: 2;
diff --git a/UI/WebServerResources/scss/core/typography/typography.scss b/UI/WebServerResources/scss/core/typography/typography.scss
index eae205390..4a78b15d1 100644
--- a/UI/WebServerResources/scss/core/typography/typography.scss
+++ b/UI/WebServerResources/scss/core/typography/typography.scss
@@ -147,6 +147,7 @@ $sg-rem-Base-value: 16 !global;
 $sg-sp-value: (1 / $sg-rem-Base-value) !default; // sp value
 
 $sg-md-typo-baseline: 4px;
+$sg-base-line-height: 1.3;
 
 // Font-size basic scale (from Google)
 // NiceToHave : generate with a loop
@@ -265,134 +266,153 @@ h6 {
   margin: $h6-margin-base;
 }
 
+// Base styles
+// ----------------------------------------------------------------------------
+html p {
+  font-size: inherit;
+  line-height: $sg-base-line-height;
+}
+
+
 /// Gogle Material Design Standard styles
 /// as specified (http://www.google.com/design/spec/style/typography.html#typography-standard-styles)
 /// Some specification class names are counterintuitive. We provide some aliases
 //  -------------------------------------------------------------------------------------------------
 
-  .#{$md}-caption {
-    font-size: $sg-font-size-1;
-    line-height: $sg-line-height-1;
-    font-weight: $sg-font-regular;
-    white-space: nowrap;
-    }
-  .#{$md}-menu {
-    font-size: $sg-font-size-2;
-    line-height: $sg-line-height-1;
-    font-weight: $sg-font-medium;
-    white-space: nowrap;}
-  .#{$md}-button {
-    font-size: $sg-font-size-2;
-    line-height: $sg-line-height-1;
-    font-weight: $sg-font-medium;
-    white-space: nowrap;
-    text-transform: capitalize;
-  }
-  .#{$md}-body-1 {
-    font-size: $sg-font-size-2;
-    line-height: $sg-line-height-2;
-    font-weight: $sg-font-regular;
-  }
-  /// @alias .body-1
-  .#{$md}-body-multi {
-    @extend .#{$md}-body-1;
-  }
-  .#{$md}-body-2 {
-    $lineHeight : $sg-line-height-2 + $sg-md-typo-baseline;
-    font-size: $sg-font-size-2;
-    line-height: $lineHeight;
-    font-weight: $sg-font-medium;
-    margin-top: ($lineHeight * -1);
-    margin-bottom: $lineHeight;
-  }
-  /// @alias .body-2
-  .#{$md}-body-solo {
-    @extend .#{$md}-body-2;
-  }
-  .#{$md}-subhead-1 {
-    $lineHeight : $sg-line-height-3;
-    font-size: $sg-font-size-3;
-    line-height: $lineHeight;
-    font-weight: $sg-font-regular;
-    margin-top: ($lineHeight * -1);
-    margin-bottom: $lineHeight;
-  }
-  /// @alias .subhead-1
-  .#{$md}-subhead-multi {
-    @extend .#{$md}-subhead-1;
-  }
-  .#{$md}-subhead-2 {
-    $lineHeight : $sg-line-height-3 + $sg-md-typo-baseline;
-    font-size: $sg-font-size-3;
-    line-height: $lineHeight;
-    font-weight: $sg-font-regular;
-    margin-top: ($lineHeight * -1);
-    margin-bottom: $lineHeight;
-  }
-  /// @alias .subhead-2
-  .#{$md}-subhead-solo {
-    @extend .#{$md}-subhead-2;
-  }
-  .#{$md}-title {
-    $lineHeight : $sg-line-height-4;
-    font-size: $sg-font-size-4;
-    line-height: $lineHeight;
-    font-weight: $sg-font-medium;
-    white-space: nowrap;
-  }
-  .#{$md}-headline {
-    $lineHeight : $sg-line-height-5;
-    font-size: $sg-font-size-5;
-    line-height: $lineHeight;
-    font-weight: $sg-font-regular;
-    margin-top: 0;
-    margin-bottom: $line;
-  }
-  .#{$md}-display-1 {
-    $lineHeight : $sg-line-height-6;
-    font-size: $sg-font-size-6;
-    line-height: $lineHeight;
-    font-weight: $sg-font-regular;
-  }
-  .#{$md}-display-2 {
-    $lineHeight: $sg-line-height-7;
-    font-size: $sg-font-size-7;
-    line-height: $lineHeight;
-    font-weight: $sg-font-regular;
-    white-space: nowrap;
-  }
-  .#{$md}-display-2--light {
-       $lineHeight: $sg-line-height-7;
-       font-size: $sg-font-size-7;
-       line-height: $lineHeight;
-       font-weight: $sg-font-light;
-   }
-  .#{$md}-display-3 {
-    $lineHeight : $sg-line-height-8;
-    font-size: $sg-font-size-8;
-    line-height: $lineHeight;
-    font-weight: $sg-font-regular;
-    white-space: nowrap;
-  }
-  .#{$md}-display-4 {
-    $lineHeight : $sg-line-height-9;
-    font-size: $sg-font-size-9;
-    line-height: $lineHeight;
-    font-weight: $sg-font-light;
-    white-space: nowrap;
-  }
-  .#{$md}-display-2-subheader {
-    @extend .#{$md}-title;
-    margin-bottom: $mg;
-    font-weight: $sg-font-thin;
-  }
-  a,
-  a:hover,
-  a:active,
-  a:visited,
-  link {
-    color: inherit;
-    text-decoration: none;
-    border: none;
-    outline: none;
+.#{$md}-caption {
+  font-size: $sg-font-size-1;
+  line-height: $sg-line-height-1;
+  font-weight: $sg-font-regular;
+  white-space: nowrap;
   }
+.#{$md}-menu {
+  font-size: $sg-font-size-2;
+  line-height: $sg-line-height-1;
+  font-weight: $sg-font-medium;
+  white-space: nowrap;}
+.#{$md}-button {
+  font-size: $sg-font-size-2;
+  line-height: $sg-line-height-1;
+  font-weight: $sg-font-medium;
+  white-space: nowrap;
+  text-transform: capitalize;
+}
+.#{$md}-body-1 {
+  font-size: $sg-font-size-2;
+  line-height: $sg-line-height-2;
+  font-weight: $sg-font-regular;
+}
+/// @alias .body-1
+.#{$md}-body-multi {
+  @extend .#{$md}-body-1;
+}
+.#{$md}-body-2 {
+  $lineHeight : $sg-line-height-2 + $sg-md-typo-baseline;
+  font-size: $sg-font-size-2;
+  line-height: $lineHeight;
+  font-weight: $sg-font-medium;
+  margin-top: ($lineHeight * -1);
+  margin-bottom: $lineHeight;
+}
+/// @alias .body-2
+.#{$md}-body-solo {
+  @extend .#{$md}-body-2;
+}
+.#{$md}-subhead-1 {
+  $lineHeight : $sg-line-height-3;
+  font-size: $sg-font-size-3;
+  line-height: $lineHeight;
+  font-weight: $sg-font-regular;
+  margin-top: ($lineHeight * -1);
+  margin-bottom: $lineHeight;
+}
+/// @alias .subhead-1
+.#{$md}-subhead-multi {
+  @extend .#{$md}-subhead-1;
+}
+.#{$md}-subhead-2 {
+  $lineHeight : $sg-line-height-3 + $sg-md-typo-baseline;
+  font-size: $sg-font-size-3;
+  line-height: $lineHeight;
+  font-weight: $sg-font-regular;
+  margin-top: ($lineHeight * -1);
+  margin-bottom: $lineHeight;
+}
+/// @alias .subhead-2
+.#{$md}-subhead-solo {
+  @extend .#{$md}-subhead-2;
+}
+.#{$md}-title {
+  $lineHeight : $sg-line-height-4;
+  font-size: $sg-font-size-4;
+  line-height: $lineHeight;
+  font-weight: $sg-font-medium;
+  white-space: nowrap;
+}
+.#{$md}-headline {
+  $lineHeight : $sg-line-height-5;
+  font-size: $sg-font-size-5;
+  line-height: $lineHeight;
+  font-weight: $sg-font-regular;
+  margin-top: 0;
+  margin-bottom: $line;
+}
+.#{$md}-display-1 {
+  $lineHeight : $sg-line-height-6;
+  font-size: $sg-font-size-6;
+  line-height: $lineHeight;
+  font-weight: $sg-font-regular;
+}
+.#{$md}-display-2 {
+  $lineHeight: $sg-line-height-7;
+  font-size: $sg-font-size-7;
+  line-height: $lineHeight;
+  font-weight: $sg-font-regular;
+  white-space: nowrap;
+}
+.#{$md}-display-2--light {
+     $lineHeight: $sg-line-height-7;
+     font-size: $sg-font-size-7;
+     line-height: $lineHeight;
+     font-weight: $sg-font-light;
+ }
+.#{$md}-display-3 {
+  $lineHeight : $sg-line-height-8;
+  font-size: $sg-font-size-8;
+  line-height: $lineHeight;
+  font-weight: $sg-font-regular;
+  white-space: nowrap;
+}
+.#{$md}-display-4 {
+  $lineHeight : $sg-line-height-9;
+  font-size: $sg-font-size-9;
+  line-height: $lineHeight;
+  font-weight: $sg-font-light;
+  white-space: nowrap;
+}
+.#{$md}-display-2-subheader {
+  @extend .#{$md}-title;
+  margin-bottom: $mg;
+  font-weight: $sg-font-thin;
+  white-space: normal;
+}
+
+// Date bloc in use on the toolbar
+// ----------------------------------------------------------------------------
+.sg-date-group {
+  height: $pitch;
+  font-size: sg-size(button);
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+a,
+a:hover,
+a:active,
+a:visited,
+link {
+  color: inherit;
+  text-decoration: none;
+  border: none;
+  outline: none;
+}
diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss
index 4f0d63128..0f82e1c8f 100644
--- a/UI/WebServerResources/scss/core/variables.scss
+++ b/UI/WebServerResources/scss/core/variables.scss
@@ -31,6 +31,10 @@ $line: $baseline-grid;
 $sg-md-grid-pitch: 8 * $baseline-grid;
 // shortcut alias for $sg-md-grid-pitch
 $pitch: $sg-md-grid-pitch;
+$touch-zone-width: 48px;
+// shortcyut alias for $touch-zone-width
+$touch-zone: $touch-zone-width;
+
 // Google specifies dimensions in grid pitch
 // This is a small utility function
 // Return dimension in px
@@ -49,9 +53,10 @@ $layout-breakpoint-md:     960px !default;
 $layout-breakpoint-lg:     1200px !default;
 
 // App bar variables
-$app-bar-height: 64px;
+$app-bar-height: $sg-md-grid-pitch;
 
-$messageList-width: grid-step(7);
+$listView-width: grid-step(6);
+$detailView-width: grid-step(8);
 
 $toast-height: $baseline-grid * 3 !default;
 $toast-margin: $baseline-grid * 1 !default;
diff --git a/UI/WebServerResources/scss/views/ContactsUI.scss b/UI/WebServerResources/scss/views/ContactsUI.scss
index 4ac9e2f62..bbda53fa5 100644
--- a/UI/WebServerResources/scss/views/ContactsUI.scss
+++ b/UI/WebServerResources/scss/views/ContactsUI.scss
@@ -1,16 +1,15 @@
 /*! ContactUI.scss */
 
-[id="contactsList"] {
-  width: $messageList-width;
-  max-width:$messageList-width;
-  flex: 1 0 auto;
+[id ="contactsList"] {
+  flex: 0 0 $listView-width;
 }
 
 [id = "contactsList"] .sg-md-subheader {
   transform: translateY(-100%); // Compensate the container top-margin
 }
 // md is overqualifying, we have to do the same to override
-md-content[data-ui-view="card"] {
+md-content[ui-view="card"] {
+ flex: 0 0 $detailView-width;
   background-color: sg-color($sogoPaper, 200);
 }
 
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index cf51fc370..7f6289cf6 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -1,13 +1,10 @@
 
 [id="messagesList"] {
-  width:$messageList-width;
-  max-width:$messageList-width;
-  flex: 1 1 auto;
+  flex: 0 0 $listView-width;
 
 }
-[data-ui-view="message"] {
-  width: grid-step(9);
-  max-width: grid-step(9);
+[ui-view="message"] {
+  flex: 0 0 $detailView-width;
 }
 
 // Message view header