Generic font families system, sans-serif and monospace now correctly resolve the system font when possible on iOS

Resolves #1864

CrossPlatformModules.csproj

@@ -90,6 +90,10 @@
     <TypeScriptCompile Include="apps\perf-tests\NavigationTest\list-picker-page.ts" />
     <TypeScriptCompile Include="apps\perf-tests\custom-transition.android.ts" />
     <TypeScriptCompile Include="apps\perf-tests\custom-transition.ios.ts" />
+    <TypeScriptCompile Include="apps\sample-fonts\app.ts" />
+    <TypeScriptCompile Include="apps\sample-fonts\main-page.ts">
+      <DependentUpon>main-page.xml</DependentUpon>
+    </TypeScriptCompile>
     <TypeScriptCompile Include="apps\tests\layouts\common-layout-tests.ts" />
     <TypeScriptCompile Include="apps\tests\navigation\custom-transition.android.ts" />
     <TypeScriptCompile Include="apps\tests\navigation\custom-transition.ios.ts" />
@@ -152,6 +156,9 @@
     <Content Include="apps\navigation-events-demo\page2.xml" />
     <Content Include="apps\navigation-events-demo\page1.xml" />
     <Content Include="apps\perf-tests\NavigationTest\list-picker-page.xml" />
+    <Content Include="apps\sample-fonts\main-page.xml">
+      <SubType>Designer</SubType>
+    </Content>
     <Content Include="apps\tests\ui\action-bar\ActionBar_BetweenTags.xml" />
     <Content Include="apps\tests\ui\action-bar\ActionBar_NumberAsText.xml" />
     <Content Include="apps\tests\ui\page\modal-page.xml">
@@ -2106,6 +2113,7 @@
     <Content Include="apps\navigation-events-demo\package.json">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="apps\sample-fonts\package.json" />
     <None Include="js-libs\esprima\LICENSE.BSD" />
     <Content Include="source-control.md" />
     <Content Include="ui\segmented-bar\package.json">

apps/sample-fonts/app.ts

@@ -0,0 +1,3 @@
+import application = require("application");
+application.cssFile = "app.css"
+application.start({ moduleName: "main-page" });

apps/sample-fonts/main-page.ts

@@ -0,0 +1,62 @@
+import { View } from "ui/core/view";
+import { EventData } from "data/observable";
+import { LayoutBase } from "ui/layouts/layout-base";
+import { Label } from "ui/label";
+import { TextField } from "ui/text-field";
+import { TextView } from "ui/text-view";
+import { Button } from "ui/button";
+import { FontStyle, FontWeight } from "ui/enums";
+import typeUtils = require("utils/types");
+import { Color } from "color";
+
+const fontFamilies = ["system", "sans-serif", "serif", "monospace"];
+const fontWeights = [FontWeight.normal, FontWeight.bold];
+const fontStyles = [FontStyle.normal, FontStyle.italic];
+
+export function onStackLayoutLoaded(args: EventData) {
+    var layout = <LayoutBase>args.object;
+    _generateViews(() => { return new Label(); }, layout);
+    _generateViews(() => { return new TextField(); }, layout);
+    _generateViews(() => { return new TextView(); }, layout);
+    _generateViews(() => { return new Button(); }, layout);
+}
+
+function _generateViews(factory: () => View, layout: LayoutBase) {
+    for (var f = 0; f < fontFamilies.length; f++) {
+        for (var w = 0; w < fontWeights.length; w++) {
+            for (var s = 0; s < fontStyles.length; s++) {
+                var view = factory();
+                var css = `font-family: ${fontFamilies[f]}; font-weight: ${fontWeights[w]}; font-style: ${fontStyles[s]};`;
+                (<any>view).text = `${typeUtils.getClass(view)} ${css}`;
+                (<any>view).textWrap = true;
+                view.style.textAlignment = "left";
+                view.setInlineStyle(css);
+                view.margin = "1 0";
+                view.borderWidth = 1;
+                view.height = 75;
+                view.color = new Color("Black");
+                view.backgroundColor = new Color("LightGray");
+                view.on("loaded", args => {
+                    (<any>view).text += _getFontInfo(view);
+                });
+                layout.addChild(view);
+            }
+        }
+    }
+}
+
+function _getFontInfo(view: View): string {
+    if (view.ios) {
+        var uiFont: UIFont;
+        if (view.ios instanceof UIButton) {
+            uiFont = view.ios.titleLabel.font;
+        }
+        else if (view.ios.font) {
+            uiFont = view.ios.font;
+        }
+
+        return ` ${uiFont.fontName} ${uiFont.pointSize}pt.`;
+    }
+
+    return "";
+}

