Add a configurable monospace font for the countdown

use Roboto Condensed bold by default
This commit is contained in:
Joshua Sangmeister 2020-05-19 13:14:37 +02:00 committed by Emanuel Schütze
parent 0c93c44f0d
commit e653021eff
9 changed files with 88 additions and 7 deletions

View File

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

View File

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

View File

@ -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 { 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 { export interface CountdownData {
running: boolean; running: boolean;
@ -15,7 +19,7 @@ export interface CountdownData {
templateUrl: './countdown-time.component.html', templateUrl: './countdown-time.component.html',
styleUrls: ['./countdown-time.component.scss'] 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. * 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; 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. * Updates the countdown time and string format it.

View File

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

Binary file not shown.

View File

@ -20,3 +20,8 @@ $font-condensed: 'OSFont Condensed';
$font-condensed-regular: url('assets/fonts/fira-sans-condensed-latin-400.woff') format('woff'); $font-condensed-regular: url('assets/fonts/fira-sans-condensed-latin-400.woff') format('woff');
$font-weight-condensed-regular: 400; $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;

View File

@ -44,3 +44,12 @@
font-weight: $font-weight-condensed-regular; font-weight: $font-weight-condensed-regular;
src: $font-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;
}

View File

@ -300,7 +300,13 @@ def get_config_variables():
# Fonts # Fonts
yield ConfigVariable( yield ConfigVariable(
name="fonts_available", 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, weight=320,
group="Font", group="Font",
hidden=True, hidden=True,
@ -358,6 +364,19 @@ def get_config_variables():
hidden=True, 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 # Custom translations
yield ConfigVariable( yield ConfigVariable(
name="translations", name="translations",

View File

@ -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)]