Added tintColor property in {N} ImageView

Tsvetan Raikov · Tsvetan Raikov · commit 4cf57b33b471 · 2016-08-29T17:46:33.000+03:00
diff --git a/tns-core-modules/package.json b/tns-core-modules/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tns-core-modules",
   "description": "Telerik NativeScript Core Modules",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "homepage":"https://www.nativescript.org",
   "repository": {
     "type": "git",
@@ -24,12 +24,12 @@
   "license": "Apache-2.0",
   "typings": "tns-core-modules.d.ts",
   "dependencies": {
-    "tns-core-modules-widgets": "2.2.0"
+    "tns-core-modules-widgets": "next"
   },
   "nativescript": {
     "platforms": {
-      "ios": "2.2.0",
-      "android": "2.2.0"
+      "ios": "2.1.1",
+      "android": "2.1.1"
     }
   }
 }
diff --git a/tns-core-modules/ui/image/image.android.ts b/tns-core-modules/ui/image/image.android.ts
@@ -6,6 +6,7 @@ import style = require("ui/styling/style");
 import view = require("ui/core/view");
 import background = require("ui/styling/background");
 import utils = require("utils/utils");
+import color = require("color");
 
 global.moduleMerge(imageCommon, exports);
 
@@ -108,6 +109,17 @@ export class ImageStyler implements style.Styler {
         background.ad.onBackgroundOrBorderPropertyChanged(v);
     }
 
+    // tint color
+    private static setColorProperty(view: view.View, newValue: any) {
+        var imageView = <org.nativescript.widgets.ImageView>view._nativeView;
+        imageView.setColorFilter(newValue);
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: number) {
+        var imageView = <org.nativescript.widgets.ImageView>view._nativeView;
+        imageView.clearColorFilter();
+    }
+
     public static registerHandlers() {
         // Use the same handler for all background/border properties
         // Note: There is no default value getter - the default value is handled in background.ad.onBackgroundOrBorderPropertyChanged
@@ -119,6 +131,10 @@ export class ImageStyler implements style.Styler {
         style.registerHandler(style.borderWidthProperty, new style.StylePropertyChangedHandler(
             ImageStyler.setBorderWidthProperty,
             ImageStyler.resetBorderWidthProperty), "Image");
+
+        style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
+            ImageStyler.setColorProperty,
+            ImageStyler.resetColorProperty), "Image");
     }
 }
 
diff --git a/tns-core-modules/ui/image/image.ios.ts b/tns-core-modules/ui/image/image.ios.ts
@@ -2,6 +2,10 @@ import imageCommon = require("./image-common");
 import dependencyObservable = require("ui/core/dependency-observable");
 import proxy = require("ui/core/proxy");
 import enums = require("ui/enums");
+import color = require("color");
+import utilsModule = require("utils/utils");
+import style = require("ui/styling/style");
+import view = require("ui/core/view");
 import * as trace from "trace";
 import * as utils from "utils/utils";
 
@@ -39,6 +43,7 @@ function onImageSourcePropertyChanged(data: dependencyObservable.PropertyChangeD
 export class Image extends imageCommon.Image {
     private _ios: UIImageView;
     private _imageSourceAffectsLayout: boolean = true;
+    private _templateImageWasCreated: boolean = false;
 
     constructor() {
         super();
@@ -54,7 +59,21 @@ export class Image extends imageCommon.Image {
         return this._ios;
     }
 
+    public _setTintColor(value: any) {
+       if (value !== null && this._ios.image && !this._templateImageWasCreated) {
+             this._ios.image = this._ios.image.imageWithRenderingMode(UIImageRenderingMode.UIImageRenderingModeAlwaysTemplate);
+             this._templateImageWasCreated = true;
+         }
+         this._ios.tintColor = value;
+    }
+
     public _setNativeImage(nativeImage: any) {
+        if (this.style.color && nativeImage) {
+            nativeImage = nativeImage.imageWithRenderingMode(UIImageRenderingMode.UIImageRenderingModeAlwaysTemplate);
+            this._templateImageWasCreated = true;
+        } else {
+            this._templateImageWasCreated = false;
+        }
         this.ios.image = nativeImage;
 
         if (this._imageSourceAffectsLayout) {
@@ -135,3 +154,24 @@ export class Image extends imageCommon.Image {
         return { width: scaleW, height: scaleH };
     }
 } 
+
+export class ImageStyler implements style.Styler {
+    //Text color methods
+    private static setColorProperty(view: view.View, newValue: any) {
+        var image = <Image>view;
+        image._setTintColor(newValue);
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: any) {
+        var image = <Image>view.ios;
+        image._setTintColor(null);
+    }
+
+    public static registerHandlers() {
+        style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
+            ImageStyler.setColorProperty,
+            ImageStyler.resetColorProperty), "Image");
+    }
+}
+
+ImageStyler.registerHandlers();

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "tns-core-modules",`
`3`	`3`	`"description": "Telerik NativeScript Core Modules",`
`4`		`- "version": "2.2.1",`
	`4`	`+ "version": "2.3.0",`
`5`	`5`	`"homepage":"https://www.nativescript.org",`
`6`	`6`	`"repository": {`
`7`	`7`	`"type": "git",`
`@@ -24,12 +24,12 @@`
`24`	`24`	`"license": "Apache-2.0",`
`25`	`25`	`"typings": "tns-core-modules.d.ts",`
`26`	`26`	`"dependencies": {`
`27`		`- "tns-core-modules-widgets": "2.2.0"`
	`27`	`+ "tns-core-modules-widgets": "next"`
`28`	`28`	`},`
`29`	`29`	`"nativescript": {`
`30`	`30`	`"platforms": {`
`31`		`- "ios": "2.2.0",`
`32`		`- "android": "2.2.0"`
	`31`	`+ "ios": "2.1.1",`
	`32`	`+ "android": "2.1.1"`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`	`}`