Преглед на файлове

Use Lab Grotesque font

The font will only be used for officially hosted versions, due to
licensing reasons. If `SELF_HOSTED` is set to true, the font will only
be used if a `FONT_CSS_URL` is provided. Otherwise, there will be a
fallback to Roboto.
Danilo Bargen преди 5 години
родител
ревизия
8d211f09f1
променени са 8 файла, в които са добавени 69 реда и са изтрити 6 реда
  1. 3 2
      index.html
  2. 7 0
      src/config.ts
  3. 2 0
      src/controllers.ts
  4. 49 0
      src/controllers/header.ts
  5. 0 3
      src/controllers/theme.ts
  6. 1 1
      src/sass/base/_typography.scss
  7. 4 0
      src/sass/sections/_welcome.scss
  8. 3 0
      src/threema.d.ts

+ 3 - 2
index.html

@@ -20,7 +20,7 @@
 
 -->
 <html ng-strict-di ng-controller="StatusController as ctrl">
-<head>
+<head ng-controller="HeaderController as hdrCtrl">
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="referrer" content="no-referrer">
@@ -49,7 +49,8 @@
     <link rel="stylesheet" href="node_modules/croppie/croppie.css?v=[[VERSION]]">
 
     <!-- Fonts -->
-    <link rel="stylesheet" href="fonts/roboto.css?v=[[VERSION]]" type="text/css">
+    <link rel="stylesheet" ng-href="{{ hdrCtrl.fontUrl() }}" type="text/css" ng-if="hdrCtrl.useThreemaFont()">
+    <link rel="stylesheet" ng-href="fonts/roboto.css?v=[[VERSION]]" type="text/css" ng-if="!hdrCtrl.useThreemaFont()">
     <link rel="stylesheet" href="fonts/material.css?v=[[VERSION]]" type="text/css">
 
     <!-- Own stylesheets -->

+ 7 - 0
src/config.ts

@@ -37,6 +37,13 @@ export default {
     // Push
     PUSH_URL: 'https://push-web.threema.ch/push',
 
+    // Fonts
+    // Note: If you want to use the Lab Grotesque font in your self-hosted
+    //       instance (with SELF_HOSTED=true), you need to obtain a license for
+    //       it and update the font URL below. Otherwise, Threema Web will
+    //       fall back to Roboto.
+    FONT_CSS_URL: null,
+
     // Padding length (in characters) of the log tag
     // Note: The padding will be stripped by the report log.
     LOG_TAG_PADDING: 20,

+ 2 - 0
src/controllers.ts

@@ -16,12 +16,14 @@
  */
 
 import {FooterController} from './controllers/footer';
+import {HeaderController} from './controllers/header';
 import {StatusController} from './controllers/status';
 import {ThemeController} from './controllers/theme';
 
 angular.module('3ema.controllers', ['3ema.services'])
 
 .controller('FooterController', FooterController)
+.controller('HeaderController', HeaderController)
 .controller('StatusController', StatusController)
 .controller('ThemeController', ThemeController)
 

+ 49 - 0
src/controllers/header.ts

@@ -0,0 +1,49 @@
+/**
+ * This file is part of Threema Web.
+ *
+ * Threema Web is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * This controller handles the HTML page header (e.g. loading scripts and styles).
+ */
+export class HeaderController {
+    // Config
+    private config: threema.Config;
+
+    public static $inject = ['CONFIG'];
+    constructor(config: threema.Config) {
+        this.config = config;
+    }
+
+    /**
+     * Return whether or not to use the Threema font (Lab Grotesque).
+     */
+    public useThreemaFont(): boolean {
+        // In the officially hosted version, the Threema font is loaded from static.threema.ch.
+        // In a self-hosted version, a custom font URL needs to be provided.
+        return !this.config.SELF_HOSTED || this.config.FONT_CSS_URL !== null;
+    }
+
+    /**
+     * Return the URL to the Threema font (Lab Grotesque).
+     */
+    public fontUrl(): string {
+        if (this.config.FONT_CSS_URL === null) {
+            return 'https://static.threema.ch/fonts/labgrotesque.css';
+        } else {
+            return this.config.FONT_CSS_URL;
+        }
+    }
+}

+ 0 - 3
src/controllers/theme.ts

@@ -27,9 +27,6 @@ export class ThemeController {
     // Logging
     private readonly log: Logger;
 
-    // Config
-    private config: threema.Config;
-
     // Theme name
     public theme: string;
 

+ 1 - 1
src/sass/base/_typography.scss

@@ -17,7 +17,7 @@ h2 {
 html,
 input,
 textarea {
-    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: 'Lab Grotesque', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 em {

+ 4 - 0
src/sass/sections/_welcome.scss

@@ -15,6 +15,10 @@
         margin-bottom: 20px;
     }
 
+    p {
+        font-size: .9em;
+    }
+
     &,
     input {
         text-align: center;

+ 3 - 0
src/threema.d.ts

@@ -674,6 +674,9 @@ declare namespace threema {
         // Push
         PUSH_URL: string;
 
+        // Fonts
+        FONT_CSS_URL: string;
+
         // Logging/debugging
         LOG_TAG_PADDING: number,
         CONSOLE_LOG_LEVEL: LogLevel;