diff --git a/apps/app/fonts/FontAwesome.ttf b/apps/app/fonts/FontAwesome.ttf new file mode 100644 index 000000000..d7994e130 Binary files /dev/null and b/apps/app/fonts/FontAwesome.ttf differ diff --git a/apps/app/ui-tests-app/font/all-fonts.ts b/apps/app/ui-tests-app/font/all-fonts.ts new file mode 100644 index 000000000..e31c847f9 --- /dev/null +++ b/apps/app/ui-tests-app/font/all-fonts.ts @@ -0,0 +1,175 @@ +import { View } from "ui/core/view"; +import { Page, NavigatedData } from "ui/page"; +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 { Color } from "color"; +import * as font from "ui/styling/font"; + +const genericFontFamilies = [ + "system", + "sans-serif", + "serif", + "monospace", +]; +var fontFamilies = []; +var fontNames = []; +const embeddedFontNames = [ + "FontAwesome", + "Pacifico", + "Sofia" +]; +const fontStyles = [ + FontStyle.normal, + FontStyle.italic +]; +const fontWeights = [ + FontWeight.thin, + FontWeight.extraLight, + FontWeight.light, + FontWeight.normal, + FontWeight.medium, + FontWeight.semiBold, + FontWeight.bold, + FontWeight.extraBold, + FontWeight.black, +]; + +var green = new Color("Green"); +var red = new Color("Red"); +var white = new Color("White"); +var black = new Color("Black"); + +var 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`); + // } + + var font_internal = font; + font_internal.ensureSystemFontSets(); + + (>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(); + generateLabels(stackLayout); + scrollView.content = stackLayout; + page.content = scrollView; +} + +function generateLabels(layout: StackLayout) { + layout.addChild(prepareTitle("Generic Font Families", 24)); + for (var 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]); + layout.addChild(view); + } + } + } + + if (fontFamilies.length > 0) + { + layout.addChild(prepareTitle("Font Families", 24)); + } + for (var 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]); + layout.addChild(view); + } + } + } + + 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"); + 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"); + layout.addChild(view); + } +} + +function prepareTitle(text: string, fontSize: number) { + var title = new Label(); + title.text = text; + title.height = 100; + title.backgroundColor = black; + title.color = white; + title.fontSize = fontSize; + title.style.fontStyle = "italic"; + title.borderWidth = 1; + title.borderColor = white; + title.textAlignment = "center"; + return title; +} + +function prepareLabel(fontFamily: string, fontStyle: string, fontWeight: string): View { + var 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}};`; + label.textWrap = true; + label.style.textAlignment = "left"; + label.borderWidth = 1; + label.borderColor = black; + label.style.padding = "2"; + label.setInlineStyle(css); + label.on("loaded", args => { + var sender =