From 012d953d65945f393a2fd2c1f5561b00cac8959b Mon Sep 17 00:00:00 2001
From: iRouge <bfavreault@inverse.ca>
Date: Thu, 26 Feb 2015 00:39:18 -0500
Subject: [PATCH] Add an input-container to search field in Contact toolbar

---
 UI/Templates/ContactsUI/UIxContactEditorTemplate.wox |  1 +
 UI/Templates/ContactsUI/UIxContactFoldersView.wox    |  9 ++++++---
 UI/WebServerResources/scss/components/icon/icon.scss |  6 +++++-
 .../scss/components/pseudo-input/pseudo-input.scss   | 12 ++++++++++++
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index f42a17b50..bffef241b 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -144,6 +144,7 @@
       <div class="section">
         <div class="attr" data-ng-repeat="phone in card.phones">
           <div layout="row" layout-align="center end">
+            <i class="md-icon-phone md-icon-lg cols-1"><!--icon--></i>
             <md-select data-ng-model="phone.type">
               <md-option ng-repeat="type in allTelTypes" ng-value="type">{{ type }}</md-option>
             </md-select>
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index fa019b32b..6bbf46f29 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -207,9 +207,12 @@
         </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">
-            <span class="md-icon-search"><!-- icon search --></span>
-            <input name="folderSearch" type="search" label:placeholder="Search"
-                   ng-model="search.filter" ng-keyup="doSearch($event)"/>
+            <md-input-container class="sg-search-field-container">
+              <label style="color: white"><i class="md-icon-search"><!--icon--></i>Search</label>
+              <input name="folderSearch" type="search"
+                     ng-model="search.filter" ng-keyup="doSearch($event)" style="color: white"/>
+            </md-input-container>
+
             <div class="sg-toolbar-group">
               <span>ALL
                 <span class="md-icon-arrow-drop-down"><!-- sort drop-down --></span>
diff --git a/UI/WebServerResources/scss/components/icon/icon.scss b/UI/WebServerResources/scss/components/icon/icon.scss
index 6ad31edb6..6d375dd04 100644
--- a/UI/WebServerResources/scss/components/icon/icon.scss
+++ b/UI/WebServerResources/scss/components/icon/icon.scss
@@ -11,7 +11,7 @@
 @import 'extends';
 /**
   MD-ICONS
-  Usage: place Material Design Iconic Font icons on almost any elemnt using the Prefix md-icon
+  Usage: place Material Design Iconic Font icons on almost any element using the Prefix md-icon
   and the icon's name (http://zavoloklom.github.io/material-design-iconic-font/icons.html)
   exemple : <i class="md-icon-more-horiz></i>
 
@@ -37,3 +37,7 @@ src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAjEMAAsAA
   font-weight: normal;
   font-style: normal;
 }
+.md-icon-lg {
+  line-height: 1;
+  vertical-align: initial;
+}
diff --git a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
index 71444eb85..5f805020c 100644
--- a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
+++ b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
@@ -35,6 +35,17 @@ $input-padding-top: 2px !default;
   padding: 0 2px;
 
 }
+.sg-search-field-container {
+  margin-bottom: 12px;
+  color: white;
+  label {
+    color: inherit;
+  }
+  input {
+    color: inherit;
+    border: none;
+  }
+}
 
 .pseudo-input-label,
 .button-label {
@@ -45,6 +56,7 @@ $input-padding-top: 2px !default;
   font-size: sg-size(caption);
   line-height: $sg-line-height-1;
 }
+
 .pseudo-input-label--no-margin,
 .button-label {
   margin-top: 0;