MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

add accessibility style (font size change) toggle, host bind style to app component and all dialogs

This commit is contained in:
mchouliara 2024-09-25 11:57:00 +03:00
parent 48ee527c30
commit 4907af9baf
56 changed files with 297 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/app.component.html
View File

@ -1,3 +1,4 @@
<div [class.accessibility-theme]="fontService.isLargeText()">
<div class="wrapper" *ngIf="!showOnlyRouterOutlet">
<app-navbar (sidebarToggled)="sidenav.toggle(); toggleNavbar($event);"></app-navbar>
<mat-sidenav-container fullscreen class="main-container">
@ -19,3 +20,4 @@
[nextText]="'DASHBOARD.TOUR-GUIDE.GOT-IT'| translate"
role="alert"
></ngx-guided-tour>
</div>

5
frontend/src/app/app.component.ts
View File

@ -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();

4
frontend/src/app/core/core-service.module.ts
View File

@ -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
],
};
}

22
frontend/src/app/core/services/font-accessibility.service.ts Normal file
View File

@ -0,0 +1,22 @@
import { Injectable, Signal, signal } from '@angular/core';
@Injectable()
export class FontAccessibilityService {
private _accessibleFontSignal = signal<boolean>(false);
get accessibleFontSignal(): Signal<boolean> {
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())
}
}

6
frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.ts
View File

@ -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();

8
frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.ts
View File

@ -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<ImportDescriptionTemplateDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
@Inject(MAT_DIALOG_DATA) public data: any,
protected fontService: FontAccessibilityService,
) { }

7
frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.ts
View File

@ -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<ImportPlanBlueprintDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
@Inject(MAT_DIALOG_DATA) public data: any,
protected fontService: FontAccessibilityService,
) { }

6
frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.ts
View File

@ -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();
}

6
frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.ts
View File

@ -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>(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;

6
frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-loader-dialog/merge-email-loader-dialog.component.ts
View File

@ -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<MergeEmailLoaderDialogComponent>,
private configurationService: ConfigurationService,
@Inject(MAT_DIALOG_DATA) public data: any,
protected fontService: FontAccessibilityService,
) {}

14
frontend/src/app/ui/dashboard/dashboard.component.html
View File

@ -6,7 +6,7 @@
<div class="col-12 col-xl-10">
<div class="row">
<div *ngIf="newReleaseNotificationVisible" class="new-releases-card col-auto mt-0 pt-2 mr-4">
<button mat-icon-button aria-label="{{'ALT-TEXT.CLOSE-RELEASE' | translate}}" (click)="dismissNewReleaseNotification()">
<button mat-icon-button [attr.aria-label]="'ALT-TEXT.CLOSE-RELEASE' | translate" (click)="dismissNewReleaseNotification()">
<mat-icon>close</mat-icon>
</button>
<div class="row new-releases-hint-container m-0">
@ -27,7 +27,7 @@
</div>
</div>
<div class="card col-auto mt-0 pt-2" [style.display]="isIntroCardVisible ? 'block' : 'none'">
<button mat-icon-button aria-label="{{'ALT-TEXT.CLOSE-INTRO-CARD' | translate}}" *ngIf="this.hasPlans()" (click)="dismissIntroCard()">
<button mat-icon-button [attr.aria-label]="'ALT-TEXT.CLOSE-INTRO-CARD' | translate" *ngIf="this.hasPlans()" (click)="dismissIntroCard()">
<mat-icon>close</mat-icon>
</button>
@ -62,25 +62,25 @@
<div *ngIf="this.hasPlans()" class="col">
<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
<mat-tab-group dynamicHeight color="#00000" mat-stretch-tabs="false" mat-align-tabs="start" class="my-mat-tab remove-border-bottom" [selectedIndex]="indexFromCurrentType" (selectedTabChange)="currentType = $event.tab.ariaLabel">
<mat-tab aria-label="{{'DASHBOARD.ALL' | translate}}" label="{{'DASHBOARD.ALL' | translate}}">
<mat-tab [attr.aria-label]="'DASHBOARD.ALL' | translate" label="{{'DASHBOARD.ALL' | translate}}">
<app-recent-edited-activity
[currentType]="currentType"
[type]="ActivityListingType.Recent"
></app-recent-edited-activity>
</mat-tab>
<mat-tab aria-label="{{'DASHBOARD.DRAFTS' | translate}}" label="{{'DASHBOARD.DRAFTS' | translate}}">
<mat-tab [attr.aria-label]="'DASHBOARD.DRAFTS' | translate" label="{{'DASHBOARD.DRAFTS' | translate}}">
<app-recent-edited-activity
[currentType]="currentType"
[type]="ActivityListingType.Drafts"
></app-recent-edited-activity>
</mat-tab>
<mat-tab aria-label="{{'DASHBOARD.PLANS' | translate}}" label="{{'DASHBOARD.PLANS' | translate}}">
<mat-tab [attr.aria-label]="'DASHBOARD.PLANS' | translate" label="{{'DASHBOARD.PLANS' | translate}}">
<app-recent-edited-activity
[currentType]="currentType"
[type]="ActivityListingType.Plans"
></app-recent-edited-activity>
</mat-tab>
<mat-tab aria-label="{{'DASHBOARD.DESCRIPTIONS' | translate}}" label="{{'DASHBOARD.DESCRIPTIONS' | translate}}">
<mat-tab [attr.aria-label]="'DASHBOARD.DESCRIPTIONS' | translate" label="{{'DASHBOARD.DESCRIPTIONS' | translate}}">
<app-recent-edited-activity
[currentType]="currentType"
[type]="ActivityListingType.Descriptions"
@ -168,7 +168,7 @@
<div class="col-12 col-xl">
<div class="row">
<div class="col-auto card" [style.display]="isIntroCardVisible ? 'block' : 'none'">
<button mat-icon-button (click)="dismissIntroCard()" aria-label="{{'ALT-TEXT.CLOSE-INTRO-CARD' | translate}}">
<button mat-icon-button (click)="dismissIntroCard()" [attr.aria-label]="'ALT-TEXT.CLOSE-INTRO-CARD' | translate">
<mat-icon>close</mat-icon>
</button>
<div class="d-flex flex-column align-items-center non-auth-title-container">

