From 2d07eb9dd01782e81ee1bf2831cb1a29a032c451 Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Wed, 12 Aug 2015 15:19:04 +0300 Subject: [PATCH 1/5] font-size CSS support for search-bar + test --- CrossPlatformModules.csproj | 5 ++- .../search-bar-tests-native.android.ts | 10 +++++ .../search-bar/search-bar-tests-native.d.ts | 1 + .../search-bar/search-bar-tests-native.ios.ts | 10 +++++ apps/tests/ui/search-bar/search-bar-tests.ts | 21 +++++++++ ui/styling/stylers.android.ts | 44 +++++++++++++++++++ ui/styling/stylers.ios.ts | 32 ++++++++++++++ 7 files changed, 122 insertions(+), 1 deletion(-) diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj index ee277bb4c..dda79ba63 100644 --- a/CrossPlatformModules.csproj +++ b/CrossPlatformModules.csproj @@ -144,6 +144,9 @@ + + + @@ -1929,7 +1932,7 @@ False - + \ No newline at end of file diff --git a/apps/tests/ui/search-bar/search-bar-tests-native.android.ts b/apps/tests/ui/search-bar/search-bar-tests-native.android.ts index 920166053..a40519241 100644 --- a/apps/tests/ui/search-bar/search-bar-tests-native.android.ts +++ b/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; +} \ No newline at end of file diff --git a/apps/tests/ui/search-bar/search-bar-tests-native.d.ts b/apps/tests/ui/search-bar/search-bar-tests-native.d.ts index b825413cd..268a1587e 100644 --- a/apps/tests/ui/search-bar/search-bar-tests-native.d.ts +++ b/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; \ No newline at end of file diff --git a/apps/tests/ui/search-bar/search-bar-tests-native.ios.ts b/apps/tests/ui/search-bar/search-bar-tests-native.ios.ts index 30256c94f..4ad9e380b 100644 --- a/apps/tests/ui/search-bar/search-bar-tests-native.ios.ts +++ b/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 = searchBar.ios; + var sf = bar.valueForKey("_searchField"); + if (sf) { + return sf.font.pointSize; + } + + return undefined; +} + diff --git a/apps/tests/ui/search-bar/search-bar-tests.ts b/apps/tests/ui/search-bar/search-bar-tests.ts index ce076e461..c0a20e54f 100644 --- a/apps/tests/ui/search-bar/search-bar-tests.ts +++ b/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) { + var 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() { // // ### Searching diff --git a/ui/styling/stylers.android.ts b/ui/styling/stylers.android.ts index 685e01360..842e4ff19 100644 --- a/ui/styling/stylers.android.ts +++ b/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 = view.android; + var textView = SearchBarStyler._getSearchViewTextView(bar); + + var fontValue = 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 = 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 = 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 { diff --git a/ui/styling/stylers.ios.ts b/ui/styling/stylers.ios.ts index 1fd3a3aea..1851888d8 100644 --- a/ui/styling/stylers.ios.ts +++ b/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 = view.ios; + var sf = bar.valueForKey("_searchField"); + if (sf) { + sf.font = (newValue).getUIFont(newValue); + } + } + + private static resetFontInternalProperty(view: view.View, nativeValue: any) { + var bar = view.ios; + var sf = bar.valueForKey("_searchField"); + if (sf) { + sf.font = nativeValue; + } + } + + private static getNativeFontInternalValue(view: view.View): any { + var bar = view.ios; + var sf = 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"); } } From 951f565c210e7f067acc7b82602edf5de0059e9b Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Wed, 12 Aug 2015 16:13:35 +0300 Subject: [PATCH 2/5] ios code fixed --- apps/tests/ui/search-bar/search-bar-tests.ts | 7 +------ ui/styling/stylers.ios.ts | 2 +- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/apps/tests/ui/search-bar/search-bar-tests.ts b/apps/tests/ui/search-bar/search-bar-tests.ts index c0a20e54f..7164134f5 100644 --- a/apps/tests/ui/search-bar/search-bar-tests.ts +++ b/apps/tests/ui/search-bar/search-bar-tests.ts @@ -62,13 +62,8 @@ export var testSearchBarFontSize = function () { helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array) { var searchBar = views[0]; - // TODO: create IOS test once IOS support is working - if (!searchBar.android) { - return; - } - searchBar.text = ""; - searchBar.hint = "hint color test"; + searchBar.hint = "hint font-size test"; var expectedValue = 30; var actualValue; diff --git a/ui/styling/stylers.ios.ts b/ui/styling/stylers.ios.ts index 1851888d8..f338cae72 100644 --- a/ui/styling/stylers.ios.ts +++ b/ui/styling/stylers.ios.ts @@ -442,7 +442,7 @@ export class SearchBarStyler implements definition.stylers.Styler { var bar = view.ios; var sf = bar.valueForKey("_searchField"); if (sf) { - sf.font = (newValue).getUIFont(newValue); + sf.font = (newValue).getUIFont(nativeValue); } } From 4dbb90a2b49531060ef7e6f0fe51cd9442bc33d5 Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Wed, 12 Aug 2015 17:02:29 +0300 Subject: [PATCH 3/5] method fixed to return string --- apps/tests/ui/list-view/list-view-tests.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/tests/ui/list-view/list-view-tests.ts b/apps/tests/ui/list-view/list-view-tests.ts index c256f74dd..4b9b27f4b 100644 --- a/apps/tests/ui/list-view/list-view-tests.ts +++ b/apps/tests/ui/list-view/list-view-tests.ts @@ -646,16 +646,16 @@ function loadViewWithItemNumber(args: listViewModule.ItemEventData) { (args.view).text = "item " + args.index; } -function getTextFromNativeElementAt(listView: listViewModule.ListView, index: number): any { +function getTextFromNativeElementAt(listView: listViewModule.ListView, index: number): string { if (listView.android) { var nativeElement = listView.android.getChildAt(index); if (nativeElement instanceof android.view.ViewGroup) { return (((nativeElement).getChildAt(0))).getText(); } - return (nativeElement).getText(); + return (nativeElement).getText() + ""; } else if (listView.ios) { - return listView.ios.visibleCells()[index].contentView.subviews[0].text; + return listView.ios.visibleCells()[index].contentView.subviews[0].text + ""; } } From ef6b73a4a50a1d1737ae094fbc1a42c0b4bda6d1 Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Wed, 12 Aug 2015 17:28:49 +0300 Subject: [PATCH 4/5] more string fixes --- apps/tests/ui/list-view/list-view-tests.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/tests/ui/list-view/list-view-tests.ts b/apps/tests/ui/list-view/list-view-tests.ts index 4b9b27f4b..4ad3cfcab 100644 --- a/apps/tests/ui/list-view/list-view-tests.ts +++ b/apps/tests/ui/list-view/list-view-tests.ts @@ -650,7 +650,7 @@ function getTextFromNativeElementAt(listView: listViewModule.ListView, index: nu if (listView.android) { var nativeElement = listView.android.getChildAt(index); if (nativeElement instanceof android.view.ViewGroup) { - return (((nativeElement).getChildAt(0))).getText(); + return (((nativeElement).getChildAt(0))).getText() + ""; } return (nativeElement).getText() + ""; } From 6a42e6019caae8e600c5e4b06fa01dd3e9ae1284 Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Thu, 13 Aug 2015 11:40:30 +0300 Subject: [PATCH 5/5] valueForKey("_searchField") replaced --- .../search-bar/search-bar-tests-native.ios.ts | 3 +- ui/search-bar/search-bar.ios.ts | 38 +++++++++++-------- ui/styling/stylers.ios.ts | 21 +++------- 3 files changed, 30 insertions(+), 32 deletions(-) diff --git a/apps/tests/ui/search-bar/search-bar-tests-native.ios.ts b/apps/tests/ui/search-bar/search-bar-tests-native.ios.ts index 4ad9e380b..06e25c606 100644 --- a/apps/tests/ui/search-bar/search-bar-tests-native.ios.ts +++ b/apps/tests/ui/search-bar/search-bar-tests-native.ios.ts @@ -6,8 +6,7 @@ export function getNativeHintColor(searchBar: searchBarModule.SearchBar): colorM return undefined; } export function getNativeFontSize(searchBar: searchBarModule.SearchBar): number { - var bar = searchBar.ios; - var sf = bar.valueForKey("_searchField"); + var sf = (searchBar)._textField; if (sf) { return sf.font.pointSize; } diff --git a/ui/search-bar/search-bar.ios.ts b/ui/search-bar/search-bar.ios.ts index b43a3e406..58720e561 100644 --- a/ui/search-bar/search-bar.ios.ts +++ b/ui/search-bar/search-bar.ios.ts @@ -14,7 +14,7 @@ function onTextPropertyChanged(data: dependencyObservable.PropertyChangeData) { function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) { var bar = data.object; if (data.newValue instanceof color.Color) { - var tf = getUITextField(bar.ios); + var tf = (bar)._textField; if (tf) { tf.backgroundColor = data.newValue.ios; } @@ -24,15 +24,15 @@ function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.Pr (common.SearchBar.textFieldBackgroundColorProperty.metadata).onSetNativeValue = onTextFieldBackgroundColorPropertyChanged; function onTextFieldHintColorPropertyChanged(data: dependencyObservable.PropertyChangeData) { - // This should be in a Try Catch in case Apple eliminates which ever method in the future; - try { - // TODO; convert this code into NativeScript Code + // This should be in a Try Catch in case Apple eliminates which ever method in the future; + try { + // TODO; convert this code into NativeScript Code /* if ([textField respondsToSelector:@selector(setAttributedPlaceholder:)]) { textField.attributedPlaceholder = [[NSAttributedString alloc] initWithString:textField.placeholder attributes:@{NSForegroundColorAttributeName: [UIColor whiteColor]}]; } */ - } catch (Err) { - // Do Nothing - } + } catch (Err) { + // Do Nothing + } } (common.SearchBar.textFieldHintColorProperty.metadata).onSetNativeValue = onTextFieldHintColorPropertyChanged; @@ -52,14 +52,6 @@ function onHintPropertyChanged(data: dependencyObservable.PropertyChangeData) { (common.SearchBar.hintProperty.metadata).onSetNativeValue = onHintPropertyChanged; -function getUITextField(bar: UISearchBar): UITextField { - if (bar) { - return bar.valueForKey("_searchField"); - } - - return undefined; -} - global.moduleMerge(common, exports); class UISearchBarDelegateImpl extends NSObject implements UISearchBarDelegate { @@ -102,9 +94,11 @@ class UISearchBarDelegateImpl extends NSObject implements UISearchBarDelegate { export class SearchBar extends common.SearchBar { private _ios: UISearchBar; private _delegate; + public _textField: UITextField; constructor() { super(); + this._ios = new UISearchBar(); this._delegate = UISearchBarDelegateImpl.new().initWithOwner(this); @@ -113,6 +107,7 @@ export class SearchBar extends common.SearchBar { public onLoaded() { super.onLoaded(); this._ios.delegate = this._delegate; + this._textField = SearchBar.findTextField(this.ios); } public onUnloaded() { @@ -122,5 +117,18 @@ export class SearchBar extends common.SearchBar { get ios(): UISearchBar { return this._ios; + } + + private static findTextField(view: UIView) { + for (let i = 0, l = view.subviews.count; i < l; i++) { + let v: UIView = view.subviews[i]; + if (v instanceof UITextField) { + return v; + } else if (v.subviews.count > 0) { + return SearchBar.findTextField(v); + } + } + + return undefined; } } diff --git a/ui/styling/stylers.ios.ts b/ui/styling/stylers.ios.ts index f338cae72..610cf1367 100644 --- a/ui/styling/stylers.ios.ts +++ b/ui/styling/stylers.ios.ts @@ -409,9 +409,7 @@ export class SearchBarStyler implements definition.stylers.Styler { } private static getColorProperty(view: view.View): any { - var bar = view.ios; - - var sf = bar.valueForKey("_searchField"); + var sf = (view)._textField; if (sf) { return sf.textColor; } @@ -420,18 +418,14 @@ export class SearchBarStyler implements definition.stylers.Styler { } private static setColorProperty(view: view.View, newValue: any) { - var bar = view.ios; - - var sf = bar.valueForKey("_searchField"); + var sf = (view)._textField; if (sf) { sf.textColor = newValue; } } private static resetColorProperty(view: view.View, nativeValue: any) { - var bar = view.ios; - - var sf = bar.valueForKey("_searchField"); + var sf = (view)._textField; if (sf) { sf.textColor = nativeValue; } @@ -439,24 +433,21 @@ export class SearchBarStyler implements definition.stylers.Styler { // font private static setFontInternalProperty(view: view.View, newValue: any, nativeValue: any) { - var bar = view.ios; - var sf = bar.valueForKey("_searchField"); + var sf = (view)._textField; if (sf) { sf.font = (newValue).getUIFont(nativeValue); } } private static resetFontInternalProperty(view: view.View, nativeValue: any) { - var bar = view.ios; - var sf = bar.valueForKey("_searchField"); + var sf = (view)._textField; if (sf) { sf.font = nativeValue; } } private static getNativeFontInternalValue(view: view.View): any { - var bar = view.ios; - var sf = bar.valueForKey("_searchField"); + var sf = (view)._textField; if (sf) { return sf.font; }