From 7fba34d72e5df86d53cfb814b48dbb974a220af8 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 2 Nov 2015 16:18:45 -0500
Subject: [PATCH] refactor(search-bar): modified search-bar to use search icon
 as bg, added toolbar styling

references #247
---
 ionic/components/search-bar/modes/ios.scss    | 48 ++++++++++++-------
 ionic/components/search-bar/modes/md.scss     | 17 ++-----
 ionic/components/search-bar/search-bar.ts     |  5 +-
 .../search-bar/test/floating/index.ts         |  5 +-
 .../search-bar/test/floating/main.html        |  6 +--
 5 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss
index 192b513c1c..22837e8d8f 100644
--- a/ionic/components/search-bar/modes/ios.scss
+++ b/ionic/components/search-bar/modes/ios.scss
@@ -30,21 +30,6 @@ ion-search-bar {
   min-height: $search-bar-ios-min-height;
 }
 
-.search-bar-search-icon {
-  width: $search-bar-ios-input-search-icon-size + 1;
-  height: $search-bar-ios-input-search-icon-size + 1;
-
-  @include svg-background-image($search-bar-ios-input-search-icon-svg);
-  background-size: $search-bar-ios-input-search-icon-size;
-  background-repeat: no-repeat;
-  position: absolute;
-  left: 10px;
-  top: 8px;
-
-  @include calc(margin-left, "50% - 60px");
-  transition: $search-bar-ios-input-transition;
-}
-
 .search-bar-input {
   height: $search-bar-ios-input-height;
   padding: 0 28px;
@@ -55,8 +40,11 @@ ion-search-bar {
   border-radius: 5px;
   color: $search-bar-ios-input-text-color;
   background-color: $search-bar-ios-input-background-color;
+
+  @include svg-background-image($search-bar-ios-input-search-icon-svg);
+  background-size: $search-bar-ios-input-search-icon-size;
   background-repeat: no-repeat;
-  background-position: 8px center;
+  background-position: calc(50% - 40px);
 
   &::placeholder {
     color: $search-bar-ios-input-placeholder-color;
@@ -96,9 +84,37 @@ ion-search-bar {
   }
   .search-bar-input {
     padding-left: 28px;
+    background-position: 8px;
   }
 }
 
 &.hairlines ion-search-bar {
   border-bottom-width: 0.55px;
 }
+
+ion-toolbar {
+
+  ion-search-bar {
+    background: transparent;
+    border-bottom-width: 0;
+
+    .search-bar-input {
+      background-color: #E5E5E5;
+    }
+  }
+
+}
+
+// Generate Default Search Bar Colors
+// --------------------------------------------------
+
+@each $color, $value in $colors {
+
+  ion-search-bar[#{$color}] {
+    //background-color: $value;
+
+    .search-bar-cancel {
+      color: $value;
+    }
+  }
+}
diff --git a/ionic/components/search-bar/modes/md.scss b/ionic/components/search-bar/modes/md.scss
index 1539ad7a2d..094b4adfe2 100644
--- a/ionic/components/search-bar/modes/md.scss
+++ b/ionic/components/search-bar/modes/md.scss
@@ -26,18 +26,6 @@ ion-search-bar {
   background: $search-bar-md-background-color;
 }
 
-.search-bar-search-icon {
-  width: $search-bar-md-input-search-icon-size + 1;
-  height: $search-bar-md-input-search-icon-size + 1;
-
-  @include svg-background-image($search-bar-md-input-search-icon-svg);
-  background-size: $search-bar-md-input-search-icon-size;
-  background-repeat: no-repeat;
-  position: absolute;
-  left: 13px;
-  top: 13px;
-}
-
 .search-bar-input {
   padding: 8px 55px;
 
@@ -50,8 +38,11 @@ ion-search-bar {
   border-radius: $search-bar-md-input-border-radius;
   color: $search-bar-md-input-text-color;
   background-color: $search-bar-md-input-background-color;
+
+  @include svg-background-image($search-bar-md-input-search-icon-svg);
+  background-size: $search-bar-md-input-search-icon-size;
   background-repeat: no-repeat;
-  background-position: 8px center;
+  background-position: 16px center;
 
   &::placeholder {
     color: $search-bar-md-input-placeholder-color;
diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts
index fb0c581460..4cfb868054 100644
--- a/ionic/components/search-bar/search-bar.ts
+++ b/ionic/components/search-bar/search-bar.ts
@@ -20,19 +20,18 @@ import {ConfigComponent} from '../../config/decorators';
     'showCancel': false,
     'cancelText': 'Cancel',
     'placeholder': 'Search',
-    'cancelAction': function(event, model) {
+    'cancelAction': function(event, query) {
       // The cancel button now works on its own to blur the input
       console.log('Default Cancel');
     }
   },
   template:
     '<div class="search-bar-input-container" [class.left-align]="shouldLeftAlign">' +
-      '<div class="search-bar-search-icon"></div>' +
       '<input [(value)]="query" (focus)="inputFocused()" (blur)="inputBlurred()" ' +
       '(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">' +
       '<button clear *ng-if="query" class="search-bar-close-icon" (click)="clearInput($event)"></button>' +
     '</div>' +
-    '<button *ng-if="showCancel" (click)="cancelAction($event, model)" class="search-bar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>',
+    '<button *ng-if="showCancel" (click)="cancelAction($event, query)" class="search-bar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>',
   directives: [FORM_DIRECTIVES, NgIf, NgClass]
 })
 
diff --git a/ionic/components/search-bar/test/floating/index.ts b/ionic/components/search-bar/test/floating/index.ts
index d76585b913..85f5c2bebc 100644
--- a/ionic/components/search-bar/test/floating/index.ts
+++ b/ionic/components/search-bar/test/floating/index.ts
@@ -20,7 +20,8 @@ class IonicApp {
 
   }
 
-  myCancelAction(event, model) {
-    console.log("TODO get app property");
+  myCancelAction(event, query) {
+    console.log("Clicked cancel action with", query);
+    this.clickedCustomAction = true;
   }
 }
diff --git a/ionic/components/search-bar/test/floating/main.html b/ionic/components/search-bar/test/floating/main.html
index c30254b08c..8239950769 100644
--- a/ionic/components/search-bar/test/floating/main.html
+++ b/ionic/components/search-bar/test/floating/main.html
@@ -3,13 +3,13 @@
   <ion-search-bar [(ng-model)]="defaultSearch" class="e2eDefaultFloatingSearchBar"></ion-search-bar>
 
   <h5 padding-left> Search - Custom Placeholder </h5>
-  <ion-search-bar [(ng-model)]="customPlaceholder" placeholder="Filter" class="e2eCustomPlaceholderFloatingSearchBar"></ion-search-bar>
+  <ion-search-bar [(ng-model)]="customPlaceholder" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchBar"></ion-search-bar>
 
   <h5 padding-left> Search - Default Cancel Button </h5>
   <ion-search-bar [(ng-model)]="defaultCancel" show-cancel="true" class="e2eDefaultCancelButtonFloatingSearchBar"></ion-search-bar>
 
-  <h5 padding-left> Search - Custom Cancel Button </h5>
-  <ion-search-bar [(ng-model)]="customCancel" show-cancel="true" cancel-text="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchBar"></ion-search-bar>
+  <h5 padding-left> Search - Custom Cancel Button Danger </h5>
+  <ion-search-bar [(ng-model)]="customCancel" show-cancel="true" cancel-text="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchBar" danger></ion-search-bar>
 
   <h5 padding-left> Search - Custom Cancel Action</h5>
   <ion-search-bar [(ng-model)]="customCancelAction" show-cancel="true" cancel-text="Done" [cancel-action]="myCancelAction" class="e2eCustomCancelActionFloatingSearchBar"></ion-search-bar>