5
frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.ts
View File

@ -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
) { }

8
frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.ts
View File

@ -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<FormFieldSetEditorDialogComponent>,
@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;

6
frontend/src/app/ui/description/editor/new-description/new-description.component.ts
View File

@ -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();

6
frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.ts
View File

@ -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<DescriptionFilterComponent>,
private analyticsService: AnalyticsService,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: {
isPublic: boolean,
hasSelectedTenant: boolean,

6
frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.ts
View File

@ -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;

5
frontend/src/app/ui/faq/dialog/faq-dialog.component.ts
View File

@ -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<FaqDialogComponent>,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.isDialog = data.isDialog;

5
frontend/src/app/ui/glossary/dialog/glossary-dialog.component.ts
View File

@ -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<GlossaryDialogComponent>,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.isDialog = data.isDialog;

6
frontend/src/app/ui/language/dialog/language-dialog.component.ts
View File

@ -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<LanguageDialogComponent>,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.isDialog = data.isDialog;

11
frontend/src/app/ui/navbar/navbar.component.html
View File

@ -27,6 +27,15 @@
<li class="new-plan-dialog col-md-auto ml-auto navbar-item-lg">
<button type="button" mat-button class="rounded-btn primary" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
</li>
<li class="navbar-item-lg">
<button mat-icon-button
(click)="toggleFontSize()"
[matTooltip]="toggleFontSizeTooltip"
[attr.aria-label]="toggleFontSizeTooltip"
>
<mat-icon>format_size</mat-icon>
</button>
</li>
<li class="navbar-item-lg" *ngIf="!(isAuthenticated() && onInvalidUrl())">
<button mat-button class="faq-title" (click)="openFaqDialog()">{{ 'FAQ.TITLE' | translate }}</button>
</li>
@ -77,7 +86,7 @@
<mat-menu #toggleMenu="matMenu">
<ul class="list m-2">
<li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()" tabindex="0">
<button mat-button class="faq-title" (click)="openFaqDialog()" aria-label="faq">{{ 'FAQ.TITLE' | translate }}</button>
<button mat-button class="faq-title" (click)="openFaqDialog()" [attr.aria-label]="'FAQ.TITLE' | translate">{{ 'FAQ.TITLE' | translate }}</button>
<button mat-button [matMenuTriggerFor]="languageMenu" class="lang" [attr.aria-label]="'ALT-TEXT.LANGUAGE-SELECT' | translate" (click)="$event.stopPropagation();">
<mat-icon>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
<mat-icon iconPositionEnd>arrow_drop_down</mat-icon>

12
frontend/src/app/ui/navbar/navbar.component.ts
View File

@ -27,6 +27,8 @@ import { nameof } from 'ts-simple-nameof';
import { StartNewPlanDialogComponent } from '../plan/new/start-new-plan-dialogue/start-new-plan-dialog.component';
import { FaqDialogComponent } from '../faq/dialog/faq-dialog.component';
import { UserDialogComponent } from './user-dialog/user-dialog.component';
import { TranslateService } from '@ngx-translate/core';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
selector: 'app-navbar',
@ -65,6 +67,8 @@ export class NavbarComponent extends BaseComponent implements OnInit {
private storageFileService: StorageFileService,
private sanitizer: DomSanitizer,
private analyticsService: AnalyticsService,
private fontService: FontAccessibilityService,
private language: TranslateService
) {
super();
this.location = location;
@ -329,4 +333,12 @@ export class NavbarComponent extends BaseComponent implements OnInit {
}
}
get toggleFontSizeTooltip(): string {
return this.language.instant('NAV-BAR.TOGGLE-TEXT-SIZE') + this.language.instant(this.fontService.isLargeText() ? 'NAV-BAR.SMALLER' : 'NAV-BAR.LARGER')
}
toggleFontSize() {
this.fontService.toggleFontSize();
}
}

