8000 Merge pull request #1951 from NativeScript/font-family · hbcodeXCI/NativeScript@696c1c4 · GitHub
[go: up one dir, main page]
Skip to content

Commit 696c1c4

Browse files
hamorphishamorphis
committed
Merge pull request NativeScript#1951 from NativeScript/font-family
Correct generic font families support for system fonts
2 parents a66636f + 2347ccb commit 696c1c4

File tree

9 files changed

+116
-12
lines changed

9 files changed

+116
-12
lines changed

‎CrossPlatformModules.csproj

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,10 @@
9090
<TypeScriptCompile Include="apps\perf-tests\NavigationTest\list-picker-page.ts" />
9191
<TypeScriptCompile Include="apps\perf-tests\custom-transition.android.ts" />
9292
<TypeScriptCompile Include="apps\perf-tests\custom-transition.ios.ts" />
93+
<TypeScriptCompile Include="apps\sample-fonts\app.ts" />
94+
<TypeScriptCompile Include="apps\sample-fonts\main-page.ts">
95+
<DependentUpon>main-page.xml</DependentUpon>
96+
</TypeScriptCompile>
9397
<TypeScriptCompile Include="apps\tests\la 10000 youts\common-layout-tests.ts" />
9498
<TypeScriptCompile Include="apps\tests\navigation\custom-transition.android.ts" />
9599
<TypeScriptCompile Include="apps\tests\navigation\custom-transition.ios.ts" />
@@ -152,6 +156,9 @@
152156
<Content Include="apps\navigation-events-demo\page2.xml" />
153157
<Content Include="apps\navigation-events-demo\page1.xml" />
154158
<Content Include="apps\perf-tests\NavigationTest\list-picker-page.xml" />
159+
<Content Include="apps\sample-fonts\main-page.xml">
160+
<SubType>Designer</SubType>
161+
</Content>
155162
<Content Include="apps\tests\ui\action-bar\ActionBar_BetweenTags.xml" />
156163
<Content Include="apps\tests\ui\action-bar\ActionBar_NumberAsText.xml" />
157164
<Content Include="apps\tests\ui\page\modal-page.xml">
@@ -2106,6 +2113,7 @@
21062113
<Content Include="apps\navigation-events-demo\package.json">
21072114
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
21082115
</Content>
2116+
<Content Include="apps\sample-fonts\package.json" />
21092117
<None Include="js-libs\esprima\LICENSE.BSD" />
21102118
<Content Include="source-control.md" />
21112119
<Content Include="ui\segmented-bar\package.json">

‎apps/sample-fonts/app.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import application = require("application");
2+
application.cssFile = "app.css"
3+
application.start({ moduleName: "main-page" });

‎apps/sample-fonts/main-page.ts

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { View } from "ui/core/view";
2+
import { EventData } from "data/observable";
3+
import { LayoutBase } from "ui/layouts/layout-base";
4+
import { Label } from "ui/label";
5+
import { TextField } from "ui/text-field";
6+
import { TextView } from "ui/text-view";
7+
import { Button } from "ui/button";
8+
import { FontStyle, FontWeight } from "ui/enums";
9+
import typeUtils = require("utils/types");
10+
import { Color } from "color";
11+
12+
const fontFamilies = ["system", "sans-serif", "serif", "monospace"];
13+
const fontWeights = [FontWeight.normal, FontWeight.bold];
14+
const fontStyles = [FontStyle.normal, FontStyle.italic];
15+
16+
export function onStackLayoutLoaded(args: EventData) {
17+
var layout = <LayoutBase>args.object;
18+
_generateViews(() => { return new Label(); }, layout);
19+
_generateViews(() => { return new TextField(); }, layout);
20+
_generateViews(() => { return new TextView(); }, layout);
21+
_generateViews(() => { return new Button(); }, layout);
22+
}
23+
24+
function _generateViews(factory: () => View, layout: LayoutBase) {
25+
for (var f = 0; f < fontFamilies.length; f++) {
26+
for (var w = 0; w < fontWeights.length; w++) {
27+
for (var s = 0; s < fontStyles.length; s++) {
28+
var view = factory();
29+
var css = `font-family: ${fontFamilies[f]}; font-weight: ${fontWeights[w]}; font-style: ${fontStyles[s]};`;
30+
(<any>view).text = `${typeUtils.getClass(view)} ${css}`;
31+
(<any>view).textWrap = true;
32+
view.style.textAlignment = "left";
33+
view.setInlineStyle(css);
34+
view.margin = "1 0";
35+
view.borderWidth = 1;
36+
view.height = 75;
37+
view.color = new Color("Black");
38+
view.backgroundColor = new Color("LightGray");
39+
view.on("loaded", args => {
40+
(<any>view).text += _getFontInfo(view);
41+
});
42+
layout.addChild(view);
43+
}
44+
}
45+
}
46+
}
47+
48+
function _getFontInfo(view: View): string {
49+
if (view.ios) {
50+
var uiFont: UIFont;
51+
if (view.ios instanceof UIButton) {
52+
uiFont = view.ios.titleLabel.font;
53+
}
54+
else if (view.ios.font) {
55+
uiFont = view.ios.font;
56+
}
57+
58+
return ` ${uiFont.fontName} ${uiFont.pointSize}pt.`;
59+
}
60+
61+
return "";
62+
}

‎apps/sample-fonts/main-page.xml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" >
2+
<ScrollView>
3+
<StackLayout loaded="onStackLayoutLoaded"/>
4+
</ScrollView>
5+
</Page>

