From fdb4cd71eba080d69729890e0c1a45c40ab1a5dd Mon Sep 17 00:00:00 2001
From: iRouge <bfavreault@inverse.ca>
Date: Sun, 8 Mar 2015 17:09:20 -0400
Subject: [PATCH] Fix sidenav toolbar (logo and buttons)

---
 UI/Templates/ContactsUI/UIxContactFoldersView.wox    | 12 +++++++-----
 UI/Templates/MailerUI/UIxMailFolderTemplate.wox      |  3 +--
 UI/Templates/MailerUI/UIxMailMainFrame.wox           | 12 +++++++-----
 .../scss/components/button/_button.scss              |  6 ++++++
 .../scss/components/toolbar/toolbar.scss             |  2 ++
 .../scss/core/base_styles/_base_style.scss           |  2 +-
 6 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 55790cd80..6ebea6222 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -147,11 +147,13 @@
     -->
 <!-- Sidenav -->
     <md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
-      <md-toolbar class="md-tall" layout-align="end start">
+      <md-toolbar class="md-tall" layout-align="start start">
         <span class="sg-logo"> </span>
-        <h2 class="md-toolbar-tools md-toolbar-tools-bottom">
-          <span class="sg-md-title md-flex">{{activeUser.identification}}</span>
-        </h2>
+        <div class="md-toolbar-tools md-toolbar-tools-bottom">
+          <p class="sg-md-title md-flex">{{activeUser.identification}}</p>
+          <!--fixme: correct this data-binding -->
+          <p class="md-sg-subhead-1">{{account.name}}</p>
+        </div>
       </md-toolbar>
       <md-content md-scroll-y="md-scroll-y" class="md-flex" ng-controller="LeftCtrl">
         <md-list>
@@ -192,7 +194,7 @@
       <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" layout="row">
-            <md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon" aria-label="Toggle Menu">
+            <md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon iconButton" aria-label="Toggle Menu">
               <span class="md-icon-menu"></span>
             </md-button>
             <div class="sg-date-group" layout="column" layout-align="center end">
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 131f85cdf..3ecda420c 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -21,8 +21,7 @@
             <!--avatar-->
           </div>
           <div class="sg-tile-content">
-            <a ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})"
-                >
+            <a ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})">
               <div class="sg-md-subhead-multi subject">
                 {{currentMessage.subject}}
               </div>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 16ffe28fb..c41c16d0f 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -264,11 +264,13 @@
 
 <!-- Sidenav -->
     <md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
-      <md-toolbar class="md-tall" layout-align="end start">
+      <md-toolbar class="md-tall" layout-align="start start">
         <span class="sg-logo"> </span>
-        <h2 class="md-toolbar-tools md-toolbar-tools-bottom">
-          <span class="sg-md-title md-flex">{{activeUser.identification}}</span>
-        </h2>
+        <div class="md-toolbar-tools md-toolbar-tools-bottom">
+          <p class="sg-md-title md-flex">{{activeUser.identification}}</p>
+          <!--fixme: correct this data-binding -->
+          <p class="md-sg-subhead-1">{{account.name}}</p>
+        </div>
       </md-toolbar>
       <md-content md-scroll-y="md-scroll-y" class="md-flex" ng-controller="LeftCtrl">
         <md-list ng-repeat="account in accounts track by account.id">
@@ -291,7 +293,7 @@
       <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" layout="row">
-            <md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon" aria-label="Toggle Menu">
+            <md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon iconButton" aria-label="Toggle Menu">
               <span class="md-icon-menu"></span>
             </md-button>
             <div class="sg-date-group" layout="column" layout-align="center end">
diff --git a/UI/WebServerResources/scss/components/button/_button.scss b/UI/WebServerResources/scss/components/button/_button.scss
index fe30fc294..6f16a59e2 100644
--- a/UI/WebServerResources/scss/components/button/_button.scss
+++ b/UI/WebServerResources/scss/components/button/_button.scss
@@ -35,6 +35,7 @@ sg-folder-tree .md-button {
 // Variables
 $iconButton-size: $touch-zone-width;
 $iconButton-icon-size: sg-size(title);
+$iconButton-menu-size: sg-size(headline);
 $iconButton-icon-padding: 2px;
 $iconButton-size-cursor-coarse: $iconButton-size;
 // Could be use to scale-down buttons if desktop layout suffers too much from touch-size
@@ -44,6 +45,7 @@ $iconButton-padding: ($iconButton-size - ($iconButton-icon-size + ($iconButton-i
 $iconButton-hover-scale: 1.25;
 $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-function;
 
+
 // Classes
 .iconButton {
   padding: $iconButton-padding;
@@ -94,4 +96,8 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
   width: $touch-zone;
   height: $touch-zone;
   margin-left: ($mg * -1);
+}
+// angular-material is overspecifying so we are and so we have to continue
+.sg-button-navicon.iconButton span.md-icon-menu {
+  font-size: $iconButton-menu-size;
 }
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
index 73a744e05..7708f8c79 100644
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -1,8 +1,10 @@
 @import 'extends';
 
 md-toolbar {
+  // todo: create variables scaled z-index
   z-index: 20;
   box-shadow: none;
+  font-size: initial;
 }
 .md-toolbar-tools.md-toolbar-tools-bottom {
   height: (5 * $line);
diff --git a/UI/WebServerResources/scss/core/base_styles/_base_style.scss b/UI/WebServerResources/scss/core/base_styles/_base_style.scss
index 002064af2..cdd4b042a 100644
--- a/UI/WebServerResources/scss/core/base_styles/_base_style.scss
+++ b/UI/WebServerResources/scss/core/base_styles/_base_style.scss
@@ -19,7 +19,7 @@ main {
   background-image: url("../img/sogo-full.svg");
   background-size: contain;
   background-repeat: no-repeat;
-  margin-left: 16px;
+  margin: $bl 0 0 $mg;
   height: 7 * $bl;
   min-width: 18 * $bl;
 }