From a57713523b7ad6adfc340fba55f84f8c0d7d868f Mon Sep 17 00:00:00 2001
From: Benoit Favreault <benoit.favreault@gmail.com>
Date: Fri, 13 Mar 2015 02:10:31 -0400
Subject: [PATCH] Finish the toolbars Add an app button on sidenav Add a logout
 select on sidenav

---
 .../ContactsUI/UIxContactFoldersView.wox      | 26 +++++++++----
 .../ContactsUI/UIxContactViewTemplate.wox     |  2 +-
 UI/Templates/MailerUI/UIxMailMainFrame.wox    | 26 +++++++++----
 UI/Templates/MailerUI/UIxMailViewTemplate.wox |  2 +-
 .../scss/components/button/_button.scss       | 38 +++++++++----------
 .../scss/components/select/select.scss        | 15 ++++++++
 .../scss/components/toolbar/toolbar.scss      | 20 ++++------
 .../scss/core/typography/typography.scss      |  8 ++--
 8 files changed, 86 insertions(+), 51 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 8b08bd040..767eb9deb 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -148,11 +148,23 @@
 <!-- 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="start start">
-        <span class="sg-logo"> </span>
-        <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 class="md-toolbar-tools" layout="row">
+          <md-button class="iconButton sg-button-navicon">
+            <i class="md-icon-apps"><!--icon--></i>
+          </md-button>
+          <span class="sg-logo"><!--logo.svg--></span>
+        </div>
+
+        <div class="md-toolbar-tools" layout="row">
+          <div layout="column">
+            <p class="sg-md-title">{{activeUser.identification}}</p>
+            <!--fixme: implement this with the proper model and actions -->
+            <md-select class="sg-logout" ng-model="accounts.options" label:placeholder="sogo1@inverse.ca">
+              <md-option >sogo1@inverse.ca</md-option>
+              <md-option >connect an other account</md-option>
+              <md-option >logout</md-option>
+            </md-select>
+          </div>
         </div>
       </md-toolbar>
       <md-content md-scroll-y="md-scroll-y" class="md-flex">
@@ -192,12 +204,12 @@
 
     <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="md-toolbar-tools md-toolbar-tools-top" 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 iconButton" aria-label="Toggle Menu">
               <span class="md-icon-menu"></span>
             </md-button>
-            <div class="sg-date-group" layout="column" layout-align="center end">
+            <div class="sg-date-group" layout="column" layout-align="space-between end">
               <p class="sg-day">monday</p>
               <p class="sg-month">january</p>
               <p class="sg-year">2015</p>
diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
index 3576d6dab..c3d28e28f 100644
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -17,7 +17,7 @@
             <span class="label radius" ng-repeat="category in card.categories">{{category.value}}</span>
           </h6>
         </div>
-        <div class="sg-icon-bar">
+        <div class="sg-icon-bar--vertical">
           <span ng-show="addressbook.isEditable">
             <md-button class="iconButton" aria-label="Edit" ui-sref="addressbook.card.editor({addressbookId: addressbook.id, cardId: card.id})">
               <i class="md-icon-create"><!-- edit --></i>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 3a1455612..56ad967b1 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -265,13 +265,25 @@
 <!-- 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="start start">
-        <span class="sg-logo"> </span>
-        <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 class="md-toolbar-tools" layout="row">
+          <md-button class="iconButton sg-button-navicon">
+            <i class="md-icon-apps"><!--icon--></i>
+          </md-button>
+          <span class="sg-logo"><!--logo.svg--></span>
+        </div>
+        <div class="md-toolbar-tools" layout="row">
+          <div layout="column">
+            <p class="sg-md-title">{{activeUser.identification}}</p>
+            <!--fixme: implement this with the proper model and actions -->
+            <md-select class="sg-logout" ng-model="accounts.options" label:placeholder="sogo1@inverse.ca">
+              <md-option >sogo1@inverse.ca</md-option>
+              <md-option >connect an other account</md-option>
+              <md-option >logout</md-option>
+            </md-select>
+          </div>
         </div>
       </md-toolbar>
+
       <md-content md-scroll-y="md-scroll-y" class="md-flex">
         <md-list ng-repeat="account in accounts track by account.id">
           <md-item>
@@ -291,12 +303,12 @@
 <!-- Main section -->
     <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="md-toolbar-tools md-toolbar-tools-top" 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 iconButton" aria-label="Toggle Menu">
               <span class="md-icon-menu"></span>
             </md-button>
-            <div class="sg-date-group" layout="column" layout-align="center end">
+            <div class="sg-date-group" layout="column" layout-align="space-between end">
               <p class="sg-day">monday</p>
               <p class="sg-month">january</p>
               <p class="sg-year">2015</p>
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index 5a4348600..06f067997 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -37,7 +37,7 @@
       </p>
 -->
 
