Merge pull request #149 from NativeScript/search-bar-styling

Search bar styling

apps/TelerikNEXT/main-page.xml

@@ -23,23 +23,31 @@
     </tsb:SideBar.slideContent>
 
     <tsb:SideBar.mainContent>
-      <GridLayout rows="auto, auto, *">
+      <GridLayout rows="auto, auto, auto, *">
 
-        <SegmentedBar selectedIndex="{{ selectedIndex }}" >
+        <SegmentedBar selectedIndex="{{ selectedIndex }}"  style="background-color: transparent;color: white;" selectedBackgroundColor="#fac950">
           <SegmentedBar.items>
             <SegmentedBarItem title="MAY 3" />
             <SegmentedBarItem title="MAY 4" />
             <SegmentedBarItem title="MAY 5" />
           </SegmentedBar.items>
         </SegmentedBar>
-        
-        <StackLayout style="background-color: #fac950;padding: 5;" row="1">
-          <SearchBar text="{{ search }}" />
-        </StackLayout>
 
-        <ListView items="{{ sessions }}" row="2">
+        <Label row="1" style="horizontal-align: center;margin: 5;">
+          <Label.formattedText>
+            <FormattedString fontSize="18" foregroundColor="#fac950">
+              <FormattedString.spans>
+                <Span text="WORKSHOPS" fontAttributes="Bold" />
+              </FormattedString.spans>
+            </FormattedString>
+          </Label.formattedText>
+        </Label>
+
+        <SearchBar text="{{ search }}" style="background-color: #fac950; color: #fac950;" textFieldBackgroundColor="white" row="2" />
+
+        <ListView items="{{ sessions }}" row="3">
           <ListView.itemTemplate>
-            <GridLayout columns="*, auto" style.backgroundColor="{{ canBeFavorited ? '#ffffff' : '#fffbf0' }}">
+            <GridLayout columns="*, auto">
               <StackLayout>
 
                 <Label>

ui/search-bar/search-bar-common.ts

@@ -2,6 +2,7 @@
 import view = require("ui/core/view");
 import dependencyObservable = require("ui/core/dependency-observable");
 import proxy = require("ui/core/proxy");
