javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1855 from NativeScript/letter-spacing

Browse Source 
Letter spacing CSS support added
This commit is contained in:
Vladimir Enchev
2016-03-29 15:10:12 +03:00
parent b3cde8cc81 1c759649df
commit 56f80f3c5c
10 changed files with 158 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ui/button/button.ios.ts
View File

@@ -170,20 +170,20 @@ export class ButtonStyler implements style.Styler {
// text-decoration
private static setTextDecorationProperty(view: view.View, newValue: any) {
utils.ios.setTextDecorationAndTransform(view, newValue, view.style.textTransform);
utils.ios.setTextDecorationAndTransform(view, newValue, view.style.textTransform, view.style.letterSpacing);
}
private static resetTextDecorationProperty(view: view.View, nativeValue: any) {
utils.ios.setTextDecorationAndTransform(view, enums.TextDecoration.none, view.style.textTransform);
utils.ios.setTextDecorationAndTransform(view, enums.TextDecoration.none, view.style.textTransform, view.style.letterSpacing);
}
// text-transform
private static setTextTransformProperty(view: view.View, newValue: any) {
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, newValue);
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, newValue, view.style.letterSpacing);
}
private static resetTextTransformProperty(view: view.View, nativeValue: any) {
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, enums.TextTransform.none);
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, enums.TextTransform.none, view.style.letterSpacing);
}
// white-space

6
ui/styling/converters.ts
View File

