Add toolbars Icons (several bugs, some remaining)

UI/Templates/MailerUI/UIxMailFolderTemplate.wox

@@ -2,13 +2,13 @@
 <container
     xmlns = "http://www.w3.org/1999/xhtml"
     >
-  <md-content style="min-width: 300px; position: relative;" id="messagesList">
+  <md-content style="position: relative;" id="messagesList">
     <style>
       .vs-repeat-repeated-element {
         width: 100%;
       }
     </style>
-    <header class="sg-md-subheader sg-avatar-left">
+    <header class="sg-md-subheader">
       <h2 class="sg-md-subhead-solo fg-sogoBlue-700">Unread Messages</h2>
     </header>
 

UI/Templates/MailerUI/UIxMailMainFrame.wox

@@ -289,20 +289,34 @@
 
 <!-- Main section -->
     <section layout="column" layout-fill="layout-fill">
-      <md-toolbar layout="row" layout-align="space-between start" class="md-tall">
-        <div class="md-toolbar-tools" ng-controller="toggleCtrl">
-          <span class="md-flex">
-            <md-button ng-click="toggleLeft()" class="md-primary md-hide-gt-md">
-              <span class="icon-ic_menu_24px"></span>
+      <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">
+              <span class="md-icon-menu"></span>
             </md-button>
-            <div class="sg-md-display-1">
-              [[Calendar]]
+
+            <div class="sg-md-display-3">
+              15
             </div>
-          </span>
-          <span class="sd-toolbar-tools">
-            <span>search</span>
-          </span>
+          </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="sg-toolbar-group">
+              <span>ALL
+                <span class="md-icon-arrow-drop-down"><!-- sort drop-down --></span>
+              </span>
+              <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>

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

@@ -4,6 +4,10 @@ md-toolbar {
   z-index: 20;
   box-shadow: none;
 }
+.md-toolbar-tools.md-toolbar-tools-bottom {
+  height: (5 * $line);
+  max-height: (5 * $line);
+}
 header {
   flex-direction: row;
   align-items: stretch;
@@ -17,6 +21,10 @@ hgroup {
     margin-bottom: 0;
   }
 }
+.toolbar-main .md-button {
+  color: inherit;
+  font-size: sg-size(headline);
+}
 .sg-icon-bar {
   font-size: $sg-font-size-3;
   color: $colorGray;
@@ -29,5 +37,21 @@ hgroup {
 .sg-icon-bar *.button {
   display: block;
 }
+.sg-toolbar-group {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  &-1 {
+    order: 1;
+    max-width: $messageList-width;
+  }
+  &-2 {
+    order: 2;
+  }
+  &-3 {
+    order: 3;
+  }
+}
 
 

UI/WebServerResources/scss/core/layout.scss

@@ -16,3 +16,13 @@ flex, flex-sm, flex-gt-sm, flex-md, flex-gt-md, flex-lg, flex-gt-lg, hide, hide-
 .md-flex {
   flex: 1 1 auto;
 }
+
+@for $i from 1 to 20 {
+  .cols-#{$i} {
+  max-width: grid-step($i);
+  flex: 1 1 auto;
+  }
+  .cols-#{$i}.spacer {
+    width: grid-step($i);
+  }
+}

UI/WebServerResources/scss/core/mixins.scss

@@ -29,4 +29,4 @@
       @extend #{'['$selector']'} !optional
     }
   }
-}
+}

UI/WebServerResources/scss/core/variables.scss

@@ -51,6 +51,8 @@ $layout-breakpoint-lg:     1200px !default;
 // App bar variables
 $app-bar-height: 64px;
 
+$messageList-width: grid-step(7);
+
 $toast-height: $baseline-grid * 3 !default;
 $toast-margin: $baseline-grid * 1 !default;
 

UI/WebServerResources/scss/views/MailerUI.scss

@@ -1,8 +1,6 @@
 
-
-
 [id="messagesList"] {
-  max-width: grid-step(7);
+  max-width:$messageList-width;
   flex: 1 1 auto;
 
 }