From 02cdc869be711f7b2df907ab97efc349434a8f73 Mon Sep 17 00:00:00 2001
From: iRouge <bfavreault@inverse.ca>
Date: Tue, 3 Mar 2015 18:40:48 -0500
Subject: [PATCH] Apply iconButton to Contact and Mail

---
 .../ContactsUI/UIxContactEditorTemplate.wox   | 34 +++++++++----------
 .../ContactsUI/UIxContactFoldersView.wox      |  6 ++--
 .../ContactsUI/UIxContactViewTemplate.wox     |  8 ++---
 UI/Templates/MailerUI/UIxMailMainFrame.wox    | 13 +++++--
 UI/Templates/MailerUI/UIxMailViewTemplate.wox | 34 ++++++++++++-------
 .../scss/components/select/select.scss        |  2 +-
 .../scss/components/toolbar/toolbar.scss      |  2 +-
 7 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index 195804c6e..55c91284f 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -64,14 +64,14 @@
             <input type="text" ng-model="unit.value"
                    sg-focus-on="orgUnit_{{$index}}"/>
           </md-input-container>
-            <md-button class="icon" ng-click="card.$delete('orgUnits', $index)">
+            <md-button class="iconButton" ng-click="card.$delete('orgUnits', $index)">
               <i class="md-icon-remove-circle"><!-- remove --></i>
             </md-button>
         </div>
       </div>
     <div class="md-layout-margin" layout="row" layout-align="start center">
-      <md-button class="icon" type="button" ng-click="addOrgUnit($event)">
-        <i class="md-icon-add-circle"><!-- plus icon button--></i>
+      <md-button class="iconButton" type="button" ng-click="addOrgUnit($event)">
+        <i class="md-icon-add"><!-- plus icon button--></i>
       </md-button>
       <label class="button-label">
         <var:string label:value="Add Organizational Unit"/>
@@ -97,15 +97,15 @@
                      sg-focus-on="category_{{$index}}"/>
               <!--typeahead="cat for cat in card.allCategories | filter:$viewValue"/>-->
             </md-input-container>
-            <md-button class="icon" ng-click="card.$delete('categories', $index)">
+            <md-button class="iconButton" ng-click="card.$delete('categories', $index)">
               <i class="md-icon-remove-circle"><!-- remove --></i>
             </md-button>
           </div>
         </div>
         <!-- New category button-group -->
         <div class="md-layout-margin" layout="row" layout-align="start center">
-            <md-button class="icon" type="button" ng-click="addCategory()">
-              <i class="md-icon-add-circle"><!-- new --></i>
+            <md-button class="iconButton" type="button" ng-click="addCategory()">
+              <i class="md-icon-add"><!-- new --></i>
             </md-button>
             <label class="button-label">
               <var:string label:value="New Category"/>
@@ -124,15 +124,15 @@
             <input type="email" ng-model="email.value"
                    sg-focus-on="email_{{$index}}"/>
           </md-input-container>
-          <md-button class="icon" ng-click="card.$delete('emails', $index)">
+          <md-button class="iconButton" ng-click="card.$delete('emails', $index)">
             <i class="md-icon-remove-circle"><!-- remove --></i>
           </md-button>
         </div>
 
       </div>
       <div class="md-layout-margin" layout="row" layout-align="start center">
-        <md-button class="icon" type="button" ng-click="addEmail()">
-          <i class="md-icon-add-circle"><!-- new --></i>
+        <md-button class="iconButton" type="button" ng-click="addEmail()">
+          <i class="md-icon-add"><!-- new --></i>
         </md-button>
         <label class="button-label">
           <var:string label:value="New Email Address"/>
@@ -154,15 +154,15 @@
               <input type="text" ng-model="phone.value"
                      sg-focus-on="phone_{{$index}}"/>
             </md-input-container>