-    <div class="sg-icon-bar">
+    <div class="sg-icon-bar--vertical">
       <!-- todo: Replace md-tooltip values by localizable string variable -->
         <md-button class="iconButton"
             ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'reply'})"
diff --git a/UI/WebServerResources/scss/components/button/_button.scss b/UI/WebServerResources/scss/components/button/_button.scss
index 6f16a59e2..7638fad54 100644
--- a/UI/WebServerResources/scss/components/button/_button.scss
+++ b/UI/WebServerResources/scss/components/button/_button.scss
@@ -66,26 +66,24 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
     transition: $iconButton-transition;
   }
 }
-
-// Containers have padding, we compensate to align according to specs
-.iconButton:last-child {
-  margin-right: ($iconButton-padding * -1);
-  margin-end: ($iconButton-padding * -1);
-  -moz-margin-end: ($iconButton-padding * -1);
-  -webkit-margin-end: ($iconButton-padding * -1);
-}
-.iconButton:first-child {
-  margin-left: ($iconButton-padding * -1);
-  margin-start: ($iconButton-padding * -1);
-  -moz-margin-start: ($iconButton-padding * -1);
-  -webkit-margin-start: ($iconButton-padding * -1);
-}
-.iconButton:only-child {
-  margin-start: ($iconButton-padding * -1);
-  -moz-margin-start: ($iconButton-padding * -1);
-  -webkit-margin-start: ($iconButton-padding * -1);
+// Icon-bars are for iconButtons, by default they're vertical and at the right
+// the modifier class is to reflect those values and leave place to other versions
+.sg-icon-bar--vertical {
+  font-size: $sg-font-size-3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  // Containers have padding, we compensate to align according to specs
+  margin: 0 ($iconButton-padding * -1) 0 $mg;
 }
 
+// NiceToHave: some horizontal or left hand side variant
+
+
+.sg-icon-bar *.button {
+  display: block;
+}
 
 // angular-material is overspecifying so we are
 .md-button.md-default-theme:not([disabled]).iconButton {
@@ -98,6 +96,8 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
   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 {
+.sg-button-navicon.iconButton span.md-icon-menu,
+.sg-button-navicon.iconButton i[class|="md-icon"] {
+  padding: 0;
   font-size: $iconButton-menu-size;
 }
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/select/select.scss b/UI/WebServerResources/scss/components/select/select.scss
index 54438c0e5..4441133aa 100644
--- a/UI/WebServerResources/scss/components/select/select.scss
+++ b/UI/WebServerResources/scss/components/select/select.scss
@@ -9,8 +9,23 @@ md-select {
 md-select.md-default-theme.sg-toolbar-sort {
   margin: 0 $bl 4px 0;
   color: $colorWhite;
+
   md-select-label.md-select-label {
     border: none;
     color: inherit;
   }
 }
+
+md-select.md-default-theme.sg-logout {
+  margin-top: 0;
+  color: $colorWhite;
+
+  // angular material overqualifies, so we are
+  md-select-label.md-select-label,
+  md-select-label.md-select-label.md-placeholder,
+  md-select-label.md-select-label * {
+    border: none;
+    color: $colorWhite;
+  }
+
+}
\ 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 7708f8c79..665d508e3 100644
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -6,10 +6,16 @@ md-toolbar {
   box-shadow: none;
   font-size: initial;
 }
+
+.md-toolbar-tools.md-toolbar-tools-top {
+  padding-top: $bl;
+}
+
 .md-toolbar-tools.md-toolbar-tools-bottom {
   height: (5 * $line);
   max-height: (5 * $line);
 }
+
 header {
   flex-direction: row;
   flex-wrap: nowrap;
@@ -28,17 +34,7 @@ hgroup {
   color: inherit;
   font-size: sg-size(headline);
 }
-.sg-icon-bar {
-  font-size: $sg-font-size-3;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 0 0 $mg;
-    }
-.sg-icon-bar *.button {
-  display: block;
-}
+
 .sg-toolbar-group {
   display: flex;
   flex-direction: row;
@@ -55,5 +51,3 @@ hgroup {
     order: 3;
   }
 }
-
-
diff --git a/UI/WebServerResources/scss/core/typography/typography.scss b/UI/WebServerResources/scss/core/typography/typography.scss
index d6456ef12..da6db82de 100644
--- a/UI/WebServerResources/scss/core/typography/typography.scss
+++ b/UI/WebServerResources/scss/core/typography/typography.scss
@@ -395,16 +395,18 @@ html p {
 
 // Date bloc in use on the toolbar
 // ----------------------------------------------------------------------------
+$today-font-size: 72px; // Visualy adjusted
+
 .sg-date-group {
-  height: $pitch;
   font-size: sg-size(button);
   line-height: 1;
   text-transform: uppercase;
 }
 
 .sg-date-today {
-  font-size: $pitch;
-  line-height: 1;
+  margin-left: $bl;
+  font-size: $today-font-size;
+  line-height: 56px; // Visualy adjusted
   font-weight: $sg-font-light;
 }