Add placeholder-color style property.

This commit is contained in:
Nedyalko Nikolov
2016-08-26 17:00:28 +03:00
parent 88d58c3d92
commit e9ceb79b2e
10 changed files with 83 additions and 0 deletions

View File

@ -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 = <any>textField.android.getBackground();
if (bkg instanceof org.nativescript.widgets.BorderDrawable) {

View File

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

View File

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

View File

@ -565,3 +565,14 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT
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<viewModule.View>) {
view.hint = "Some text for hint";
view.setInlineStyle("placeholder-color: " + expectedColorHex + ";");
let actualColorHex = textFieldTestsNative.getNativePlaceholderColor(view).hex;
TKUnit.assertEqual(actualColorHex, expectedColorHex);
});
}

View File

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

View File

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

View File

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

View File

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

View File

@ -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) {
(<android.widget.TextView>view._nativeView).setHintTextColor(newValue);
}
private static resetPlaceholderColorProperty(view: view.View, nativeValue: any) {
(<android.widget.TextView>view._nativeView).setHintTextColor(nativeValue);
}
private static getNativePlaceholderColorValue(view: view.View): any {
return (<android.widget.TextView>view._nativeView).getHintTextColors().getDefaultColor();
}
// color
private static setColorProperty(view: view.View, newValue: any) {
(<android.widget.TextView>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,

View File

@ -188,11 +188,36 @@ export class TextFieldStyler implements style.Styler {
return tf.tintColor;
}
// placeholder-color
private static setPlaceholderColorProperty(textBase: View, newValue: any) {
let ios = <UITextField>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 = <UITextField>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 = <UITextField>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");
}
}