Make the style of the project titles customizable (#6409)

allow custom font for h1 and h2 projector title

client/src/app/core/ui-services/load-font.service.ts

@@ -68,6 +68,18 @@ export class LoadFontService {
                 this.setNewFontFace('OSFont ChyronName', chyronFont.path || chyronFont.default);
             }
         });
+
+        this.configService.get<FontConfigObject>('projector_h1').subscribe(projectorH1 => {
+            if (projectorH1) {
+                this.setNewFontFace('OSFont projectorH1', projectorH1.path || projectorH1.default);
+            }
+        });
+
+        this.configService.get<FontConfigObject>('projector_h2').subscribe(projectorH2 => {
+            if (projectorH2) {
+                this.setNewFontFace('OSFont projectorH2', projectorH2.path || projectorH2.default);
+            }
+        });
     }
 
     /**

client/src/app/slides/agenda/item-list/item-list-slide.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="data" class="agenda-slide-wrapper">
-    <h1>{{ 'Agenda' | translate }}</h1>
+    <h1 class="projector_h1">{{ 'Agenda' | translate }}</h1>
 
     <div
         *ngFor="let item of data.data.items"

client/src/app/slides/motions/motion/motion-slide.component.html

@@ -21,12 +21,12 @@
         <!-- Title -->
         <div class="spacer" [ngStyle]="{ height: projector.show_header_footer ? '50px' : '0' }"></div>
         <div [ngClass]="{ slidetitle: data.data.show_meta_box }">
-            <h1>
+            <h1 class="projector_h1">
                 <span *ngIf="data.data.identifier">{{ data.data.identifier }}:</span>
                 {{ getTitleWithChanges() }}
             </h1>
             <!-- recommendation referencing motions -->
-            <h2 *ngIf="data.data.show_meta_box && data.data.recommendation_referencing_motions">
+            <h2 *ngIf="data.data.show_meta_box && data.data.recommendation_referencing_motions" class="projector_h2">
                 <span>{{ 'Referring motions' | translate }}</span
                 >:
                 <span *ngFor="let titleInformation of referencingMotions; let last = last">

client/src/app/slides/topics/topic/topic-slide.component.html

@@ -1,10 +1,11 @@
 <div *ngIf="data">
-    <h1>
+        <h1 class="projector_h1">
-        <span *ngIf="data.data.item_number">
+            <span *ngIf="data.data.item_number">
-            {{ data.data.item_number }} &middot;
+                {{ data.data.item_number }} &middot;
-        </span>
+            </span>
-        {{ data.data.title }}
+            {{ data.data.title }}
-    </h1>
+        </h1>
+    <div>
 
     <div [innerHTML]="data.data.text | trust: 'html'"></div>
 </div>

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

@@ -30,3 +30,11 @@ $font-weight-monospace: 400;
 $font-chyronname: 'OSFont ChyronName';
 $font-chyronname-src: url('../fonts/fira-sans-latin-400.woff') format('woff');
 $font-weight-chyronname: 400;
+
+/** Projector H1 Font */
+$font-projectorH1: 'OSFont projectorH1';
+$font-projectorH1-src: url('../fonts/fira-sans-latin-400.woff') format('woff');
+
+/** Projector H2 Font */
+$font-projectorH2: 'OSFont projectorH2';
+$font-projectorH2-src: url('../fonts/fira-sans-latin-400.woff') format('woff');

client/src/assets/styles/fonts.scss

@@ -62,3 +62,19 @@
     font-weight: $font-weight-chyronname;
     src: $font-chyronname-src;
 }
+
+/** projectorH1 */
+@font-face {
+    font-family: $font-projectorH1;
+    font-style: normal;
+    font-display: swap;
+    src: $font-projectorH1-src;
+}
+
+/** projectorH2 */
+@font-face {
+    font-family: $font-projectorH2;
+    font-style: normal;
+    font-display: swap;
+    src: $font-projectorH2-src;
+}

client/src/assets/styles/projector.scss

@@ -11,13 +11,26 @@
         line-height: 1.1em;
     }
 
+    .slidetitle > h1,
+    h1.projector_h1 {
+        &, * {
+            font-family: $font-projectorH1;
+        }
+    }
+
     h2 {
         line-height: 40px;
         font-weight: normal;
     }
 
+    .slidetitle > h2,
+    h2.projector_h2 {
+        &, * {
+            font-family: $font-projectorH2;
+        }
+    }
+
     h3 {
-        color: #222;
         margin-bottom: 10px;
     }
 

server/openslides/core/config_variables.py

@@ -479,6 +479,8 @@ def get_config_variables():
             "font_bold_italic",
             "font_monospace",
             "font_chyron_speaker_name",
+            "projector_h1",
+            "projector_h2",
         ],
         weight=320,
         group="Font",
@@ -563,6 +565,30 @@ def get_config_variables():
         hidden=True,
     )
 
+    yield ConfigVariable(
+        name="projector_h1",
+        default_value={
+            "display_name": "Projector h1",
+            "default": "assets/fonts/fira-sans-latin-400.woff",
+            "path": "",
+        },
+        input_type="static",
+        group="Font",
+        hidden=True,
+    )
+
+    yield ConfigVariable(
+        name="projector_h2",
+        default_value={
+            "display_name": "Projector h2",
+            "default": "assets/fonts/fira-sans-latin-400.woff",
+            "path": "",
+        },
+        input_type="static",
+        group="Font",
+        hidden=True,
+    )
+
     # Custom translations
     yield ConfigVariable(
         name="translations",