diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts index 3219e8ac0..212c1e611 100644 --- a/tns-core-modules/ui/core/view-common.ts +++ b/tns-core-modules/ui/core/view-common.ts @@ -11,6 +11,7 @@ import { ViewBase, getEventOrGestureName } from "./view-base"; import { propagateInheritedProperties, clearInheritedProperties, Property, InheritedProperty, CssProperty, ShorthandProperty, InheritedCssProperty } from "./properties"; import { observe, fromString as gestureFromString, GesturesObserver, GestureTypes, GestureEventData } from "ui/gestures"; import { isIOS } from "platform"; +import { Font } from "ui/styling/font"; // TODO: Remove this and start using string as source (for android). import { fromFileOrResource, fromBase64, fromUrl } from "image-source"; @@ -2171,3 +2172,134 @@ opacityProperty.register(Style); export const colorProperty = new InheritedCssProperty({ name: "color", cssName: "color", equalityComparer: Color.equals, valueConverter: (v: string) => new Color(v) }); colorProperty.register(Style); + + +export let fontInternalProperty = new CssProperty({ name: "fontInternal", cssName: "_fontInternal", defaultValue: Font.default }); + +export let fontFamilyProperty = new InheritedCssProperty({ + name: "fontFamily", cssName: "font-family", valueChanged: (target, newValue) => { + let currentFont = target.fontInternal; + if (currentFont.fontFamily !== newValue) { + target.fontInternal = currentFont.withFontFamily(newValue); + } + } +}); +fontFamilyProperty.register(Style); + +export let fontSizeProperty = new InheritedCssProperty({ + name: "fontSize", cssName: "font-size", valueChanged: (target, newValue) => { + let currentFont = target.fontInternal; + if (currentFont.fontSize !== newValue) { + target.fontInternal = currentFont.withFontSize(newValue); + } + }, + valueConverter: (v) => parseFloat(v) +}); +fontSizeProperty.register(Style); + +export let fontStyleProperty = new InheritedCssProperty({ + name: "fontStyle", cssName: "font-style", defaultValue: "normal", valueChanged: (target, newValue) => { + if (!(newValue === "normal" || newValue === "italic")) { + throw new Error(`font-style should be 'normal' or 'italic'. value: ${newValue}`) + } + + let currentFont = target.fontInternal; + if (currentFont.fontStyle !== newValue) { + target.fontInternal = currentFont.withFontStyle(newValue); + } + } +}); +fontStyleProperty.register(Style); + +export let fontWeightProperty = new InheritedCssProperty({ + name: "fontWeight", cssName: "font-weight", defaultValue: "normal", valueChanged: (target, newValue) => { + if (!newValue) { + console.trace(); + } + + // TODO: Console.log errors or throw error? + if (!(newValue === "normal" || newValue === "bold" + || newValue === "100" || newValue === "200" || newValue === "300" + || newValue === "400" || newValue === "500" || newValue === "600" + || newValue === "700" || newValue === "800" || newValue === "900")) { + throw new Error(`Invalid font-weight value: ${newValue}`); + } + + let currentFont = target.fontInternal; + if (currentFont.fontWeight !== newValue) { + target.fontInternal = currentFont.withFontWeight(newValue); + } + } +}); +fontWeightProperty.register(Style); + +export let fontProperty = new ShorthandProperty