Merge pull request #2731 from NativeScript/raikov/fix-tint-color-image

Raikov/fix tint color image

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.tintColor = colorRed;
-        image.color = colorRed;
 
         if (image.android) {
             TKUnit.assert(testImage.android.getColorFilter() !== null, "tintColor expected to be set to a nonnull value");

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",

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) {
         //
     }

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 = <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();
     }
@@ -131,9 +131,9 @@ export class ImageStyler implements style.Styler {
             ImageStyler.setBorderWidthProperty,
             ImageStyler.resetBorderWidthProperty), "Image");
 
-        style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
+        style.registerHandler(style.tintColorProperty, new style.StylePropertyChangedHandler(
-            ImageStyler.setColorProperty,
+            ImageStyler.setTintColorProperty,
-            ImageStyler.resetColorProperty), "Image");
+            ImageStyler.resetTintColorProperty), "Image");
     }
 }
 

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;
     }
 }

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

@@ -66,7 +66,7 @@ export class Image extends imageCommon.Image {
     }
 
     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) {
+    private static setTintColorProperty(view: view.View, newValue: any) {
-        var image = <Image>view;
+        let image = <Image>view;
         image._setTintColor(newValue);
     } 
 
-    private static resetColorProperty(view: view.View, nativeValue: any) {
+    private static resetTintColorProperty(view: view.View, nativeValue: any) {
-        var image = <Image>view;
+        view.ios.tintColor = null; 
-        image._setTintColor(null);
     }
 
     public static registerHandlers() {
-        style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
+        style.registerHandler(style.tintColorProperty, new style.StylePropertyChangedHandler(
-            ImageStyler.setColorProperty,
+            ImageStyler.setTintColorProperty,
-            ImageStyler.resetColorProperty), "Image");
+            ImageStyler.resetTintColorProperty), "Image");
     }
 }
 

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;

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

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.
          */