diff --git a/src/app/app.component.html b/src/app/app.component.html index d95fa31..6f17558 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -323,6 +323,19 @@ mat-menu-item aria-label="Roboto italic"> Roboto italic + + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index c1e3df1..cbca2ae 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -72,6 +72,15 @@ export class AppComponent implements OnInit { initialized = false; /** Whether it's Christmas currently. */ christmas: boolean; + /** Whether the button 'Other' in the font selection dropdown is available. */ + fetchFontsButtonActive = false; + /** Set of locally installed fonts. Will contain values after the user pressed on 'Other fonts' and granted access. */ + localFonts : { + family: string, + fullName: string, + postscriptName?: string, + style: string, + }[] = []; /** Set the currently selected tab index (in the {@link DataService}). */ set tabIndex(value: number) { @@ -110,8 +119,9 @@ export class AppComponent implements OnInit { private readonly cache: CacheService, protected readonly settings: SettingsService, private readonly fileAccessService: FileAccessService, - cdr: ChangeDetectorRef, + private readonly cdr: ChangeDetectorRef, ) { + this.fetchFontsButtonActive = 'queryLocalFonts' in window; const date = new Date(); this.christmas = date.getMonth() === 11 && date.getDate() <= 27; dataService.changeDetectionRequired.subscribe(() => cdr.markForCheck()); @@ -551,6 +561,27 @@ export class AppComponent implements OnInit { window.location.reload(); } + /** + * Opens a dialog where the user can select any font from his local machine. + * The selected font will be saved to settings and used as default afterward. + */ + openSetFontDialog(): void { + if (!('queryLocalFonts' in window)) { + throw new Error('Failed to load local fonts.'); + } + + (window as any).queryLocalFonts().then((fonts: { + family: string, + fullName: string, + postscriptName?: string, + style: string, + }[]) => { + this.localFonts = fonts; + this.fetchFontsButtonActive = false; + this.cdr.markForCheck(); + }); + } + /** * Easter egg 🐰 */ diff --git a/src/app/services/settings.service.ts b/src/app/services/settings.service.ts index 156f91f..c54d1e1 100644 --- a/src/app/services/settings.service.ts +++ b/src/app/services/settings.service.ts @@ -5,8 +5,6 @@ import {isTauri} from "@clipboardjesus/helpers"; /** The boolean string value which is stored in the localstorage. */ const TRUE = 'True'; -/** The available font types. */ -type Font = 'Victor Mono' | 'Roboto'; /** * The service which provides all the settings @@ -105,18 +103,21 @@ export class SettingsService { } /** Backing field */ - private _fontFamily!: Font; + private _fontFamily!: string; /** Get the app font family. */ - get fontFamily(): Font { return this._fontFamily; } + get fontFamily(): string { return this._fontFamily; } /** Set the app font family. */ - set fontFamily(value: Font) { + set fontFamily(value: string) { this._fontFamily = value; if (value === 'Roboto') { SettingsService.setFontFamily('var(--font-family-roboto)'); localStorage.removeItem(this.storageKeys.fontFamily); - } else { + } else if (value === 'Victor Mono') { SettingsService.setFontFamily('var(--font-family-victor)'); localStorage.setItem(this.storageKeys.fontFamily, value); + } else { + SettingsService.setFontFamily(value); + localStorage.setItem(this.storageKeys.fontFamily, value); } } @@ -158,7 +159,7 @@ export class SettingsService { this.alwaysOnTop = localStorage.getItem(this.storageKeys.alwaysOnTop) === TRUE; this.animationsDisabled = localStorage.getItem(this.storageKeys.animationsDisabled) === TRUE; this.language = localStorage.getItem(this.storageKeys.language) ?? 'en'; - this.fontFamily = localStorage.getItem(this.storageKeys.fontFamily) as Font ?? 'Roboto'; + this.fontFamily = localStorage.getItem(this.storageKeys.fontFamily) ?? 'Roboto'; this.fontStyle = localStorage.getItem(this.storageKeys.fontStyle) ?? 'normal'; this.dblClickMode = localStorage.getItem(this.storageKeys.dblClickMode) === TRUE;