diff --git a/client/src/app/core/ui-services/media-manage.service.ts b/client/src/app/core/ui-services/media-manage.service.ts index 9114703c6..cc3623d46 100644 --- a/client/src/app/core/ui-services/media-manage.service.ts +++ b/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; diff --git a/client/src/app/shared/components/contdown-time/countdown-time.component.scss b/client/src/app/shared/components/contdown-time/countdown-time.component.scss index 05b01439a..c9aeb62c9 100644 --- a/client/src/app/shared/components/contdown-time/countdown-time.component.scss +++ b/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; } diff --git a/client/src/app/shared/components/contdown-time/countdown-time.component.ts b/client/src/app/shared/components/contdown-time/countdown-time.component.ts index c16721128..ed46a4ccf 100644 --- a/client/src/app/shared/components/contdown-time/countdown-time.component.ts +++ b/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('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. diff --git a/client/src/app/slides/core/countdown/countdown-slide.component.scss b/client/src/app/slides/core/countdown/countdown-slide.component.scss index 3f7c35158..ef89ba7e5 100644 --- a/client/src/app/slides/core/countdown/countdown-slide.component.scss +++ b/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; } } } diff --git a/client/src/assets/fonts/roboto-condensed-bold.woff b/client/src/assets/fonts/roboto-condensed-bold.woff new file mode 100644 index 000000000..44a9bac76 Binary files /dev/null and b/client/src/assets/fonts/roboto-condensed-bold.woff differ diff --git a/client/src/assets/styles/font-variables.scss b/client/src/assets/styles/font-variables.scss index f799a6f53..479a098f3 100644 --- a/client/src/assets/styles/font-variables.scss +++ b/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; diff --git a/client/src/assets/styles/fonts.scss b/client/src/assets/styles/fonts.scss index 7dd03d2a3..489397cc0 100644 --- a/client/src/assets/styles/fonts.scss +++ b/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; +} diff --git a/openslides/core/config_variables.py b/openslides/core/config_variables.py index 49f803450..278aa22ec 100644 --- a/openslides/core/config_variables.py +++ b/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", diff --git a/openslides/core/migrations/0032_add_monospace_font.py b/openslides/core/migrations/0032_add_monospace_font.py new file mode 100644 index 000000000..8b5cf9113 --- /dev/null +++ b/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)]