‎apps/sample-fonts/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{ "name" : "sample-fonts",
2+
"main" : "app.js" }

‎tsconfig.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@
6666
"apps/editable-text-demo/app.ts",
6767
"apps/editable-text-demo/main-page.ts",
6868
"apps/editable-text-demo/model.ts",
69+
"apps/sample-fonts/app.ts",
70+
"apps/sample-fonts/main-page.ts",
6971
"apps/gallery-app/app.ts",
7072
"apps/gallery-app/main-page.ts",
7173
"apps/gallery-app/views/dialogs.ts",
@@ -77,9 +79,9 @@
7779
"apps/modal-views-demo/app.ts",
7880
"apps/modal-views-demo/login-page.ts",
7981
"apps/modal-views-demo/main-page.ts",
80-
"apps/navigation-events-demo/app.ts",
81-
"apps/navigation-events-demo/page1.ts",
82-
"apps/navigation-events-demo/page2.ts",
82+
"apps/navigation-events-demo/app.ts",
83+
"apps/navigation-events-demo/page1.ts",
84+
"apps/navigation-events-demo/page2.ts",
8385
"apps/notifications-demo/app.ts",
8486
"apps/notifications-demo/main-page.ts",
8587
"apps/orientation-demo/app.ts",

‎ui/styling/font-common.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@ export module genericFontFamilies {
130130
export var serif = "serif";
131131
export var sansSerif = "sans-serif";
132132
export var monospace = "monospace";
133+
export var system = "system";
133134
}
134135

135136
var styles = new Set();

‎ui/styling/font.android.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,10 @@ export class Font extends common.Font {
102102
result = android.graphics.Typeface.MONOSPACE;
103103
break;
104104

105+
case common.genericFontFamilies.system:
106+
result = android.graphics.Typeface.DEFAULT;
107+
break;
108+
105109
default:
106110
result = this.loadFontFromFile(fonts[i]);
107111
break;

‎ui/styling/font.ios.ts

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@ import common = require("./font-common");
33
import fs = require("file-system");
44
import * as traceModule from "trace";
55

6-
var DEFAULT_SERIF = "Times New Roman";
7-
var DEFAULT_SANS_SERIF = "Helvetica";
8-
var DEFAULT_MONOSPACE = "Courier New";
9-
106
export class Font extends common.Font {
117
public static default = new Font(undefined, undefined, enums.FontStyle.normal, enums.FontWeight.normal);
128

@@ -18,6 +14,8 @@ export class Font extends common.Font {
1814

1915
public getUIFont(defaultFont: UIFont): UIFont {
2016
if (!this._uiFont) {
17+
var size = this.fontSize || defaultFont.pointSize;
18+
2119
var symbolicTraits: number = 0;
2220
if (this.isBold) {
2321
symbolicTraits |= UIFontDescriptorSymbolicTraits.UIFontDescriptorTraitBold;
@@ -26,11 +24,30 @@ export class Font extends common.Font {
2624
symbolicTraits |= UIFontDescriptorSymbolicTraits.UIFontDescriptorTraitItalic;
2725
}
2826

29-
var descriptor = resolveFontDescriptor(this.fontFamily, symbolicTraits);
27+
var descriptor: UIFontDescriptor;
28+
switch (this.fontFamily) {
29+
30+
case common.genericFontFamilies.sansSerif:
31+
case common.genericFontFamilies.system:
32+
let uiFont = UIFont.systemFontOfSize(size);
33+
descriptor = uiFont.fontDescriptor().fontDescriptorWithSymbolicTraits(symbolicTraits);
34+
break;
35+
36+
case common.genericFontFamilies.monospace:
37+
if ((<any>UIFont).monospacedDigitSystemFontOfSizeWeight) {// This method is available on iOS 9.0 and later.
38+
let uiFont = (<any>UIFont).monospacedDigitSystemFontOfSizeWeight(size, 0);
39+
descriptor = uiFont.fontDescriptor().fontDescriptorWithSymbolicTraits(symbolicTraits);
40+
}
41+
break;
42+
}
43+
44+
if (!descriptor) {
45+
descriptor = resolveFontDescriptor(this.fontFamily, symbolicTraits);
46+
}
47+
3048
if (!descriptor) {
3149
descriptor = defaultFont.fontDescriptor().fontDescriptorWithSymbolicTraits(symbolicTraits);
3250
}
33-
var size = this.fontSize || defaultFont.pointSize;
3451

3552
this._uiFont = UIFont.fontWithDescriptorSize(descriptor, size);
3653
}
@@ -121,6 +138,9 @@ function resolveFontDescriptor(fontFamilyValue: string, symbolicTraits: number):
121138
return null;
122139
}
123140

141+
const DEFAULT_SERIF = "Times New Roman";
142+
const DEFAULT_MONOSPACE = "Courier New";
143+
124144
function getFontFamilyRespectingGenericFonts(fontFamily: string): string {
125145
if (!fontFamily) {
126146
return fontFamily;
@@ -130,9 +150,6 @@ function getFontFamilyRespectingGenericFonts(fontFamily: string): string {
130150
case common.genericFontFamilies.serif:
131151
return DEFAULT_SERIF;
132152

133-
case common.genericFontFamilies.sansSerif:
134-
return DEFAULT_SANS_SERIF;
135-
136153
case common.genericFontFamilies.monospace:
137154
return DEFAULT_MONOSPACE;
138155

0 commit comments

Comments
 (0)
0