javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 03:31:45 +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

12
tests/app/ui/text-view/text-view-tests.ts
View File

@ -378,6 +378,18 @@ export var testNativeFontSizeFromLocal = function () {
});
}
var expectedLineHeight = 10;
export var testLocalLineHeightFromCss = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
var textView = <textViewModule.TextView>views[0];
var page = <pagesModule.Page>views[1];
page.css = "textview { line-height: " + expectedLineHeight + "; }";
var actualResult = textView.style.lineHeight;
TKUnit.assert(actualResult === expectedLineHeight, "Actual: " + actualResult + "; Expected: " + expectedLineHeight);
});
}
var expectedColorHex = "#FFFF0000";
var expectedNormalizedColorHex = "#FF0000";
export var testLocalColorFromCss = function () {

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