diff --git a/apps/tests/ui/label/label-tests-native.android.ts b/apps/tests/ui/label/label-tests-native.android.ts index 4df1b81cd..ee0956851 100644 --- a/apps/tests/ui/label/label-tests-native.android.ts +++ b/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 = label.android.getBackground(); + if (bkg instanceof background.ad.BorderDrawable) { + return (bkg).background.color; + } + else { + return new colorModule.Color(bkg.backgroundColor) + } } \ No newline at end of file diff --git a/apps/tests/ui/label/label-tests-native.d.ts b/apps/tests/ui/label/label-tests-native.d.ts index 519a67394..94d548ba1 100644 --- a/apps/tests/ui/label/label-tests-native.d.ts +++ b/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; \ No newline at end of file +export declare function getNativeTextAlignment(label: labelModule.Label): string; + +export declare function getNativeBackgroundColor(label: labelModule.Label): colorModule.Color; \ No newline at end of file diff --git a/apps/tests/ui/label/label-tests-native.ios.ts b/apps/tests/ui/label/label-tests-native.ios.ts index feeb6e424..c8aa0608a 100644 --- a/apps/tests/ui/label/label-tests-native.ios.ts +++ b/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; } -} \ No newline at end of file +} + +export function getNativeBackgroundColor(label: labelModule.Label): colorModule.Color { + var layer = (label.ios).layer; + if (!layer || !layer.backgroundColor) { + return undefined; + } + var uiColor = UIColor.colorWithCGColor(layer.backgroundColor); + return utilsModule.ios.getColor(uiColor); +} diff --git a/apps/tests/ui/label/label-tests.ts b/apps/tests/ui/label/label-tests.ts index 7b41fd379..e4df4e96b 100644 --- a/apps/tests/ui/label/label-tests.ts +++ b/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"); // // # Label @@ -88,6 +89,29 @@ export class LabelTest extends testModule.UITest { 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 { expColor = new colorModule.Color(color); TKUnit.assertEqual(normalColor.hex, expColor.hex); - actualBackgroundColor = utils.ios.getColor(testLabel.ios.backgroundColor); + var cgColor = (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); } diff --git a/apps/tests/ui/style/style-tests.ts b/apps/tests/ui/style/style-tests.ts index 04f7982bc..8a09d416a 100644 --- a/apps/tests/ui/style/style-tests.ts +++ b/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"; diff --git a/apps/tests/ui/view/view-tests.ios.ts b/apps/tests/ui/view/view-tests.ios.ts index 3934786df..5b6a9440f 100644 --- a/apps/tests/ui/view/view-tests.ios.ts +++ b/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 = (v.ios).layer.backgroundColor; + var cgColor2 = (v.backgroundColor.ios).CGColor; + return v.backgroundColor && CGColorEqualToColor(cgColor1, cgColor2); + } + return v.backgroundColor && (v.ios).backgroundColor.isEqual(v.backgroundColor.ios); } diff --git a/ui/styling/background.ios.ts b/ui/styling/background.ios.ts index c826db605..ab0cfe7a0 100644 --- a/ui/styling/background.ios.ts +++ b/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 = 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 = (view._nativeView).frame; var boundsWidth = frame.size.width; var boundsHeight = frame.size.height; - var result: UIColor; - if (background && !background.isEmpty() && boundsWidth > 0 && boundsHeight) { - if (!background.image) { - result = background.color.ios; - } - else { - var img = 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; + if (!boundsWidth || !boundsHeight) { + return undefined; } + + var img = 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); } } diff --git a/ui/styling/stylers.ios.ts b/ui/styling/stylers.ios.ts index 52a97459a..88c899d16 100644 --- a/ui/styling/stylers.ios.ts +++ b/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 = view._nativeView; + if (uiLabel && uiLabel.layer) { + var 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 = view._nativeView; + if (uiLabel && uiLabel.layer) { + var uiColor = nativeValue; + var cgColor = uiColor ? uiColor.CGColor : null; + uiLabel.layer.backgroundColor = cgColor; + } + } + + private static getNativeBackgroundInternalValue(view: view.View): any { + var 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();