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/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/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 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 096d28905..7332d0f4a 100644 --- a/ui/styling/style.ts +++ b/ui/styling/style.ts @@ -600,6 +600,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); 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..45f39dbe9 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 = newValue; + } + + private static resetColorProperty(view: view.View, nativeValue: any) { + var sw = view.ios; + sw.thumbTintColor = nativeValue; + } + + 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.onTintColor = view.backgroundColor.ios; + } + + private static resetBackgroundColorProperty(view: view.View, nativeValue: any) { + var sw = view.ios; + sw.onTintColor = nativeValue; + } + + private static getBackgroundColorProperty(view: view.View): any { + var sw = view.ios; + return sw.onTintColor; + } + + 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(); }