apps/sample-fonts/main-page.xml

@@ -0,0 +1,5 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" >
+  <ScrollView>
+    <StackLayout loaded="onStackLayoutLoaded"/>
+  </ScrollView>
+</Page>

apps/sample-fonts/package.json

@@ -0,0 +1,2 @@
+{ "name" : "sample-fonts",
+  "main" : "app.js" }

ui/styling/font-common.ts

@@ -130,6 +130,7 @@ export module genericFontFamilies {
     export var serif = "serif";
     export var sansSerif = "sans-serif";
     export var monospace = "monospace";
+    export var system = "system";
 }
 
 var styles = new Set();

ui/styling/font.android.ts

@@ -102,6 +102,10 @@ export class Font extends common.Font {
                     result = android.graphics.Typeface.MONOSPACE;
                     break;
 
+                case common.genericFontFamilies.system:
+                    result = android.graphics.Typeface.DEFAULT;
+                    break;
+
                 default:
                     result = this.loadFontFromFile(fonts[i]);
                     break;

ui/styling/font.ios.ts

@@ -3,10 +3,6 @@ import common = require("./font-common");
 import fs = require("file-system");
 import * as traceModule from "trace";
 
-var DEFAULT_SERIF = "Times New Roman";
-var DEFAULT_SANS_SERIF = "Helvetica";
-var DEFAULT_MONOSPACE = "Courier New";
-
 export class Font extends common.Font {
     public static default = new Font(undefined, undefined, enums.FontStyle.normal, enums.FontWeight.normal);
 
@@ -18,6 +14,8 @@ export class Font extends common.Font {
 
     public getUIFont(defaultFont: UIFont): UIFont {
         if (!this._uiFont) {
+            var size = this.fontSize || defaultFont.pointSize;
+
             var symbolicTraits: number = 0;
             if (this.isBold) {
                 symbolicTraits |= UIFontDescriptorSymbolicTraits.UIFontDescriptorTraitBold;
@@ -26,11 +24,30 @@ export class Font extends common.Font {
                 symbolicTraits |= UIFontDescriptorSymbolicTraits.UIFontDescriptorTraitItalic;
             }
 
-            var descriptor = resolveFontDescriptor(this.fontFamily, symbolicTraits);
+            var descriptor: UIFontDescriptor;
+            switch (this.fontFamily) {
+
+                case common.genericFontFamilies.sansSerif:
+                case common.genericFontFamilies.system:
+                    let uiFont = UIFont.systemFontOfSize(size);
+                    descriptor = uiFont.fontDescriptor().fontDescriptorWithSymbolicTraits(symbolicTraits);
+                    break;
+
+                case common.genericFontFamilies.monospace:
+                    if ((<any>UIFont).monospacedDigitSystemFontOfSizeWeight) {// This method is available on iOS 9.0 and later.
+                        let uiFont = (<any>UIFont).monospacedDigitSystemFontOfSizeWeight(size, 0);
+                        descriptor = uiFont.fontDescriptor().fontDescriptorWithSymbolicTraits(symbolicTraits);
+                    }
+                    break;
+            }
+
+            if (!descriptor) {
+                descriptor = resolveFontDescriptor(this.fontFamily, symbolicTraits);
+            }
+
             if (!descriptor) {
                 descriptor = defaultFont.fontDescriptor().fontDescriptorWithSymbolicTraits(symbolicTraits);
             }
-            var size = this.fontSize || defaultFont.pointSize;
 
             this._uiFont = UIFont.fontWithDescriptorSize(descriptor, size);
         }
@@ -121,6 +138,9 @@ function resolveFontDescriptor(fontFamilyValue: string, symbolicTraits: number):
     return null;
 }
 
+const DEFAULT_SERIF = "Times New Roman";
+const DEFAULT_MONOSPACE = "Courier New";
+
 function getFontFamilyRespectingGenericFonts(fontFamily: string): string {
     if (!fontFamily) {
         return fontFamily;
@@ -130,9 +150,6 @@ function getFontFamilyRespectingGenericFonts(fontFamily: string): string {
         case common.genericFontFamilies.serif:
             return DEFAULT_SERIF;
 
-        case common.genericFontFamilies.sansSerif:
-            return DEFAULT_SANS_SERIF;
-
         case common.genericFontFamilies.monospace:
             return DEFAULT_MONOSPACE;