SF-3641 Refactor --project-font to app-root (#3565)

Author: siltomato

src/SIL.XForge.Scripture/ClientApp/src/app/app.component.spec.ts

@@ -26,6 +26,7 @@ import { DialogService } from 'xforge-common/dialog.service';
 import { ErrorReportingService } from 'xforge-common/error-reporting.service';
 import { ExternalUrlService } from 'xforge-common/external-url.service';
 import { FileService } from 'xforge-common/file.service';
+import { FontService } from 'xforge-common/font.service';
 import { I18nService } from 'xforge-common/i18n.service';
 import { LocationService } from 'xforge-common/location.service';
 import { UserDoc } from 'xforge-common/models/user-doc';
@@ -63,6 +64,7 @@ const mockedPwaService = mock(PwaService);
 const mockedI18nService = mock(I18nService);
 const mockedUrlService = mock(ExternalUrlService);
 const mockedFileService = mock(FileService);
+const mockedFontService = mock(FontService);
 const mockedErrorReportingService = mock(ErrorReportingService);
 const mockedDialogService = mock(DialogService);
 
@@ -117,6 +119,7 @@ describe('AppComponent', () => {
       { provide: ExternalUrlService, useMock: mockedUrlService },
       { provide: OnlineStatusService, useClass: TestOnlineStatusService },
       { provide: FileService, useMock: mockedFileService },
+      { provide: FontService, useMock: mockedFontService },
       { provide: ErrorReportingService, useMock: mockedErrorReportingService },
       { provide: BreakpointObserver, useClass: TestBreakpointObserver },
       { provide: DialogService, useMock: mockedDialogService },
@@ -631,6 +634,61 @@ describe('AppComponent', () => {
       env.showHideUserMenu();
     }));
   });
