Adjust UI for Contact, Contact editor, Messages and Message editor

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

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);
     }
   }

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);
 }

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;
-}

UI/WebServerResources/scss/components/select/select.scss

@@ -2,4 +2,15 @@
 
 md-select {
   margin-bottom: 2px;
-}
+  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;
+  }
+}

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;

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;
+}

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;

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);
 }
 

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