From 43d9d1eac9a65b07f5d9312e9b71f72e9b33151c Mon Sep 17 00:00:00 2001 From: vakrilov Date: Wed, 21 Jun 2017 14:19:25 +0300 Subject: [PATCH] Reworked fonts logic --- apps/app/ui-tests-app/font/all-fonts.ts | 92 +++--- tns-core-modules/ui/styling/font-common.ts | 9 +- tns-core-modules/ui/styling/font.android.ts | 46 ++- tns-core-modules/ui/styling/font.ios.ts | 301 ++++++-------------- 4 files changed, 167 insertions(+), 281 deletions(-) diff --git a/apps/app/ui-tests-app/font/all-fonts.ts b/apps/app/ui-tests-app/font/all-fonts.ts index e31c847f9..ddc855cbc 100644 --- a/apps/app/ui-tests-app/font/all-fonts.ts +++ b/apps/app/ui-tests-app/font/all-fonts.ts @@ -4,9 +4,10 @@ import { StackLayout } from "ui/layouts/stack-layout"; import { ScrollView } from "ui/scroll-view"; import { Label } from "ui/label"; import { FontStyle, FontWeight } from "ui/enums"; -import typeUtils = require("utils/types"); +import * as typeUtils from "utils/types"; import { Color } from "color"; -import * as font from "ui/styling/font"; +import * as utils from "utils/utils"; +import { isIOS } from "platform"; const genericFontFamilies = [ "system", @@ -14,8 +15,8 @@ const genericFontFamilies = [ "serif", "monospace", ]; -var fontFamilies = []; -var fontNames = []; +let fontFamilies = []; +let fontNames = []; const embeddedFontNames = [ "FontAwesome", "Pacifico", @@ -37,34 +38,36 @@ const fontWeights = [ FontWeight.black, ]; -var green = new Color("Green"); -var red = new Color("Red"); -var white = new Color("White"); -var black = new Color("Black"); +let green = new Color("Green"); +let red = new Color("Red"); +let white = new Color("White"); +let black = new Color("Black"); -var compareIgnoreCase = function (a, b) { +let compareIgnoreCase = function (a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); }; -if (font.ios) { - // for (var f = 0; f < embeddedFontNames.length; f++) { - // font.ios.registerFont(`fonts/${embeddedFontNames[f]}.ttf`); - // } +if (isIOS) { + const nsFontFamilies = utils.ios.getter(UIFont, UIFont.familyNames); + for (let i = 0; i < nsFontFamilies.count; i++) { + const family = nsFontFamilies.objectAtIndex(i); + fontFamilies.push(family) - var font_internal = font; - font_internal.ensureSystemFontSets(); + const nsFonts = UIFont.fontNamesForFamilyName(family); + for (let j = 0; j < nsFonts.count; j++) { + const font = nsFonts.objectAtIndex(j); + fontNames.push(font) + } + } - (>font_internal.systemFontFamilies).forEach(f => fontFamilies.push(f)); fontFamilies = fontFamilies.sort(compareIgnoreCase); - - (>font_internal.systemFonts).forEach(f => fontNames.push(f)); fontNames = fontNames.sort(compareIgnoreCase); } export function onPageLoaded(args: NavigatedData) { - var page = args.object; - var scrollView = new ScrollView(); - var stackLayout = new StackLayout(); + let page = args.object; + let scrollView = new ScrollView(); + let stackLayout = new StackLayout(); generateLabels(stackLayout); scrollView.content = stackLayout; page.content = scrollView; @@ -72,25 +75,24 @@ export function onPageLoaded(args: NavigatedData) { function generateLabels(layout: StackLayout) { layout.addChild(prepareTitle("Generic Font Families", 24)); - for (var f = 0; f < genericFontFamilies.length; f++) { + for (let f = 0; f < genericFontFamilies.length; f++) { layout.addChild(prepareTitle(genericFontFamilies[f], 20)); - for (var s = 0; s < fontStyles.length; s++) { - for (var w = 0; w < fontWeights.length; w++) { - var view = prepareLabel(genericFontFamilies[f], fontStyles[s], fontWeights[w]); + for (let s = 0; s < fontStyles.length; s++) { + for (let w = 0; w < fontWeights.length; w++) { + let view = prepareLabel(genericFontFamilies[f], fontStyles[s], fontWeights[w]); layout.addChild(view); } } } - if (fontFamilies.length > 0) - { + if (fontFamilies.length > 0) { layout.addChild(prepareTitle("Font Families", 24)); } - for (var f = 0; f < fontFamilies.length; f++) { + for (let f = 0; f < fontFamilies.length; f++) { layout.addChild(prepareTitle(fontFamilies[f], 20)); - for (var s = 0; s < fontStyles.length; s++) { - for (var w = 0; w < fontWeights.length; w++) { - var view = prepareLabel(fontFamilies[f], fontStyles[s], fontWeights[w]); + for (let s = 0; s < fontStyles.length; s++) { + for (let w = 0; w < fontWeights.length; w++) { + let view = prepareLabel(fontFamilies[f], fontStyles[s], fontWeights[w]); layout.addChild(view); } } @@ -99,22 +101,22 @@ function generateLabels(layout: StackLayout) { if (fontNames.length > 0) { layout.addChild(prepareTitle("Phone Fonts", 24)); } - for (var f = 0; f < fontNames.length; f++) { - var view = prepareLabel(fontNames[f], "normal", "normal"); + for (let f = 0; f < fontNames.length; f++) { + let view = prepareLabel(fontNames[f], "normal", "normal"); layout.addChild(view); } if (embeddedFontNames.length > 0) { layout.addChild(prepareTitle("Embedded Fonts", 24)); } - for (var f = 0; f < embeddedFontNames.length; f++) { - var view = prepareLabel(embeddedFontNames[f], "normal", "normal"); + for (let f = 0; f < embeddedFontNames.length; f++) { + let view = prepareLabel(embeddedFontNames[f], "normal", "normal"); layout.addChild(view); } } function prepareTitle(text: string, fontSize: number) { - var title = new Label(); + let title = new Label(); title.text = text; title.height = 100; title.backgroundColor = black; @@ -128,23 +130,23 @@ function prepareTitle(text: string, fontSize: number) { } function prepareLabel(fontFamily: string, fontStyle: string, fontWeight: string): View { - var label = new Label(); + let label = new Label(); label["font-family"] = fontFamily; - var fontFamilyCss = `font-family: ${fontFamily}; `; - var fontStyleCss = fontStyle !== FontStyle.normal ? `font-style: ${fontStyle}; ` : ""; - var fontWeightCss = fontWeight !== FontWeight.normal ? `font-weight: ${fontWeight}; ` : ""; - var css = `${fontFamilyCss}${fontStyleCss}${fontWeightCss}`; - label.text = `${typeUtils.getClass(label) } {${css}};`; + let fontFamilyCss = `font-family: ${fontFamily}; `; + let fontStyleCss = fontStyle !== FontStyle.normal ? `font-style: ${fontStyle}; ` : ""; + let fontWeightCss = fontWeight !== FontWeight.normal ? `font-weight: ${fontWeight}; ` : ""; + let css = `${fontFamilyCss}${fontStyleCss}${fontWeightCss}`; + label.text = `${typeUtils.getClass(label)} {${css}};`; label.textWrap = true; label.style.textAlignment = "left"; label.borderWidth = 1; label.borderColor = black; - label.style.padding = "2"; + label.style.padding = "2"; label.setInlineStyle(css); label.on("loaded", args => { - var sender =