refactor(search-bar): modified search-bar to use search icon as bg, added toolbar styling

references #247

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;
+    }
+  }
+}

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;

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]
 })
 

ionic/components/search-bar/test/floating/index.ts

@@ -20,7 +20,8 @@ class IonicApp {
 
   }
 
-  myCancelAction(event, model) {
+  myCancelAction(event, query) {
-    console.log("TODO get app property");
+    console.log("Clicked cancel action with", query);
+    this.clickedCustomAction = true;
   }
 }

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>
+  <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"></ion-search-bar>
+  <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>