Merge pull request #1011 from NativeScript/slider-css

Slider CSS color and background-color support fixed

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");
+
 // <snippet module="ui/slider" title="slider">
 // # 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<viewModule.View>) {
+            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<viewModule.View>) {
+            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");

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<string, android.graphics.drawable.Drawable>();
 
 function onBackgroundOrBorderPropertyChanged(v: view.View) {
@@ -600,15 +608,51 @@ 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, ignorePropertyHandler, "Progress");
-        style.registerHandler(style.borderWidthProperty, borderHandler, "Progress");
+        style.registerHandler(style.borderColorProperty, ignorePropertyHandler, "Progress");
-        style.registerHandler(style.borderColorProperty, borderHandler, "Progress");
+        style.registerHandler(style.borderRadiusProperty, ignorePropertyHandler, "Progress");
-        style.registerHandler(style.borderRadiusProperty, borderHandler, "Progress");
+        style.registerHandler(style.backgroundInternalProperty, ignorePropertyHandler, "Progress");
-        style.registerHandler(style.backgroundInternalProperty, borderHandler, "Progress");
+    }
+}
+
+export class SliderStyler implements definition.stylers.Styler {
+    private static setColorProperty(view: view.View, newValue: any) {
+        var bar = <android.widget.SeekBar>view._nativeView;
+        bar.getThumb().setColorFilter(newValue, android.graphics.PorterDuff.Mode.SRC_IN);
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: number) {
+        var bar = <android.widget.SeekBar>view._nativeView;
+        bar.getThumb().clearColorFilter();
+    }
+
+    private static setBackgroundAndBorderProperty(view: view.View, newValue: any) {
+        var bar = <android.widget.SeekBar>view._nativeView;
+        bar.getProgressDrawable().setColorFilter(newValue, android.graphics.PorterDuff.Mode.SRC_IN);
+    }
+
+    private static resetBackgroundAndBorderProperty(view: view.View, nativeValue: number) {
+        var bar = <android.widget.SeekBar>view._nativeView;
+        // Do nothing.
+    }
+
+    public static registerHandlers() {
+        style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
+            SliderStyler.setColorProperty,
+            SliderStyler.resetColorProperty), "Slider");
+
+        style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
+            SliderStyler.setBackgroundAndBorderProperty,
+            SliderStyler.resetBackgroundAndBorderProperty), "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");
     }
 }
 
@@ -646,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, ignorePropertyHandler, "Switch");
-        style.registerHandler(style.borderWidthProperty, borderHandler, "Switch");
+        style.registerHandler(style.borderColorProperty, ignorePropertyHandler, "Switch");
-        style.registerHandler(style.borderColorProperty, borderHandler, "Switch");
+        style.registerHandler(style.borderRadiusProperty, ignorePropertyHandler, "Switch");
-        style.registerHandler(style.borderRadiusProperty, borderHandler, "Switch");
+        style.registerHandler(style.backgroundInternalProperty, ignorePropertyHandler, "Switch");
-        style.registerHandler(style.backgroundInternalProperty, borderHandler, "Switch");
     }
 }
 
@@ -859,4 +902,5 @@ export function _registerDefaultStylers() {
     TabViewStyler.registerHandlers();
     ProgressStyler.registerHandlers();
     SwitchStyler.registerHandlers();
+    SliderStyler.registerHandlers();
 }

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 = <UIActivityIndicatorView>view.ios;
         bar.color = newValue;
@@ -524,6 +523,52 @@ export class ActivityIndicatorStyler implements definition.stylers.Styler {
     }
 }
 
+export class SliderStyler implements definition.stylers.Styler {
+    private static setColorProperty(view: view.View, newValue: any) {
+        var bar = <UISlider>view.ios;
+        bar.thumbTintColor = newValue;
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: any) {
+        var bar = <UISlider>view.ios;
+        bar.thumbTintColor = nativeValue;
+    }
+
+    private static getNativeColorValue(view: view.View): any {
+        var bar = <UISlider>view.ios;
+        return bar.thumbTintColor;
+    }
+
+    private static setBackgroundColorProperty(view: view.View, newValue: any) {
+        var bar = <UISlider>view.ios;
+        bar.minimumTrackTintColor = newValue;
+    }
+
+    private static resetBackgroundColorProperty(view: view.View, nativeValue: any) {
+        var bar = <UISlider>view.ios;
+        bar.minimumTrackTintColor = nativeValue;
+    }
+
+    private static getBackgroundColorProperty(view: view.View): any {
+        var bar = <UISlider>view.ios;
+        return bar.minimumTrackTintColor;
+    }
+
+    public static registerHandlers() {
+        style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
+            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 +845,5 @@ export function _registerDefaultStylers() {
     SwitchStyler.registerHandlers();
     TextFieldStyler.registerHandlers();
     ActivityIndicatorStyler.registerHandlers();
+    SliderStyler.registerHandlers();
 }