-            <md-button class="icon" ng-click="card.$delete('phones', $index)">
+            <md-button class="iconButton" ng-click="card.$delete('phones', $index)">
               <i class="md-icon-remove-circle"><!-- remove --></i>
             </md-button>
           </div>
         </div>
 
         <div class="md-layout-margin" layout="row" layout-align="start center">
-          <md-button class="icon" type="button" ng-click="addPhone()">
-            <i class="md-icon-add-circle"><!-- new --></i>
+          <md-button class="iconButton" type="button" ng-click="addPhone()">
+            <i class="md-icon-add"><!-- new --></i>
           </md-button>
           <label class="button-label">
             <var:string label:value="New Phone Number"/>
@@ -189,8 +189,8 @@
           </div>
         </div>
         <div class="md-layout-margin" layout="row" layout-align="start center">
-          <md-button class="icon" type="button" ng-click="addUrl()">
-            <i class="md-icon-add-circle"><!-- new --></i>
+          <md-button class="iconButton" type="button" ng-click="addUrl()">
+            <i class="md-icon-add"><!-- new --></i>
           </md-button>
           <label class="button-label">
             <var:string label:value="New URL"/>
@@ -258,14 +258,14 @@
               </label>
               <input type="text" ng-model="address.postalcode"/>
             </md-input-container>
-            <md-button class="icon" ng-click="card.$delete('addresses', $index)">
+            <md-button class="iconButton" ng-click="card.$delete('addresses', $index)">
               <i class="md-icon-remove-circle"><!-- remove --></i>
             </md-button>
           </div>
         </div>
         <div class="md-layout-margin" layout="row" layout-align="start center">
-          <md-button class="icon" type="button" ng-click="addAddress()">
-            <i class="md-icon-add-circle"><!-- new --></i>
+          <md-button class="iconButton" type="button" ng-click="addAddress()">
+            <i class="md-icon-add"><!-- new --></i>
           </md-button>
           <label class="button-label">
             <var:string label:value="New Address"/>
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index a342c8c2e..a2e0272fe 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -205,7 +205,9 @@
             <p class="sg-md-display-3 sg-date-today">15</p>
           </div>
           <div class="sg-toolbar-group-2">
-            <span class="md-icon-search"></span>
+            <md-button class="iconButton">
+              <i class="md-icon-search"><!--icon--></i>
+            </md-button>
           </div>
         </div>
         <div class="md-toolbar-tools md-toolbar-tools-bottom" layout="row" layout-align="space-between center">
@@ -221,7 +223,7 @@
                          ng-model="search.filter">
                 <md-option value="all">ALL</md-option>
               </md-select>
-              <md-button class="icon" data-ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'card'})"><i class="md-icon-create"><!--icon--></i></md-button>
+              <md-button class="iconButton" ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'card'})"><i class="md-icon-create"><!--icon--></i></md-button>
             </div>
           </div>
           <div class="spacer cols-8"><!-- spacer --></div>
diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
index 049d167a9..290614e1c 100644
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -19,13 +19,13 @@
         </div>
         <div class="sg-icon-bar">
           <span ng-show="addressbook.isEditable">
-            <a class="button tiny radius" ui-sref="addressbook.card.editor({addressbookId: addressbook.id, cardId: card.id})">
+            <md-button class="iconButton" ui-sref="addressbook.card.editor({addressbookId: addressbook.id, cardId: card.id})">
               <i class="md-icon-create"><!-- edit --></i>
-            </a>
+            </md-button>
           </span>
-          <span class="button tiny radius alert" ng-click="confirmDelete(card)">
+          <md-button class="iconButton" ng-click="confirmDelete(card)">
             <i class="md-icon-delete"><!-- delete --></i>
-          </span>
+          </md-button>
         </div>
       </header>
       <md-divider class="md-inset"><!-- divider --></md-divider>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 7466026c4..53bf80712 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -304,7 +304,9 @@
             <p class="sg-md-display-3 sg-date-today">15</p>
           </div>
           <div class="sg-toolbar-group-2">
