From 87fbedb89d2b429f107c292aa308bbd9bd4ab854 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Tue, 17 May 2016 15:10:09 -0400
Subject: [PATCH] (css) Improve subheader with icon buttons

---
 UI/Templates/ContactsUI/UIxContactFoldersView.wox        | 6 +++---
 UI/Templates/MailerUI/UIxMailMainFrame.wox               | 5 +++--
 UI/Templates/SchedulerUI/UIxCalMainView.wox              | 6 +++---
 .../scss/components/subheader/subheader.scss             | 9 ++++++---
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 652d24684..1f1e36cff 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -31,7 +31,7 @@
                   md-colors="::{ backgroundColor: 'default-background-300' }">
         <!-- User's addressbooks -->
         <section>
-          <md-subheader class="sg-md-subheader--icon-button"
+          <md-subheader class="sg-md-subheader--with-secondary-icon"
                         md-colors="::{background: 'default-background-300'}">
             <div layout="row" layout-align="space-between center">
               <span><var:string label:value="Address Books"/></span>
@@ -113,7 +113,7 @@
         </section>
         <!-- Subscriptions -->
         <section>
-          <md-subheader class="sg-md-subheader--icon-button"
+          <md-subheader class="sg-md-subheader--with-secondary-icon"
                         md-colors="::{background: 'default-background-300'}">
             <div layout="row" layout-align="space-between center">
               <span><var:string label:value="Subscriptions"/></span>
@@ -174,7 +174,7 @@
         </section>
         <!-- Remote/domain addressbooks -->
         <section>
-          <md-subheader class="sg-md-subheader--icon-button"
+          <md-subheader class="sg-md-subheader--with-secondary-icon"
                         md-colors="::{background: 'default-background-300'}">
             <var:string label:value="Global Addressbooks"/>
           </md-subheader>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 459ec7189..e93280e5f 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -38,10 +38,11 @@
                   md-colors="::{ backgroundColor: 'default-background-300' }">
         <section class="md-flex" layout="column"
                  ng-repeat="account in app.accounts track by account.id">
-          <md-subheader class="sg-md-subheader--icon-button"
+          <md-subheader class="sg-md-subheader--with-secondary-icon"
+                        ng-class="{ 'sg-md-subheader--with-icon': account.id == 0 }"
                         md-colors="::{ backgroundColor: 'default-background-300' }">
             <div layout="row" layout-align="start center">
-              <md-button class="md-icon-button"
+              <md-button class="sg-icon-button"
                          ng-show="account.id == 0"
                          label:aria-label="Delegation..."
                          ng-click="app.delegate(account)">
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 49acdeb25..3dbb5ecd4 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -41,7 +41,7 @@
                   md-colors="::{ backgroundColor: 'default-background-300' }">
         <!-- User's calendars -->
         <section>
-          <md-subheader class="sg-md-subheader--icon-button"
+          <md-subheader class="sg-md-subheader--with-secondary-icon"
                         md-colors="::{background: 'default-background-300'}">
             <div layout="row" layout-align="space-between center">
               <span><var:string label:value="Calendars"/></span>
@@ -138,7 +138,7 @@
         </section>
         <!-- Subscriptions -->
         <section>
-          <md-subheader class="sg-md-subheader--icon-button"
+          <md-subheader class="sg-md-subheader--with-secondary-icon"
                         md-colors="::{background: 'default-background-300'}">
             <div layout="row" layout-align="space-between center">
               <span><var:string label:value="Subscriptions"/></span>
@@ -213,7 +213,7 @@
         </section>
         <!-- Web Calendars -->
         <section>
-          <md-subheader class="sg-md-subheader--icon-button"
+          <md-subheader class="sg-md-subheader--with-secondary-icon"
                         md-colors="::{background: 'default-background-300'}">
             <div layout="row" layout-align="space-between center">
               <span><var:string label:value="Web Calendars"/></span>
diff --git a/UI/WebServerResources/scss/components/subheader/subheader.scss b/UI/WebServerResources/scss/components/subheader/subheader.scss
index 904698ee9..f1baa5edf 100644
--- a/UI/WebServerResources/scss/components/subheader/subheader.scss
+++ b/UI/WebServerResources/scss/components/subheader/subheader.scss
@@ -6,12 +6,15 @@ $sg-subheader-padding-left-right: $baseline-grid;
 
 
 .sg-md-subheader {
-  &--icon-button ._md-subheader-inner {
+  &--with-icon ._md-subheader-inner,
+  &--with-secondary-icon ._md-subheader-inner {
     line-height: $sg-avatar-width + ($sg-subheader-padding-top-bottom)*2;
     padding: ($subheader-padding - ($icon-button-height - $subheader-font-size)/2) $baseline-grid;
-    padding: $sg-subheader-padding-top-bottom $sg-subheader-padding-left-right;
+    padding: 0;
     padding-left: $subheader-padding;
-    padding-right: 0;
+  }
+  &--with-icon ._md-subheader-inner {
+    padding-left: 0;
   }
   &--fixed {
     position: fixed;