Skip to content

Commit 2ab15cb

Browse files
author
Tsvetan Raikov
committed
Added tintColor property in Image view. It should be used instead of color
1 parent 1c945a3 commit 2ab15cb

File tree

10 files changed

+57
-26
lines changed

10 files changed

+57
-26
lines changed

‎tests/app/ui/image/image-tests.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -376,8 +376,7 @@ export var test_tintColor = function () {
376376
var imageColor = utils.ios.getColor(testImage.ios.tintColor);
377377
TKUnit.assert(!imageColor.equals(colorRed), "imageColor expected to be different than tintColor");
378378
}
379-
380-
image.color = colorRed;
379+
image.tintColor = colorRed;
381380

382381
if (image.android) {
383382
TKUnit.assert(testImage.android.getColorFilter() !== null, "tintColor expected to be set to a nonnull value");

‎tests/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66
"nativescript": {
77
"id": "org.nativescript.tests",
88
"tns-ios": {
9-
"version": "2.2.1"
9+
"version": "2.3.0"
1010
},
1111
"tns-android": {
12-
"version": "2.2.0"
12+
"version": "2.3.0"
1313
}
1414
},
1515
"dependencies": {
16-
"tns-core-modules": "2.0.1"
16+
"tns-core-modules": "2.3.0"
1717
},
1818
"devDependencies": {
1919
"babel-traverse": "6.9.0",

‎tns-core-modules/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"license": "Apache-2.0",
2525
"typings": "tns-core-modules.d.ts",
2626
"dependencies": {
27-
"tns-core-modules-widgets": "2.3.0"
27+
"tns-core-modules-widgets": "next"
2828
},
2929
"nativescript": {
3030
"platforms": {

‎tns-core-modules/ui/image/image-common.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import definition = require("ui/image");
66
import enums = require("ui/enums");
77
import platform = require("platform");
88
import utils = require("utils/utils");
9+
import color = require("color");
910

1011
import * as types from "utils/types";
1112

@@ -79,6 +80,14 @@ export class Image extends view.View implements definition.Image {
7980
this._setValue(Image.loadModeProperty, value);
8081
}
8182

83+
get tintColor(): color.Color {
84+
return this.style.tintColor;
85+
}
86+
87+
set tintColor(value: color.Color) {
88+
this.style.tintColor = value;
89+
}
90+
8291
public _setNativeImage(nativeImage: any) {
8392
//
8493
}

‎tns-core-modules/ui/image/image.android.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -109,12 +109,12 @@ export class ImageStyler implements style.Styler {
109109
}
110110

111111
// tint color
112-
private static setColorProperty(view: view.View, newValue: any) {
112+
private static setTintColorProperty(view: view.View, newValue: any) {
113113
var imageView = <org.nativescript.widgets.ImageView>view._nativeView;
114114
imageView.setColorFilter(newValue);
115115
}
116116

117-
private static resetColorProperty(view: view.View, nativeValue: number) {
117+
private static resetTintColorProperty(view: view.View, nativeValue: number) {
118118
var imageView = <org.nativescript.widgets.ImageView>view._nativeView;
119119
imageView.clearColorFilter();
120120
}
@@ -131,9 +131,9 @@ export class ImageStyler implements style.Styler {
131131
ImageStyler.setBorderWidthProperty,
132132
ImageStyler.resetBorderWidthProperty), "Image");
133133

134-
style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
135-
ImageStyler.setColorProperty,
136-
ImageStyler.resetColorProperty), "Image");
134+
style.registerHandler(style.tintColorProperty, new style.StylePropertyChangedHandler(
135+
ImageStyler.setTintColorProperty,
136+
ImageStyler.resetTintColorProperty), "Image");
137137
}
138138
}
139139

‎tns-core-modules/ui/image/image.d.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ declare module "ui/image" {
55
import dependencyObservable = require("ui/core/dependency-observable");
66
import imageSource = require("image-source");
77
import view = require("ui/core/view");
8+
import color = require("color");
89

910
/**
1011
* Represents a class that provides functionality for loading and streching image(s).
@@ -51,5 +52,10 @@ declare module "ui/image" {
5152
* - **async** - will try to load in the background, may appear with short delay, good for large images.
5253
*/
5354
loadMode: string; // "sync" | "async";
55+
56+
/**
57+
* A color used to tint template images.
58+
*/
59+
tintColor: color.Color;
5460
}
5561
}

