javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-17 04:41:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1011 from NativeScript/slider-css

Browse Source 
Slider CSS color and background-color support fixed
This commit is contained in:
Vladimir Enchev
2015-11-02 13:14:48 +02:00
parent 2f27018092 c226e322f4
commit 11b60656eb
3 changed files with 133 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/tests/ui/slider/slider-tests.ts
View File

@ -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");

72
ui/styling/stylers.android.ts
View File

@ -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, 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");
}
}
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, 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");
}
}
@ -859,4 +902,5 @@ export function _registerDefaultStylers() {
TabViewStyler.registerHandlers();
ProgressStyler.registerHandlers();
SwitchStyler.registerHandlers();
SliderStyler.registerHandlers();
}

48
ui/styling/stylers.ios.ts
View File

@ -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();
}