From 176a2fb8a4396ebdc3ef1899c455d11b9cf0385f Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Mon, 2 Nov 2015 09:20:28 +0200 Subject: [PATCH] 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(); }