Skip to content

Raikov/fix tint color image #2731

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dtopuzov merged 1 commit into from
Sep 16, 2016
Merged

Raikov/fix tint color image #2731

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions tests/app/ui/image/image-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
6 changes: 3 additions & 3 deletions tests/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 9 additions & 0 deletions tns-core-modules/ui/image/image-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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) {
//
}
Expand Down
10 changes: 5 additions & 5 deletions tns-core-modules/ui/image/image.android.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = <org.nativescript.widgets.ImageView>view._nativeView;
imageView.setColorFilter(newValue);
}

private static resetColorProperty(view: view.View, nativeValue: number) {
private static resetTintColorProperty(view: view.View, nativeValue: number) {
var imageView = <org.nativescript.widgets.ImageView>view._nativeView;
imageView.clearColorFilter();
}
Expand All @@ -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");
}
}

Expand Down
6 changes: 6 additions & 0 deletions tns-core-modules/ui/image/image.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down Expand Up @@ -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;
}
}
29 changes: 14 additions & 15 deletions tns-core-modules/ui/image/image.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 = <Image>view;
private static setTintColorProperty(view: view.View, newValue: any) {
let image = <Image>view;
image._setTintColor(newValue);
}
}

private static resetColorProperty(view: view.View, nativeValue: any) {
var image = <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");
}
}

Expand Down
2 changes: 2 additions & 0 deletions tns-core-modules/ui/styling/style.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
11 changes: 11 additions & 0 deletions tns-core-modules/ui/styling/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
Expand Down
5 changes: 5 additions & 0 deletions tns-core-modules/ui/styling/styling.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down