From 4907af9bafa11a00616296b9cb0eb54c5a03a0db Mon Sep 17 00:00:00 2001 From: mchouliara Date: Wed, 25 Sep 2024 11:57:00 +0300 Subject: [PATCH] add accessibility style (font size change) toggle, host bind style to app component and all dialogs --- frontend/src/app/app.component.html | 42 ++++++++++--------- frontend/src/app/app.component.ts | 5 ++- frontend/src/app/core/core-service.module.ts | 4 +- .../services/font-accessibility.service.ts | 22 ++++++++++ ...ption-template-preview-dialog.component.ts | 6 ++- ...t-description-template.dialog.component.ts | 8 ++-- .../import-plan-blueprint.dialog.component.ts | 7 +++- .../user-invite-to-tenant-dialog.component.ts | 6 ++- .../annotation-dialog.component.ts | 6 ++- .../merge-email-loader-dialog.component.ts | 6 ++- .../app/ui/dashboard/dashboard.component.html | 14 +++---- .../description-copy-dialog.component.ts | 5 ++- .../form-fieldset-editor-dialog.component.ts | 8 ++-- .../new-description.component.ts | 6 ++- .../description-filter-dialog.component.ts | 6 ++- .../start-new-description-dialog.component.ts | 6 ++- .../app/ui/faq/dialog/faq-dialog.component.ts | 5 ++- .../dialog/glossary-dialog.component.ts | 5 ++- .../dialog/language-dialog.component.ts | 6 ++- .../src/app/ui/navbar/navbar.component.html | 11 ++++- .../src/app/ui/navbar/navbar.component.ts | 12 ++++++ .../user-dialog/user-dialog.component.ts | 6 ++- .../plan-clone-dialog.component.ts | 5 ++- .../plan-invitation-dialog.component.ts | 6 ++- .../plan-filter-dialog.component.ts | 6 ++- .../plan-new-version-dialog.component.ts | 11 ++--- .../start-new-plan-dialog.component.ts | 5 ++- .../plan-upload-dialog.component.ts | 11 +++-- .../plan-contact-prefill-dialog.component.ts | 7 +++- .../plan-delete-dialog.component.ts | 7 +++- .../plan-finalize-dialog.component.ts | 5 ++- .../plan-user-field.component.ts | 3 +- .../reference-dialog-editor.component.ts | 8 +++- .../sidebar-footer.component.css | 2 +- .../sidebar-footer.component.html | 2 +- .../sidebar-footer.component.ts | 2 + .../src/app/ui/sidebar/sidebar.component.scss | 4 +- .../src/app/ui/sidebar/sidebar.component.ts | 1 + .../dialog/user-guide-dialog.component.ts | 6 ++- .../add-account-dialog.component.ts | 6 ++- frontend/src/assets/i18n/baq.json | 3 ++ frontend/src/assets/i18n/de.json | 5 ++- frontend/src/assets/i18n/en.json | 5 ++- frontend/src/assets/i18n/es.json | 5 ++- frontend/src/assets/i18n/gr.json | 5 ++- frontend/src/assets/i18n/hr.json | 5 ++- frontend/src/assets/i18n/pl.json | 5 ++- frontend/src/assets/i18n/pt.json | 4 +- frontend/src/assets/i18n/sk.json | 5 ++- frontend/src/assets/i18n/sr.json | 5 ++- frontend/src/assets/i18n/tr.json | 5 ++- ...form-validation-errors-dialog.component.ts | 5 ++- .../confirmation-dialog.component.ts | 5 ++- .../multiple-choice-dialog.component.ts | 6 ++- ...p-notification-listing-dialog.component.ts | 6 ++- frontend/src/styles.scss | 31 +++++++++++++- 56 files changed, 297 insertions(+), 107 deletions(-) create mode 100644 frontend/src/app/core/services/font-accessibility.service.ts diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 99b9838fc..84e2bd71e 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,21 +1,23 @@ -
- - - - - - -
- -
- - +
+
+ + + + + + +
+ +
+ + +
+ + + +
- - - - diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 4edf2e9aa..44df26e23 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -1,7 +1,7 @@ import { of as observableOf, Subscription } from 'rxjs'; -import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, computed, HostBinding, OnInit, Signal, signal, ViewChild } from '@angular/core'; import { ActivatedRoute, NavigationEnd, NavigationStart, Router } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; import { filter, map, switchMap } from 'rxjs/operators'; @@ -20,6 +20,7 @@ import { TimezoneService } from './core/services/timezone/timezone-service'; import { BreadcrumbService } from './ui/misc/breadcrumb/breadcrumb.service'; import { TenantHandlingService } from './core/services/tenant/tenant-handling.service'; import { MatIconRegistry } from '@angular/material/icon'; +import { FontAccessibilityService } from './core/services/font-accessibility.service'; declare const gapi: any; @@ -40,6 +41,7 @@ export class AppComponent implements OnInit, AfterViewInit { cssConfigLoaded = false; @ViewChild('sidenav') sidenav: MatSidenav; + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); constructor( private router: Router, @@ -59,6 +61,7 @@ export class AppComponent implements OnInit, AfterViewInit { private breadcrumbService: BreadcrumbService, private sanitizer: DomSanitizer, public iconRegistry: MatIconRegistry, + protected fontService: FontAccessibilityService ) { this.initializeServices(); this.matomoService.init(); diff --git a/frontend/src/app/core/core-service.module.ts b/frontend/src/app/core/core-service.module.ts index 14fbaeff1..e786eabe0 100644 --- a/frontend/src/app/core/core-service.module.ts +++ b/frontend/src/app/core/core-service.module.ts @@ -52,6 +52,7 @@ import { PlanStatusService } from './services/plan/plan-status.service'; import { DescriptionStatusService } from './services/description-status/description-status.service'; import { PlanWorkflowService } from './services/plan/plan-workflow.service'; import { DescriptionWorkflowService } from './services/description-workflow/description-workflow.service'; +import { FontAccessibilityService } from './services/font-accessibility.service'; // // // This is shared module that provides all the services. Its imported only once on the AppModule. @@ -123,7 +124,8 @@ export class CoreServiceModule { PlanStatusService, DescriptionStatusService, PlanWorkflowService, - DescriptionWorkflowService + DescriptionWorkflowService, + FontAccessibilityService ], }; } diff --git a/frontend/src/app/core/services/font-accessibility.service.ts b/frontend/src/app/core/services/font-accessibility.service.ts new file mode 100644 index 000000000..b78d0e269 --- /dev/null +++ b/frontend/src/app/core/services/font-accessibility.service.ts @@ -0,0 +1,22 @@ +import { Injectable, Signal, signal } from '@angular/core'; + +@Injectable() +export class FontAccessibilityService { + + private _accessibleFontSignal = signal(false); + get accessibleFontSignal(): Signal { + return this._accessibleFontSignal; + } + + constructor() { } + + public isLargeText(): boolean { + return this.accessibleFontSignal(); + } + + public toggleFontSize(){ + const nextValue = this.isLargeText() ? 'false' : 'true'; + localStorage.setItem('largeText', nextValue); + this._accessibleFontSignal.set(!this._accessibleFontSignal()) + } +} diff --git a/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.ts b/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.ts index 03fcd2180..cc6298416 100644 --- a/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.ts +++ b/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, computed, HostBinding, Inject, OnInit } from '@angular/core'; import { UntypedFormGroup } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { DescriptionTemplate } from '@app/core/model/description-template/description-template'; @@ -15,6 +15,7 @@ import { BaseComponent } from '@common/base/base.component'; import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service'; import { TranslateService } from '@ngx-translate/core'; import { takeUntil } from 'rxjs/operators'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; @Component({ selector: 'app-description-template-preview-dialog-component', @@ -23,7 +24,7 @@ import { takeUntil } from 'rxjs/operators'; providers: [DescriptionFormService], }) export class DescriptionTemplatePreviewDialogComponent extends BaseComponent implements OnInit { - + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); descriptionTemplateDefinitionFormGroup: UntypedFormGroup; progressIndication = false; editorModel: DescriptionEditorModel; @@ -40,6 +41,7 @@ export class DescriptionTemplatePreviewDialogComponent extends BaseComponent imp private language: TranslateService, public visibilityRulesService: VisibilityRulesService, private httpErrorHandlingService: HttpErrorHandlingService, + protected fontService: FontAccessibilityService, @Inject(MAT_DIALOG_DATA) public data: any ) { super(); diff --git a/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.ts b/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.ts index 5246033be..56e534641 100644 --- a/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.ts +++ b/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.ts @@ -1,5 +1,6 @@ -import { Component, Inject } from '@angular/core'; +import { Component, computed, HostBinding, Inject } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; @Component({ @@ -7,7 +8,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; styleUrls: ['./import-description-template.dialog.component.scss'] }) export class ImportDescriptionTemplateDialogComponent { - + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); sizeError = false; selectFile = false; maxFileSize: number = 1048576; @@ -15,7 +16,8 @@ export class ImportDescriptionTemplateDialogComponent { constructor( public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: any + @Inject(MAT_DIALOG_DATA) public data: any, + protected fontService: FontAccessibilityService, ) { } diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.ts b/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.ts index fac537464..5212a6954 100644 --- a/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.ts +++ b/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.ts @@ -1,5 +1,6 @@ -import { Component, Inject } from '@angular/core'; +import { Component, computed, HostBinding, Inject } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; @Component({ @@ -7,6 +8,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; styleUrls: ['./import-plan-blueprint.dialog.component.scss'] }) export class ImportPlanBlueprintDialogComponent { + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); sizeError = false; selectFile = false; @@ -15,7 +17,8 @@ export class ImportPlanBlueprintDialogComponent { constructor( public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: any + @Inject(MAT_DIALOG_DATA) public data: any, + protected fontService: FontAccessibilityService, ) { } diff --git a/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.ts b/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.ts index 6f0e3bcd5..133ad46f2 100644 --- a/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.ts +++ b/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.ts @@ -1,7 +1,7 @@ import { COMMA, ENTER } from '@angular/cdk/keycodes'; import { HttpErrorResponse } from '@angular/common/http'; -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, computed, HostBinding, Inject, OnInit } from '@angular/core'; import { UntypedFormArray, UntypedFormGroup } from '@angular/forms'; import { MatDialogRef } from '@angular/material/dialog'; import { ActivatedRoute, Router } from '@angular/router'; @@ -16,6 +16,7 @@ import { UserInviteToTenantRequestEditorModel, UserTenantUsersInviteRequestEdito import { UserTenantUsersInviteRequest } from '@app/core/model/user/user'; import { UserService } from '@app/core/services/user/user.service'; import { AppRole } from '@app/core/common/enum/app-role'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; @Component({ selector: 'app-user-invite-to-tenant-dialog.component', @@ -23,7 +24,7 @@ import { AppRole } from '@app/core/common/enum/app-role'; styleUrls: ['./user-invite-to-tenant-dialog.component.scss'] }) export class UserInviteToTenantDialogComponent extends BaseComponent implements OnInit { - + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); editorModel: UserTenantUsersInviteRequestEditorModel; formGroup: any; inProgressSendButton = false; @@ -40,6 +41,7 @@ export class UserInviteToTenantDialogComponent extends BaseComponent implements private httpErrorHandlingService: HttpErrorHandlingService, private userService: UserService, private formService: FormService, + protected fontService: FontAccessibilityService, ) { super(); } diff --git a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts index 9cff4b2c7..fe6a159ca 100644 --- a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts +++ b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, SecurityContext, ViewChild } from '@angular/core'; +import { Component, computed, HostBinding, Inject, SecurityContext, ViewChild } from '@angular/core'; import { FormBuilder, FormControl, UntypedFormArray, UntypedFormGroup, Validators } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; import { Router } from '@angular/router'; @@ -27,6 +27,7 @@ import { MatSelectionList } from '@angular/material/list'; import { PlanUser } from '@app/core/model/plan/plan'; import { DomSanitizer } from '@angular/platform-browser'; import { Subject } from 'rxjs'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; interface AnnotationPayloadItem { isMention: boolean; @@ -39,7 +40,7 @@ interface AnnotationPayloadItem { styleUrls: ['./annotation-dialog.component.scss'] }) export class AnnotationDialogComponent extends BaseComponent { - + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); annotationProtectionTypeEnumValues = this.enumUtils.getEnumValues(AnnotationProtectionType); annotationProtectionTypeEnum = AnnotationProtectionType; @@ -85,6 +86,7 @@ export class AnnotationDialogComponent extends BaseComponent { protected routerUtils: RouterUtilsService, private configurationService: ConfigurationService, private sanitizer: DomSanitizer, + protected fontService: FontAccessibilityService, ) { super(); this.entityId = data.entityId; diff --git a/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-loader-dialog/merge-email-loader-dialog.component.ts b/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-loader-dialog/merge-email-loader-dialog.component.ts index 2701629b9..1c74c2b9d 100644 --- a/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-loader-dialog/merge-email-loader-dialog.component.ts +++ b/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-loader-dialog/merge-email-loader-dialog.component.ts @@ -1,6 +1,7 @@ -import { Component, Inject, OnDestroy, OnInit } from "@angular/core"; +import { Component, computed, HostBinding, Inject, OnDestroy, OnInit } from "@angular/core"; import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog"; import { ConfigurationService } from "@app/core/services/configuration/configuration.service"; +import { FontAccessibilityService } from "@app/core/services/font-accessibility.service"; import { Subscription, takeUntil } from "rxjs"; @Component({ @@ -9,6 +10,7 @@ import { Subscription, takeUntil } from "rxjs"; styleUrls: ['./merge-email-loader-dialog.component.scss'], }) export class MergeEmailLoaderDialogComponent implements OnInit, OnDestroy { + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); confirmMergeAccountSubscription: Subscription; mergeAccountDelay: number = 60000; @@ -20,6 +22,8 @@ export class MergeEmailLoaderDialogComponent implements OnInit, OnDestroy { private dialogRef: MatDialogRef, private configurationService: ConfigurationService, @Inject(MAT_DIALOG_DATA) public data: any, + protected fontService: FontAccessibilityService, + ) {} diff --git a/frontend/src/app/ui/dashboard/dashboard.component.html b/frontend/src/app/ui/dashboard/dashboard.component.html index ac27a42f7..f2a632289 100644 --- a/frontend/src/app/ui/dashboard/dashboard.component.html +++ b/frontend/src/app/ui/dashboard/dashboard.component.html @@ -6,7 +6,7 @@
-
@@ -27,7 +27,7 @@
- @@ -62,25 +62,25 @@
{{'DASHBOARD.LATEST-ACTIVITY' | translate}}
- + - + - + - +
-
diff --git a/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.ts b/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.ts index a44c244a3..02d28a4c7 100644 --- a/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.ts +++ b/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.ts @@ -1,6 +1,6 @@ import { map } from 'rxjs/operators'; -import { Component } from "@angular/core"; +import { Component, computed, HostBinding } from "@angular/core"; import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog"; import { Inject } from "@angular/core"; import { TranslateService } from "@ngx-translate/core"; @@ -19,6 +19,7 @@ import { DescriptionTemplatesInSection, PlanBlueprint, PlanBlueprintDefinition, import { TenantLookup } from '@app/core/query/tenant.lookup'; import { Tenant } from '@app/core/model/tenant/tenant'; import { AuthService } from '@app/core/services/auth/auth.service'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; @Component({ selector: 'description-copy-dialog-component', @@ -26,6 +27,7 @@ import { AuthService } from '@app/core/services/auth/auth.service'; styleUrls: ['./description-copy-dialog.component.scss'], }) export class DescriptionCopyDialogComponent { + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); sections: PlanBlueprintDefinitionSection[] = []; descriptionDescriptionTemplateLabel: String; @@ -91,6 +93,7 @@ export class DescriptionCopyDialogComponent { public language: TranslateService, private filterService: FilterService, private authService: AuthService, + protected fontService: FontAccessibilityService, @Inject(MAT_DIALOG_DATA) public data: any ) { } diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.ts b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.ts index 0f20e586b..5b49dcd8e 100644 --- a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.ts +++ b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.ts @@ -1,8 +1,9 @@ -import { Component, Inject } from "@angular/core"; +import { Component, computed, HostBinding, Inject } from "@angular/core"; import { UntypedFormGroup } from "@angular/forms"; import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog"; import { DescriptionTemplateFieldSet } from "@app/core/model/description-template/description-template"; import { VisibilityRulesService } from "../../../visibility-rules/visibility-rules.service"; +import { FontAccessibilityService } from "@app/core/services/font-accessibility.service"; @Component({ selector: 'app-description-form-fieldset-editor-dialog', @@ -10,7 +11,7 @@ import { VisibilityRulesService } from "../../../visibility-rules/visibility-rul templateUrl: 'form-fieldset-editor-dialog.component.html' }) export class FormFieldSetEditorDialogComponent { - + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); visibilityRulesService: VisibilityRulesService; numberingText: string; fieldSet: DescriptionTemplateFieldSet; @@ -18,7 +19,8 @@ export class FormFieldSetEditorDialogComponent { constructor( private dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: any + @Inject(MAT_DIALOG_DATA) public data: any, + protected fontService: FontAccessibilityService, ) { this.fieldSet = data.fieldSet; this.propertiesFormGroup = data.propertiesFormGroup; diff --git a/frontend/src/app/ui/description/editor/new-description/new-description.component.ts b/frontend/src/app/ui/description/editor/new-description/new-description.component.ts index f272bcce8..ef58ef246 100644 --- a/frontend/src/app/ui/description/editor/new-description/new-description.component.ts +++ b/frontend/src/app/ui/description/editor/new-description/new-description.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, OnInit } from "@angular/core"; +import { Component, computed, HostBinding, Inject, OnInit } from "@angular/core"; import { UntypedFormGroup } from "@angular/forms"; import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog"; import { IsActive } from "@app/core/common/enum/is-active.enum"; @@ -18,6 +18,7 @@ import { Observable } from "rxjs"; import { takeUntil } from "rxjs/operators"; import { DescriptionEditorEntityResolver } from "../resolvers/description-editor-entity.resolver"; import { DescriptionPrefillingRequestEditorModel } from "./new-description-editor.model"; +import { FontAccessibilityService } from "@app/core/services/font-accessibility.service"; @Component({ selector: 'new-description-component', @@ -25,7 +26,7 @@ import { DescriptionPrefillingRequestEditorModel } from "./new-description-edito styleUrls: ['new-description.component.scss'] }) export class NewDescriptionDialogComponent extends BaseComponent implements OnInit { - + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); progressIndication = false; singlePrefillingSourceAutoCompleteConfiguration: SingleAutoCompleteConfiguration; prefillObjectAutoCompleteConfiguration: SingleAutoCompleteConfiguration; @@ -42,6 +43,7 @@ export class NewDescriptionDialogComponent extends BaseComponent implements OnIn public prefillingSourceService: PrefillingSourceService, private formService: FormService, private httpErrorHandlingService: HttpErrorHandlingService, + protected fontService: FontAccessibilityService, @Inject(MAT_DIALOG_DATA) public data: any) { super(); diff --git a/frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.ts b/frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.ts index b747d42f6..74d656379 100644 --- a/frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.ts +++ b/frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.ts @@ -1,8 +1,9 @@ -import { Component, Inject, OnInit, ViewChild } from '@angular/core'; +import { Component, computed, HostBinding, Inject, OnInit, ViewChild } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { AnalyticsService } from '@app/core/services/matomo/analytics-service'; import { DescriptionFilterComponent, DescriptionListingFilters } from '../description-filter.component'; import { DescriptionLookup, ReferencesWithType } from '@app/core/query/description.lookup'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; @Component({ selector: 'description-filter-dialog-component', @@ -11,7 +12,7 @@ import { DescriptionLookup, ReferencesWithType } from '@app/core/query/descripti }) export class DescriptionFilterDialogComponent implements OnInit { - + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); @ViewChild(DescriptionFilterComponent, { static: true }) filter: DescriptionFilterComponent; filters: DescriptionListingFilters; @@ -19,6 +20,7 @@ export class DescriptionFilterDialogComponent implements OnInit { constructor( public dialogRef: MatDialogRef, private analyticsService: AnalyticsService, + protected fontService: FontAccessibilityService, @Inject(MAT_DIALOG_DATA) public data: { isPublic: boolean, hasSelectedTenant: boolean, diff --git a/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.ts b/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.ts index b2a84a5c1..b38b4339a 100644 --- a/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.ts +++ b/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject } from '@angular/core'; +import { Component, computed, HostBinding, Inject } from '@angular/core'; import { UntypedFormGroup } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; import { PlanStatusEnum } from '@app/core/common/enum/plan-status'; @@ -19,6 +19,7 @@ import { nameof } from 'ts-simple-nameof'; import { AuthService } from '@app/core/services/auth/auth.service'; import { TenantLookup } from '@app/core/query/tenant.lookup'; import { Tenant } from '@app/core/model/tenant/tenant'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; @Component({ selector: 'app-start-new-description-dialog', @@ -26,7 +27,7 @@ import { Tenant } from '@app/core/model/tenant/tenant'; styleUrls: ['./start-new-description-dialog.component.scss'] }) export class StartNewDescriptionDialogComponent extends BaseComponent { - + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); public isDialog: boolean = false; public formGroup: UntypedFormGroup; public sections: PlanBlueprintDefinitionSection[] = []; @@ -83,6 +84,7 @@ export class StartNewDescriptionDialogComponent extends BaseComponent { private filterService: FilterService, private dateTimeFormatPipe: DateTimeFormatPipe, private authService: AuthService, + protected fontService: FontAccessibilityService ) { super(); this.formGroup = data.formGroup; diff --git a/frontend/src/app/ui/faq/dialog/faq-dialog.component.ts b/frontend/src/app/ui/faq/dialog/faq-dialog.component.ts index 2c3261dad..8f931a897 100644 --- a/frontend/src/app/ui/faq/dialog/faq-dialog.component.ts +++ b/frontend/src/app/ui/faq/dialog/faq-dialog.component.ts @@ -1,5 +1,6 @@ -import { Component, Inject } from '@angular/core'; +import { Component, computed, HostBinding, Inject } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; @Component({ selector: 'app-faq-dialog', @@ -7,11 +8,13 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; styleUrls: ['./faq-dialog.component.scss'] }) export class FaqDialogComponent { + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); public isDialog: boolean = false; constructor( public dialogRef: MatDialogRef, + protected fontService: FontAccessibilityService, @Inject(MAT_DIALOG_DATA) public data: any ) { this.isDialog = data.isDialog; diff --git a/frontend/src/app/ui/glossary/dialog/glossary-dialog.component.ts b/frontend/src/app/ui/glossary/dialog/glossary-dialog.component.ts index bd8ccd72d..acc367019 100644 --- a/frontend/src/app/ui/glossary/dialog/glossary-dialog.component.ts +++ b/frontend/src/app/ui/glossary/dialog/glossary-dialog.component.ts @@ -1,5 +1,6 @@ -import { Component, Inject } from '@angular/core'; +import { Component, computed, HostBinding, Inject } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; @Component({ selector: 'app-glossary-dialog', @@ -7,11 +8,13 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; styleUrls: ['./glossary-dialog.component.scss'] }) export class GlossaryDialogComponent { + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); public isDialog: boolean; constructor( public dialogRef: MatDialogRef, + protected fontService: FontAccessibilityService, @Inject(MAT_DIALOG_DATA) public data: any ) { this.isDialog = data.isDialog; diff --git a/frontend/src/app/ui/language/dialog/language-dialog.component.ts b/frontend/src/app/ui/language/dialog/language-dialog.component.ts index b2f90a4b5..7e44ffccf 100644 --- a/frontend/src/app/ui/language/dialog/language-dialog.component.ts +++ b/frontend/src/app/ui/language/dialog/language-dialog.component.ts @@ -1,5 +1,6 @@ -import { Component, Inject } from '@angular/core'; +import { Component, computed, HostBinding, Inject } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; @Component({ selector: 'app-language-dialog', @@ -7,11 +8,12 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; styleUrls: ['./language-dialog.component.scss'] }) export class LanguageDialogComponent { - + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); public isDialog: boolean; constructor( public dialogRef: MatDialogRef, + protected fontService: FontAccessibilityService, @Inject(MAT_DIALOG_DATA) public data: any ) { this.isDialog = data.isDialog; diff --git a/frontend/src/app/ui/navbar/navbar.component.html b/frontend/src/app/ui/navbar/navbar.component.html index 8942faa3f..c0e6d76a7 100644 --- a/frontend/src/app/ui/navbar/navbar.component.html +++ b/frontend/src/app/ui/navbar/navbar.component.html @@ -27,6 +27,15 @@
    • +
  • + +
    • @@ -77,7 +86,7 @@
    • - +