font-size CSS support for search-bar + test

CrossPlatformModules.csproj

@@ -144,6 +144,9 @@
     <TypeScriptCompile Include="apps\animations\model.ts" />
     <TypeScriptCompile Include="apps\orientation-demo\main-page.ts" />
     <TypeScriptCompile Include="apps\tests\ui\animation\animation-tests.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\search-bar\search-bar-tests-native.android.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\search-bar\search-bar-tests-native.d.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\search-bar\search-bar-tests-native.ios.ts" />
     <TypeScriptCompile Include="apps\tests\xml-declaration\inherited-base-page.ts" />
     <TypeScriptCompile Include="apps\tests\xml-declaration\inherited-page.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\pages\gesture-binding.ts" />
@@ -1929,7 +1932,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>

apps/tests/ui/search-bar/search-bar-tests-native.android.ts

@@ -1,5 +1,6 @@
 import colorModule = require("color");
 import searchBarModule = require("ui/search-bar");
+import utils = require("utils/utils");
 
 function getTextView(bar: android.widget.SearchView): android.widget.TextView {
     if (bar) {
@@ -20,3 +21,12 @@ export function getNativeHintColor(searchBar: searchBarModule.SearchBar): colorM
     }
     return undefined;
 }
+
+export function getNativeFontSize(searchBar: searchBarModule.SearchBar): number {
+    var textView = getTextView(searchBar.android);
+
+    if (textView) {
+        return textView.getTextSize() / utils.layout.getDisplayDensity();
+    }
+    return undefined;
+}

apps/tests/ui/search-bar/search-bar-tests-native.d.ts

@@ -3,3 +3,4 @@ import searchBarModule = require("ui/search-bar");
 import colorModule = require("color");
 
 export declare function getNativeHintColor(textView: searchBarModule.SearchBar): colorModule.Color;
+export declare function getNativeFontSize(searchBar: searchBarModule.SearchBar): number;

apps/tests/ui/search-bar/search-bar-tests-native.ios.ts

@@ -5,3 +5,13 @@ export function getNativeHintColor(searchBar: searchBarModule.SearchBar): colorM
     // TODO: This test needs to be created
     return undefined;
 }
+export function getNativeFontSize(searchBar: searchBarModule.SearchBar): number {
+    var bar = <UISearchBar>searchBar.ios;
+    var sf = <UITextField>bar.valueForKey("_searchField");
+    if (sf) {
+        return sf.font.pointSize;
+    }
+
+    return undefined;
+}
+

apps/tests/ui/search-bar/search-bar-tests.ts

@@ -58,6 +58,27 @@ export var testSearchBarHintColorAndroid = function () {
     });
 };
 
+export var testSearchBarFontSize = function () {
+    helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
+        var searchBar = <searchBarModule.SearchBar>views[0];
+
+        // TODO: create IOS test once IOS support is working
+        if (!searchBar.android) {
+            return;
+        }
+
+        searchBar.text = "";
+        searchBar.hint = "hint color test";
+
+        var expectedValue = 30;
+        var actualValue;
+
+        searchBar.style.fontSize = expectedValue;
+        actualValue = searchBarTestsNative.getNativeFontSize(searchBar);
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+};
+
 export function test_DummyTestForSnippetOnly() {
     // <snippet module="ui/search-bar" title="search-bar">
     // ### Searching

ui/styling/stylers.android.ts

@@ -475,6 +475,45 @@ export class SearchBarStyler implements definition.stylers.Styler {
         SearchBarStyler._changeSearchViewTextColor(bar, nativeValue);
     }
 
+    // font
+    private static setFontInternalProperty(view: view.View, newValue: any, nativeValue: any) {
+        var bar = <android.widget.SearchView>view.android;
+        var textView = SearchBarStyler._getSearchViewTextView(bar);
+
+        var fontValue = <font.Font>newValue;
+
+        var typeface = fontValue.getAndroidTypeface();
+        if (typeface) {
+            textView.setTypeface(typeface);
+        }
+        else {
+            textView.setTypeface(nativeValue.typeface);
+        }
+
+        if (fontValue.fontSize) {
+            textView.setTextSize(fontValue.fontSize);
+        }
+        else {
+            textView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, nativeValue.size);
+        }
+    }
+
+    private static resetFontInternalProperty(view: view.View, nativeValue: any) {
+        var bar = <android.widget.SearchView>view.android;
+        var textView = SearchBarStyler._getSearchViewTextView(bar);
+        textView.setTypeface(nativeValue.typeface);
+        textView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, nativeValue.size);
+    }
+
+    private static getNativeFontInternalValue(view: view.View): any {
+        var bar = <android.widget.SearchView>view.android;
+        var textView = SearchBarStyler._getSearchViewTextView(bar);
+        return {
+            typeface: textView.getTypeface(),
+            size: textView.getTextSize()
+        };
+    }
+
     public static registerHandlers() {
         style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
             SearchBarStyler.setBackgroundColorProperty,
@@ -485,6 +524,11 @@ export class SearchBarStyler implements definition.stylers.Styler {
             SearchBarStyler.setColorProperty,
             SearchBarStyler.resetColorProperty,
             SearchBarStyler.getColorProperty), "SearchBar");
+
+        style.registerHandler(style.fontInternalProperty, new stylersCommon.StylePropertyChangedHandler(
+            SearchBarStyler.setFontInternalProperty,
+            SearchBarStyler.resetFontInternalProperty,
+            SearchBarStyler.getNativeFontInternalValue), "SearchBar");
     }
 
     private static _getSearchViewTextView(bar: android.widget.SearchView): android.widget.TextView {

ui/styling/stylers.ios.ts

@@ -437,6 +437,33 @@ export class SearchBarStyler implements definition.stylers.Styler {
         }
     }
 
+    // font
+    private static setFontInternalProperty(view: view.View, newValue: any, nativeValue: any) {
+        var bar = <UISearchBar>view.ios;
+        var sf = <UITextField>bar.valueForKey("_searchField");
+        if (sf) {
+            sf.font = (<font.Font>newValue).getUIFont(newValue);
+        }
+    }
+
+    private static resetFontInternalProperty(view: view.View, nativeValue: any) {
+        var bar = <UISearchBar>view.ios;
+        var sf = <UITextField>bar.valueForKey("_searchField");
+        if (sf) {
+            sf.font = nativeValue;
+        }
+    }
+
+    private static getNativeFontInternalValue(view: view.View): any {
+        var bar = <UISearchBar>view.ios;
+        var sf = <UITextField>bar.valueForKey("_searchField");
+        if (sf) {
+            return sf.font;
+        }
+
+        return undefined;
+    }
+
     public static registerHandlers() {
         style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
             SearchBarStyler.setBackgroundColorProperty,
@@ -447,6 +474,11 @@ export class SearchBarStyler implements definition.stylers.Styler {
             SearchBarStyler.setColorProperty,
             SearchBarStyler.resetColorProperty,
             SearchBarStyler.getColorProperty), "SearchBar");
+
+        style.registerHandler(style.fontInternalProperty, new stylersCommon.StylePropertyChangedHandler(
+            SearchBarStyler.setFontInternalProperty,
+            SearchBarStyler.resetFontInternalProperty,
+            SearchBarStyler.getNativeFontInternalValue), "SearchBar");
     }
 }