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

Add CSS support for line-height (#4534)

Browse Source 
* Add CSS support for line-height (issue #1664)

* Implemented @vakrilov's feedback

* Implemented @vakrilov's feedback (changed Android default impl)
This commit is contained in:
Eddy Verbruggen
2017-07-13 14:00:18 +02:00
committed by Alexander Vakrilov
parent 3d49d1436d
commit 74f26f4498
7 changed files with 52 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
tns-core-modules/ui/styling/style-properties.d.ts vendored
View File

@@ -86,6 +86,7 @@ export const minWidthProperty: CssProperty<Style, dip | LengthDipUnit | LengthPx
export const minHeightProperty: CssProperty<Style, dip | LengthDipUnit | LengthPxUnit>;
export const widthProperty: CssProperty<Style, PercentLength>;
export const heightProperty: CssProperty<Style, PercentLength>;
export const lineHeightProperty: CssProperty<Style, number>;
export const marginProperty: ShorthandProperty<Style, string | PercentLength>;
export const marginLeftProperty: CssProperty<Style, PercentLength>;
export const marginRightProperty: CssProperty<Style, PercentLength>;

1
tns-core-modules/ui/styling/style/style.d.ts vendored
View File

@@ -96,6 +96,7 @@ export class Style extends Observable {
public visibility: Visibility;
public letterSpacing: number;
public lineHeight: number;
public textAlignment: TextAlignment;
public textDecoration: TextDecoration;
public textTransform: TextTransform;

1
tns-core-modules/ui/styling/style/style.ts
View File

@@ -68,6 +68,7 @@ export class Style extends Observable implements StyleDefinition {
public visibility: Visibility;
public letterSpacing: number;
public lineHeight: number;
public textAlignment: TextAlignment;
public textDecoration: TextDecoration;
public textTransform: TextTransform;

12
tns-core-modules/ui/text-base/text-base-common.ts
View File

@@ -55,6 +55,13 @@ export abstract class TextBaseCommon extends View implements TextBaseDefinition
this.style.letterSpacing = value;
}
get lineHeight(): number {
return this.style.lineHeight;
}
set lineHeight(value: number) {
this.style.lineHeight = value;
}
get textAlignment(): TextAlignment {
return this.style.textAlignment;
}
@@ -202,4 +209,7 @@ export const textDecorationProperty = new CssProperty<Style, TextDecoration>({ n
textDecorationProperty.register(Style);
export const letterSpacingProperty = new CssProperty<Style, number>({ name: "letterSpacing", cssName: "letter-spacing", defaultValue: 0, affectsLayout: isIOS, valueConverter: v => parseFloat(v) });
letterSpacingProperty.register(Style);
letterSpacingProperty.register(Style);
export const lineHeightProperty = new CssProperty<Style, number>({ name: "lineHeight", cssName: "line-height", affectsLayout: isIOS, valueConverter: v => parseFloat(v) });
lineHeightProperty.register(Style);

9
tns-core-modules/ui/text-base/text-base.android.ts
View File

@@ -5,7 +5,7 @@ import {
TextBaseCommon, formattedTextProperty, textAlignmentProperty, textDecorationProperty, fontSizeProperty,
textProperty, textTransformProperty, letterSpacingProperty, colorProperty, fontInternalProperty,
paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length,
whiteSpaceProperty, FormattedString, layout, Span, Color, isBold
whiteSpaceProperty, lineHeightProperty, FormattedString, layout, Span, Color, isBold
} from "./text-base-common";
export * from "./text-base-common";
@@ -218,6 +218,13 @@ export class TextBase extends TextBaseCommon {
}
}
[lineHeightProperty.getDefault](): number {
return this.nativeView.getLineSpacingExtra() / layout.getDisplayDensity();
}
[lineHeightProperty.setNative](value: number) {
this.nativeView.setLineSpacing(value * layout.getDisplayDensity(), 1);
}
[fontInternalProperty.getDefault](): android.graphics.Typeface {
return this.nativeView.getTypeface();
}

20
tns-core-modules/ui/text-base/text-base.ios.ts
View File

@@ -2,8 +2,8 @@
import { Font } from "../styling/font";
import {
TextBaseCommon, textProperty, formattedTextProperty, textAlignmentProperty, textDecorationProperty,
textTransformProperty, letterSpacingProperty, colorProperty, fontInternalProperty, FormattedString,
Span, Color, isBold
textTransformProperty, letterSpacingProperty, colorProperty, fontInternalProperty, lineHeightProperty,
FormattedString, Span, Color, isBold
} from "./text-base-common";
export * from "./text-base-common";
@@ -92,6 +92,10 @@ export class TextBase extends TextBaseCommon {
this._setNativeText();
}
[lineHeightProperty.setNative](value: number) {
this._setNativeText();
}
_setNativeText(reset: boolean = false): void {
if (reset) {
const nativeView = this.nativeView;
@@ -122,6 +126,12 @@ export class TextBase extends TextBaseCommon {
attrText.addAttributeValueRange(NSKernAttributeName, this.letterSpacing * this.nativeView.font.pointSize, { location: 0, length: attrText.length });
}
if (this.style.lineHeight) {
const paragraphStyle = NSMutableParagraphStyle.alloc().init();
paragraphStyle.lineSpacing = this.lineHeight;
attrText.addAttributeValueRange(NSParagraphStyleAttributeName, paragraphStyle, { location: 0, length: attrText.length });
}
if (this.nativeView instanceof UIButton) {
this.nativeView.setAttributedTitleForState(attrText, UIControlState.Normal);
}
@@ -154,6 +164,12 @@ export class TextBase extends TextBaseCommon {
dict.set(NSKernAttributeName, style.letterSpacing * this.nativeView.font.pointSize);
}
if (style.lineHeight) {
const paragraphStyle = NSMutableParagraphStyle.alloc().init();
paragraphStyle.lineSpacing = style.lineHeight;
dict.set(NSParagraphStyleAttributeName, paragraphStyle);
}
const isTextView = this.nativeView instanceof UITextView;
if (style.color && (dict.size > 0 || isTextView)) {
dict.set(NSForegroundColorAttributeName, style.color.ios);