-            <span class="md-icon-search"></span>
+            <md-button class="iconButton">
+              <i class="md-icon-search"><!--icon--></i>
+            </md-button>
           </div>
         </div>
         <div class="md-toolbar-tools md-toolbar-tools-bottom" layout="row" layout-align="space-between center">
@@ -316,10 +318,15 @@
             </md-input-container>
 
             <div class="sg-toolbar-group">
-              <md-select class="sg-toolbar-sort md-contrast-light" ng-model="search.criteria">
+              <md-select class="sg-toolbar-sort md-contrast-light" label:placeholder="All"
+                         ng-model="search.criteria">
                 <md-option value="all">ALL</md-option>
               </md-select>
-              <span class="md-icon-create"><!-- icon --></span>
+              <!--todo: add action url-->
+              <md-button class="iconButton" ui-sref="">
+                <i class="md-icon-create"><!-- icon --></i>
+              </md-button>
+
             </div>
           </div>
           <div class="spacer cols-8"><!-- spacer --></div>
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index b2a0f1788..021f98cac 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -38,20 +38,30 @@
 -->
 
     <div class="sg-icon-bar">
-        <a class="button tiny radius"
-            ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'reply'})"><i class="md-icon-reply"><!-- reply --></i></a>
-        <a class="button tiny radius"
-            ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'replyall'})"><i class="md-icon-reply-all"><!-- reply all --></i></a>
-        <a class="button tiny radius"
-            ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'forward'})"><i class="md-icon-forward"><!-- forward --></i></a>
-        <a class="button tiny radius"
+      <!-- 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'})">
+          <md-tooltip md-direction="left">Reply to the message</md-tooltip>
+          <i class="md-icon-reply"><!-- reply --></i>
+        </md-button>
+        <md-button class="iconButton"
+            ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'replyall'})"><i class="md-icon-reply-all"><!-- reply all --></i>
+        </md-button>
+        <md-button class="iconButton"
+            ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'forward'})"><i class="md-icon-forward"><!-- forward --></i>
+        </md-button>
+        <md-button class="iconButton"
             ui-sref="mail.account.mailbox.message.edit({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid})"
-            ng-show="message.isDraft"><i class="md-icon-create"><!-- edit --></i></a>
-        <span class="button tiny radius alert"
-            ng-click="doDelete(message)"><i class="md-icon-delete"><!-- delete --></i></span>
-      <span class="button tiny radius"
+            ng-show="message.isDraft"><i class="md-icon-create"><!-- edit --></i>
+        </md-button>
+        <md-button class="iconButton"
+            ng-click="doDelete(message)"><i class="md-icon-delete"><!-- delete --></i>
+        </md-button>
+      <md-button class="iconButton"
             ng-show="message.hasUnsafeContent"
-            ng-click="loadImages()"><var:string label:value="Load Images"/></span>
+            ng-click="loadImages()"><var:string label:value="Load Images"/>
+        <i class="md-icon-image"><!--icon--></i>
+      </md-button>
     </div>
   </header>
   <md-divider><!-- divider --></md-divider>
diff --git a/UI/WebServerResources/scss/components/select/select.scss b/UI/WebServerResources/scss/components/select/select.scss
index d8a938171..54438c0e5 100644
--- a/UI/WebServerResources/scss/components/select/select.scss
+++ b/UI/WebServerResources/scss/components/select/select.scss
@@ -7,7 +7,7 @@ md-select {
 
 // angular material overqualifies, so we are
 md-select.md-default-theme.sg-toolbar-sort {
-  margin: 0 $bl -6px 0;
+  margin: 0 $bl 4px 0;
   color: $colorWhite;
   md-select-label.md-select-label {
     border: none;
diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
index 034263708..257ad4132 100644
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -41,7 +41,7 @@ hgroup {
 .sg-toolbar-group {
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: flex-end;
   justify-content: space-between;
   &-1 {
     order: 1;