diff --git a/tests/app/ui/image/image-tests.ts b/tests/app/ui/image/image-tests.ts index 45ee20bd5..d00008c6f 100644 --- a/tests/app/ui/image/image-tests.ts +++ b/tests/app/ui/image/image-tests.ts @@ -376,8 +376,7 @@ export var test_tintColor = function () { var imageColor = utils.ios.getColor(testImage.ios.tintColor); TKUnit.assert(!imageColor.equals(colorRed), "imageColor expected to be different than tintColor"); } - - image.color = colorRed; + image.tintColor = colorRed; if (image.android) { TKUnit.assert(testImage.android.getColorFilter() !== null, "tintColor expected to be set to a nonnull value"); diff --git a/tests/package.json b/tests/package.json index 6c20e7169..c2a5ba4a5 100644 --- a/tests/package.json +++ b/tests/package.json @@ -6,14 +6,14 @@ "nativescript": { "id": "org.nativescript.tests", "tns-ios": { - "version": "2.2.1" + "version": "2.3.0" }, "tns-android": { - "version": "2.2.0" + "version": "2.3.0" } }, "dependencies": { - "tns-core-modules": "2.0.1" + "tns-core-modules": "2.3.0" }, "devDependencies": { "babel-traverse": "6.9.0", diff --git a/tns-core-modules/ui/image/image-common.ts b/tns-core-modules/ui/image/image-common.ts index a86052fdc..4c694e720 100644 --- a/tns-core-modules/ui/image/image-common.ts +++ b/tns-core-modules/ui/image/image-common.ts @@ -6,6 +6,7 @@ import definition = require("ui/image"); import enums = require("ui/enums"); import platform = require("platform"); import utils = require("utils/utils"); +import color = require("color"); import * as types from "utils/types"; @@ -79,6 +80,14 @@ export class Image extends view.View implements definition.Image { this._setValue(Image.loadModeProperty, value); } + get tintColor(): color.Color { + return this.style.tintColor; + } + + set tintColor(value: color.Color) { + this.style.tintColor = value; + } + public _setNativeImage(nativeImage: any) { // } diff --git a/tns-core-modules/ui/image/image.android.ts b/tns-core-modules/ui/image/image.android.ts index eebc15dc0..51a33b189 100644 --- a/tns-core-modules/ui/image/image.android.ts +++ b/tns-core-modules/ui/image/image.android.ts @@ -109,12 +109,12 @@ export class ImageStyler implements style.Styler { } // tint color - private static setColorProperty(view: view.View, newValue: any) { + private static setTintColorProperty(view: view.View, newValue: any) { var imageView = view._nativeView; imageView.setColorFilter(newValue); } - private static resetColorProperty(view: view.View, nativeValue: number) { + private static resetTintColorProperty(view: view.View, nativeValue: number) { var imageView = view._nativeView; imageView.clearColorFilter(); } @@ -131,9 +131,9 @@ export class ImageStyler implements style.Styler { ImageStyler.setBorderWidthProperty, ImageStyler.resetBorderWidthProperty), "Image"); - style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler( - ImageStyler.setColorProperty, - ImageStyler.resetColorProperty), "Image"); + style.registerHandler(style.tintColorProperty, new style.StylePropertyChangedHandler( + ImageStyler.setTintColorProperty, + ImageStyler.resetTintColorProperty), "Image"); } } diff --git a/tns-core-modules/ui/image/image.d.ts b/tns-core-modules/ui/image/image.d.ts index c95218b3a..8d588c1ba 100644 --- a/tns-core-modules/ui/image/image.d.ts +++ b/tns-core-modules/ui/image/image.d.ts @@ -5,6 +5,7 @@ declare module "ui/image" { import dependencyObservable = require("ui/core/dependency-observable"); import imageSource = require("image-source"); import view = require("ui/core/view"); + import color = require("color"); /** * Represents a class that provides functionality for loading and streching image(s). @@ -51,5 +52,10 @@ declare module "ui/image" { * - **async** - will try to load in the background, may appear with short delay, good for large images. */ loadMode: string; // "sync" | "async"; + + /** + * A color used to tint template images. + */ + tintColor: color.Color; } } \ No newline at end of file diff --git a/tns-core-modules/ui/image/image.ios.ts b/tns-core-modules/ui/image/image.ios.ts index 38138831f..1dedd26cd 100644 --- a/tns-core-modules/ui/image/image.ios.ts +++ b/tns-core-modules/ui/image/image.ios.ts @@ -58,15 +58,15 @@ export class Image extends imageCommon.Image { } public _setTintColor(value: any) { - if (value !== null && this._ios.image && !this._templateImageWasCreated) { - this._ios.image = this._ios.image.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate); - this._templateImageWasCreated = true; - } - this._ios.tintColor = value; + if (value !== null && this._ios.image && !this._templateImageWasCreated) { + this._ios.image = this._ios.image.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate); + this._templateImageWasCreated = true; + } + this._ios.tintColor = value; } public _setNativeImage(nativeImage: any) { - if (this.style.color && nativeImage) { + if (this.style.tintColor && nativeImage) { nativeImage = nativeImage.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate); this._templateImageWasCreated = true; } else { @@ -155,20 +155,19 @@ export class Image extends imageCommon.Image { export class ImageStyler implements style.Styler { //Text color methods - private static setColorProperty(view: view.View, newValue: any) { - var image = view; + private static setTintColorProperty(view: view.View, newValue: any) { + let image = view; image._setTintColor(newValue); - } + } - private static resetColorProperty(view: view.View, nativeValue: any) { - var image = view; - image._setTintColor(null); + private static resetTintColorProperty(view: view.View, nativeValue: any) { + view.ios.tintColor = null; } public static registerHandlers() { - style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler( - ImageStyler.setColorProperty, - ImageStyler.resetColorProperty), "Image"); + style.registerHandler(style.tintColorProperty, new style.StylePropertyChangedHandler( + ImageStyler.setTintColorProperty, + ImageStyler.resetTintColorProperty), "Image"); } } diff --git a/tns-core-modules/ui/styling/style.d.ts b/tns-core-modules/ui/styling/style.d.ts index 41022a646..b4a3999b1 100644 --- a/tns-core-modules/ui/styling/style.d.ts +++ b/tns-core-modules/ui/styling/style.d.ts @@ -41,6 +41,7 @@ declare module "ui/styling/style" { public scaleX: number; public scaleY: number; public color: Color; + public tintColor: Color; public placeholderColor: Color; public backgroundColor: Color; public backgroundImage: string; @@ -105,6 +106,7 @@ declare module "ui/styling/style" { export var scaleXProperty: styleProperty.Property; export var scaleYProperty: styleProperty.Property; export var colorProperty: styleProperty.Property; + export var tintColorProperty: styleProperty.Property; export var placeholderColorProperty: styleProperty.Property; export var backgroundImageProperty: styleProperty.Property; export var backgroundColorProperty: styleProperty.Property; diff --git a/tns-core-modules/ui/styling/style.ts b/tns-core-modules/ui/styling/style.ts index de3d8d6dd..51deced54 100644 --- a/tns-core-modules/ui/styling/style.ts +++ b/tns-core-modules/ui/styling/style.ts @@ -583,6 +583,13 @@ export class Style extends DependencyObservable implements styling.Style { this._setValue(colorProperty, value); } + get tintColor(): Color { + return this._getValue(tintColorProperty); + } + set tintColor(value: Color) { + this._setValue(tintColorProperty, value); + } + get placeholderColor(): Color { return this._getValue(placeholderColorProperty); } @@ -1061,6 +1068,10 @@ export var colorProperty = new styleProperty.Property("color", "color", new PropertyMetadata(undefined, PropertyMetadataSettings.Inheritable, undefined, Color.isValid, Color.equals), converters.colorConverter); +export var tintColorProperty = new styleProperty.Property("tintColor", "tint-color", + new PropertyMetadata(undefined, PropertyMetadataSettings.Inheritable, undefined, Color.isValid, Color.equals), + converters.colorConverter); + export var placeholderColorProperty = new styleProperty.Property("placeholderColor", "placeholder-color", new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals), converters.colorConverter); diff --git a/tns-core-modules/ui/styling/styling.d.ts b/tns-core-modules/ui/styling/styling.d.ts index 31df4f6df..43be032a5 100644 --- a/tns-core-modules/ui/styling/styling.d.ts +++ b/tns-core-modules/ui/styling/styling.d.ts @@ -43,6 +43,11 @@ */ color: color.Color; + /** + * A color used to tint template images. + */ + tintColor: color.Color; + /** * Gets or sets the color of the placeholder element. */