6
frontend/src/app/ui/navbar/user-dialog/user-dialog.component.ts
View File

@ -1,10 +1,11 @@
import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { Component, computed, HostBinding, Inject, OnDestroy, OnInit } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { AuthService } from '../../../core/services/auth/auth.service';
import { Observable, Subscription, fromEvent } from 'rxjs';
import { RouterUtilsService } from '@app/core/services/router/router-utils.service';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
selector: 'app-user-dialog-component',
@ -12,7 +13,7 @@ import { RouterUtilsService } from '@app/core/services/router/router-utils.servi
styleUrls: ['user-dialog.component.scss']
})
export class UserDialogComponent implements OnInit, OnDestroy {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
public formGroup: UntypedFormGroup;
resizeObservable: Observable<Event>;
@ -23,6 +24,7 @@ export class UserDialogComponent implements OnInit, OnDestroy {
private router: Router,
public dialogRef: MatDialogRef<UserDialogComponent>,
private routerUtils: RouterUtilsService,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: any
) { }

5
frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.ts
View File

@ -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, MatDialogRef } from '@angular/material/dialog';
import { ClonePlanPersist, Plan } from '@app/core/model/plan/plan';
@ -11,6 +11,7 @@ import { PlanCloneDialogEditorModel } from './plan-clone-dialog.editor.model';
import { PlanEditorEntityResolver } from '../plan-editor-blueprint/resolvers/plan-editor-enitity.resolver';
import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
import { HttpErrorResponse } from '@angular/common/http';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
selector: 'app-plan-clone-dialog',
@ -18,6 +19,7 @@ import { HttpErrorResponse } from '@angular/common/http';
styleUrls: ['./plan-clone-dialog.component.scss']
})
export class ClonePlanDialogComponent extends BaseComponent {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
plan: Plan;
editorModel: PlanCloneDialogEditorModel;
@ -30,6 +32,7 @@ export class ClonePlanDialogComponent extends BaseComponent {
private uiNotificationService: UiNotificationService,
private httpErrorHandlingService: HttpErrorHandlingService,
private language: TranslateService,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
super();

6
frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.ts
View File

@ -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 { UntypedFormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router';
@ -18,6 +18,7 @@ import { Guid } from '@common/types/guid';
import { TranslateService } from '@ngx-translate/core';
import { takeUntil } from 'rxjs/operators';
import { PlanEditorModel } from '../../plan-editor-blueprint/plan-editor.model';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
selector: 'app-invitation-dialog-component',
@ -25,7 +26,7 @@ import { PlanEditorModel } from '../../plan-editor-blueprint/plan-editor.model';
styleUrls: ['./plan-invitation-dialog.component.scss']
})
export class PlanInvitationDialogComponent extends BaseComponent implements OnInit {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
planId: Guid;
editorModel: PlanEditorModel;
formGroup: UntypedFormGroup;
@ -44,6 +45,7 @@ export class PlanInvitationDialogComponent extends BaseComponent implements OnIn
private httpErrorHandlingService: HttpErrorHandlingService,
private planService: PlanService,
private formService: FormService,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
super();

6
frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.ts
View File

@ -1,10 +1,11 @@
import { Inject, Component, ViewChild, OnInit } from '@angular/core';
import { Inject, Component, ViewChild, OnInit, computed, HostBinding } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { UntypedFormGroup } from '@angular/forms';
import { AnalyticsService } from '@app/core/services/matomo/analytics-service';
import { PlanFilterComponent, PlanListingFilters } from '../plan-filter.component';
import { ReferencesWithType } from '@app/core/query/description.lookup';
import { PlanLookup } from '@app/core/query/plan.lookup';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
selector: 'plan-filter-dialog-component',
@ -13,13 +14,14 @@ import { PlanLookup } from '@app/core/query/plan.lookup';
})
export class PlanFilterDialogComponent implements OnInit {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
@ViewChild(PlanFilterComponent, { static: true }) filter: PlanFilterComponent;
filters: PlanListingFilters;
constructor(
public dialogRef: MatDialogRef<PlanFilterDialogComponent>,
private analyticsService: AnalyticsService,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: {
isPublic: boolean,
hasSelectedTenant: boolean,

11
frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.ts
View File

@ -1,9 +1,9 @@
import { Component, Inject } from '@angular/core';
import { Component, computed, HostBinding, Inject } from '@angular/core';
import { AbstractControl, FormArray, UntypedFormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Plan, PlanDescriptionTemplate, NewVersionPlanDescriptionPersist, NewVersionPlanPersist } from '@app/core/model/plan/plan';
import { Plan, NewVersionPlanDescriptionPersist, NewVersionPlanPersist } from '@app/core/model/plan/plan';
import { PlanService } from '@app/core/services/plan/plan.service';
import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service';
import { BaseComponent } from '@common/base/base.component';
import { TranslateService } from '@ngx-translate/core';
import { map, takeUntil } from 'rxjs/operators';
@ -23,7 +23,7 @@ import { FormService } from '@common/forms/form-service';
import { MatSelectionListChange } from '@angular/material/list';
import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
import { HttpErrorResponse } from '@angular/common/http';
import { Description } from '@app/core/model/description/description';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
selector: 'app-plan-new-version-dialog',
@ -31,6 +31,7 @@ import { Description } from '@app/core/model/description/description';
styleUrls: ['./plan-new-version-dialog.component.scss']
})
export class NewVersionPlanDialogComponent extends BaseComponent {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
plan: Plan;
editorModel: PlanNewVersionDialogEditorModel;
@ -75,11 +76,11 @@ export class NewVersionPlanDialogComponent extends BaseComponent {
public dialogRef: MatDialogRef<NewVersionPlanDialogComponent>,
private planService: PlanService,
public planBlueprintService: PlanBlueprintService,
private uiNotificationService: UiNotificationService,
private httpErrorHandlingService: HttpErrorHandlingService,
private language: TranslateService,
private filterService: FilterService,
private formService: FormService,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
super();

5
frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.ts
View File

@ -1,5 +1,5 @@
import { HttpClient } from '@angular/common/http';
import { Component, Inject } from '@angular/core';
import { Component, computed, HostBinding, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { PlanService } from '@app/core/services/plan/plan.service';
@ -11,6 +11,7 @@ import { PlanUploadDialogComponent } from '../upload-dialogue/plan-upload-dialog
import { AnalyticsService } from '@app/core/services/matomo/analytics-service';
import { RouterUtilsService } from '@app/core/services/router/router-utils.service';
import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
selector: 'app-start-new-plan',
@ -18,6 +19,7 @@ import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/
styleUrls: ['./start-new-plan-dialog.component.scss']
})
export class StartNewPlanDialogComponent extends BaseComponent {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
public isDialog: boolean = false;
@ -33,6 +35,7 @@ export class StartNewPlanDialogComponent extends BaseComponent {
private analyticsService: AnalyticsService,
private routerUtils: RouterUtilsService,
private httpErrorHandlingService: HttpErrorHandlingService,
protected fontService: FontAccessibilityService,
) {
super();
this.isDialog = data.isDialog;

11
frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.ts
View File

@ -1,5 +1,4 @@
import { HttpClient } from '@angular/common/http';
import { Component, Inject } from '@angular/core';
import { Component, computed, HostBinding, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { DescriptionTemplate } from '@app/core/model/description-template/description-template';
import { PlanBlueprint, PlanBlueprintDefinitionSection } from '@app/core/model/plan-blueprint/plan-blueprint';
@ -18,8 +17,8 @@ import { IsActive } from '@notification-service/core/enum/is-active.enum';
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { TranslateService } from '@ngx-translate/core';
import { Guid } from '@common/types/guid';
import { DescriptionTemplatePreviewDialogComponent } from '@app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
selector: 'plan-upload-dialog',
@ -27,6 +26,8 @@ import { DescriptionTemplatePreviewDialogComponent } from '@app/ui/admin/descrip
styleUrls: ['./plan-upload-dialog.component.scss']
})
export class PlanUploadDialogComponent extends BaseComponent {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
planTitle: string;
planBlueprints: any[] = [];
files: File[] = [];
@ -47,9 +48,7 @@ export class PlanUploadDialogComponent extends BaseComponent {
constructor(
public dialogRef: MatDialogRef<PlanUploadDialogComponent>,
private _service: PlanService,
private dialog: MatDialog,
private httpClient: HttpClient,
private analyticsService: AnalyticsService,
private formService: FormService,
public descriptionTemplateService: DescriptionTemplateService,
@ -58,7 +57,7 @@ export class PlanUploadDialogComponent extends BaseComponent {
private storageFileStorage: StorageFileService,
private uiNotificationService: UiNotificationService,
private language: TranslateService,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: any,
) {
super();

7
frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Inject } from '@angular/core';
import { Component, computed, HostBinding, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { BaseComponent } from '@common/base/base.component';
import { UserService } from '@app/core/services/user/user.service';
@ -6,6 +6,7 @@ import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/sing
import { map } from 'rxjs';
import { PlanAssociatedUser } from '@app/core/model/user/user';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
selector: 'app-plan-contact-prefill-dialog',
@ -13,6 +14,7 @@ import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
styleUrls: ['./plan-contact-prefill-dialog.component.scss']
})
export class PlanContactPrefillDialogComponent extends BaseComponent {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
label: string;
selectedUser: PlanAssociatedUser;
@ -23,7 +25,8 @@ export class PlanContactPrefillDialogComponent extends BaseComponent {
private userService: UserService,
public enumUtils: EnumUtils,
public dialogRef: MatDialogRef<PlanContactPrefillDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
@Inject(MAT_DIALOG_DATA) public data: any,
protected fontService: FontAccessibilityService,
) {
super();
this.label = data.label;

7
frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.ts
View File

@ -1,6 +1,7 @@
import { Component, Inject } from '@angular/core';
import { Component, computed, HostBinding, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Description } from '@app/core/model/description/description';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
selector: 'app-plan-delete-dialog',
@ -8,11 +9,13 @@ import { Description } from '@app/core/model/description/description';
styleUrls: ['./plan-delete-dialog.component.scss']
})
export class PlanDeleteDialogComponent {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
descriptions: Description[];
constructor(
public dialogRef: MatDialogRef<PlanDeleteDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
@Inject(MAT_DIALOG_DATA) public data: any,
protected fontService: FontAccessibilityService,
) {
this.descriptions = data.descriptions;
}

5
frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.ts
View File

@ -1,10 +1,11 @@
import { Component, Inject, OnInit } from '@angular/core';
import { Component, computed, HostBinding, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { DescriptionStatusEnum } from '@app/core/common/enum/description-status';
import { PlanAccessType } from '@app/core/common/enum/plan-access-type';
import { Plan } from '@app/core/model/plan/plan';
import { DescriptionService } from '@app/core/services/description/description.service';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
import { PlanService } from '@app/core/services/plan/plan.service';
import { BaseComponent } from '@common/base/base.component';
import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
@ -18,6 +19,7 @@ import { takeUntil } from 'rxjs/operators';
styleUrls: ['./plan-finalize-dialog.component.scss']
})
export class PlanFinalizeDialogComponent extends BaseComponent implements OnInit {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
plan: Plan;
isPlanValid: boolean;
@ -35,6 +37,7 @@ export class PlanFinalizeDialogComponent extends BaseComponent implements OnInit
public descriptionService: DescriptionService,
private planService: PlanService,
private httpErrorHandlingService: HttpErrorHandlingService,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
super();

3
frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.ts
View File

@ -18,7 +18,6 @@ import { MatButtonToggleChange } from '@angular/material/button-toggle';
styleUrls: ['./plan-user-field.component.scss']
})
export class PlanUserFieldComponent extends BaseComponent implements OnInit {
@Input() form;
@Input() validationErrorModel: ValidationErrorModel;
@Input() label: string = null;
@ -41,7 +40,7 @@ export class PlanUserFieldComponent extends BaseComponent implements OnInit {
constructor(
public enumUtils: EnumUtils,
public userService: UserService
public userService: UserService,
) { super(); }
ngOnInit() {

8
frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.ts
View File

@ -1,9 +1,10 @@
import { Component, Inject, OnInit } from '@angular/core';
import { Component, computed, HostBinding, Inject, OnInit } from '@angular/core';
import { FormControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ReferenceSourceType } from '@app/core/common/enum/reference-source-type';
import { ReferenceType, ReferenceTypeDefinition, ReferenceTypeField } from '@app/core/model/reference-type/reference-type';
import { DefinitionPersist, FieldPersist, ReferencePersist } from '@app/core/model/reference/reference';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service';
import { ReferenceService } from '@app/core/services/reference/reference.service';
import { BaseComponent } from '@common/base/base.component';
@ -16,6 +17,8 @@ import { nameof } from 'ts-simple-nameof';
styleUrls: ['./reference-dialog-editor.component.scss']
})
export class ReferenceDialogEditorComponent extends BaseComponent implements OnInit {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
formGroup: UntypedFormGroup;
referenceType: ReferenceType;
systemFields: string[];
@ -32,7 +35,8 @@ export class ReferenceDialogEditorComponent extends BaseComponent implements OnI
private fb: UntypedFormBuilder,
public dialogRef: MatDialogRef<ReferenceDialogEditorComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
private formService: FormService
private formService: FormService,
protected fontService: FontAccessibilityService,
) {
super();
this.label = data.label;

2
frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
View File

@ -12,7 +12,7 @@
border-radius: 0px;
cursor: pointer;
display: inline-flex;
font-size: small;
font-size: 13px;
}
.sidebar-footer .option:hover {

2
frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html
View File

@ -2,7 +2,7 @@
@for(footerItems of nestedFooterItems; track footerItems){
<ul class="row horizontal-list">
@for(item of footerItems; track item; let index=$index){
<li class="col-auto option" [routerLink]="routerUtils.generateUrl(item.routerPath)" [ngClass]="{'option-active': this.router.url === item.routerPath, 'ml-3': index%2==1}" tabindex="0">
<li class="col-auto option" [routerLink]="routerUtils.generateUrl(item.routerPath)" [ngClass]="{'option-active': this.router.url === item.routerPath}" tabindex="0">
{{ item.title | translate}}
</li>
}

2
frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts
View File

@ -21,6 +21,7 @@ import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/
import { RouterUtilsService } from '@app/core/services/router/router-utils.service';
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
import { AccessLevel, SidebarItem } from '@app/core/model/configuration-models/sidebar.model';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
selector: 'app-sidebar-footer',
@ -45,6 +46,7 @@ export class SidebarFooterComponent extends BaseComponent implements OnInit {
private analyticsService: AnalyticsService,
private httpErrorHandlingService: HttpErrorHandlingService,
private configurationService: ConfigurationService,
protected fontService: FontAccessibilityService
) {
super();
}

1
frontend/src/app/ui/sidebar/sidebar.component.ts
View File

@ -12,6 +12,7 @@ import { UserDialogComponent } from '../navbar/user-dialog/user-dialog.component
import { RouterUtilsService } from '@app/core/services/router/router-utils.service';
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
import { AccessLevel } from '@app/core/model/configuration-models/sidebar.model';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
enum RouteType {
System = 0,

6
frontend/src/app/ui/user-guide/dialog/user-guide-dialog.component.ts
View File

@ -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-user-guide-dialog',
@ -7,11 +8,12 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
styleUrls: ['./user-guide-dialog.component.scss']
})
export class UserGuideDialogComponent {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
public isDialog: boolean = false;
constructor(
public dialogRef: MatDialogRef<UserGuideDialogComponent>,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.isDialog = data.isDialog;

6
frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.ts
View File

@ -1,6 +1,7 @@
import { Component, Inject, OnInit } from '@angular/core';
import { Component, computed, HostBinding, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, UntypedFormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
selector: 'app-add-account-dialog-component',
@ -8,7 +9,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
styleUrls: ['./add-account-dialog.component.scss'],
})
export class AddAccountDialogComponent implements OnInit {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
descriptionTemplateDefinitionModel: any;
descriptionTemplateDefinitionFormGroup: UntypedFormGroup;
progressIndication = false;
@ -17,6 +18,7 @@ export class AddAccountDialogComponent implements OnInit {
constructor(
private formBuilder: FormBuilder,
public dialogRef: MatDialogRef<AddAccountDialogComponent>,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: any
) { }

3
frontend/src/assets/i18n/baq.json
View File

@ -329,6 +329,9 @@
"NAV-BAR": {
"START-NEW-PLAN": "Hasi DKP berria",
"INAPP-NOTIFICATIONS": "All Notifications",
"TOGGLE-TEXT-SIZE": "Toggle font size to ",
"SMALLER": "smaller",
"LARGER": "larger",
"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
},
"SIDE-BAR": {

5
frontend/src/assets/i18n/de.json
View File

@ -332,7 +332,10 @@
"NAV-BAR": {
"START-NEW-PLAN": "Start new DMP",
"INAPP-NOTIFICATIONS": "All Notifications",
"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
"TOGGLE-TEXT-SIZE": "Toggle font size to ",
"SMALLER": "smaller",
"LARGER": "larger"
},
"SIDE-BAR": {
"GENERAL": "ALLGEMEINES",

5
frontend/src/assets/i18n/en.json
View File

@ -330,7 +330,10 @@
"NAV-BAR": {
"START-NEW-PLAN": "Start new Plan",
"INAPP-NOTIFICATIONS": "All Notifications",
"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
"TOGGLE-TEXT-SIZE": "Toggle font size to ",
"SMALLER": "smaller",
"LARGER": "larger"
},
"SIDE-BAR": {
"GENERAL": "GENERAL",

5
frontend/src/assets/i18n/es.json
View File

@ -332,7 +332,10 @@
"NAV-BAR": {
"START-NEW-PLAN": "Iniciar un nuevo PGD",
"INAPP-NOTIFICATIONS": "All Notifications",
"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
"TOGGLE-TEXT-SIZE": "Toggle font size to ",
"SMALLER": "smaller",
"LARGER": "larger"
},
"SIDE-BAR": {
"GENERAL": "GENERAL",

5
frontend/src/assets/i18n/gr.json
View File

@ -332,7 +332,10 @@
"NAV-BAR": {
"START-NEW-PLAN": "Ξεκινήστε νέο DMP",
"INAPP-NOTIFICATIONS": "All Notifications",
"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
"TOGGLE-TEXT-SIZE": "Toggle font size to ",
"SMALLER": "smaller",
"LARGER": "larger"
},
"SIDE-BAR": {
"GENERAL": "ΓΕΝΙΚΑ",

5
frontend/src/assets/i18n/hr.json
View File

@ -332,7 +332,10 @@
"NAV-BAR": {
"START-NEW-PLAN": "Kreirajte novi Plan",
"INAPP-NOTIFICATIONS": "All Notifications",
"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
"TOGGLE-TEXT-SIZE": "Toggle font size to ",
"SMALLER": "smaller",
"LARGER": "larger"
},
"SIDE-BAR": {
"GENERAL": "OPĆENITO",

5
frontend/src/assets/i18n/pl.json
View File

@ -332,7 +332,10 @@
"NAV-BAR": {
"START-NEW-PLAN": "Uruchom nowy DMP",
"INAPP-NOTIFICATIONS": "All Notifications",
"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
"TOGGLE-TEXT-SIZE": "Toggle font size to ",
"SMALLER": "smaller",
"LARGER": "larger"
},
"SIDE-BAR": {
"GENERAL": "OGÓLNY",

4
frontend/src/assets/i18n/pt.json
View File

@ -332,7 +332,9 @@
"NAV-BAR": {
"START-NEW-PLAN": "Criar novo PGD",
"INAPP-NOTIFICATIONS": "All Notifications",
"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
"TO-SMALLER": " to smaller",
"TO-LARGER": " to larger"
},
"SIDE-BAR": {
"GENERAL": "GERAL",

5
frontend/src/assets/i18n/sk.json
View File

@ -332,7 +332,10 @@
"NAV-BAR": {
"START-NEW-PLAN": "Začať nový DMP",
"INAPP-NOTIFICATIONS": "All Notifications",
"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
"TOGGLE-TEXT-SIZE": "Toggle font size to ",
"SMALLER": "smaller",
"LARGER": "larger"
},
"SIDE-BAR": {
"GENERAL": "VŠEOBECNÉ INFORMÁCIE",

5
frontend/src/assets/i18n/sr.json
View File

@ -332,7 +332,10 @@
"NAV-BAR": {
"START-NEW-PLAN": "Započnite kreiranje novog Plana",
"INAPP-NOTIFICATIONS": "All Notifications",
"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
"TOGGLE-TEXT-SIZE": "Toggle font size to ",
"SMALLER": "smaller",
"LARGER": "larger"
},
"SIDE-BAR": {
"GENERAL": "OPŠTE",

5
frontend/src/assets/i18n/tr.json
View File

@ -332,7 +332,10 @@
"NAV-BAR": {
"START-NEW-PLAN": "Yeni bir VYP yaz",
"INAPP-NOTIFICATIONS": "All Notifications",
"READ-ALL-INAPP-NOTIFICATIONS": "Read All"
"READ-ALL-INAPP-NOTIFICATIONS": "Read All",
"TOGGLE-TEXT-SIZE": "Toggle font size to ",
"SMALLER": "smaller",
"LARGER": "larger"
},
"SIDE-BAR": {
"GENERAL": "GENEL",

5
frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.ts
View File

@ -1,6 +1,7 @@
import { Component, Inject } from '@angular/core';
import { Component, computed, HostBinding, Inject } from '@angular/core';
import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
import { TranslateService } from '@ngx-translate/core';
@Component({
@ -9,12 +10,14 @@ import { TranslateService } from '@ngx-translate/core';
styleUrls: ['./form-validation-errors-dialog.component.scss']
})
export class FormValidationErrorsDialogComponent {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
formGroup: UntypedFormGroup;
errorMessages: string[] = [];
constructor(public dialogRef: MatDialogRef<FormValidationErrorsDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
protected fontService: FontAccessibilityService,
private language: TranslateService
) {
if (data.formGroup !== undefined && data.formGroup !== null) {

5
frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.ts
View File

@ -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-confirmation-dialog',
@ -7,11 +8,13 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
styleUrls: ['./confirmation-dialog.component.scss']
})
export class ConfirmationDialogComponent {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
agreePrivacyPolicyNames = false;
constructor(
public dialogRef: MatDialogRef<ConfirmationDialogComponent>,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
}

6
frontend/src/common/modules/multiple-choice-dialog/multiple-choice-dialog.component.ts
View File

@ -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-multiple-choice-dialog',
@ -7,10 +8,13 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
styleUrls: ['./multiple-choice-dialog.component.scss']
})
export class MultipleChoiceDialogComponent {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
agreePrivacyPolicyNames = false;
constructor(
public dialogRef: MatDialogRef<MultipleChoiceDialogComponent>,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
}

6
frontend/src/notification-service/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.ts
View File

@ -1,6 +1,6 @@
import { fromEvent, Observable, Subscription } from "rxjs";
import { HttpErrorResponse } from '@angular/common/http';
import { Component, EventEmitter, Inject, OnDestroy, OnInit } from '@angular/core';
import { Component, computed, EventEmitter, HostBinding, Inject, OnDestroy, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { AuthService } from '@app/core/services/auth/auth.service';
@ -17,6 +17,7 @@ import { InAppNotification } from "@notification-service/core/model/inapp-notifi
import { RouterUtilsService } from "@app/core/services/router/router-utils.service";
import { Guid } from "@common/types/guid";
import moment from "moment";
import { FontAccessibilityService } from "@app/core/services/font-accessibility.service";
@Component({
selector: 'app-mine-inapp-notification-listing-dialog',
@ -24,6 +25,8 @@ import moment from "moment";
styleUrls: ['./mine-inapp-notification-listing-dialog.component.scss']
})
export class MineInAppNotificationListingDialogComponent extends BaseComponent implements OnInit, OnDestroy {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
public inappNotifications = new Array<InAppNotification>();
public notificationInAppTrackingEnum = NotificationInAppTracking;
@ -40,6 +43,7 @@ export class MineInAppNotificationListingDialogComponent extends BaseComponent i
private uiNotificationService: UiNotificationService,
private httpErrorHandlingService: HttpErrorHandlingService,
public authService: AuthService,
protected fontService: FontAccessibilityService,
) {
super();
}

31
frontend/src/styles.scss
View File

@ -73,11 +73,20 @@ $mat-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-ser
$body-2: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
$body-1: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
// $caption: mat.m2-define-typography-level($font-size: 16px, $font-weight: Medium, $font-family: 'Roboto, sans-serif;'),
$button: mat.m2-define-typography-level($font-size: 14px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
$button: mat.m2-define-typography-level($font-size: 0.87rem, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
// Line-height must be unit-less fraction of the font-size.
// $input: mat.m2-define-typography-level($font-size: inherit, $line-height: 1.125, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
);
$mat-accessibility-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;',
$subtitle-1: mat.m2-define-typography-level($font-size: 22px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
$subtitle-2: mat.m2-define-typography-level($font-size: 22px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
$body-1: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
$body-2: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
$button: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
$caption: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
);
$mat-density: 0;
// @include mat.elevation(
// $zValue: 12,
@ -96,12 +105,32 @@ $mat-dark-theme: mat.m2-define-dark-theme((color: (primary: $mat-dark-theme-prim
warn: $mat-dark-theme-warn,
)));
$mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme-primary,
accent: $mat-theme-accent,
warn: $mat-theme-warn),
typography: $mat-accessibility-typography,
density: $mat-density));
@include mat.all-component-themes($mat-core-theme);
.dark-theme {
@include mat.all-component-colors($mat-dark-theme);
}
.accessibility-theme {
@include mat.all-component-themes($mat-accessibility-theme);
// change individual classes set in components' scss
.frame-txt, .action-list-text, .stepper-back, .nav-row, .nav-subrow, .center-content, .form-check,
.nav-row, .nav-subrow, .sidebar-footer .option, label.mdc-label {
font-size: max(1rem, 16px) !important;
}
.action-list-label, .actions-list, small {
font-size: max(1rem, 13px) !important;
}
.status-chip {
font-size: 14px;
}
}
// @import "@covalent/core/theming/all-theme";