+
+  describe('Project Font', () => {
+    it('sets project font when project is selected', fakeAsync(() => {
+      const env = new TestEnvironment();
+      when(mockedFontService.getFontFamilyFromProject(anything())).thenReturn('Charis SIL');
+      env.navigate(['/projects', 'project01']);
+      env.init();
+
+      const hostElement = env.fixture.nativeElement as HTMLElement;
+      expect(hostElement.style.getPropertyValue('--project-font')).toEqual('Charis SIL');
+      verify(mockedFontService.getFontFamilyFromProject(anything())).once();
+    }));
+
+    it('clears project font when no project is selected', fakeAsync(() => {
+      const env = new TestEnvironment();
+      when(mockedFontService.getFontFamilyFromProject(anything())).thenReturn('Charis SIL');
+      env.navigate(['/projects', 'project01']);
+      env.init();
+
+      const hostElement = env.fixture.nativeElement as HTMLElement;
+      expect(hostElement.style.getPropertyValue('--project-font')).toEqual('Charis SIL');
+
+      env.navigate(['/projects']);
+      env.wait();
+
+      // When null, the property should be empty string
+      expect(hostElement.style.getPropertyValue('--project-font')).toEqual('');
+    }));
+
+    it('updates project font when switching projects', fakeAsync(() => {
+      const env = new TestEnvironment();
+      when(mockedFontService.getFontFamilyFromProject(anything())).thenReturn('Charis SIL', 'Andika');
+      env.navigate(['/projects', 'project01']);
+      env.init();
+
+      const hostElement = env.fixture.nativeElement as HTMLElement;
+      expect(hostElement.style.getPropertyValue('--project-font')).toEqual('Charis SIL');
+
+      env.navigate(['/projects', 'project02']);
+      env.wait();
+
+      expect(hostElement.style.getPropertyValue('--project-font')).toEqual('Andika');
+      verify(mockedFontService.getFontFamilyFromProject(anything())).twice();
+    }));
+
+    it('sets CSS custom property on host element', fakeAsync(() => {
+      const env = new TestEnvironment();
+      when(mockedFontService.getFontFamilyFromProject(anything())).thenReturn('Noto Sans');
+      env.navigate(['/projects', 'project01']);
+      env.init();
+
+      const hostElement = env.fixture.nativeElement as HTMLElement;
+      expect(hostElement.style.getPropertyValue('--project-font')).toEqual('Noto Sans');
+    }));
+  });
 });
 
 class TestEnvironment {
@@ -730,6 +788,7 @@ class TestEnvironment {
     when(mockedUrlService.helps).thenReturn('helps');
     when(mockedUrlService.announcementPage).thenReturn('community-announcements');
     when(mockedUrlService.communitySupport).thenReturn('community-support');
+    when(mockedFontService.getFontFamilyFromProject(anything())).thenReturn('Charis SIL');
 
     if (initialConnectionStatus === 'offline') {
       this.goFullyOffline();

src/SIL.XForge.Scripture/ClientApp/src/app/app.component.ts

@@ -2,7 +2,7 @@ import { BidiModule } from '@angular/cdk/bidi';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { AsyncPipe, DOCUMENT } from '@angular/common';
-import { Component, DestroyRef, Inject, OnDestroy, OnInit } from '@angular/core';
+import { Component, DestroyRef, HostBinding, Inject, OnDestroy, OnInit } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButton, MatIconAnchor, MatIconButton } from '@angular/material/button';
 import { MatDivider } from '@angular/material/divider';
@@ -33,6 +33,7 @@ import { ExternalUrlService } from 'xforge-common/external-url.service';
 import { FeatureFlagService } from 'xforge-common/feature-flags/feature-flag.service';
 import { FeatureFlagsDialogComponent } from 'xforge-common/feature-flags/feature-flags-dialog.component';
 import { FileService } from 'xforge-common/file.service';
+import { FontService } from 'xforge-common/font.service';
 import { I18nService } from 'xforge-common/i18n.service';
 import { LocationService } from 'xforge-common/location.service';
 import { Breakpoint, MediaBreakpointService } from 'xforge-common/media-breakpoints/media-breakpoint.service';
@@ -94,6 +95,9 @@ declare function gtag(...args: any): void;
   ]
 })
 export class AppComponent extends DataLoadingComponent implements OnInit, OnDestroy {
+  @HostBinding('style.--project-font')
+  protected projectFont: string | null = null;
+
   version: string = versionData.version;
   issueEmail: string = environment.issueEmail;
   versionNumberClickCount = 0;
@@ -133,6 +137,7 @@ export class AppComponent extends DataLoadingComponent implements OnInit, OnDest
     readonly featureFlags: FeatureFlagService,
     private readonly pwaService: PwaService,
     private readonly themeService: ThemeService,
+    private readonly fontService: FontService,
     onlineStatusService: OnlineStatusService,
     private destroyRef: DestroyRef
   ) {
@@ -318,8 +323,10 @@ export class AppComponent extends DataLoadingComponent implements OnInit, OnDest
       .subscribe(async (selectedProjectDoc?: SFProjectProfileDoc) => {
         this._selectedProjectDoc = selectedProjectDoc;
         if (this._selectedProjectDoc == null || !this._selectedProjectDoc.isLoaded) {
+          this.projectFont = null;
           return;
         }
+        this.projectFont = this.fontService.getFontFamilyFromProject(this._selectedProjectDoc.data);
         void this.userService.setCurrentProjectId(this.currentUserDoc!, this._selectedProjectDoc.id);
         this.projectUserConfigDoc = await this.projectService.getUserConfig(
           this._selectedProjectDoc.id,

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.html

@@ -93,7 +93,7 @@ <h3 id="totalAnswersMessage">
                 }
                 @if (answer.scriptureText) {
                   <div class="answer-scripture" dir="auto">
-                    <span class="answer-scripture-text" [style.--project-font]="projectFont">{{
+                    <span class="answer-scripture-text">{{
                       (answer.selectionStartClipped ? "…" : "") +
                         (answer.scriptureText || "") +
                         (answer.selectionEndClipped ? "…" : "")

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-answers.component.ts

@@ -26,7 +26,6 @@ import { toVerseRef, VerseRefData } from 'realtime-server/lib/esm/scriptureforge
 import { firstValueFrom, Subscription } from 'rxjs';
 import { DialogService } from 'xforge-common/dialog.service';
 import { FileService } from 'xforge-common/file.service';
-import { FontService } from 'xforge-common/font.service';
 import { I18nService } from 'xforge-common/i18n.service';
 import { FileType } from 'xforge-common/models/file-offline-data';
 import { NoticeService } from 'xforge-common/notice.service';
@@ -134,7 +133,6 @@ export class CheckingAnswersComponent implements OnInit {
   verseRef?: VerseRef;
   answersHighlightStatus: Map<string, boolean> = new Map<string, boolean>();
   submittingAnswer: boolean = false;
-  projectFont?: string;
 
   /** IDs of answers to show to user (so, excluding unshown incoming answers). */
   private _answersToShow: string[] = [];
@@ -155,7 +153,6 @@ export class CheckingAnswersComponent implements OnInit {
     private readonly questionDialogService: QuestionDialogService,
     private readonly i18n: I18nService,
     private readonly fileService: FileService,
-    private readonly fontService: FontService,
     private readonly onlineStatusService: OnlineStatusService,
     private readonly projectService: SFProjectService,
     private destroyRef: DestroyRef
@@ -180,7 +177,6 @@ export class CheckingAnswersComponent implements OnInit {
         this.setProjectAdmin();
       });
     this.setProjectAdmin();
-    this.projectFont = this.fontService.getFontFamilyFromProject(projectProfileDoc);
   }
 
   @Input() set questionDoc(questionDoc: QuestionDoc | undefined) {

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-answers/checking-input-form/checking-input-form.component.ts

@@ -12,7 +12,6 @@ import { SFProjectProfile } from 'realtime-server/lib/esm/scriptureforge/models/
 import { VerseRefData } from 'realtime-server/lib/esm/scriptureforge/models/verse-ref-data';
 import { AutofocusDirective } from 'xforge-common/autofocus.directive';
 import { DialogService } from 'xforge-common/dialog.service';
-import { FontService } from 'xforge-common/font.service';
 import { I18nService } from 'xforge-common/i18n.service';
 import { Breakpoint, MediaBreakpointService } from 'xforge-common/media-breakpoints/media-breakpoint.service';
 import { NoticeService } from 'xforge-common/notice.service';
@@ -82,7 +81,6 @@ export class CheckingInputFormComponent {
   constructor(
     readonly noticeService: NoticeService,
     private readonly dialogService: DialogService,
-    private readonly fontService: FontService,
     private readonly i18n: I18nService,
     private readonly breakpointObserver: BreakpointObserver,
     private readonly mediaBreakpointService: MediaBreakpointService,
@@ -121,7 +119,6 @@ export class CheckingInputFormComponent {
       chapterNum: (this.verseRef && this.verseRef.chapterNum) || verseRef.chapterNum,
       textsByBookId: this.textsByBookId,
       projectId: this._questionDoc.data.projectRef,
-      projectFont: this.fontService.getFontFamilyFromProject(this.project),
       isRightToLeft: this.project?.isRightToLeft,
       selectedText: this.selectedText || '',
       selectedVerses: this.verseRef

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-text/checking-text.component.html

@@ -6,5 +6,4 @@
   (loaded)="onLoaded()"
   [isRightToLeft]="isRightToLeft"
   [fontSize]="fontSize"
-  [style.--project-font]="fontService.getFontFamilyFromProject(projectDoc)"
 ></app-text>

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts

@@ -2708,6 +2708,24 @@ describe('CheckingComponent', () => {
       verify(chapterAudio.pause()).once();
       expect(env.component.showScriptureAudioPlayer).toBe(true);
     }));
+
+    it('answer-scripture-text inherits project font from CSS custom property', fakeAsync(() => {
+      const env = new TestEnvironment({ user: CHECKER_USER });
+      env.selectQuestion(6); // Question 6 has an answer with scripture text
+
+      const rootElement = document.documentElement;
+      rootElement.style.setProperty('--project-font', 'Charis SIL');
+      env.fixture.detectChanges();
+      tick();
+
+      const scriptureText = env.fixture.debugElement.query(By.css('.answer-scripture-text'));
+      expect(scriptureText).toBeTruthy();
+      const computedStyle = window.getComputedStyle(scriptureText.nativeElement);
+      expect(computedStyle.fontFamily).toContain('Charis SIL');
+
+      rootElement.style.removeProperty('--project-font');
+      env.waitForAudioPlayer();
+    }));
   });
 });
 

src/SIL.XForge.Scripture/ClientApp/src/app/text-chooser-dialog/text-chooser-dialog.component.html

@@ -12,9 +12,8 @@ <h2>{{ bookName }} {{ chapterNum }}</h2>
         [id]="textDocId"
         [multiSegmentSelection]="true"
         [isRightToLeft]="isTextRightToLeft"
-        [style.--project-font]="projectFont"
       ></app-text>
-      <div class="selection-preview" [style.--project-font]="projectFont">
+      <div class="selection-preview">
         <p dir="auto">
           {{ (startClipped ? "…" : "") + (selectedText || "") + (endClipped ? "…" : "") }}
           <span class="selection-reference">{{ referenceForDisplay }}</span>

src/SIL.XForge.Scripture/ClientApp/src/app/text-chooser-dialog/text-chooser-dialog.component.spec.ts

@@ -330,6 +330,24 @@ describe('TextChooserDialogComponent', () => {
     expect(env.component.isTextRightToLeft).toBe(true);
     env.closeDialog();
   }));
+
+  it('selection-preview inherits project font from CSS custom property', fakeAsync(() => {
+    const env = new TestEnvironment({ start: 0, end: TestEnvironment.segmentLen(1) }, 'verse_1_1', 'verse_1_1');
+    env.fireSelectionChange();
+
+    const rootElement = document.documentElement;
+    rootElement.style.setProperty('--project-font', 'Charis SIL');
+    env.fixture.detectChanges();
+    tick();
+
+    const selectionPreview = document.querySelector('.selection-preview');
+    expect(selectionPreview).toBeTruthy();
+    const computedStyle = window.getComputedStyle(selectionPreview!);
+    expect(computedStyle.fontFamily).toContain('Charis SIL');
+
+    rootElement.style.removeProperty('--project-font');
+    env.closeDialog();
+  }));
 });
 
 interface SimpleRange {

src/SIL.XForge.Scripture/ClientApp/src/app/text-chooser-dialog/text-chooser-dialog.component.ts

@@ -28,10 +28,10 @@ import {
   ScriptureChooserDialogData
 } from '../scripture-chooser-dialog/scripture-chooser-dialog.component';
 import { TextComponent } from '../shared/text/text.component';
+
 export interface TextChooserDialogData {
   bookNum: number;
   chapterNum: number;
-  projectFont?: string;
   projectId: string;
   textsByBookId: TextsByBookId;
   isRightToLeft?: boolean;
@@ -106,10 +106,6 @@ export class TextChooserDialogComponent {
     return this.i18n.localizeBook(this.bookNum);
   }
 
-  get projectFont(): string {
-    return this.data.projectFont ?? '';
-  }
-
   get isTextRightToLeft(): boolean {
     return this.data.isRightToLeft == null ? false : this.data.isRightToLeft;
   }