+import color = require("color");
 
 export module knownEvents {
     export var submit = "submit";
@@ -9,6 +10,7 @@ export module knownEvents {
 }
 
 export class SearchBar extends view.View implements definition.SearchBar {
+    public static textFieldBackgroundColorProperty = new dependencyObservable.Property("textFieldBackgroundColor", "SearchBar", new proxy.PropertyMetadata(undefined))
 
     public static textProperty = new dependencyObservable.Property(
         "text",
@@ -22,4 +24,12 @@ export class SearchBar extends view.View implements definition.SearchBar {
     set text(value: string) {
         this._setValue(SearchBar.textProperty, value);
     }
+
+    get textFieldBackgroundColor(): color.Color {
+        return this._getValue(SearchBar.textFieldBackgroundColorProperty);
+    }
+    set textFieldBackgroundColor(value: color.Color) {
+        this._setValue(SearchBar.textFieldBackgroundColorProperty,
+            value instanceof color.Color ? value : new color.Color(<any>value));
+    }
 } 

ui/search-bar/search-bar.android.ts

@@ -1,6 +1,7 @@
 import common = require("ui/search-bar/search-bar-common");
 import dependencyObservable = require("ui/core/dependency-observable");
 import proxy = require("ui/core/proxy");
+import color = require("color");
 
 var SEARCHTEXT = "searchText";
 var QUERY = "query";
@@ -18,6 +19,26 @@ function onTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
 // register the setNativeValue callbacks
 (<proxy.PropertyMetadata>common.SearchBar.textProperty.metadata).onSetNativeValue = onTextPropertyChanged;
 
+function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var bar = <SearchBar>data.object;
+    if (!bar.android) {
+        return;
+    }
+
+    if (data.newValue instanceof color.Color) {
+        _changeSearchViewBackgroundColor(bar.android, (<color.Color>data.newValue).android);
+    }
+}
+
+// register the setNativeValue callbacks
+(<proxy.PropertyMetadata>common.SearchBar.textFieldBackgroundColorProperty.metadata).onSetNativeValue = onTextFieldBackgroundColorPropertyChanged;
+
+function _changeSearchViewBackgroundColor(bar: android.widget.SearchView, color: number) {
+    var id = bar.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
+    var textView = <android.widget.TextView> bar.findViewById(id);
+    textView.setBackgroundColor(color);
+}
+
 // merge the exports of the common file with the exports of this file
 declare var exports;
 require("utils/module-merge").merge(common, exports);
@@ -28,6 +49,8 @@ export class SearchBar extends common.SearchBar {
     public _createUI() {
         this._android = new android.widget.SearchView(this._context);
 
+        this._android.setIconified(false);
+
         var that = new WeakRef(this);
         this._android.setOnQueryTextListener(new android.widget.SearchView.OnQueryTextListener({
             get owner() {
@@ -72,6 +95,10 @@ export class SearchBar extends common.SearchBar {
                 return true;
             }
         }));
+
+        if (this.textFieldBackgroundColor instanceof color.Color) {
+            _changeSearchViewBackgroundColor(this._android, this.textFieldBackgroundColor.android);
+        }
     }
 
     get android(): android.widget.SearchView {

ui/search-bar/search-bar.d.ts

@@ -5,6 +5,7 @@ declare module "ui/search-bar" {
     import view = require("ui/core/view");
     import observable = require("data/observable");
     import dependencyObservable = require("ui/core/dependency-observable");
+    import color = require("color");
 
     /**
      * Known event names.
@@ -30,6 +31,11 @@ declare module "ui/search-bar" {
          */
         public static textProperty: dependencyObservable.Property;
 
+        /**
+         * Gets or sets the TextField background color of the SearchBar component.
+         */
+        public static textFieldBackgroundColorProperty: dependencyObservable.Property;
+
         /**
          * Gets the native [android widget](http://developer.android.com/reference/android/widget/SearchView.html) that represents the user interface for this component. Valid only when running on Android OS.
          */
@@ -45,6 +51,11 @@ declare module "ui/search-bar" {
          */
         text: string;
 
+        /**
+         * Gets or sets the TextField background color of the SearchBar component.
+         */
+        textFieldBackgroundColor: color.Color;
+
         on(event: string, callback: (data: observable.EventData) => void);
 
         /**

ui/search-bar/search-bar.ios.ts

@@ -1,6 +1,7 @@
 import common = require("ui/search-bar/search-bar-common");
 import dependencyObservable = require("ui/core/dependency-observable");
 import proxy = require("ui/core/proxy");
+import color = require("color");
 
 function onTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var bar = <SearchBar>data.object;
@@ -10,6 +11,16 @@ function onTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
 // register the setNativeValue callbacks
 (<proxy.PropertyMetadata>common.SearchBar.textProperty.metadata).onSetNativeValue = onTextPropertyChanged;
 
+function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var bar = <SearchBar>data.object;
+    if (data.newValue instanceof color.Color) {
+        (<UITextField>bar.ios.valueForKey("_searchField")).backgroundColor = data.newValue.ios;
+    }
+}
+
+// register the setNativeValue callbacks
+(<proxy.PropertyMetadata>common.SearchBar.textFieldBackgroundColorProperty.metadata).onSetNativeValue = onTextFieldBackgroundColorPropertyChanged;
+
 // merge the exports of the common file with the exports of this file
 declare var exports;
 require("utils/module-merge").merge(common, exports);
@@ -28,7 +39,7 @@ class UISearchBarDelegateImpl extends NSObject implements UISearchBarDelegate {
         this._owner = owner;
         return this;
     }
-    
+
     public searchBarTextDidChange(searchBar: UISearchBar, searchText: string) {
         this._owner._onPropertyChangedFromNative(common.SearchBar.textProperty, searchText);
 
@@ -39,12 +50,12 @@ class UISearchBarDelegateImpl extends NSObject implements UISearchBarDelegate {
 
         this._searchText = searchText;
     }
-    
+
     public searchBarCancelButtonClicked(searchBar: UISearchBar) {
         searchBar.resignFirstResponder();
         this._owner._emit(common.knownEvents.clear);
     }
-    
+
     public searchBarSearchButtonClicked(searchBar: UISearchBar) {
         searchBar.resignFirstResponder();
         this._owner._emit(common.knownEvents.submit);
@@ -58,7 +69,7 @@ export class SearchBar extends common.SearchBar {
     constructor() {
         super();
         this._ios = new UISearchBar();
-
+ 
         this._delegate = UISearchBarDelegateImpl.new().initWithOwner(this);
         this._ios.delegate = this._delegate;
     }

ui/segmented-bar/segmented-bar.d.ts

@@ -40,6 +40,11 @@ declare module "ui/segmented-bar" {
          */
         public static selectedIndexProperty: dependencyObservable.Property;
 
+        /**
+         * Gets or sets the selected background color property of the SegmentedBar.
+         */
+        public static selectedBackgroundColorProperty: dependencyObservable.Property;
+
         /**
          * Gets or sets the items dependency property of the SegmentedBar.
          */

ui/styling/stylers.android.ts

@@ -239,6 +239,79 @@ export class SegmentedBarStyler implements definition.stylers.Styler {
     }
 }
 
+export class SearchBarStyler implements definition.stylers.Styler {
+
+    private static getBackgroundColorProperty(view: view.View): any {
+        var bar = <android.widget.SearchView>view.android;
+        return bar.getDrawingCacheBackgroundColor();
+    }
+
+    private static setBackgroundColorProperty(view: view.View, newValue: any) {
+        var bar = <android.widget.SearchView>view.android;
+        bar.setBackgroundColor(newValue);
+        SearchBarStyler._changeSearchViewPlateBackgroundColor(bar, newValue);
+    }
+
+    private static resetBackgroundColorProperty(view: view.View, nativeValue: any) {
+        var bar = <android.widget.SearchView>view.android;
+        bar.setBackgroundColor(nativeValue);
+        SearchBarStyler._changeSearchViewPlateBackgroundColor(bar, nativeValue);
+    }
+
+    private static getColorProperty(view: view.View): any {
+        var bar = <android.widget.SearchView>view.android;
+        var textView = SearchBarStyler._getSearchViewTextView(bar);
+
+        if (textView) {
+            return textView.getCurrentTextColor();
+        }
+
+        return undefined;
+    }
+
+    private static setColorProperty(view: view.View, newValue: any) {
+        var bar = <android.widget.SearchView>view.android;
+        SearchBarStyler._changeSearchViewTextColor(bar, newValue);
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: any) {
+        var bar = <android.widget.SearchView>view.android;
+        SearchBarStyler._changeSearchViewTextColor(bar, nativeValue);
+    }
+
+    public static registerHandlers() {
+        style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
+            SearchBarStyler.setBackgroundColorProperty,
+            SearchBarStyler.resetBackgroundColorProperty,
+            SearchBarStyler.getBackgroundColorProperty), "SearchBar");
+
+        style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
+            SearchBarStyler.setColorProperty,
+            SearchBarStyler.resetColorProperty,
+            SearchBarStyler.getColorProperty), "SearchBar");
+    }
+
+    private static _getSearchViewTextView(bar: android.widget.SearchView): android.widget.TextView {
+        var id = bar.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
+        return <android.widget.TextView> bar.findViewById(id);
+    }
+
+    private static _changeSearchViewTextColor(bar: android.widget.SearchView, color: number) {
+        var textView = SearchBarStyler._getSearchViewTextView(bar);
+        if (textView) {
+            textView.setTextColor(color);
+        }
+    }
+
+    private static _changeSearchViewPlateBackgroundColor(bar: android.widget.SearchView, color: number) {
+        var id = bar.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
+        var textView = <android.view.View> bar.findViewById(id);
+        if (textView) {
+            textView.setBackgroundColor(color);
+        }
+    }
+}
+
 export function _registerDefaultStylers() {
     style.registerNoStylingClass("Frame");
     DefaultStyler.registerHandlers();
@@ -246,4 +319,5 @@ export function _registerDefaultStylers() {
     TextViewStyler.registerHandlers();
     ActivityIndicatorStyler.registerHandlers();
     SegmentedBarStyler.registerHandlers();
+    SearchBarStyler.registerHandlers();
 }

ui/styling/stylers.ios.ts

@@ -489,6 +489,65 @@ export class SegmentedBarStyler implements definition.stylers.Styler {
     }
 }
 
+export class SearchBarStyler implements definition.stylers.Styler {
+
+    private static setBackgroundColorProperty(view: view.View, newValue: any) {
+        var bar = <UISearchBar>view.ios;
+        bar.barTintColor = newValue;
+    }
+
+    private static getBackgroundColorProperty(view: view.View): any {
+        var bar = <UISearchBar>view.ios;
+        return bar.barTintColor;
+    }
+
+    private static resetBackgroundColorProperty(view: view.View, nativeValue: any) {
+        var bar = <UISearchBar>view.ios;
+        bar.barTintColor = nativeValue;
+    }
+
+    private static getColorProperty(view: view.View): any {
+        var bar = <UISearchBar>view.ios;
+
+        var sf = <UITextField>bar.valueForKey("_searchField");
+        if (sf) {
+            return sf.textColor;
+        }
+
+        return undefined;
+    }
+
+    private static setColorProperty(view: view.View, newValue: any) {
+        var bar = <UISearchBar>view.ios;
+
+        var sf = <UITextField>bar.valueForKey("_searchField");
+        if (sf) {
+            sf.textColor = newValue;
+        }
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: any) {
+        var bar = <UISearchBar>view.ios;
+
+        var sf = <UITextField>bar.valueForKey("_searchField");
+        if (sf) {
+            sf.textColor = nativeValue;
+        }
+    }
+
+    public static registerHandlers() {
+        style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
+            SearchBarStyler.setBackgroundColorProperty,
+            SearchBarStyler.resetBackgroundColorProperty,
+            SearchBarStyler.getBackgroundColorProperty), "SearchBar");
+
+        style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
+            SearchBarStyler.setColorProperty,
+            SearchBarStyler.resetColorProperty,
+            SearchBarStyler.getColorProperty), "SearchBar");
+    }
+}
+
 export function _registerDefaultStylers() {
     style.registerNoStylingClass("Frame");
     DefaultStyler.registerHandlers();
@@ -497,4 +556,5 @@ export function _registerDefaultStylers() {
     TextFieldStyler.registerHandlers();
     TextViewStyler.registerHandlers();
     SegmentedBarStyler.registerHandlers();
+    SearchBarStyler.registerHandlers();
 }