From 384ba9c9658c55206d5ec6bee5a2245e319a4c03 Mon Sep 17 00:00:00 2001 From: Vladimir Enchev Date: Tue, 20 Oct 2015 12:53:48 +0300 Subject: [PATCH] progress css support for color and backgroundColor added --- apps/tests/ui/progress/progress-tests.ts | 28 +++++++++++++++ ui/styling/stylers.android.ts | 46 ++++++++++++++++++++++++ ui/styling/stylers.ios.ts | 46 ++++++++++++++++++++++++ 3 files changed, 120 insertions(+) diff --git a/apps/tests/ui/progress/progress-tests.ts b/apps/tests/ui/progress/progress-tests.ts index 9924edbf8..0aa0c3fd4 100644 --- a/apps/tests/ui/progress/progress-tests.ts +++ b/apps/tests/ui/progress/progress-tests.ts @@ -2,6 +2,9 @@ import helper = require("../helper"); import viewModule = require("ui/core/view"); import observable = require("data/observable"); +import color = require("color"); +import platform = require("platform"); + //  // # Progress // Using the progress view requires the Progress module. @@ -70,6 +73,31 @@ export function test_set_value_greater_than_max_should_set_value_to_max() { helper.buildUIAndRunTest(progress, 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 progress = new progressModule.Progress(); + progress.color = new color.Color("red"); + + function testAction(views: Array) { + TKUnit.assertEqual(progress.color.ios.CGColor, progress.ios.progressTintColor.CGColor, "progress.color"); + }; + + helper.buildUIAndRunTest(progress, testAction); + } + + exports.test_set_backgroundColor = function () { + var progress = new progressModule.Progress(); + progress.backgroundColor = new color.Color("red"); + + function testAction(views: Array) { + TKUnit.assertEqual(progress.backgroundColor.ios.CGColor, progress.ios.trackTintColor.CGColor, "progress.color"); + }; + + helper.buildUIAndRunTest(progress, testAction); + } +} + export function test_set_maxValue_should_adjust_value() { var progress = new progressModule.Progress(); diff --git a/ui/styling/stylers.android.ts b/ui/styling/stylers.android.ts index f75924612..a47ee28cd 100644 --- a/ui/styling/stylers.android.ts +++ b/ui/styling/stylers.android.ts @@ -505,6 +505,51 @@ export class SegmentedBarStyler implements definition.stylers.Styler { } } +export class ProgressStyler implements definition.stylers.Styler { + private static setColorProperty(view: view.View, newValue: any) { + var bar = view._nativeView; + bar.getProgressDrawable().setColorFilter(newValue, android.graphics.PorterDuff.Mode.SRC_IN); + } + + private static resetColorProperty(view: view.View, nativeValue: number) { + var bar = view._nativeView; + bar.getProgressDrawable().clearColorFilter(); + } + + private static setBackgroundAndBorderProperty(view: view.View, newValue: any) { + var bar = view._nativeView; + var progressDrawable = bar.getProgressDrawable(); + + if (progressDrawable.getNumberOfLayers && progressDrawable.getNumberOfLayers() > 0) { + var backgroundDrawable = progressDrawable.getDrawable(0); + if (backgroundDrawable) { + backgroundDrawable.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( + ProgressStyler.setColorProperty, + ProgressStyler.resetColorProperty), "Progress"); + + var borderHandler = new stylersCommon.StylePropertyChangedHandler( + ProgressStyler.setBackgroundAndBorderProperty, + ProgressStyler.resetBackgroundAndBorderProperty); + + 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"); + } +} + export class SearchBarStyler implements definition.stylers.Styler { private static getBackgroundColorProperty(view: view.View): any { @@ -703,4 +748,5 @@ export function _registerDefaultStylers() { SearchBarStyler.registerHandlers(); ActionBarStyler.registerHandlers(); TabViewStyler.registerHandlers(); + ProgressStyler.registerHandlers(); } diff --git a/ui/styling/stylers.ios.ts b/ui/styling/stylers.ios.ts index 7f7684e76..917eba377 100644 --- a/ui/styling/stylers.ios.ts +++ b/ui/styling/stylers.ios.ts @@ -394,6 +394,51 @@ export class SegmentedBarStyler implements definition.stylers.Styler { } } +export class ProgressStyler implements definition.stylers.Styler { + //Text color methods + private static setColorProperty(view: view.View, newValue: any) { + var bar = view.ios; + bar.progressTintColor = newValue; + } + + private static resetColorProperty(view: view.View, nativeValue: any) { + var bar = view.ios; + bar.progressTintColor = nativeValue; + } + + private static getNativeColorValue(view: view.View): any { + var bar = view.ios; + return bar.progressTintColor; + } + + private static setBackgroundColorProperty(view: view.View, newValue: any) { + var bar = view.ios; + bar.trackTintColor = newValue; + } + + private static resetBackgroundColorProperty(view: view.View, nativeValue: any) { + var bar = view.ios; + bar.trackTintColor = nativeValue; + } + + private static getBackgroundColorProperty(view: view.View): any { + var bar = view.ios; + return bar.trackTintColor; + } + + public static registerHandlers() { + style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler( + ProgressStyler.setColorProperty, + ProgressStyler.resetColorProperty, + ProgressStyler.getNativeColorValue), "Progress"); + + style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler( + ProgressStyler.setBackgroundColorProperty, + ProgressStyler.resetBackgroundColorProperty, + ProgressStyler.getBackgroundColorProperty), "Progress"); + } +} + export class SearchBarStyler implements definition.stylers.Styler { private static setBackgroundColorProperty(view: view.View, newValue: any) { @@ -547,4 +592,5 @@ export function _registerDefaultStylers() { SearchBarStyler.registerHandlers(); ActionBarStyler.registerHandlers(); TabViewStyler.registerHandlers(); + ProgressStyler.registerHandlers(); }