Make the style of the projector titles customizable (#1156)

OpenSlides · May 25, 2022 · 3231e26 · 3231e26
1 parent d1b2225
commit 3231e26
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 9 deletions.
diff --git a/client/src/app/domain/models/mediafiles/mediafile.constants.ts b/client/src/app/domain/models/mediafiles/mediafile.constants.ts
@@ -18,20 +18,32 @@ export const LogoDisplayNames: { [place in LogoPlace]: string } = {
     pdf_ballot_paper: `PDF ballot paper logo`
 };
 
-export type FontPlace = 'regular' | 'italic' | 'bold' | 'bold_italic' | 'monospace' | 'chyron_speaker_name';
+export type FontPlace =
+    | 'regular'
+    | 'italic'
+    | 'bold'
+    | 'bold_italic'
+    | 'monospace'
+    | 'chyron_speaker_name'
+    | 'projector_h1'
+    | 'projector_h2';
 export const FontDisplayNames: { [place in FontPlace]: string } = {
     regular: `Font regular`,
     italic: `Font italic`,
     bold: `Font bold`,
     bold_italic: `Font bold italic`,
     monospace: `Font monospace`,
-    chyron_speaker_name: `Chyron speaker name`
+    chyron_speaker_name: `Chyron speaker name`,
+    projector_h1: `Projector h1`,
+    projector_h2: `Projector h2`
 };
 export const FontDefaults: { [place in FontPlace]: string } = {
     regular: `assets/fonts/fira-sans-latin-400.woff`,
     italic: `assets/fonts/fira-sans-latin-400italic.woff`,
     bold: `assets/fonts/fira-sans-latin-500.woff`,
     bold_italic: `assets/fonts/fira-sans-latin-500italic.woff`,
     monospace: `assets/fonts/roboto-condensed-bold.woff`,
-    chyron_speaker_name: `assets/fonts/fira-sans-latin-400.woff`
+    chyron_speaker_name: `assets/fonts/fira-sans-latin-400.woff`,
+    projector_h1: `assets/fonts/fira-sans-latin-500.woff`,
+    projector_h2: `assets/fonts/fira-sans-latin-400.woff`
 };
diff --git a/...a-item-list-slide/components/agenda-item-list-slide/agenda-item-list-slide.component.html b/...a-item-list-slide/components/agenda-item-list-slide/agenda-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/...mponents/motions/modules/motion-slide/components/motion-slide/motion-slide.component.html b/...mponents/motions/modules/motion-slide/components/motion-slide/motion-slide.component.html
@@ -24,12 +24,12 @@ <h3>{{ recommender }}</h3>
         <!-- Title -->
         <div class="spacer" [ngStyle]="{ height: projector.show_header_footer ? '50px' : '0' }"></div>
         <div [ngClass]="{ slidetitle: data.data.show_sidebox }">
-            <h1>
+            <h1 class="projector_h1">
                 <span *ngIf="data.data.number">{{ data.data.number }}:</span>
                 {{ getTitleWithChanges() }}
             </h1>
             <!-- recommendation referencing motions -->
-            <h2 *ngIf="data.data.show_sidebox && data.data.recommendation_referencing_motions">
+            <h2 *ngIf="data.data.show_sidebox && 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/...r/modules/slides/components/topic-slide/components/topic-slide/topic-slide.component.html b/...r/modules/slides/components/topic-slide/components/topic-slide/topic-slide.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="data">
-    <h1>
+    <h1 class="projector_h1">
         <span *ngIf="data.data.item_number">{{ data.data.item_number }} &middot;</span>
         {{ data.data.title }}
     </h1>

diff --git a/client/src/app/site/pages/meetings/services/load-font.service.ts b/client/src/app/site/pages/meetings/services/load-font.service.ts
@@ -59,6 +59,18 @@ export class LoadFontService {
                 this.setNewFontFace(`OSFont ChyronName`, chyronFont);
             }
         });
+
+        this.mediaManageService.getFontUrlObservable(`projector_h1`).subscribe(projectorH1 => {
+            if (projectorH1) {
+                this.setNewFontFace(`OSFont projectorH1`, projectorH1);
+            }
+        });
+
+        this.mediaManageService.getFontUrlObservable(`projector_h2`).subscribe(projectorH2 => {
+            if (projectorH2) {
+                this.setNewFontFace(`OSFont projectorH2`, projectorH2);
+            }
+        });
     }
 
     /**

diff --git a/client/src/app/site/pages/meetings/services/media-manage.service.ts b/client/src/app/site/pages/meetings/services/media-manage.service.ts
@@ -31,7 +31,16 @@ export class MediaManageService {
     }
 
     public get allFontPlaces(): FontPlace[] {
-        return [`regular`, `italic`, `bold`, `bold_italic`, `monospace`, `chyron_speaker_name`];
+        return [
+            `regular`,
+            `italic`,
+            `bold`,
+            `bold_italic`,
+            `monospace`,
+            `chyron_speaker_name`,
+            `projector_h1`,
+            `projector_h2`
+        ];
     }
 
     private readonly logoUrlSubjects: { [place in LogoPlace]?: BehaviorSubject<string | null> } = {};

diff --git a/client/src/assets/styles/font-variables.scss b/client/src/assets/styles/font-variables.scss
@@ -30,3 +30,12 @@ $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-500.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
@@ -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
@@ -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;
     }