@@ -12,6 +12,12 @@ export function fontSizeConverter(value: string): number {
return result;
}
export function letterSpacingConverter(value: string): number {
// TODO: parse different unit types
var result: number = parseFloat(value);
return result;
}
export function textAlignConverter(value: string): string {
switch (value) {
case enums.TextAlignment.left:

2
ui/styling/style.d.ts vendored
View File

@@ -77,6 +77,7 @@ declare module "ui/styling/style" {
public visibility: string;
public opacity: number;
public whiteSpace: string;
public letterSpacing: number;
constructor(parentView: View);
@@ -123,6 +124,7 @@ declare module "ui/styling/style" {
export var textDecorationProperty: styleProperty.Property;
export var textTransformProperty: styleProperty.Property;
export var whiteSpaceProperty: styleProperty.Property;
export var letterSpacingProperty: styleProperty.Property;
// Helper property holding most layout related properties available in CSS.
// When layout related properties are set in CSS we chache them and send them to the native view in a single call.

15
ui/styling/style.ts
View File

@@ -417,6 +417,11 @@ function isOpacityValid(value: string): boolean {
return !isNaN(parsedValue) && 0 <= parsedValue && parsedValue <= 1;
}
function isLetterSpacingValid(value: string): boolean {
var parsedValue: number = parseFloat(value);
return !isNaN(parsedValue);
}
function isFontWeightValid(value: string): boolean {
return value === enums.FontWeight.normal || value === enums.FontWeight.bold;
}
@@ -768,6 +773,13 @@ export class Style extends DependencyObservable implements styling.Style {
set whiteSpace(value: string) {
this._setValue(whiteSpaceProperty, value);
}
get letterSpacing(): number {
return this._getValue(letterSpacingProperty);
}
set letterSpacing(value: number) {
this._setValue(letterSpacingProperty, value);
}
public _updateTextDecoration() {
if (this._getValue(textDecorationProperty) !== enums.TextDecoration.none) {
@@ -1059,6 +1071,9 @@ export var textTransformProperty = new styleProperty.Property("textTransform", "
export var whiteSpaceProperty = new styleProperty.Property("whiteSpace", "white-space",
new PropertyMetadata(undefined, AffectsLayout, undefined, isWhiteSpaceValid), converters.whiteSpaceConverter);
export var letterSpacingProperty = new styleProperty.Property("letterSpacing", "letter-spacing",
new PropertyMetadata(Number.NaN, AffectsLayout, undefined, isLetterSpacingValid), converters.letterSpacingConverter);
// Helper property holding most layout related properties available in CSS.
// When layout related properties are set in CSS we chache them and send them to the native view in a single call.

1
ui/styling/styling.d.ts vendored
View File

@@ -201,6 +201,7 @@
textDecoration: string;
textTransform: string;
whiteSpace: string;
letterSpacing: number;
//@private
public _beginUpdate();

27
ui/text-base/text-base-styler.android.ts
View File

@@ -108,6 +108,23 @@ export class TextBaseStyler implements style.Styler {
utils.ad.setWhiteSpace(view._nativeView, enums.WhiteSpace.normal);
}
// letter-spacing
private static getLetterSpacingProperty(view: view.View) : any {
return view.android.getLetterSpacing ? view.android.getLetterSpacing() : 0;
}
private static setLetterSpacingProperty(view: view.View, newValue: any) {
if(view.android.setLetterSpacing) {
view.android.setLetterSpacing(utils.layout.toDeviceIndependentPixels(newValue));
}
}
private static resetLetterSpacingProperty(view: view.View, nativeValue: any) {
if(view.android.setLetterSpacing) {
view.android.setLetterSpacing(nativeValue);
}
}
public static registerHandlers() {
style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
TextBaseStyler.setColorProperty,
@@ -136,6 +153,11 @@ export class TextBaseStyler implements style.Styler {
TextBaseStyler.setWhiteSpaceProperty,
TextBaseStyler.resetWhiteSpaceProperty), "TextBase");
style.registerHandler(style.letterSpacingProperty, new style.StylePropertyChangedHandler(
TextBaseStyler.setLetterSpacingProperty,
TextBaseStyler.resetLetterSpacingProperty,
TextBaseStyler.getLetterSpacingProperty), "TextBase");
// Register the same stylers for Button.
// It also derives from TextView but is not under TextBase in our View hierarchy.
style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
@@ -164,5 +186,10 @@ export class TextBaseStyler implements style.Styler {
style.registerHandler(style.whiteSpaceProperty, new style.StylePropertyChangedHandler(
TextBaseStyler.setWhiteSpaceProperty,
TextBaseStyler.resetWhiteSpaceProperty), "Button");
style.registerHandler(style.letterSpacingProperty, new style.StylePropertyChangedHandler(
TextBaseStyler.setLetterSpacingProperty,
TextBaseStyler.resetLetterSpacingProperty,
TextBaseStyler.getLetterSpacingProperty), "Button");
}
}

21
ui/text-base/text-base-styler.ios.ts
View File

@@ -38,20 +38,20 @@ export class TextBaseStyler implements style.Styler {
// text-decoration
private static setTextDecorationProperty(view: view.View, newValue: any) {
utils.ios.setTextDecorationAndTransform(view, newValue, view.style.textTransform);
utils.ios.setTextDecorationAndTransform(view, newValue, view.style.textTransform, view.style.letterSpacing);
}
private static resetTextDecorationProperty(view: view.View, nativeValue: any) {
utils.ios.setTextDecorationAndTransform(view, enums.TextDecoration.none, view.style.textTransform);
utils.ios.setTextDecorationAndTransform(view, enums.TextDecoration.none, view.style.textTransform, view.style.letterSpacing);
}
// text-transform
private static setTextTransformProperty(view: view.View, newValue: any) {
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, newValue);
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, newValue, view.style.letterSpacing);
}
private static resetTextTransformProperty(view: view.View, nativeValue: any) {
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, enums.TextTransform.none);
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, enums.TextTransform.none, view.style.letterSpacing);
}
// white-space
@@ -62,6 +62,15 @@ export class TextBaseStyler implements style.Styler {
private static resetWhiteSpaceProperty(view: view.View, nativeValue: any) {
utils.ios.setWhiteSpace(view._nativeView, enums.WhiteSpace.normal);
}
// letter-spacing
private static setLetterSpacingProperty(view: view.View, newValue: any) {
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, enums.TextTransform.none, newValue);
}
private static resetLetterSpacingProperty(view: view.View, nativeValue: any) {
utils.ios.setTextDecorationAndTransform(view, view.style.textDecoration, enums.TextTransform.none, 0);
}
// color
private static setColorProperty(view: view.View, newValue: any) {
@@ -106,5 +115,9 @@ export class TextBaseStyler implements style.Styler {
style.registerHandler(style.whiteSpaceProperty, new style.StylePropertyChangedHandler(
TextBaseStyler.setWhiteSpaceProperty,
TextBaseStyler.resetWhiteSpaceProperty), "TextBase");
style.registerHandler(style.letterSpacingProperty, new style.StylePropertyChangedHandler(
TextBaseStyler.setLetterSpacingProperty,
TextBaseStyler.resetLetterSpacingProperty), "TextBase");
}
}