Fancy searchbar

ionic/components/app/test/sink/pages/search-bar.js

@@ -10,7 +10,8 @@ import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalR
   console.log(NavbarTemplate, Navbar, Content, formDirectives);
 
 @Component({
-  selector: 'ion-view'
+  selector: 'ion-view',
+  appInjector: [FormBuilder]
 })
 @View({
   template: `
@@ -27,7 +28,7 @@ import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalR
     </p>
 
     <form (^submit)="doSubmit($event)" [control-group]="form">
-      <ion-search-bar control="searchQuery"></ion-search-bar>
+      <ion-search-bar placeholder="Search" control="searchQuery"></ion-search-bar>
       <div>
         Query: <b>{{form.controls.searchQuery.value}}</b>
       </div>
@@ -37,9 +38,9 @@ import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalR
   directives: [formDirectives, NavbarTemplate, Navbar, Content, SearchBar]
 })
 export class SearchBarPage {
-  constructor() {
-    var fb = new FormBuilder();
-    this.form = fb.group({
+  constructor(formBuilder: FormBuilder) {
+    //var fb = new FormBuilder();
+    this.form = formBuilder.group({
       searchQuery: ['', Validators.required]
     });
   }

ionic/components/app/util.scss

@@ -1,3 +1,7 @@
+@mixin calc($property, $expression) {
+  #{$property}: -webkit-calc(#{$expression});
+  #{$property}: calc(#{$expression});
+}
 
 .no-transition {
   transition: none !important;

ionic/components/search-bar/extensions/ios.scss

@@ -15,6 +15,16 @@ $search-bar-ios-background-size:      13px 13px !default;
   background: $search-bar-ios-background-color;
   @include hairline(bottom, $search-bar-ios-border-color);
 
+  .search-bar-icon {
+    width: 13px;
+    height: 13px;
+    @include svg-background-image($search-bar-ios-background-svg);
+    background-size: $search-bar-ios-background-size;
+    position: absolute;
+    left: 10px;
+    top: 8px;
+  }
+
   .search-bar-input {
     height: $search-bar-ios-input-height;
     padding: 0 28px;
@@ -28,9 +38,15 @@ $search-bar-ios-background-size:      13px 13px !default;
     background-repeat: no-repeat;
     background-position: 8px center;
 
-    @include svg-background-image($search-bar-ios-background-svg);
-    background-size: $search-bar-ios-background-size;
+    transition: all .2s ease;
+
+    @include calc(padding-left, "50% - 35px");
+
   }
 
+  .search-bar-input-container.focused {
+    .search-bar-input {
+      padding-left: 28px;
+    }
+  }
 }
-

ionic/components/search-bar/search-bar.js

@@ -8,18 +8,25 @@ import {IonicComponent} from 'ionic/config/component'
 
 @Component({
   selector: 'ion-search-bar',
-  properties: {
-    cancelText: 'cancel-text',
-    placeholderText: 'placeholder-text',
-    list: 'list',
-    query: 'query'
+  properties: [
+    'cancelText: cancel-text',
+    'placeholder: placeholder',
+    'list: list',
+    'query: query'
+  ]
+  /*
+  hostProperties: {
+    'panelId': 'attr.id',
   }
+  */
 })
 @View({
-  template: `<div class="search-bar-input-container">
-             <input (input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholderText">
-           </div>
-           <button class="button search-bar-cancel">{{ cancelText }}</button>`
+  template: `
+  <div class="search-bar-input-container" [class.focused]="isFocused">
+    <div class="search-bar-icon"></div>
+    <input (focus)="inputFocused()" (blur)="inputBlurred()" (input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">
+  </div>
+  <button class="button search-bar-cancel">{{ cancelText }}</button>`
 })
 export class SearchBar {
   constructor(
@@ -51,6 +58,13 @@ export class SearchBar {
     // TODO: Better way to do this?
     this.controlDirective._control().updateValue(event.target.value);
   }
+
+  inputFocused() {
+    this.isFocused = true;
+  }
+  inputBlurred() {
+    this.isFocused = false;
+  }
 }
 
 /*
@@ -86,7 +100,7 @@ new IonicComponent(SearchBar, {
         core: 'Cancel'
       }
     },
-    placeholderText: {
+    placeholder: {
       defaults: {
         ios: 'Search',
         android: 'Search',

ionic/components/search-bar/search-bar.scss

@@ -11,6 +11,7 @@ $search-bar-min-height:         44px !default;
   align-items: center;
   width: 100%;
   min-height: $search-bar-min-height;
+  line-height: 3rem;
 }
 
 .search-bar-input-container {