diff --git a/tests/app/ui/text-field/text-field-tests-native.android.ts b/tests/app/ui/text-field/text-field-tests-native.android.ts index 09e33b9e8..b9551dd2f 100644 --- a/tests/app/ui/text-field/text-field-tests-native.android.ts +++ b/tests/app/ui/text-field/text-field-tests-native.android.ts @@ -25,6 +25,10 @@ export function getNativeColor(textField: textFieldModule.TextField): colorModul return new colorModule.Color(textField.android.getTextColors().getDefaultColor()); } +export function getNativePlaceholderColor(textField: textFieldModule.TextField): colorModule.Color { + return new colorModule.Color(textField.android.getHintTextColors().getDefaultColor()); +} + export function getNativeBackgroundColor(textField: textFieldModule.TextField): colorModule.Color { var bkg = textField.android.getBackground(); if (bkg instanceof org.nativescript.widgets.BorderDrawable) { diff --git a/tests/app/ui/text-field/text-field-tests-native.d.ts b/tests/app/ui/text-field/text-field-tests-native.d.ts index 7cf8cadcd..94df9a5e6 100644 --- a/tests/app/ui/text-field/text-field-tests-native.d.ts +++ b/tests/app/ui/text-field/text-field-tests-native.d.ts @@ -7,6 +7,7 @@ export declare function getNativeHint(textField: textFieldModule.TextField): str export declare function getNativeSecure(textField: textFieldModule.TextField): boolean; export declare function getNativeFontSize(textField: textFieldModule.TextField): number; export declare function getNativeColor(textField: textFieldModule.TextField): colorModule.Color; +export declare function getNativePlaceholderColor(textField: textFieldModule.TextField): colorModule.Color; export declare function getNativeBackgroundColor(textField: textFieldModule.TextField): colorModule.Color; export declare function getNativeTextAlignment(textField: textFieldModule.TextField): string; export declare function typeTextNatively(textField: textFieldModule.TextField, text: string): void; \ No newline at end of file diff --git a/tests/app/ui/text-field/text-field-tests-native.ios.ts b/tests/app/ui/text-field/text-field-tests-native.ios.ts index d6145eec9..7abd18aa7 100644 --- a/tests/app/ui/text-field/text-field-tests-native.ios.ts +++ b/tests/app/ui/text-field/text-field-tests-native.ios.ts @@ -23,6 +23,10 @@ export function getNativeColor(textField: textFieldModule.TextField): colorModul return utilsModule.ios.getColor(textField.ios.textColor); } +export function getNativePlaceholderColor(textField: textFieldModule.TextField): colorModule.Color { + return utilsModule.ios.getColor(textField.ios.attributedPlaceholder.attributeAtIndexEffectiveRange(NSForegroundColorAttributeName, 0, null)); +} + export function getNativeBackgroundColor(textField: textFieldModule.TextField): colorModule.Color { return utilsModule.ios.getColor(textField.ios.backgroundColor); } diff --git a/tests/app/ui/text-field/text-field-tests.ts b/tests/app/ui/text-field/text-field-tests.ts index ecfeba172..619061fa0 100644 --- a/tests/app/ui/text-field/text-field-tests.ts +++ b/tests/app/ui/text-field/text-field-tests.ts @@ -564,4 +564,15 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration"); TKUnit.assertEqual(view.style.letterSpacing, 1, "LetterSpacing"); }); +} + +export function test_set_placeholder_color() { + let view = new textFieldModule.TextField(); + let expectedColorHex = "#ffff0000"; + helper.buildUIAndRunTest(view, function (views: Array) { + view.hint = "Some text for hint"; + view.setInlineStyle("placeholder-color: " + expectedColorHex + ";"); + let actualColorHex = textFieldTestsNative.getNativePlaceholderColor(view).hex; + TKUnit.assertEqual(actualColorHex, expectedColorHex); + }); } \ No newline at end of file diff --git a/tns-core-modules/ui/styling/style.d.ts b/tns-core-modules/ui/styling/style.d.ts index ee896313a..41022a646 100644 --- a/tns-core-modules/ui/styling/style.d.ts +++ b/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 placeholderColor: Color; public backgroundColor: Color; public backgroundImage: string; public backpublic: string; @@ -104,6 +105,7 @@ declare module "ui/styling/style" { export var scaleXProperty: styleProperty.Property; export var scaleYProperty: styleProperty.Property; export var colorProperty: styleProperty.Property; + export var placeholderColorProperty: styleProperty.Property; export var backgroundImageProperty: styleProperty.Property; export var backgroundColorProperty: styleProperty.Property; export var backgroundRepeatProperty: styleProperty.Property; diff --git a/tns-core-modules/ui/styling/style.ts b/tns-core-modules/ui/styling/style.ts index 06b5ad72a..de3d8d6dd 100644 --- a/tns-core-modules/ui/styling/style.ts +++ b/tns-core-modules/ui/styling/style.ts @@ -583,6 +583,13 @@ export class Style extends DependencyObservable implements styling.Style { this._setValue(colorProperty, value); } + get placeholderColor(): Color { + return this._getValue(placeholderColorProperty); + } + set placeholderColor(value: Color) { + this._setValue(placeholderColorProperty, value); + } + get backgroundColor(): Color { return this._getValue(backgroundColorProperty); } @@ -1054,6 +1061,10 @@ export var colorProperty = new styleProperty.Property("color", "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); + export var backgroundImageProperty = new styleProperty.Property("backgroundImage", "background-image", new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundImagePropertyChanged)); diff --git a/tns-core-modules/ui/styling/styling.d.ts b/tns-core-modules/ui/styling/styling.d.ts index 03612c6c5..31df4f6df 100644 --- a/tns-core-modules/ui/styling/styling.d.ts +++ b/tns-core-modules/ui/styling/styling.d.ts @@ -42,6 +42,12 @@ * Gets or sets the color style property. */ color: color.Color; + + /** + * Gets or sets the color of the placeholder element. + */ + placeholderColor: color.Color; + /** * Gets or sets the background-color style property. */ diff --git a/tns-core-modules/ui/styling/styling.ts b/tns-core-modules/ui/styling/styling.ts index 9dcc55213..a9e4075b1 100644 --- a/tns-core-modules/ui/styling/styling.ts +++ b/tns-core-modules/ui/styling/styling.ts @@ -11,6 +11,7 @@ export var Style = styleModule.Style; export module properties { export var fontSizeProperty = styleModule.fontSizeProperty; export var colorProperty = styleModule.colorProperty; + export var placeholderColorProperty = styleModule.placeholderColorProperty; export var backgroundColorProperty = styleModule.backgroundColorProperty; export var textAlignmentProperty = styleModule.textAlignmentProperty; diff --git a/tns-core-modules/ui/text-base/text-base-styler.android.ts b/tns-core-modules/ui/text-base/text-base-styler.android.ts index 5482faf11..6174c7225 100644 --- a/tns-core-modules/ui/text-base/text-base-styler.android.ts +++ b/tns-core-modules/ui/text-base/text-base-styler.android.ts @@ -6,6 +6,19 @@ import enums = require("ui/enums"); import {device} from "platform"; export class TextBaseStyler implements style.Styler { + // hintcolor + private static setPlaceholderColorProperty(view: view.View, newValue: any) { + (view._nativeView).setHintTextColor(newValue); + } + + private static resetPlaceholderColorProperty(view: view.View, nativeValue: any) { + (view._nativeView).setHintTextColor(nativeValue); + } + + private static getNativePlaceholderColorValue(view: view.View): any { + return (view._nativeView).getHintTextColors().getDefaultColor(); + } + // color private static setColorProperty(view: view.View, newValue: any) { (view._nativeView).setTextColor(newValue); @@ -128,6 +141,11 @@ export class TextBaseStyler implements style.Styler { TextBaseStyler.resetColorProperty, TextBaseStyler.getNativeColorValue), "TextBase"); + style.registerHandler(style.placeholderColorProperty, new style.StylePropertyChangedHandler( + TextBaseStyler.setPlaceholderColorProperty, + TextBaseStyler.resetPlaceholderColorProperty, + TextBaseStyler.getNativePlaceholderColorValue), "TextBase"); + style.registerHandler(style.fontInternalProperty, new style.StylePropertyChangedHandler( TextBaseStyler.setFontInternalProperty, TextBaseStyler.resetFontInternalProperty, diff --git a/tns-core-modules/ui/text-field/text-field.ios.ts b/tns-core-modules/ui/text-field/text-field.ios.ts index 4f9699d57..84fd9221d 100644 --- a/tns-core-modules/ui/text-field/text-field.ios.ts +++ b/tns-core-modules/ui/text-field/text-field.ios.ts @@ -188,11 +188,36 @@ export class TextFieldStyler implements style.Styler { return tf.tintColor; } + // placeholder-color + private static setPlaceholderColorProperty(textBase: View, newValue: any) { + let ios = textBase._nativeView; + let colorAttibutes = NSMutableDictionary.alloc().init(); + colorAttibutes.setValueForKey(newValue, NSForegroundColorAttributeName); + ios.attributedPlaceholder = NSAttributedString.alloc().initWithStringAttributes(ios.placeholder, colorAttibutes.copy()); + } + + private static resetPlaceholderColorProperty(textBase: View, nativeValue: any) { + var ios = textBase._nativeView; + let colorAttibutes = NSMutableDictionary.alloc().init(); + colorAttibutes.setValueForKey(nativeValue, NSForegroundColorAttributeName); + ios.attributedPlaceholder = NSAttributedString.alloc().initWithStringAttributes(ios.placeholder, colorAttibutes.copy()); + } + + private static getNativePlaceholderColorValue(textBase: View): any { + var ios = textBase._nativeView; + return ios.attributedPlaceholder.attributeAtIndexEffectiveRange(NSForegroundColorAttributeName, 0, null); + } + public static registerHandlers() { style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler( TextFieldStyler.setColorProperty, TextFieldStyler.resetColorProperty, TextFieldStyler.getNativeColorValue), "TextField"); + + style.registerHandler(style.placeholderColorProperty, new style.StylePropertyChangedHandler( + TextFieldStyler.setPlaceholderColorProperty, + TextFieldStyler.resetPlaceholderColorProperty, + TextFieldStyler.getNativePlaceholderColorValue), "TextField"); } }