From 129c305942180b8dab70219fb600ff851a8e7bba Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Wed, 21 Oct 2015 13:20:48 +0300 Subject: [PATCH 1/4] _boundsChanged method added --- ui/core/view.ios.ts | 5 +---- ui/styling/style.d.ts | 1 + ui/styling/style.ts | 4 ++++ 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/ui/core/view.ios.ts b/ui/core/view.ios.ts index 54fdb1b14..608dfac9a 100644 --- a/ui/core/view.ios.ts +++ b/ui/core/view.ios.ts @@ -274,10 +274,7 @@ export class View extends viewCommon.View { } private _onBoundsChanged() { - var bgColor = background.ios.createBackgroundUIColor(this); - if (bgColor) { - this._nativeView.backgroundColor = bgColor; - } + this.style._boundsChanged(); } } diff --git a/ui/styling/style.d.ts b/ui/styling/style.d.ts index 7695725b8..256cabe7e 100644 --- a/ui/styling/style.d.ts +++ b/ui/styling/style.d.ts @@ -71,6 +71,7 @@ declare module "ui/styling/style" { public _syncNativeProperties(): void; public _inheritStyleProperty(property: Property): void; public _inheritStyleProperties(): void; + public _boundsChanged(): void; } export function registerHandler(property: Property, handler: styling.stylers.StylePropertyChangedHandler, className?: string); diff --git a/ui/styling/style.ts b/ui/styling/style.ts index ceaf34822..78b7c3ce4 100644 --- a/ui/styling/style.ts +++ b/ui/styling/style.ts @@ -599,6 +599,10 @@ export class Style extends DependencyObservable implements styling.Style { }); } + public _boundsChanged() { + this._applyProperty(backgroundInternalProperty, this._getValue(backgroundInternalProperty)); + } + private _applyProperty(property: Property, newValue: any) { this._applyStyleProperty(property, newValue); From 433bc020ad0283f41f4d683fbd258f1931e19f43 Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Wed, 21 Oct 2015 17:14:57 +0300 Subject: [PATCH 2/4] SwitchStylers added --- ui/styling/stylers.android.ts | 47 ++++++++++++++++++++++++++++++++++ ui/styling/stylers.ios.ts | 48 +++++++++++++++++++++++++++++++++++ 2 files changed, 95 insertions(+) diff --git a/ui/styling/stylers.android.ts b/ui/styling/stylers.android.ts index a47ee28cd..5dca5419b 100644 --- a/ui/styling/stylers.android.ts +++ b/ui/styling/stylers.android.ts @@ -550,6 +550,52 @@ export class ProgressStyler implements definition.stylers.Styler { } } +export class SwitchStyler implements definition.stylers.Styler { + private static setColorProperty(view: view.View, newValue: any) { + var sw = view._nativeView; + + var drawable = sw.getThumbDrawable(); + if (drawable) { + drawable.setColorFilter(newValue, android.graphics.PorterDuff.Mode.SRC_IN); + } + } + + private static resetColorProperty(view: view.View, nativeValue: number) { + var sw = view._nativeView; + // Do nothing. + } + + private static setBackgroundAndBorderProperty(view: view.View, newValue: any) { + var sw = view._nativeView; + + var drawable = sw.getTrackDrawable(); + if (drawable) { + drawable.setColorFilter(newValue, android.graphics.PorterDuff.Mode.SRC_IN); + } + } + + private static resetBackgroundAndBorderProperty(view: view.View, nativeValue: number) { + var sw = view._nativeView; + // Do nothing. + } + + public static registerHandlers() { + style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler( + SwitchStyler.setColorProperty, + SwitchStyler.resetColorProperty), "Switch"); + + var borderHandler = new stylersCommon.StylePropertyChangedHandler( + SwitchStyler.setBackgroundAndBorderProperty, + SwitchStyler.resetBackgroundAndBorderProperty); + + style.registerHandler(style.backgroundColorProperty, borderHandler, "Switch"); + style.registerHandler(style.borderWidthProperty, borderHandler, "Switch"); + style.registerHandler(style.borderColorProperty, borderHandler, "Switch"); + style.registerHandler(style.borderRadiusProperty, borderHandler, "Switch"); + style.registerHandler(style.backgroundInternalProperty, borderHandler, "Switch"); + } +} + export class SearchBarStyler implements definition.stylers.Styler { private static getBackgroundColorProperty(view: view.View): any { @@ -749,4 +795,5 @@ export function _registerDefaultStylers() { ActionBarStyler.registerHandlers(); TabViewStyler.registerHandlers(); ProgressStyler.registerHandlers(); + SwitchStyler.registerHandlers(); } diff --git a/ui/styling/stylers.ios.ts b/ui/styling/stylers.ios.ts index 917eba377..830983b4c 100644 --- a/ui/styling/stylers.ios.ts +++ b/ui/styling/stylers.ios.ts @@ -439,6 +439,53 @@ export class ProgressStyler implements definition.stylers.Styler { } } +export class SwitchStyler implements definition.stylers.Styler { + private static setColorProperty(view: view.View, newValue: any) { + var sw = view.ios; + sw.thumbTintColor = UIColor.alloc().initWithCGColor((newValue).CGColor); + } + + private static resetColorProperty(view: view.View, nativeValue: any) { + var sw = view.ios; + sw.thumbTintColor = UIColor.alloc().initWithCGColor((nativeValue).CGColor); + } + + private static getNativeColorValue(view: view.View): any { + var sw = view.ios; + return sw.thumbTintColor; + } + + private static setBackgroundColorProperty(view: view.View, newValue: any) { + var sw = view.ios; + sw.tintColor = UIColor.alloc().initWithCGColor((newValue).CGColor); + } + + private static resetBackgroundColorProperty(view: view.View, nativeValue: any) { + var sw = view.ios; + sw.tintColor = UIColor.alloc().initWithCGColor((nativeValue).CGColor); + } + + private static getBackgroundColorProperty(view: view.View): any { + var sw = view.ios; + return sw.tintColor; + } + + public static registerHandlers() { + style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler( + SwitchStyler.setColorProperty, + SwitchStyler.resetColorProperty, + SwitchStyler.getNativeColorValue), "Switch"); + + var bkgHandler = new stylersCommon.StylePropertyChangedHandler( + SwitchStyler.setBackgroundColorProperty, + SwitchStyler.resetBackgroundColorProperty, + SwitchStyler.getBackgroundColorProperty); + + style.registerHandler(style.backgroundColorProperty, bkgHandler, "Switch"); + style.registerHandler(style.backgroundInternalProperty, bkgHandler, "Switch"); + } +} + export class SearchBarStyler implements definition.stylers.Styler { private static setBackgroundColorProperty(view: view.View, newValue: any) { @@ -593,4 +640,5 @@ export function _registerDefaultStylers() { ActionBarStyler.registerHandlers(); TabViewStyler.registerHandlers(); ProgressStyler.registerHandlers(); + SwitchStyler.registerHandlers(); } From 5b543deec436027e2b70abd06e65f1321d648a6f Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Thu, 22 Oct 2015 10:42:20 +0300 Subject: [PATCH 3/4] tests added --- apps/tests/ui/switch/switch-tests.ts | 27 +++++++++++++++++++++++++++ ui/styling/stylers.ios.ts | 10 +++++----- 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/apps/tests/ui/switch/switch-tests.ts b/apps/tests/ui/switch/switch-tests.ts index efeb8ba71..964a7faa9 100644 --- a/apps/tests/ui/switch/switch-tests.ts +++ b/apps/tests/ui/switch/switch-tests.ts @@ -3,6 +3,8 @@ import helper = require("../helper"); import viewModule = require("ui/core/view"); import bindable = require("ui/core/bindable"); import observable = require("data/observable"); +import color = require("color"); +import platform = require("platform"); //  // # Switch // Using a switch requires the Switch module. @@ -51,6 +53,31 @@ export function test_default_native_values() { helper.buildUIAndRunTest(mySwitch, testAction); } +// Uncomment this when find way to check android Drawable color set by setColorFilter() method. +if (platform.device.os === platform.platformNames.ios) { + exports.test_set_color = function () { + var mySwitch = new switchModule.Switch(); + mySwitch.color = new color.Color("red"); + + function testAction(views: Array) { + TKUnit.assert(mySwitch.color.ios.isEqual(mySwitch.ios.thumbTintColor), "mySwitch.color"); + }; + + helper.buildUIAndRunTest(mySwitch, testAction); + } + + exports.test_set_backgroundColor = function () { + var mySwitch = new switchModule.Switch(); + mySwitch.backgroundColor = new color.Color("red"); + + function testAction(views: Array) { + TKUnit.assert(CGColorEqualToColor(mySwitch.backgroundColor.ios.CGColor, mySwitch.ios.onTintColor.CGColor), "mySwitch.color"); + }; + + helper.buildUIAndRunTest(mySwitch, testAction); + } +} + export function test_set_TNS_checked_updates_native_checked() { var mySwitch = new switchModule.Switch(); function testAction(views: Array) { diff --git a/ui/styling/stylers.ios.ts b/ui/styling/stylers.ios.ts index 830983b4c..45f39dbe9 100644 --- a/ui/styling/stylers.ios.ts +++ b/ui/styling/stylers.ios.ts @@ -442,12 +442,12 @@ export class ProgressStyler implements definition.stylers.Styler { export class SwitchStyler implements definition.stylers.Styler { private static setColorProperty(view: view.View, newValue: any) { var sw = view.ios; - sw.thumbTintColor = UIColor.alloc().initWithCGColor((newValue).CGColor); + sw.thumbTintColor = newValue; } private static resetColorProperty(view: view.View, nativeValue: any) { var sw = view.ios; - sw.thumbTintColor = UIColor.alloc().initWithCGColor((nativeValue).CGColor); + sw.thumbTintColor = nativeValue; } private static getNativeColorValue(view: view.View): any { @@ -457,17 +457,17 @@ export class SwitchStyler implements definition.stylers.Styler { private static setBackgroundColorProperty(view: view.View, newValue: any) { var sw = view.ios; - sw.tintColor = UIColor.alloc().initWithCGColor((newValue).CGColor); + sw.onTintColor = view.backgroundColor.ios; } private static resetBackgroundColorProperty(view: view.View, nativeValue: any) { var sw = view.ios; - sw.tintColor = UIColor.alloc().initWithCGColor((nativeValue).CGColor); + sw.onTintColor = nativeValue; } private static getBackgroundColorProperty(view: view.View): any { var sw = view.ios; - return sw.tintColor; + return sw.onTintColor; } public static registerHandlers() { From b1c330be65ac7ef3abff144c587a7a2bb86be79e Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Thu, 22 Oct 2015 11:29:48 +0300 Subject: [PATCH 4/4] test page added --- CrossPlatformModules.csproj | 4 +++- apps/ui-tests-app/pages/switchandprogress.xml | 6 ++++++ 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 apps/ui-tests-app/pages/switchandprogress.xml diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj index 97a4249d0..aa4ce6d81 100644 --- a/CrossPlatformModules.csproj +++ b/CrossPlatformModules.csproj @@ -1006,6 +1006,7 @@ + @@ -1014,6 +1015,7 @@ + @@ -1998,7 +2000,7 @@ False - + \ No newline at end of file diff --git a/apps/ui-tests-app/pages/switchandprogress.xml b/apps/ui-tests-app/pages/switchandprogress.xml new file mode 100644 index 000000000..f7e305af9 --- /dev/null +++ b/apps/ui-tests-app/pages/switchandprogress.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file