From ccb787f3ad88320812989890efcb8d018f012cbe Mon Sep 17 00:00:00 2001 From: Ritesh Date: Thu, 21 May 2026 23:15:57 +0530 Subject: [PATCH] WEB-955: implement default font customization setting --- src/app/settings/settings.component.html | 2 +- src/app/settings/settings.component.ts | 31 +++++++++++++++++++----- src/app/settings/settings.service.ts | 12 +++++++++ src/app/web-app.component.ts | 12 +++++++++ src/index.html | 4 +++ 5 files changed, 54 insertions(+), 7 deletions(-) diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html index db2e829d04..a32f5996cb 100644 --- a/src/app/settings/settings.component.html +++ b/src/app/settings/settings.component.html @@ -91,7 +91,7 @@ {{ 'labels.inputs.Default Font' | translate }} - + @for (font of fonts; track font) { {{ font }} diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts index c9a8427854..49a0911077 100644 --- a/src/app/settings/settings.component.ts +++ b/src/app/settings/settings.component.ts @@ -103,8 +103,14 @@ export class SettingsComponent implements OnInit, OnDestroy { '7', '8' ]; - /** Placeholder for fonts. */ - fonts: any; + /** List of available fonts. */ + fonts: string[] = [ + 'Roboto', + 'Inter', + 'Open Sans', + 'Outfit', + 'Montserrat' + ]; /** Date Format Setting */ dateFormat = new FormControl(''); @@ -112,27 +118,37 @@ export class SettingsComponent implements OnInit, OnDestroy { datetimeFormat = new FormControl(''); /** Decimals to Display Setting */ decimalsToDisplay = new FormControl(''); + /** Font Family Setting */ + fontFamily = new FormControl(''); private initialValues: { dateFormat: string; datetimeFormat: string; decimals: string; + fontFamily: string; }; ngOnInit() { this.initialValues = { dateFormat: this.settingsService.dateFormat, datetimeFormat: this.settingsService.datetimeFormat, - decimals: this.settingsService.decimals + decimals: this.settingsService.decimals, + fontFamily: this.settingsService.fontFamily }; this.dateFormat.patchValue(this.initialValues.dateFormat, { emitEvent: false }); this.datetimeFormat.patchValue(this.initialValues.datetimeFormat, { emitEvent: false }); this.decimalsToDisplay.patchValue(this.initialValues.decimals, { emitEvent: false }); + this.fontFamily.patchValue(this.initialValues.fontFamily, { emitEvent: false }); this.trackChanges(); } trackChanges(): void { - merge(this.dateFormat.valueChanges, this.datetimeFormat.valueChanges, this.decimalsToDisplay.valueChanges) + merge( + this.dateFormat.valueChanges, + this.datetimeFormat.valueChanges, + this.decimalsToDisplay.valueChanges, + this.fontFamily.valueChanges + ) .pipe(takeUntil(this.destroy$)) .subscribe(() => { this.hasChanges = this.hasFormChanged(); @@ -143,7 +159,8 @@ export class SettingsComponent implements OnInit, OnDestroy { return ( (this.dateFormat.value ?? '') !== this.initialValues.dateFormat || (this.datetimeFormat.value ?? '') !== this.initialValues.datetimeFormat || - (this.decimalsToDisplay.value ?? '') !== this.initialValues.decimals + (this.decimalsToDisplay.value ?? '') !== this.initialValues.decimals || + (this.fontFamily.value ?? '') !== this.initialValues.fontFamily ); } @@ -151,10 +168,12 @@ export class SettingsComponent implements OnInit, OnDestroy { this.settingsService.setDateFormat(this.dateFormat.value ?? this.initialValues.dateFormat); this.settingsService.setDatetimeFormat(this.datetimeFormat.value ?? this.initialValues.datetimeFormat); this.settingsService.setDecimalToDisplay(this.decimalsToDisplay.value ?? this.initialValues.decimals); + this.settingsService.setFontFamily(this.fontFamily.value ?? this.initialValues.fontFamily); this.initialValues = { dateFormat: this.dateFormat.value ?? '', datetimeFormat: this.datetimeFormat.value ?? '', - decimals: this.decimalsToDisplay.value ?? '' + decimals: this.decimalsToDisplay.value ?? '', + fontFamily: this.fontFamily.value ?? '' }; this.hasChanges = false; this.alertService.alert({ diff --git a/src/app/settings/settings.service.ts b/src/app/settings/settings.service.ts index ad41ceae6b..aa22c98e09 100644 --- a/src/app/settings/settings.service.ts +++ b/src/app/settings/settings.service.ts @@ -299,4 +299,16 @@ export class SettingsService { get themeDarkEnabled(): boolean { return JSON.parse(localStorage.getItem('mifosXThemeDarkEnabled')); } + + setFontFamily(font: string) { + localStorage.setItem('mifosXFontFamily', JSON.stringify(font)); + } + + get fontFamily(): string { + const userSetting = localStorage.getItem('mifosXFontFamily'); + if (userSetting) { + return JSON.parse(userSetting); + } + return 'Roboto'; + } } diff --git a/src/app/web-app.component.ts b/src/app/web-app.component.ts index 8783ae1561..830307ac08 100644 --- a/src/app/web-app.component.ts +++ b/src/app/web-app.component.ts @@ -157,6 +157,12 @@ export class WebAppComponent implements OnInit, OnDestroy { this.themingService.setInitialDarkMode(); this.themingService.setDarkMode(!!this.settingsService.themeDarkEnabled); + // Apply saved font preference + const activeFont = this.settingsService.fontFamily; + if (activeFont) { + document.body.style.fontFamily = `"${activeFont}", sans-serif`; + } + // Setup logger if (environment.production) { Logger.enableProductionMode(); @@ -213,6 +219,12 @@ export class WebAppComponent implements OnInit, OnDestroy { // Setup alerts with hover behavior this.alertService.alertEvent.subscribe((alertEvent: Alert) => { + if (alertEvent.type === 'Settings Update') { + const activeFont = this.settingsService.fontFamily; + if (activeFont) { + document.body.style.fontFamily = `"${activeFont}", sans-serif`; + } + } const snackBarRef = this.snackBar.open( `${alertEvent.message}`, this.translateService.instant('labels.buttons.Close'), diff --git a/src/index.html b/src/index.html index c9d9182df7..7bc1d5abd5 100644 --- a/src/index.html +++ b/src/index.html @@ -28,6 +28,10 @@ rel="stylesheet" /> +