Add a configurable monospace font for the countdown

use Roboto Condensed bold by default

client/src/app/core/ui-services/media-manage.service.ts

@@ -18,7 +18,7 @@ interface ImageConfigObject {
 /**
  * The structure of a font config
  */
-interface FontConfigObject {
+export interface FontConfigObject {
     display_name: string;
     default: string;
     path: string;

client/src/app/shared/components/contdown-time/countdown-time.component.scss

@@ -49,7 +49,7 @@
 
     .countdown-wrapper {
         width: 170px;
-        text-align: right;
+        text-align: right !important;
         position: relative;
         height: 100%;
 
@@ -67,6 +67,8 @@
         }
 
         #countdown {
+            white-space: nowrap;
+            font-family: $font-monospace;
             font-weight: bold;
             text-align: center;
         }

client/src/app/shared/components/contdown-time/countdown-time.component.ts

@@ -1,6 +1,10 @@
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 
 import { ServertimeService } from 'app/core/core-services/servertime.service';
+import { ConfigService } from 'app/core/ui-services/config.service';
+import { FontConfigObject } from 'app/core/ui-services/media-manage.service';
+
+declare let FontFace: any;
 
 export interface CountdownData {
     running: boolean;
@@ -15,7 +19,7 @@ export interface CountdownData {
     templateUrl: './countdown-time.component.html',
     styleUrls: ['./countdown-time.component.scss']
 })
-export class CountdownTimeComponent implements OnDestroy {
+export class CountdownTimeComponent implements OnInit, OnDestroy {
     /**
      * The time in seconds to make the countdown orange, is the countdown is below this value.
      */
@@ -92,7 +96,23 @@ export class CountdownTimeComponent implements OnDestroy {
         return this._countdown;
     }
 
-    public constructor(private servertimeService: ServertimeService) {}
+    public constructor(private servertimeService: ServertimeService, private configService: ConfigService) {}
+
+    public ngOnInit(): void {
+        this.configService.get<FontConfigObject>('font_monospace').subscribe(font => {
+            if (font) {
+                const customFont = new FontFace('OSFont Monospace', `url(${font.path || font.default})`);
+                customFont
+                    .load()
+                    .then(res => {
+                        (document as any).fonts.add(res);
+                    })
+                    .catch(error => {
+                        console.log(error);
+                    });
+            }
+        });
+    }
 
     /**
      * Updates the countdown time and string format it.

client/src/app/slides/core/countdown/countdown-slide.component.scss

@@ -34,7 +34,6 @@
             font-weight: normal;
             font-size: 18px;
             padding-right: 6px;
-            padding-top: 20px;
         }
     }
 }

client/src/assets/styles/font-variables.scss

@@ -20,3 +20,8 @@ $font-condensed: 'OSFont Condensed';
 
 $font-condensed-regular: url('assets/fonts/fira-sans-condensed-latin-400.woff') format('woff');
 $font-weight-condensed-regular: 400;
+
+/** Monospace Font */
+$font-monospace: 'OSFont Monospace';
+$font-monospace-src: url('assets/fonts/roboto-condensed-bold.woff') format('woff');
+$font-weight-monospace: 400;

client/src/assets/styles/fonts.scss

@@ -44,3 +44,12 @@
     font-weight: $font-weight-condensed-regular;
     src: $font-condensed-regular;
 }
+
+/** Countown */
+@font-face {
+    font-family: $font-monospace;
+    font-style: normal;
+    font-display: swap;
+    font-weight: $font-weight-monospace;
+    src: $font-monospace-src;
+}

openslides/core/config_variables.py

@@ -300,7 +300,13 @@ def get_config_variables():
     # Fonts
     yield ConfigVariable(
         name="fonts_available",
-        default_value=["font_regular", "font_italic", "font_bold", "font_bold_italic"],
+        default_value=[
+            "font_regular",
+            "font_italic",
+            "font_bold",
+            "font_bold_italic",
+            "font_monospace",
+        ],
         weight=320,
         group="Font",
         hidden=True,
@@ -358,6 +364,19 @@ def get_config_variables():
         hidden=True,
     )
 
+    yield ConfigVariable(
+        name="font_monospace",
+        default_value={
+            "display_name": "Font monospace",
+            "default": "assets/fonts/courier-prime.woff",
+            "path": "",
+        },
+        input_type="static",
+        weight=321,
+        group="Font",
+        hidden=True,
+    )
+
     # Custom translations
     yield ConfigVariable(
         name="translations",

openslides/core/migrations/0032_add_monospace_font.py

@@ -0,0 +1,27 @@
+# -*- coding: utf-8 -*-
+from __future__ import unicode_literals
+
+from django.db import migrations
+
+from openslides.core.config import config
+
+
+def update_available_fonts(apps, schema_editor):
+    ConfigStore = apps.get_model("core", "ConfigStore")
+
+    try:
+        fonts = ConfigStore.objects.get(key="fonts_available")
+    except ConfigStore.DoesNotExist:
+        return  # The key is not in the database, nothing to change here
+
+    default_fonts = config.config_variables["fonts_available"].default_value
+
+    fonts.value = default_fonts
+    fonts.save()
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [("core", "0031_projector_default_height")]
+
+    operations = [migrations.RunPython(update_available_fonts)]