From 27682f37428852c78e4dd24cb143967736510393 Mon Sep 17 00:00:00 2001
From: Magnus Schieder <50337967+m-schieder@users.noreply.github.com>
Date: Tue, 26 Apr 2022 09:46:31 +0200
Subject: [PATCH] Make the style of the project titles customizable (#6409)

allow custom font for h1 and h2 projector title
---
 .../app/core/ui-services/load-font.service.ts | 12 +++++++++
 .../item-list/item-list-slide.component.html  |  2 +-
 .../motion/motion-slide.component.html        |  4 +--
 .../topics/topic/topic-slide.component.html   | 13 +++++-----
 client/src/assets/styles/font-variables.scss  |  8 ++++++
 client/src/assets/styles/fonts.scss           | 16 ++++++++++++
 client/src/assets/styles/projector.scss       | 15 ++++++++++-
 server/openslides/core/config_variables.py    | 26 +++++++++++++++++++
 8 files changed, 86 insertions(+), 10 deletions(-)

diff --git a/client/src/app/core/ui-services/load-font.service.ts b/client/src/app/core/ui-services/load-font.service.ts
index a92e2488d..ab4e77b76 100644
--- a/client/src/app/core/ui-services/load-font.service.ts
+++ b/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);
+            }
+        });
     }
 
     /**
diff --git a/client/src/app/slides/agenda/item-list/item-list-slide.component.html b/client/src/app/slides/agenda/item-list/item-list-slide.component.html
index fa0a495aa..8e2524c03 100644
--- a/client/src/app/slides/agenda/item-list/item-list-slide.component.html
+++ b/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"
diff --git a/client/src/app/slides/motions/motion/motion-slide.component.html b/client/src/app/slides/motions/motion/motion-slide.component.html
index 5529bc8d4..a20b247f3 100644
--- a/client/src/app/slides/motions/motion/motion-slide.component.html
+++ b/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">
diff --git a/client/src/app/slides/topics/topic/topic-slide.component.html b/client/src/app/slides/topics/topic/topic-slide.component.html
index 4fbe33e26..90985db4c 100644
--- a/client/src/app/slides/topics/topic/topic-slide.component.html
+++ b/client/src/app/slides/topics/topic/topic-slide.component.html
@@ -1,10 +1,11 @@
 <div *ngIf="data">
-    <h1>
-        <span *ngIf="data.data.item_number">
-            {{ data.data.item_number }} &middot;
-        </span>
-        {{ data.data.title }}
-    </h1>
+        <h1 class="projector_h1">
+            <span *ngIf="data.data.item_number">
+                {{ data.data.item_number }} &middot;
+            </span>
+            {{ data.data.title }}
+        </h1>
+    <div>
 
     <div [innerHTML]="data.data.text | trust: 'html'"></div>
 </div>
diff --git a/client/src/assets/styles/font-variables.scss b/client/src/assets/styles/font-variables.scss
index 2d4dc059d..051883c65 100644
--- a/client/src/assets/styles/font-variables.scss
+++ b/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');
diff --git a/client/src/assets/styles/fonts.scss b/client/src/assets/styles/fonts.scss
index b9f83c7a5..b3172a6b9 100644
--- a/client/src/assets/styles/fonts.scss
+++ b/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;
+}
diff --git a/client/src/assets/styles/projector.scss b/client/src/assets/styles/projector.scss
index a9ff06d87..abfad9cac 100644
--- a/client/src/assets/styles/projector.scss
+++ b/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;
     }
 
diff --git a/server/openslides/core/config_variables.py b/server/openslides/core/config_variables.py
index 58bad5d61..ee17e49af 100644
--- a/server/openslides/core/config_variables.py
+++ b/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",