From 176a2fb8a4396ebdc3ef1899c455d11b9cf0385f Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Mon, 2 Nov 2015 09:20:28 +0200 Subject: [PATCH 1/4] slider css color and background-color support fixed --- apps/tests/ui/slider/slider-tests.ts | 28 ++++++++++++++++ ui/styling/stylers.android.ts | 39 ++++++++++++++++++++++ ui/styling/stylers.ios.ts | 48 ++++++++++++++++++++++++++-- 3 files changed, 113 insertions(+), 2 deletions(-) diff --git a/apps/tests/ui/slider/slider-tests.ts b/apps/tests/ui/slider/slider-tests.ts index ab3b117a8..d8b06c9c6 100644 --- a/apps/tests/ui/slider/slider-tests.ts +++ b/apps/tests/ui/slider/slider-tests.ts @@ -4,6 +4,9 @@ import viewModule = require("ui/core/view"); import pagesModule = require("ui/page"); import bindable = require("ui/core/bindable"); import observable = require("data/observable"); +import color = require("color"); +import platform = require("platform"); + //  // # Slider // Using a slider requires the Slider module. @@ -84,6 +87,31 @@ export function test_set_native_value_triggers_propertyChanged() { helper.buildUIAndRunTest(slider, 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 slider = new sliderModule.Slider(); + slider.color = new color.Color("red"); + + function testAction(views: Array) { + TKUnit.assertEqual(slider.color.ios.CGColor, slider.ios.thumbTintColor.CGColor, "slider.color"); + }; + + helper.buildUIAndRunTest(slider, testAction); + } + + exports.test_set_backgroundColor = function () { + var slider = new sliderModule.Slider(); + slider.backgroundColor = new color.Color("red"); + + function testAction(views: Array) { + TKUnit.assertEqual(slider.backgroundColor.ios.CGColor, slider.ios.minimumTrackTintColor.CGColor, "slider.backgroundColor"); + }; + + helper.buildUIAndRunTest(slider, testAction); + } +} + export function test_default_TNS_values() { var slider = new sliderModule.Slider(); TKUnit.assertEqual(slider.value, 0, "Default slider.value"); diff --git a/ui/styling/stylers.android.ts b/ui/styling/stylers.android.ts index 147f9bf8c..5fcbccb14 100644 --- a/ui/styling/stylers.android.ts +++ b/ui/styling/stylers.android.ts @@ -612,6 +612,44 @@ export class ProgressStyler implements definition.stylers.Styler { } } +export class SliderStyler implements definition.stylers.Styler { + private static setColorProperty(view: view.View, newValue: any) { + var bar = view._nativeView; + bar.getThumb().setColorFilter(newValue, android.graphics.PorterDuff.Mode.SRC_IN); + } + + private static resetColorProperty(view: view.View, nativeValue: number) { + var bar = view._nativeView; + bar.getThumb().clearColorFilter(); + } + + private static setBackgroundAndBorderProperty(view: view.View, newValue: any) { + var bar = view._nativeView; + bar.getProgressDrawable().setColorFilter(newValue, android.graphics.PorterDuff.Mode.SRC_IN); + } + + private static resetBackgroundAndBorderProperty(view: view.View, nativeValue: number) { + var bar = view._nativeView; + // Do nothing. + } + + public static registerHandlers() { + style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler( + SliderStyler.setColorProperty, + SliderStyler.resetColorProperty), "Slider"); + + var borderHandler = new stylersCommon.StylePropertyChangedHandler( + SliderStyler.setBackgroundAndBorderProperty, + SliderStyler.resetBackgroundAndBorderProperty); + + style.registerHandler(style.backgroundColorProperty, borderHandler, "Slider"); + style.registerHandler(style.borderWidthProperty, borderHandler, "Slider"); + style.registerHandler(style.borderColorProperty, borderHandler, "Slider"); + style.registerHandler(style.borderRadiusProperty, borderHandler, "Slider"); + style.registerHandler(style.backgroundInternalProperty, borderHandler, "Slider"); + } +} + export class SwitchStyler implements definition.stylers.Styler { private static setColorProperty(view: view.View, newValue: any) { var sw = view._nativeView; @@ -859,4 +897,5 @@ export function _registerDefaultStylers() { TabViewStyler.registerHandlers(); ProgressStyler.registerHandlers(); SwitchStyler.registerHandlers(); + SliderStyler.registerHandlers(); } diff --git a/ui/styling/stylers.ios.ts b/ui/styling/stylers.ios.ts index 3009aa246..64a17b9b1 100644 --- a/ui/styling/stylers.ios.ts +++ b/ui/styling/stylers.ios.ts @@ -500,7 +500,6 @@ export class SegmentedBarStyler implements definition.stylers.Styler { } export class ActivityIndicatorStyler implements definition.stylers.Styler { - //Text color methods private static setColorProperty(view: view.View, newValue: any) { var bar = view.ios; bar.color = newValue; @@ -515,7 +514,6 @@ export class ActivityIndicatorStyler implements definition.stylers.Styler { var bar = view.ios; return bar.color; } - public static registerHandlers() { style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler( ActivityIndicatorStyler.setColorProperty, @@ -524,6 +522,51 @@ export class ActivityIndicatorStyler implements definition.stylers.Styler { } } +export class SliderStyler implements definition.stylers.Styler { + private static setColorProperty(view: view.View, newValue: any) { + var bar = view.ios; + bar.thumbTintColor = newValue; + } + + private static resetColorProperty(view: view.View, nativeValue: any) { + var bar = view.ios; + bar.thumbTintColor = nativeValue; + } + + private static getNativeColorValue(view: view.View): any { + var bar = view.ios; + return bar.thumbTintColor; + } + + private static setBackgroundColorProperty(view: view.View, newValue: any) { + var bar = view.ios; + bar.minimumTrackTintColor = newValue; + } + + private static resetBackgroundColorProperty(view: view.View, nativeValue: any) { + var bar = view.ios; + bar.minimumTrackTintColor = nativeValue; + } + + private static getBackgroundColorProperty(view: view.View): any { + var bar = view.ios; + return bar.minimumTrackTintColor; + } + + public static registerHandlers() { + SliderStyler.setColorProperty, + SliderStyler.resetColorProperty, + SliderStyler.getNativeColorValue), "Slider"); + + style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler( + SliderStyler.setBackgroundColorProperty, + SliderStyler.resetBackgroundColorProperty, + SliderStyler.getBackgroundColorProperty), "Slider"); + + style.registerHandler(style.backgroundInternalProperty, ignorePropertyHandler, "Slider"); + } +} + export class ProgressStyler implements definition.stylers.Styler { //Text color methods private static setColorProperty(view: view.View, newValue: any) { @@ -800,4 +843,5 @@ export function _registerDefaultStylers() { SwitchStyler.registerHandlers(); TextFieldStyler.registerHandlers(); ActivityIndicatorStyler.registerHandlers(); + SliderStyler.registerHandlers(); } From eb57f446332277680d5e278f5c8b879a2374e0a1 Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Mon, 2 Nov 2015 10:54:22 +0200 Subject: [PATCH 2/4] handlers fixed --- ui/styling/stylers.android.ts | 47 +++++++++++++++++++---------------- 1 file changed, 26 insertions(+), 21 deletions(-) diff --git a/ui/styling/stylers.android.ts b/ui/styling/stylers.android.ts index 5fcbccb14..13676682c 100644 --- a/ui/styling/stylers.android.ts +++ b/ui/styling/stylers.android.ts @@ -13,6 +13,14 @@ var btn; global.moduleMerge(stylersCommon, exports); +var ignorePropertyHandler = new stylersCommon.StylePropertyChangedHandler( + (view, val) => { + // empty + }, + (view, val) => { + // empty + }); + var _defaultBackgrounds = new Map(); function onBackgroundOrBorderPropertyChanged(v: view.View) { @@ -600,15 +608,14 @@ export class ProgressStyler implements definition.stylers.Styler { ProgressStyler.setColorProperty, ProgressStyler.resetColorProperty), "Progress"); - var borderHandler = new stylersCommon.StylePropertyChangedHandler( + style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler( ProgressStyler.setBackgroundAndBorderProperty, - ProgressStyler.resetBackgroundAndBorderProperty); + ProgressStyler.resetBackgroundAndBorderProperty), "Progress"); - style.registerHandler(style.backgroundColorProperty, borderHandler, "Progress"); - style.registerHandler(style.borderWidthProperty, borderHandler, "Progress"); - style.registerHandler(style.borderColorProperty, borderHandler, "Progress"); - style.registerHandler(style.borderRadiusProperty, borderHandler, "Progress"); - style.registerHandler(style.backgroundInternalProperty, borderHandler, "Progress"); + style.registerHandler(style.borderWidthProperty, ignorePropertyHandler, "Progress"); + style.registerHandler(style.borderColorProperty, ignorePropertyHandler, "Progress"); + style.registerHandler(style.borderRadiusProperty, ignorePropertyHandler, "Progress"); + style.registerHandler(style.backgroundInternalProperty, ignorePropertyHandler, "Progress"); } } @@ -638,15 +645,14 @@ export class SliderStyler implements definition.stylers.Styler { SliderStyler.setColorProperty, SliderStyler.resetColorProperty), "Slider"); - var borderHandler = new stylersCommon.StylePropertyChangedHandler( + style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler( SliderStyler.setBackgroundAndBorderProperty, - SliderStyler.resetBackgroundAndBorderProperty); + SliderStyler.resetBackgroundAndBorderProperty), "Slider"); - style.registerHandler(style.backgroundColorProperty, borderHandler, "Slider"); - style.registerHandler(style.borderWidthProperty, borderHandler, "Slider"); - style.registerHandler(style.borderColorProperty, borderHandler, "Slider"); - style.registerHandler(style.borderRadiusProperty, borderHandler, "Slider"); - style.registerHandler(style.backgroundInternalProperty, borderHandler, "Slider"); + style.registerHandler(style.borderWidthProperty, ignorePropertyHandler, "Slider"); + style.registerHandler(style.borderColorProperty, ignorePropertyHandler, "Slider"); + style.registerHandler(style.borderRadiusProperty, ignorePropertyHandler, "Slider"); + style.registerHandler(style.backgroundInternalProperty, ignorePropertyHandler, "Slider"); } } @@ -684,15 +690,14 @@ export class SwitchStyler implements definition.stylers.Styler { SwitchStyler.setColorProperty, SwitchStyler.resetColorProperty), "Switch"); - var borderHandler = new stylersCommon.StylePropertyChangedHandler( + style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler( SwitchStyler.setBackgroundAndBorderProperty, - SwitchStyler.resetBackgroundAndBorderProperty); + SwitchStyler.resetBackgroundAndBorderProperty), "Switch"); - 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"); + style.registerHandler(style.borderWidthProperty, ignorePropertyHandler, "Switch"); + style.registerHandler(style.borderColorProperty, ignorePropertyHandler, "Switch"); + style.registerHandler(style.borderRadiusProperty, ignorePropertyHandler, "Switch"); + style.registerHandler(style.backgroundInternalProperty, ignorePropertyHandler, "Switch"); } } From 7851ac5c3c4f8a87d090f4626834ac1bf4f00a43 Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Mon, 2 Nov 2015 12:01:42 +0200 Subject: [PATCH 3/4] styler fixed --- ui/styling/stylers.ios.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/ui/styling/stylers.ios.ts b/ui/styling/stylers.ios.ts index 64a17b9b1..00e4d913a 100644 --- a/ui/styling/stylers.ios.ts +++ b/ui/styling/stylers.ios.ts @@ -514,6 +514,7 @@ export class ActivityIndicatorStyler implements definition.stylers.Styler { var bar = view.ios; return bar.color; } + public static registerHandlers() { style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler( ActivityIndicatorStyler.setColorProperty, @@ -554,9 +555,11 @@ export class SliderStyler implements definition.stylers.Styler { } public static registerHandlers() { - SliderStyler.setColorProperty, - SliderStyler.resetColorProperty, - SliderStyler.getNativeColorValue), "Slider"); + style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler( + SliderStyler.setColorProperty, + SliderStyler.resetColorProperty, + SliderStyler.getNativeColorValue), "Slider"); + style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler( SliderStyler.setBackgroundColorProperty, From c226e322f4ed04c9cea050cf941d816db6e042eb Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Mon, 2 Nov 2015 12:04:24 +0200 Subject: [PATCH 4/4] tslint fixed --- ui/styling/stylers.ios.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/styling/stylers.ios.ts b/ui/styling/stylers.ios.ts index 00e4d913a..08b413e8b 100644 --- a/ui/styling/stylers.ios.ts +++ b/ui/styling/stylers.ios.ts @@ -560,7 +560,6 @@ export class SliderStyler implements definition.stylers.Styler { SliderStyler.resetColorProperty, SliderStyler.getNativeColorValue), "Slider"); - style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler( SliderStyler.setBackgroundColorProperty, SliderStyler.resetBackgroundColorProperty,