Merge pull request #1156 from NativeScript/issue-754

Resolved Issue #754: The backgroundColor of a Label is not animatable…

apps/tests/ui/label/label-tests-native.android.ts

@@ -1,5 +1,7 @@
 import labelModule = require("ui/label");
 import enums = require("ui/enums");
+import colorModule = require("color");
+import background = require("ui/styling/background");
 
 export function getNativeTextAlignment(label: labelModule.Label): string {
     var gravity = label.android.getGravity();
@@ -17,4 +19,14 @@ export function getNativeTextAlignment(label: labelModule.Label): string {
     }
 
     return "unexpected value";
+}
+
+export function getNativeBackgroundColor(label: labelModule.Label): colorModule.Color {
+    var bkg = <any>label.android.getBackground();
+    if (bkg instanceof background.ad.BorderDrawable) {
+        return (<background.ad.BorderDrawable>bkg).background.color;
+    }
+    else {
+        return new colorModule.Color(bkg.backgroundColor)
+    }
 }

apps/tests/ui/label/label-tests-native.d.ts

@@ -1,4 +1,7 @@
 //@private
 import labelModule = require("ui/label");
+import colorModule = require("color");
 
-export declare function getNativeTextAlignment(label: labelModule.Label): string;
+export declare function getNativeTextAlignment(label: labelModule.Label): string;
+
+export declare function getNativeBackgroundColor(label: labelModule.Label): colorModule.Color;

apps/tests/ui/label/label-tests-native.ios.ts

@@ -1,5 +1,7 @@
 import labelModule = require("ui/label");
 import enums = require("ui/enums");
+import colorModule = require("color");
+import utilsModule = require("utils/utils");
 
 export function getNativeTextAlignment(label: labelModule.Label): string {
     switch (label.ios.textAlignment) {
@@ -16,4 +18,13 @@ export function getNativeTextAlignment(label: labelModule.Label): string {
             return "unexpected value";
             break;
     }
-}
+}
+
+export function getNativeBackgroundColor(label: labelModule.Label): colorModule.Color {
+    var layer = (<UILabel>label.ios).layer;
+    if (!layer || !layer.backgroundColor) {
+        return undefined;
+    }
+    var uiColor = UIColor.colorWithCGColor(layer.backgroundColor);
+    return utilsModule.ios.getColor(uiColor);
+}

apps/tests/ui/label/label-tests.ts

@@ -1,5 +1,6 @@
 import TKUnit = require("../../TKUnit");
 import testModule = require("../../ui-test");
+import styling = require("ui/styling");
 
 // <snippet module="ui/label" title="Label">
 // # Label
@@ -88,6 +89,29 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
         TKUnit.assertEqual(actualNative, expectedValue, "Native text not equal");
     }
 
+    public test_Set_BackgroundColor_TNS() {
+        var label = this.testView;
+        var expectedValue = new colorModule.Color("Red");
+        label.backgroundColor = expectedValue;
+
+        var actual = label.style._getValue(styling.properties.backgroundColorProperty);
+        TKUnit.assertEqual(actual, expectedValue, "BackgroundColor not equal");
+    }
+
+    public test_Set_BackgroundColor_Native() {
+        var testLabel = this.testView;
+        var expectedValue = new colorModule.Color("Red");
+
+        testLabel.backgroundColor = expectedValue;
+
+        if (testLabel.android) {
+            this.waitUntilTestElementIsLoaded();
+        }
+        var actualNative = labelTestsNative.getNativeBackgroundColor(testLabel);
+
+        TKUnit.assertEqual(actualNative, expectedValue);
+    }
+
     public test_measuredWidth_is_not_clipped() {
         var label = this.testView;
         label.horizontalAlignment = "left";
@@ -238,7 +262,9 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
             expColor = new colorModule.Color(color);
             TKUnit.assertEqual(normalColor.hex, expColor.hex);
 
-            actualBackgroundColor = utils.ios.getColor(testLabel.ios.backgroundColor);
+            var cgColor = (<UILabel>testLabel.ios).layer.backgroundColor;
+            var uiColor = UIColor.colorWithCGColor(cgColor);
+            actualBackgroundColor = utils.ios.getColor(uiColor);
             expBackgroundColor = new colorModule.Color(backgroundColor);
             TKUnit.assertEqual(actualBackgroundColor.hex, expBackgroundColor.hex);
         }

apps/tests/ui/style/style-tests.ts

@@ -495,7 +495,7 @@ var changeIdOrClassTestCss =
     "#myButton { background-color: #444444 } " +
     "#myButtonTwo { background-color: #555555 } ";
 