‎tns-core-modules/ui/image/image.ios.ts‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -58,15 +58,15 @@ export class Image extends imageCommon.Image {
5858
}
5959

6060
public _setTintColor(value: any) {
61-
if (value !== null && this._ios.image && !this._templateImageWasCreated) {
62-
this._ios.image = this._ios.image.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);
63-
this._templateImageWasCreated = true;
64-
}
65-
this._ios.tintColor = value;
61+
if (value !== null && this._ios.image && !this._templateImageWasCreated) {
62+
this._ios.image = this._ios.image.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);
63+
this._templateImageWasCreated = true;
64+
}
65+
this._ios.tintColor = value;
6666
}
6767

6868
public _setNativeImage(nativeImage: any) {
69-
if (this.style.color && nativeImage) {
69+
if (this.style.tintColor && nativeImage) {
7070
nativeImage = nativeImage.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);
7171
this._templateImageWasCreated = true;
7272
} else {
@@ -155,20 +155,19 @@ export class Image extends imageCommon.Image {
155155

156156
export class ImageStyler implements style.Styler {
157157
//Text color methods
158-
private static setColorProperty(view: view.View, newValue: any) {
159-
var image = <Image>view;
158+
private static setTintColorProperty(view: view.View, newValue: any) {
159+
let image = <Image>view;
160160
image._setTintColor(newValue);
161-
}
161+
}
162162

163-
private static resetColorProperty(view: view.View, nativeValue: any) {
164-
var image = <Image>view;
165-
image._setTintColor(null);
163+
private static resetTintColorProperty(view: view.View, nativeValue: any) {
164+
view.ios.tintColor = null;
166165
}
167166

168167
public static registerHandlers() {
169-
style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
170-
ImageStyler.setColorProperty,
171-
ImageStyler.resetColorProperty), "Image");
168+
style.registerHandler(style.tintColorProperty, new style.StylePropertyChangedHandler(
169+
ImageStyler.setTintColorProperty,
170+
ImageStyler.resetTintColorProperty), "Image");
172171
}
173172
}
174173

‎tns-core-modules/ui/styling/style.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ declare module "ui/styling/style" {
4141
public scaleX: number;
4242
public scaleY: number;
4343
public color: Color;
44+
public tintColor: Color;
4445
public placeholderColor: Color;
4546
public backgroundColor: Color;
4647
public backgroundImage: string;
@@ -105,6 +106,7 @@ declare module "ui/styling/style" {
105106
export var scaleXProperty: styleProperty.Property;
106107
export var scaleYProperty: styleProperty.Property;
107108
export var colorProperty: styleProperty.Property;
109+
export var tintColorProperty: styleProperty.Property;
108110
export var placeholderColorProperty: styleProperty.Property;
109111
export var backgroundImageProperty: styleProperty.Property;
110112
export var backgroundColorProperty: styleProperty.Property;

‎tns-core-modules/ui/styling/style.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -583,6 +583,13 @@ export class Style extends DependencyObservable implements styling.Style {
583583
this._setValue(colorProperty, value);
584584
}
585585

586+
get tintColor(): Color {
587+
return this._getValue(tintColorProperty);
588+
}
589+
set tintColor(value: Color) {
590+
this._setValue(tintColorProperty, value);
591+
}
592+
586593
get placeholderColor(): Color {
587594
return this._getValue(placeholderColorProperty);
588595
}
@@ -1061,6 +1068,10 @@ export var colorProperty = new styleProperty.Property("color", "color",
10611068
new PropertyMetadata(undefined, PropertyMetadataSettings.Inheritable, undefined, Color.isValid, Color.equals),
10621069
converters.colorConverter);
10631070

1071+
export var tintColorProperty = new styleProperty.Property("tintColor", "tint-color",
1072+
new PropertyMetadata(undefined, PropertyMetadataSettings.Inheritable, undefined, Color.isValid, Color.equals),
1073+
converters.colorConverter);
1074+
10641075
export var placeholderColorProperty = new styleProperty.Property("placeholderColor", "placeholder-color",
10651076
new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
10661077
converters.colorConverter);

‎tns-core-modules/ui/styling/styling.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,11 @@
4343
*/
4444
color: color.Color;
4545

46+
/**
47+
* A color used to tint template images.
48+
*/
49+
tintColor: color.Color;
50+
4651
/**
4752
* Gets or sets the color of the placeholder element.
4853
*/

0 commit comments

Comments
 (0)