-export function test_styles_are_updated_when_cssCalss_is_set() {
+export function test_styles_are_updated_when_cssClass_is_set() {
     var testStack = new stackModule.StackLayout();
     var btn = new buttonModule.Button();
     var btn2 = new buttonModule.Button();
@@ -515,7 +515,7 @@ export function test_styles_are_updated_when_cssCalss_is_set() {
     helper.buildUIAndRunTest(testStack, testFunc, changeIdOrClassTestCss);
 }
 
-export function test_styles_are_updated_when_cssCalss_is_changed() {
+export function test_styles_are_updated_when_cssClass_is_changed() {
     var testStack = new stackModule.StackLayout();
     var btn = new buttonModule.Button();
     btn.className = "button-class";
@@ -536,7 +536,7 @@ export function test_styles_are_updated_when_cssCalss_is_changed() {
     helper.buildUIAndRunTest(testStack, testFunc, changeIdOrClassTestCss);
 }
 
-export function test_styles_are_updated_when_cssCalss_is_cleared() {
+export function test_styles_are_updated_when_cssClass_is_cleared() {
     var testStack = new stackModule.StackLayout();
     var btn = new buttonModule.Button();
     btn.className = "button-class";

apps/tests/ui/view/view-tests.ios.ts

@@ -16,6 +16,12 @@ export function checkNativeBorderColor(v: view.View): boolean {
 }
 
 export function checkNativeBackgroundColor(v: view.View): boolean {
+    if (v.ios instanceof UILabel) {
+        var cgColor1 = (<UILabel>v.ios).layer.backgroundColor;
+        var cgColor2 = (<UIColor>v.backgroundColor.ios).CGColor;
+        return v.backgroundColor && CGColorEqualToColor(cgColor1, cgColor2);
+    }
+
     return v.backgroundColor && (<UIView>v.ios).backgroundColor.isEqual(v.backgroundColor.ios);
 }
 

ui/styling/background.ios.ts

@@ -7,60 +7,66 @@ global.moduleMerge(common, exports);
 export module ios {
     export function createBackgroundUIColor(view: viewModule.View): UIColor {
         if(!view._nativeView){
-            return null;
+            return undefined;
         }
         
         var background = <common.Background> view.style._getValue(style.backgroundInternalProperty);
+
+        if (!background || background.isEmpty()) {
+            return undefined;
+        }
+
+        if (!background.image) {
+            return background.color.ios;
+        }
+
+        // We have an image for a background
         var frame = (<UIView>view._nativeView).frame;
         var boundsWidth = frame.size.width;
         var boundsHeight = frame.size.height;
-        var result: UIColor;
 
-        if (background && !background.isEmpty() && boundsWidth > 0 && boundsHeight) {
+        if (!boundsWidth || !boundsHeight) {
-            if (!background.image) {
+            return undefined;
-                result = background.color.ios;
-            }
-            else {
-                var img = <UIImage>background.image.ios;
-                var params = background.getDrawParams(boundsWidth, boundsHeight);
-
-                if (params.sizeX > 0 && params.sizeY > 0) {
-                    var resizeRect = CGRectMake(0, 0, params.sizeX, params.sizeY);
-                    UIGraphicsBeginImageContext(resizeRect.size);
-                    img.drawInRect(resizeRect);
-                    img = UIGraphicsGetImageFromCurrentImageContext();
-                    UIGraphicsEndImageContext();
-                }
-
-                UIGraphicsBeginImageContextWithOptions(frame.size, false, 0.0);
-                var context = UIGraphicsGetCurrentContext();
-
-                if (background.color && background.color.ios) {
-                    CGContextSetFillColorWithColor(context, background.color.ios.CGColor);
-                    CGContextFillRect(context, CGRectMake(0, 0, boundsWidth, boundsHeight));
-                }
-
-                if (!params.repeatX && !params.repeatY) {
-                    img.drawAtPoint(CGPointMake(params.posX, params.posY));
-                }
-                else {
-                    var w = params.repeatX ? boundsWidth : img.size.width;
-                    var h = params.repeatY ? boundsHeight : img.size.height;
-
-                    CGContextSetPatternPhase(context, CGSizeMake(params.posX, params.posY));
-
-                    params.posX = params.repeatX ? 0 : params.posX;
-                    params.posY = params.repeatY ? 0 : params.posY;
-
-                    var patternRect = CGRectMake(params.posX, params.posY, w, h);
-
-                    img.drawAsPatternInRect(patternRect);
-                }
-                var bkgImage = UIGraphicsGetImageFromCurrentImageContext();
-                UIGraphicsEndImageContext();
-                result = UIColor.alloc().initWithPatternImage(bkgImage);
-            }
-            return result;
         }
+
+        var img = <UIImage>background.image.ios;
+        var params = background.getDrawParams(boundsWidth, boundsHeight);
+
+        if (params.sizeX > 0 && params.sizeY > 0) {
+            var resizeRect = CGRectMake(0, 0, params.sizeX, params.sizeY);
+            UIGraphicsBeginImageContext(resizeRect.size);
+            img.drawInRect(resizeRect);
+            img = UIGraphicsGetImageFromCurrentImageContext();
+            UIGraphicsEndImageContext();
+        }
+
+        UIGraphicsBeginImageContextWithOptions(frame.size, false, 0.0);
+        var context = UIGraphicsGetCurrentContext();
+
+        if (background.color && background.color.ios) {
+            CGContextSetFillColorWithColor(context, background.color.ios.CGColor);
+            CGContextFillRect(context, CGRectMake(0, 0, boundsWidth, boundsHeight));
+        }
+
+        if (!params.repeatX && !params.repeatY) {
+            img.drawAtPoint(CGPointMake(params.posX, params.posY));
+        }
+        else {
+            var w = params.repeatX ? boundsWidth : img.size.width;
+            var h = params.repeatY ? boundsHeight : img.size.height;
+
+            CGContextSetPatternPhase(context, CGSizeMake(params.posX, params.posY));
+
+            params.posX = params.repeatX ? 0 : params.posX;
+            params.posY = params.repeatY ? 0 : params.posY;
+
+            var patternRect = CGRectMake(params.posX, params.posY, w, h);
+
+            img.drawAsPatternInRect(patternRect);
+        }
+        var bkgImage = UIGraphicsGetImageFromCurrentImageContext();
+        UIGraphicsEndImageContext();
+
+        return UIColor.alloc().initWithPatternImage(bkgImage);
     }
 }

ui/styling/stylers.ios.ts

@@ -318,6 +318,47 @@ export class ButtonStyler implements definition.stylers.Styler {
     }
 }
 
+export class LabelStyler implements definition.stylers.Styler {
+    //Background methods
+    private static setBackgroundInternalProperty(view: view.View, newValue: any) {
+        var uiLabel: UILabel = <UILabel>view._nativeView;
+        if (uiLabel && uiLabel.layer) {
+            var uiColor = <UIColor>background.ios.createBackgroundUIColor(view);
+            var cgColor = uiColor ? uiColor.CGColor : null;
+            uiLabel.layer.backgroundColor = cgColor;
+        }
+    }
+
+    private static resetBackgroundInternalProperty(view: view.View, nativeValue: any) {
+        var uiLabel: UILabel = <UILabel>view._nativeView;
+        if (uiLabel && uiLabel.layer) {
+            var uiColor = <UIColor>nativeValue;
+            var cgColor = uiColor ? uiColor.CGColor : null;
+            uiLabel.layer.backgroundColor = cgColor;
+        }
+    }
+
+    private static getNativeBackgroundInternalValue(view: view.View): any {
+        var uiLabel: UILabel = <UILabel>view._nativeView;
+        if (uiLabel && uiLabel.layer) {
+            var cgColor = uiLabel.layer.backgroundColor;
+            if (cgColor) {
+                return UIColor.colorWithCGColor(cgColor);
+                
+            }
+        }
+
+        return undefined;
+    }
+
+    public static registerHandlers() {
+        style.registerHandler(style.backgroundInternalProperty, new stylersCommon.StylePropertyChangedHandler(
+            LabelStyler.setBackgroundInternalProperty,
+            LabelStyler.resetBackgroundInternalProperty,
+            LabelStyler.getNativeBackgroundInternalValue), "Label");
+    }
+}
+
 export class TextBaseStyler implements definition.stylers.Styler {
     // font
     private static setFontInternalProperty(view: view.View, newValue: any, nativeValue: any) {
@@ -1100,6 +1141,7 @@ export function _registerDefaultStylers() {
     DefaultStyler.registerHandlers();
     TextBaseStyler.registerHandlers();
     ButtonStyler.registerHandlers();
+    LabelStyler.registerHandlers();
     TextViewStyler.registerHandlers();
     SegmentedBarStyler.registerHandlers();
     SearchBarStyler.registerHandlers();