diff --git a/backend/core/src/main/java/org/opencdmp/commons/types/tenantconfiguration/CssColorsTenantConfigurationEntity.java b/backend/core/src/main/java/org/opencdmp/commons/types/tenantconfiguration/CssColorsTenantConfigurationEntity.java index f54090d26..c4302b5e6 100644 --- a/backend/core/src/main/java/org/opencdmp/commons/types/tenantconfiguration/CssColorsTenantConfigurationEntity.java +++ b/backend/core/src/main/java/org/opencdmp/commons/types/tenantconfiguration/CssColorsTenantConfigurationEntity.java @@ -2,9 +2,7 @@ package org.opencdmp.commons.types.tenantconfiguration; public class CssColorsTenantConfigurationEntity { private String primaryColor; - private String primaryColor2; - private String primaryColor3; - private String secondaryColor; + private String cssOverride; public String getPrimaryColor() { return primaryColor; @@ -14,27 +12,11 @@ public class CssColorsTenantConfigurationEntity { this.primaryColor = primaryColor; } - public String getPrimaryColor2() { - return primaryColor2; + public String getCssOverride() { + return cssOverride; } - public void setPrimaryColor2(String primaryColor2) { - this.primaryColor2 = primaryColor2; - } - - public String getPrimaryColor3() { - return primaryColor3; - } - - public void setPrimaryColor3(String primaryColor3) { - this.primaryColor3 = primaryColor3; - } - - public String getSecondaryColor() { - return secondaryColor; - } - - public void setSecondaryColor(String secondaryColor) { - this.secondaryColor = secondaryColor; + public void setCssOverride(String cssOverride) { + this.cssOverride = cssOverride; } } diff --git a/backend/core/src/main/java/org/opencdmp/model/builder/tenantconfiguration/CssColorsTenantConfigurationBuilder.java b/backend/core/src/main/java/org/opencdmp/model/builder/tenantconfiguration/CssColorsTenantConfigurationBuilder.java index 6a129bc97..6f93646f0 100644 --- a/backend/core/src/main/java/org/opencdmp/model/builder/tenantconfiguration/CssColorsTenantConfigurationBuilder.java +++ b/backend/core/src/main/java/org/opencdmp/model/builder/tenantconfiguration/CssColorsTenantConfigurationBuilder.java @@ -44,9 +44,7 @@ public class CssColorsTenantConfigurationBuilder extends BaseBuilder { @@ -80,16 +58,7 @@ public class CssColorsTenantConfigurationPersist { return Arrays.asList( this.spec() .must(() -> !this.isEmpty(item.getPrimaryColor())) - .failOn(CssColorsTenantConfigurationPersist._primaryColor).failWith(messageSource.getMessage("Validation_Required", new Object[]{CssColorsTenantConfigurationPersist._primaryColor}, LocaleContextHolder.getLocale())), - this.spec() - .must(() -> !this.isEmpty(item.getPrimaryColor2())) - .failOn(CssColorsTenantConfigurationPersist._primaryColor2).failWith(messageSource.getMessage("Validation_Required", new Object[]{CssColorsTenantConfigurationPersist._primaryColor2}, LocaleContextHolder.getLocale())), - this.spec() - .must(() -> !this.isEmpty(item.getPrimaryColor3())) - .failOn(CssColorsTenantConfigurationPersist._primaryColor3).failWith(messageSource.getMessage("Validation_Required", new Object[]{CssColorsTenantConfigurationPersist._primaryColor3}, LocaleContextHolder.getLocale())), - this.spec() - .must(() -> !this.isEmpty(item.getSecondaryColor())) - .failOn(CssColorsTenantConfigurationPersist._secondaryColor).failWith(messageSource.getMessage("Validation_Required", new Object[]{CssColorsTenantConfigurationPersist._secondaryColor}, LocaleContextHolder.getLocale())) + .failOn(CssColorsTenantConfigurationPersist._primaryColor).failWith(messageSource.getMessage("Validation_Required", new Object[]{CssColorsTenantConfigurationPersist._primaryColor}, LocaleContextHolder.getLocale())) ); } } diff --git a/backend/core/src/main/java/org/opencdmp/model/tenantconfiguration/CssColorsTenantConfiguration.java b/backend/core/src/main/java/org/opencdmp/model/tenantconfiguration/CssColorsTenantConfiguration.java index 6f748f04e..d73b5a351 100644 --- a/backend/core/src/main/java/org/opencdmp/model/tenantconfiguration/CssColorsTenantConfiguration.java +++ b/backend/core/src/main/java/org/opencdmp/model/tenantconfiguration/CssColorsTenantConfiguration.java @@ -3,12 +3,9 @@ package org.opencdmp.model.tenantconfiguration; public class CssColorsTenantConfiguration { private String primaryColor; public static final String _primaryColor = "primaryColor"; - private String primaryColor2; - public static final String _primaryColor2 = "primaryColor2"; - private String primaryColor3; - public static final String _primaryColor3 = "primaryColor3"; - private String secondaryColor; - public static final String _secondaryColor = "secondaryColor"; + + private String cssOverride; + public static final String _cssOverride = "cssOverride"; public String getPrimaryColor() { return primaryColor; @@ -18,27 +15,11 @@ public class CssColorsTenantConfiguration { this.primaryColor = primaryColor; } - public String getPrimaryColor2() { - return primaryColor2; + public String getCssOverride() { + return cssOverride; } - public void setPrimaryColor2(String primaryColor2) { - this.primaryColor2 = primaryColor2; - } - - public String getPrimaryColor3() { - return primaryColor3; - } - - public void setPrimaryColor3(String primaryColor3) { - this.primaryColor3 = primaryColor3; - } - - public String getSecondaryColor() { - return secondaryColor; - } - - public void setSecondaryColor(String secondaryColor) { - this.secondaryColor = secondaryColor; + public void setCssOverride(String cssOverride) { + this.cssOverride = cssOverride; } } diff --git a/backend/core/src/main/java/org/opencdmp/service/tenantconfiguration/TenantConfigurationServiceImpl.java b/backend/core/src/main/java/org/opencdmp/service/tenantconfiguration/TenantConfigurationServiceImpl.java index 7d8a112c5..c9c8fccbb 100644 --- a/backend/core/src/main/java/org/opencdmp/service/tenantconfiguration/TenantConfigurationServiceImpl.java +++ b/backend/core/src/main/java/org/opencdmp/service/tenantconfiguration/TenantConfigurationServiceImpl.java @@ -238,9 +238,7 @@ public class TenantConfigurationServiceImpl implements TenantConfigurationServic CssColorsTenantConfigurationEntity data = new CssColorsTenantConfigurationEntity(); if (persist == null) return data; data.setPrimaryColor(persist.getPrimaryColor()); - data.setPrimaryColor2(persist.getPrimaryColor2()); - data.setPrimaryColor3(persist.getPrimaryColor3()); - data.setSecondaryColor(persist.getSecondaryColor()); + data.setCssOverride(persist.getCssOverride()); return data; } diff --git a/frontend/angular.json b/frontend/angular.json index e7eff87c9..a2fde21c5 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -26,8 +26,8 @@ ], "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", - "src/styles.scss", "src/assets/scss/material-dashboard.scss", + "src/styles.scss", "node_modules/cookieconsent/build/cookieconsent.min.css" ], "scripts": [ @@ -113,8 +113,8 @@ "tsConfig": "src/tsconfig.spec.json", "scripts": [], "styles": [ + "src/assets/scss/material-dashboard.scss", "src/styles.scss", - "src/assets/scss/material-dashboard.scss", "node_modules/tinymce/tinymce.min.js" ], "assets": [ diff --git a/frontend/package.json b/frontend/package.json index aa63237bb..ce17df68d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,11 +18,12 @@ "@angular/compiler": "^18.0.2", "@angular/core": "^18.0.2", "@angular/forms": "^18.0.2", - "@angular/material-moment-adapter": "^18.0.2", + "@angular/material-moment-adapter": "^18.2.7", "@angular/platform-browser": "^18.0.2", "@kolkov/angular-editor": "^2.1.0", "@mat-datetimepicker/core": "^13.0.2", "@mat-datetimepicker/moment": "^13.0.2", + "@material/material-color-utilities": "^0.3.0", "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", "@swimlane/ngx-datatable": "^20.1.0", @@ -53,11 +54,11 @@ }, "devDependencies": { "@angular-devkit/build-angular": "^18.0.3", - "@angular/cdk": "^18.0.2", + "@angular/cdk": "^18.2.7", "@angular/cli": "18.0.3", "@angular/compiler-cli": "^18.0.2", "@angular/language-service": "^18.0.2", - "@angular/material": "^18.0.2", + "@angular/material": "^18.2.7", "@angular/platform-browser-dynamic": "^18.0.2", "@angular/router": "^18.0.2", "@types/dragula": "^3.7.5", diff --git a/frontend/src/annotation-service/ui/admin/status/editor/status-editor.component.html b/frontend/src/annotation-service/ui/admin/status/editor/status-editor.component.html index 644b6a1af..7997d100c 100644 --- a/frontend/src/annotation-service/ui/admin/status/editor/status-editor.component.html +++ b/frontend/src/annotation-service/ui/admin/status/editor/status-editor.component.html @@ -8,16 +8,16 @@
- +
-
- @@ -41,7 +41,7 @@
-
+
@@ -52,7 +52,7 @@
{{'ANNOTATION-SERVICE.STATUS-EDITOR.FIELDS.INTERNAL-STATUS' | translate}} - + {{enumUtils.toInternalStatusString(internalStatus)}} {{'ANNOTATION-SERVICE.STATUS-EDITOR.DEFAULT-VALUE.NONE' | translate}} diff --git a/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html b/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html index 6c79fbd36..4f5235e7b 100644 --- a/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html +++ b/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html @@ -7,7 +7,7 @@ -
+

{{'ANNOTATION-SERVICE.STATUS-LISTING.FILTER.TITLE' | translate}}

@@ -42,12 +42,12 @@
-
-
diff --git a/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.ts b/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.ts index fb1b42173..87a1f457e 100644 --- a/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.ts +++ b/frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.ts @@ -1,10 +1,11 @@ -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { BaseComponent } from '@common/base/base.component'; import { IsActive } from '@notification-service/core/enum/is-active.enum'; import { nameof } from 'ts-simple-nameof'; import { StatusFilter } from '@annotation-service/core/query/status.lookup'; import { InternalStatus } from '@annotation-service/core/enum/internal-status.enum'; import { AnnotationServiceEnumUtils } from '@annotation-service/core/formatting/enum-utils.service'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; @Component({ selector: 'app-status-listing-filters', @@ -12,7 +13,7 @@ import { AnnotationServiceEnumUtils } from '@annotation-service/core/formatting/ styleUrls: ['./status-listing-filters.component.scss'] }) export class StatusListingFiltersComponent extends BaseComponent implements OnInit, OnChanges { - + accessibilityTheme = computed(() => this.fontService.accessibleFontSignal()); @Input() readonly filter: StatusFilter; @Output() filterChange = new EventEmitter(); internalStatusEnumValues = this.enumUtils.getEnumValues(InternalStatus) @@ -23,6 +24,7 @@ export class StatusListingFiltersComponent extends BaseComponent implements OnIn protected appliedFilterCount: number = 0; constructor( public enumUtils: AnnotationServiceEnumUtils, + protected fontService: FontAccessibilityService ) { super(); } ngOnInit() { diff --git a/frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.html b/frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.html index 0bf104f53..abd88abae 100644 --- a/frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.html +++ b/frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.html @@ -7,7 +7,7 @@
- diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 1cb56b51c..2422c4d0c 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,20 +1,23 @@ -
- - - - - - -
- -
- - +
+ + + +
+ + + + + + +
+ +
+ + +
+ +
- - - - diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss index 4be04347b..e927bb33c 100644 --- a/frontend/src/app/app.component.scss +++ b/frontend/src/app/app.component.scss @@ -23,6 +23,12 @@ opacity: 1; } +@media (max-width: 500px) { + .sidenav { + width: 100% !important; + } +} + .sidenav-content { background-color: whitesmoke; } @@ -35,3 +41,15 @@ ::ng-deep .mat-chip { height: auto !important; } + +.skip-to-main-content { + position: fixed; + left: -190px; + z-index: -1; + &:focus, &:active { + background-color: var(--sys-primary); + z-index: 1001; + left: 50vw; + color: var(--sys-on-primary); + } +} \ No newline at end of file diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 4edf2e9aa..e16ef9a2c 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(); @@ -134,6 +137,7 @@ export class AppComponent implements OnInit, AfterViewInit { if (child.snapshot.data && child.snapshot.data.showOnlyRouterOutlet) { this.showOnlyRouterOutlet = true; this.ccService.getConfig().enabled = false; + this.ccService.getConfig().container = document.getElementById('cookies-consent'); this.ccService.destroy(); this.ccService.init(this.ccService.getConfig()); } else { @@ -143,6 +147,7 @@ export class AppComponent implements OnInit, AfterViewInit { } else { this.ccService.getConfig().enabled = true; } + this.ccService.getConfig().container = document.getElementById('cookies-consent'); this.ccService.destroy(); this.ccService.init(this.ccService.getConfig()); } @@ -261,5 +266,9 @@ export class AppComponent implements OnInit, AfterViewInit { toggleNavbar(event) { document.getElementById('hamburger').classList.toggle("change"); } + + skipToMain() { + document.getElementById('main-page')?.focus(); + } } diff --git a/frontend/src/app/core/core-service.module.ts b/frontend/src/app/core/core-service.module.ts index d9481b26f..6646e6485 100644 --- a/frontend/src/app/core/core-service.module.ts +++ b/frontend/src/app/core/core-service.module.ts @@ -1,4 +1,8 @@ import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core'; +import { CanDeactivateGuard } from '@app/library/deactivate/can-deactivate.guard'; +import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service'; +import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service'; +import { FilterService } from '@common/modules/text-filter/filter-service'; import { CookieService } from 'ngx-cookie-service'; import { AuthGuard } from './auth-guard.service'; import { AuthService } from './services/auth/auth.service'; @@ -6,53 +10,51 @@ import { ContactSupportService } from './services/contact-support/contact-suppor import { CultureService } from './services/culture/culture-service'; import { LanguageInfoService } from './services/culture/language-info-service'; import { DashboardService } from './services/dashboard/dashboard.service'; +import { DefaultUserLocaleService } from './services/default-user-locale/default-user-locale.service'; import { DepositService } from './services/deposit/deposit.service'; +import { DescriptionStatusService } from './services/description-status/description-status.service'; import { DescriptionTemplateTypeService } from './services/description-template-type/description-template-type.service'; -import { PlanBlueprintService } from './services/plan/plan-blueprint.service'; -import { PlanService } from './services/plan/plan.service'; +import { DescriptionTemplateService } from './services/description-template/description-template.service'; +import { DescriptionWorkflowService } from './services/description-workflow/description-workflow.service'; +import { DescriptionService } from './services/description/description.service'; +import { EvaluatorHttpService } from './services/evaluator/evaluator.http.service'; +import { FileTransformerHttpService } from './services/file-transformer/file-transformer.http.service'; +import { FileTransformerService } from './services/file-transformer/file-transformer.service'; +import { FontAccessibilityService } from './services/font-accessibility.service'; import { BaseHttpV2Service } from './services/http/base-http-v2.service'; +import { PrincipalService } from './services/http/principal.service'; +import { LanguageHttpService } from './services/language/language.http.service'; import { LanguageService } from './services/language/language.service'; import { LockService } from './services/lock/lock.service'; import { LoggingService } from './services/logging/logging-service'; -import { UiNotificationService } from './services/notification/ui-notification-service'; -import { ProgressIndicationService } from './services/progress-indication/progress-indication-service'; -import { TimezoneService } from './services/timezone/timezone-service'; -import { CollectionUtils } from './services/utilities/collection-utils.service'; -import { TypeUtils } from './services/utilities/type-utils.service'; -import { CanDeactivateGuard } from '@app/library/deactivate/can-deactivate.guard'; -import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service'; -import { FilterService } from '@common/modules/text-filter/filter-service'; -import { DescriptionTemplateService } from './services/description-template/description-template.service'; -import { DescriptionService } from './services/description/description.service'; -import { FileTransformerService } from './services/file-transformer/file-transformer.service'; -import { PrincipalService } from './services/http/principal.service'; -import { LanguageHttpService } from './services/language/language.http.service'; import { MaintenanceService } from './services/maintenance/maintenance.service'; +import { UiNotificationService } from './services/notification/ui-notification-service'; +import { PlanBlueprintService } from './services/plan/plan-blueprint.service'; +import { PlanStatusService } from './services/plan/plan-status.service'; +import { PlanWorkflowService } from './services/plan/plan-workflow.service'; +import { PlanService } from './services/plan/plan.service'; +import { PrefillingSourceService } from './services/prefilling-source/prefilling-source.service'; +import { ProgressIndicationService } from './services/progress-indication/progress-indication-service'; import { ReferenceTypeService } from './services/reference-type/reference-type.service'; import { ReferenceService } from './services/reference/reference.service'; +import { RouterUtilsService } from './services/router/router-utils.service'; +import { SemanticsService } from './services/semantic/semantics.service'; +import { StorageFileService } from './services/storage-file/storage-file.service'; import { SupportiveMaterialService } from './services/supportive-material/supportive-material.service'; import { TagService } from './services/tag/tag.service'; +import { TenantConfigurationService } from './services/tenant-configuration/tenant-configuration.service'; +import { TenantHandlingService } from './services/tenant/tenant-handling.service'; import { TenantService } from './services/tenant/tenant.service'; +import { TimezoneService } from './services/timezone/timezone-service'; +import { UsageLimitService } from './services/usage-limit/usage.service'; import { UserSettingsHttpService } from './services/user-settings/user-settings-http.service'; import { UserSettingsService } from './services/user-settings/user-settings.service'; import { UserService } from './services/user/user.service'; +import { CollectionUtils } from './services/utilities/collection-utils.service'; import { FileUtils } from './services/utilities/file-utils.service'; import { QueryParamsService } from './services/utilities/query-params.service'; -import { FileTransformerHttpService } from './services/file-transformer/file-transformer.http.service'; -import { SemanticsService } from './services/semantic/semantics.service'; -import { PrefillingSourceService } from './services/prefilling-source/prefilling-source.service'; -import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service'; -import { StorageFileService } from './services/storage-file/storage-file.service'; -import { TenantConfigurationService } from './services/tenant-configuration/tenant-configuration.service'; -import { DefaultUserLocaleService } from './services/default-user-locale/default-user-locale.service'; -import { TenantHandlingService } from './services/tenant/tenant-handling.service'; -import { RouterUtilsService } from './services/router/router-utils.service'; -import { UsageLimitService } from './services/usage-limit/usage.service'; -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 { EvaluatorHttpService } from './services/evaluator/evaluator.http.service'; +import { TypeUtils } from './services/utilities/type-utils.service'; + // // // This is shared module that provides all the services. Its imported only once on the AppModule. @@ -122,10 +124,11 @@ export class CoreServiceModule { TenantHandlingService, RouterUtilsService, UsageLimitService, - PlanStatusService, - DescriptionStatusService, - PlanWorkflowService, - DescriptionWorkflowService + PlanStatusService, + DescriptionStatusService, + PlanWorkflowService, + DescriptionWorkflowService, + FontAccessibilityService ], }; } diff --git a/frontend/src/app/core/model/tenant-configuaration/tenant-configuration.ts b/frontend/src/app/core/model/tenant-configuaration/tenant-configuration.ts index 111542d22..0e9630a5b 100644 --- a/frontend/src/app/core/model/tenant-configuaration/tenant-configuration.ts +++ b/frontend/src/app/core/model/tenant-configuaration/tenant-configuration.ts @@ -14,9 +14,7 @@ export interface TenantConfiguration extends BaseEntity{ export interface CssColorsTenantConfiguration{ primaryColor: string; - primaryColor2: string; - primaryColor3: string; - secondaryColor: string; + cssOverride: string; } export interface DefaultUserLocaleTenantConfiguration{ @@ -70,9 +68,7 @@ export interface TenantConfigurationPersist extends BaseEntityPersist{ export interface CssColorsTenantConfigurationPersist{ primaryColor: string; - primaryColor2: string; - primaryColor3: string; - secondaryColor: string; + cssOverride: string; } export interface DefaultUserLocaleTenantConfigurationPersist{ diff --git a/frontend/src/app/core/services/configuration/configuration.service.ts b/frontend/src/app/core/services/configuration/configuration.service.ts index 8aadf0737..009708683 100644 --- a/frontend/src/app/core/services/configuration/configuration.service.ts +++ b/frontend/src/app/core/services/configuration/configuration.service.ts @@ -294,9 +294,7 @@ export class ConfigurationService extends BaseComponent { if (config.defaultCssColors) { this._cssColorsTenantConfiguration = { primaryColor: config.defaultCssColors.primaryColor, - primaryColor2: config.defaultCssColors.primaryColor2, - primaryColor3: config.defaultCssColors.primaryColor3, - secondaryColor: config.defaultCssColors.secondaryColor, + cssOverride: config.defaultCssColors.cssOverride } } } 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..0f572ed98 --- /dev/null +++ b/frontend/src/app/core/services/font-accessibility.service.ts @@ -0,0 +1,23 @@ +import { computed, Injectable, Signal, signal } from '@angular/core'; +import { toggleFontSize } from '@app/ui/misc/theme-helper'; + +@Injectable() +export class FontAccessibilityService { + + private _accessibleFontSignal = signal(false); + public accessibleFontSignal = computed(() => this._accessibleFontSignal()) + + constructor() { + this._accessibleFontSignal.set(localStorage.getItem('largeText') === 'true'); + } + public isLargeText(): boolean { + return this._accessibleFontSignal(); + } + + public toggleFontSize(){ + const nextValue = this.isLargeText() ? 'false' : 'true'; + localStorage.setItem('largeText', nextValue); + this._accessibleFontSignal.set(!this._accessibleFontSignal()) + toggleFontSize(this.isLargeText()); + } +} diff --git a/frontend/src/app/core/services/tenant/tenant-handling.service.ts b/frontend/src/app/core/services/tenant/tenant-handling.service.ts index 284ebe80e..9f7635748 100644 --- a/frontend/src/app/core/services/tenant/tenant-handling.service.ts +++ b/frontend/src/app/core/services/tenant/tenant-handling.service.ts @@ -7,6 +7,7 @@ import { BaseService } from '@common/base/base.service'; import { Observable, takeUntil } from 'rxjs'; import { nameof } from 'ts-simple-nameof'; import { TenantConfigurationService } from '../tenant-configuration/tenant-configuration.service'; +import { generateDynamicTheme, overrideCss } from '@app/ui/misc/theme-helper'; @Injectable() export class TenantHandlingService extends BaseService { @@ -74,19 +75,19 @@ export class TenantHandlingService extends BaseService { return this.tenantConfigurationService.getCurrentTenantType(TenantConfigurationType.CssColors, [ nameof(x => x.type), [nameof(x => x.cssColors), nameof(x => x.primaryColor)].join('.'), - [nameof(x => x.cssColors), nameof(x => x.primaryColor2)].join('.'), - [nameof(x => x.cssColors), nameof(x => x.primaryColor3)].join('.'), - [nameof(x => x.cssColors), nameof(x => x.secondaryColor)].join('.'), + [nameof(x => x.cssColors), nameof(x => x.cssOverride)].join('.') ]); } public applyTenantCssColors(cssColors: CssColorsTenantConfiguration) { if (cssColors) { - if (cssColors.primaryColor) document.documentElement.style.setProperty(`--primary-color`, cssColors.primaryColor); - if (cssColors.primaryColor2) document.documentElement.style.setProperty(`--primary-color-2`, cssColors.primaryColor2); - if (cssColors.primaryColor3) document.documentElement.style.setProperty(`--primary-color-3`, cssColors.primaryColor3); - if (cssColors.secondaryColor) document.documentElement.style.setProperty(`--secondary-color`, cssColors.secondaryColor); + if (cssColors.primaryColor){ + generateDynamicTheme(cssColors.primaryColor); + } + if (cssColors.cssOverride){ + overrideCss(cssColors.cssOverride); + } } } } \ No newline at end of file diff --git a/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html b/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html index 4d025718b..590ef0066 100644 --- a/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html +++ b/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html @@ -11,7 +11,7 @@ }" /> {{_displayFn(selectedItem)}} - @@ -19,7 +19,7 @@
- +
diff --git a/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss b/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss index 795f1273f..a161b6d21 100644 --- a/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss +++ b/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss @@ -65,7 +65,7 @@ line-clamp: 1; } -::ng-deep .autocomplete-option > .mdc-list-item__primary-text { +::ng-deep .autocomplete-option > .mdc-list-item__--sys-on-primary { margin: 0 !important; width: 100%; } @@ -80,7 +80,7 @@ } mat-icon:hover { - color: var(--primary-color); + color: var(--sys-primary); } } diff --git a/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts b/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts index dcd7d9795..08785b7ae 100644 --- a/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts +++ b/frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts @@ -54,6 +54,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp @Input() separatorKeysCodes = []; + @Input({required: false}) id: string = `multiple-autocomplete-${MultipleAutoCompleteComponent.nextId++}`; // Selected Option Event @Output() optionSelected: EventEmitter = new EventEmitter(); @@ -62,7 +63,6 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp @Output() optionActionClicked: EventEmitter = new EventEmitter(); - id = `multiple-autocomplete-${MultipleAutoCompleteComponent.nextId++}`; stateChanges = new Subject(); valueOnBlur = new BehaviorSubject(null); diff --git a/frontend/src/app/library/auto-complete/single/single-auto-complete.component.html b/frontend/src/app/library/auto-complete/single/single-auto-complete.component.html index 631b2bf9a..927be0689 100644 --- a/frontend/src/app/library/auto-complete/single/single-auto-complete.component.html +++ b/frontend/src/app/library/auto-complete/single/single-auto-complete.component.html @@ -1,5 +1,5 @@
- + arrow_drop_down diff --git a/frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss b/frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss index cf7452f6a..dcb6859a5 100644 --- a/frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss +++ b/frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss @@ -35,7 +35,7 @@ } } -::ng-deep .autocomplete-option > .mdc-list-item__primary-text { +::ng-deep .autocomplete-option > .mdc-list-item__--sys-on-primary { margin: 0 !important; width: 100%; } @@ -45,7 +45,7 @@ margin: 0px 5px 0px 10px; } mat-icon:hover { - color: var(--primary-color); + color: var(--sys-primary); } } diff --git a/frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts b/frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts index 3b547b323..757435371 100644 --- a/frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts +++ b/frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts @@ -40,6 +40,8 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple @ViewChild('autocompleteInput', { static: true }) autocompleteInput: ElementRef; @Input() initialSelectedData: any; + @Input({required: false}) id: string = `single-autocomplete-${SingleAutoCompleteComponent.nextId++}`; + @Input() get configuration(): SingleAutoCompleteConfiguration { return this._configuration; } set configuration(configuration: SingleAutoCompleteConfiguration) { @@ -55,7 +57,6 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple @Output() optionSelected: EventEmitter = new EventEmitter(); @Output() optionActionClicked: EventEmitter = new EventEmitter(); - id = `single-autocomplete-${SingleAutoCompleteComponent.nextId++}`; stateChanges = new Subject(); focused = false; controlType = 'single-autocomplete'; diff --git a/frontend/src/app/library/guided-tour/guided-tour.component.html b/frontend/src/app/library/guided-tour/guided-tour.component.html index f451098de..e501a57da 100644 --- a/frontend/src/app/library/guided-tour/guided-tour.component.html +++ b/frontend/src/app/library/guided-tour/guided-tour.component.html @@ -10,6 +10,7 @@
- + {{('ALT-TEXT.GUIDED-TOUR-IMG' | translate) ?? 'tour guide image'}}
diff --git a/frontend/src/app/library/guided-tour/guided-tour.component.scss b/frontend/src/app/library/guided-tour/guided-tour.component.scss index 9a3ab042d..a1b94cd70 100644 --- a/frontend/src/app/library/guided-tour/guided-tour.component.scss +++ b/frontend/src/app/library/guided-tour/guided-tour.component.scss @@ -119,7 +119,7 @@ ngx-guided-tour { padding: 28px 5px 25px 65px; overflow: auto; text-align: left; - color: #212121; + color: var(--dark-gray); line-height: 26px; white-space: pre-line; } diff --git a/frontend/src/app/library/guided-tour/guided-tour.module.ts b/frontend/src/app/library/guided-tour/guided-tour.module.ts index 1053ee324..ca44b272e 100644 --- a/frontend/src/app/library/guided-tour/guided-tour.module.ts +++ b/frontend/src/app/library/guided-tour/guided-tour.module.ts @@ -3,10 +3,12 @@ import { GuidedTourComponent } from './guided-tour.component'; import { NgModule, ErrorHandler, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { WindowRefService } from './windowref.service'; +import { TranslateModule } from '@ngx-translate/core'; +import { MatButtonModule } from '@angular/material/button'; @NgModule({ declarations: [GuidedTourComponent], - imports: [CommonModule], + imports: [CommonModule, TranslateModule, MatButtonModule], providers: [WindowRefService], exports: [GuidedTourComponent] }) diff --git a/frontend/src/app/library/notification/popup/popup-notification.component.html b/frontend/src/app/library/notification/popup/popup-notification.component.html index 50fe15b38..0ff3c9b14 100644 --- a/frontend/src/app/library/notification/popup/popup-notification.component.html +++ b/frontend/src/app/library/notification/popup/popup-notification.component.html @@ -14,6 +14,6 @@
- +
diff --git a/frontend/src/app/library/rich-text-editor/rich-text-editor.component.scss b/frontend/src/app/library/rich-text-editor/rich-text-editor.component.scss index a6af0d583..6c1581906 100644 --- a/frontend/src/app/library/rich-text-editor/rich-text-editor.component.scss +++ b/frontend/src/app/library/rich-text-editor/rich-text-editor.component.scss @@ -3,7 +3,7 @@ font-weight: 400; font-size: 16px; line-height: 1.5rem; - color: #7d7d7d; + color: var(--dark-gray); } .editor-wrapper { diff --git a/frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts b/frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts index ea37ca853..a5f8a67f1 100644 --- a/frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts +++ b/frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts @@ -1,13 +1,13 @@ -import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from "@angular/core"; +import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from "@angular/core"; import { FormControl } from "@angular/forms"; -import { AngularEditorConfig } from "@kolkov/angular-editor"; +import { AngularEditorComponent, AngularEditorConfig } from "@kolkov/angular-editor"; import { Subscription } from "rxjs"; @Component({ selector: 'rich-text-editor-component', template: `
- @@ -19,9 +19,11 @@ import { Subscription } from "rxjs"; changeDetection: ChangeDetectionStrategy.OnPush }) export class RichTextEditorComponent implements OnInit, OnChanges, OnDestroy { + static nextId = 0; + @ViewChild(AngularEditorComponent) editor: AngularEditorComponent @Input() form: FormControl; - @Input() id: string = "editor1"; + @Input() name: string = `rich-text-editor${RichTextEditorComponent.nextId++}`; @Input() placeholder: string = "Enter text"; @Input() required: boolean = false; @Input() wrapperClasses: string = ""; @@ -104,6 +106,10 @@ export class RichTextEditorComponent implements OnInit, OnChanges, OnDestroy { window.document.execCommand("insertText", false, text); } + focus(){ + this.editor?.focus(); + } + private observeFormStatus(): void { this.formTouchSubscription = this.formTouchEvent .subscribe( diff --git a/frontend/src/app/ui/about/about.component.html b/frontend/src/app/ui/about/about.component.html index f51042fc1..0ecc1e083 100644 --- a/frontend/src/app/ui/about/about.component.html +++ b/frontend/src/app/ui/about/about.component.html @@ -1,5 +1,5 @@
- +
\ No newline at end of file diff --git a/frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html b/frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html index d4fa4c4cd..dcd94d5ad 100644 --- a/frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html +++ b/frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html @@ -1,40 +1,40 @@
-
-
-
-
- -
-
- -
+
+
+
+
+ +
+
+ +
-
-
-
+
-
- - -
-
- - {{'DESCRIPTION-STATUS-EDITOR.FIELDS.NAME' | translate}} - - {{formGroup.controls.name.getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - -
+ + + +
+ + {{'DESCRIPTION-STATUS-EDITOR.FIELDS.NAME' | translate}} + + {{formGroup.controls.name.getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
{{'DESCRIPTION-STATUS-EDITOR.FIELDS.INTERNAL-STATUS' | translate}} @@ -45,34 +45,29 @@
- - {{'DESCRIPTION-STATUS-EDITOR.FIELDS.ACTION' | translate}} - - {{formGroup.controls.action.getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - -
-
-

{{'DESCRIPTION-STATUS-EDITOR.FIELDS.DESCRIPTION' | translate}}

-
- - @if(formGroup.controls.description.hasError('backendError')){ -
- {{formGroup.controls.description.getError('backendError').message}} -
+ + {{'DESCRIPTION-STATUS-EDITOR.FIELDS.ACTION' | translate}} + + {{formGroup.controls.action.getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
+

{{'DESCRIPTION-STATUS-EDITOR.FIELDS.DESCRIPTION' | translate}}

+
+ + @if(formGroup.controls.description.hasError('backendError')){ +
+ {{formGroup.controls.description.getError('backendError').message}} +
} -
-
+
+

- {{'DESCRIPTION-STATUS-EDITOR.FIELDS.AVAILABLE-ACTIONS' | translate}} -

+ {{'DESCRIPTION-STATUS-EDITOR.FIELDS.AVAILABLE-ACTIONS' | translate}} + {{'DESCRIPTION-STATUS-EDITOR.FIELDS.AVAILABLE-ACTIONS' | translate}} @@ -81,19 +76,20 @@
-
-

- {{'DESCRIPTION-STATUS-EDITOR.FIELDS.AUTHORIZATION' | translate}} -

+
+

+ {{'DESCRIPTION-STATUS-EDITOR.FIELDS.AUTHORIZATION' | translate}} +

{{'DESCRIPTION-STATUS-EDITOR.FIELDS.EDIT' | translate}} - +
- {{'DESCRIPTION-STATUS-EDITOR.FIELDS.ROLES' | translate}} + {{'DESCRIPTION-STATUS-EDITOR.FIELDS.ROLES' | translate}} * + {{'GENERAL.VALIDATION.REQUIRED' | translate }} {{enumUtils.toAppRoleString(userRole)}} @@ -101,9 +97,9 @@ {{'GENERAL.VALIDATION.REQUIRED' | translate}}
-
+
- {{'DESCRIPTION-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}} + {{'DESCRIPTION-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}} *{{'GENERAL.VALIDATION.REQUIRED' | translate }} {{enumUtils.toPlanUserRoleString(planRole)}} @@ -124,12 +120,11 @@
-
-
- - - -
-
-
- +
+
+ + + +
+
+
\ No newline at end of file diff --git a/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html b/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html index 5e07a6636..6226877e0 100644 --- a/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html +++ b/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html @@ -7,7 +7,7 @@ -
+

{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}

@@ -42,12 +42,12 @@
-
-
diff --git a/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.ts b/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.ts index e56cf5623..910300c99 100644 --- a/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.ts +++ b/frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.ts @@ -1,6 +1,7 @@ -import { Component, effect, EventEmitter, input, Output } from '@angular/core'; +import { Component, computed, effect, EventEmitter, HostBinding, input, Output } from '@angular/core'; import { DescriptionStatusEnum } from '@app/core/common/enum/description-status'; import { DescriptionStatusFilter } from '@app/core/query/description-status.lookup'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { BaseComponent } from '@common/base/base.component'; import { IsActive } from '@notification-service/core/enum/is-active.enum'; @@ -11,6 +12,7 @@ import { IsActive } from '@notification-service/core/enum/is-active.enum'; styleUrl: './description-status-listing-filters.component.scss' }) export class DescriptionStatusListingFiltersComponent extends BaseComponent{ + accessibilityTheme = computed(() => this.fontService.accessibleFontSignal()); readonly filter = input(); @Output() filterChange = new EventEmitter(); @@ -19,7 +21,7 @@ export class DescriptionStatusListingFiltersComponent extends BaseComponent{ internalStatusEnum = this.enumUtils.getEnumValues(DescriptionStatusEnum); - constructor(protected enumUtils: EnumUtils){ + constructor(protected enumUtils: EnumUtils, protected fontService: FontAccessibilityService){ super(); effect(() => { const newFilters = this.filter(); diff --git a/frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.html b/frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.html index 08c65c462..6c47cdbff 100644 --- a/frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.html +++ b/frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.html @@ -7,7 +7,7 @@
- @@ -43,7 +43,7 @@
- diff --git a/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.html b/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.html index 9a235e0dd..7e38f08ff 100644 --- a/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.html +++ b/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.html @@ -2,18 +2,18 @@
{{'DESCRIPTION-TEMPLATE-PREVIEW.TEMPLATE' | translate}} - {{descriptionTemplate.label}}
- +
- +
- +
diff --git a/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.scss b/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.scss index 08f8d7013..eef686471 100644 --- a/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.scss +++ b/frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.scss @@ -3,8 +3,8 @@ display: flex; width: 100%; height: 89px; - background-color: var(--primary-color); - color: #FFFFFF; + background-color: var(--sys-primary); + color: var(--sys--sys-on-primary); font-size: 1.25rem; } 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/description-template.module.ts b/frontend/src/app/ui/admin/description-template/description-template.module.ts index 5e0bf4231..bfd38ab83 100644 --- a/frontend/src/app/ui/admin/description-template/description-template.module.ts +++ b/frontend/src/app/ui/admin/description-template/description-template.module.ts @@ -34,6 +34,7 @@ import { DescriptionFormModule } from '@app/ui/description/editor/description-fo import { FinalPreviewComponent } from './editor/components/final-preview/final-preview.component'; import { DragulaModule } from 'ng2-dragula'; import { TransitionGroupModule } from '@app/ui/transition-group/transition-group.module'; +import { FormFocusDirective } from '@common/forms/form-focus.directive'; @NgModule({ imports: [ @@ -52,6 +53,7 @@ import { TransitionGroupModule } from '@app/ui/transition-group/transition-group DescriptionFormModule, TransitionGroupModule, DragulaModule.forRoot(), + FormFocusDirective ], declarations: [ DescriptionTemplateEditorComponent, diff --git a/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.html b/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.html index b5e11e74a..21c73b252 100644 --- a/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.html +++ b/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.html @@ -159,8 +159,8 @@
  • - - 'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate + + {{('DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate) ?? 'add input'}} {{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}} @@ -280,7 +280,7 @@
  • - more_vert + more_vert
    Add Question icon + aria-hidden> {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
@@ -30,7 +30,7 @@
Add Question icon + aria-hidden> {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}} @@ -86,7 +86,7 @@
Add Question icon + aria-hidden> {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}} @@ -98,7 +98,7 @@
Clone icon + aria-hidden> {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.CLONE' | translate}}
@@ -120,7 +120,7 @@
Add Question icon + aria-hidden> {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
diff --git a/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss b/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss index 1b2213760..76e18c3a5 100644 --- a/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss +++ b/frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss @@ -1,4 +1,4 @@ -$blue-color : var(--primary-color); +$blue-color : var(--sys-primary); $blue-color-light: #5cf7f2; @@ -55,7 +55,7 @@ $blue-color-light: #5cf7f2; margin-right: 0.5em; margin-left: -.09em; height: auto; - color: var(--primary-color);; + color: var(--sys-primary); } .input_icon{ width: 14px; @@ -66,7 +66,7 @@ $blue-color-light: #5cf7f2; } } .action-list-label{ - color: #212121; + color: var(--dark-gray); font-size: small; opacity: 0.6; } @@ -83,7 +83,7 @@ $blue-color-light: #5cf7f2; display:inline-block; margin: 0px auto; cursor: grab; - color: var(--secondary-color); + color: var(--sys-tertiary); opacity: 0.6 !important; } } diff --git a/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html b/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html index 5ed520cb2..f50db9ec4 100644 --- a/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html +++ b/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html @@ -1,16 +1,19 @@ 
-
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME' | translate}} *
+
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME-HINT' | translate}}
- + {{form.get('title').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} -
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}}
+
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}
diff --git a/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.scss b/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.scss index 4289ef3d9..678ec6d54 100644 --- a/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.scss +++ b/frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.scss @@ -14,7 +14,7 @@ font-weight: 700; font-size: 18px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; margin-bottom: 0.625rem; } @@ -24,7 +24,7 @@ font-weight: 400; font-size: 16px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; margin-bottom: 0.125rem; } diff --git a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html b/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html index 0871f4514..254546570 100644 --- a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html +++ b/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html @@ -36,28 +36,34 @@
-
1.1 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-NAME'| translate}} *
+
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-NAME-HINT'| translate}}
- + {{formGroup.get('label').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}}
-
1.2 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-CODE'| translate}} *
+
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-CODE-HINT'| translate}}
- + {{formGroup.get('code').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}}
-
1.3 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION'| translate}} *
+
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION-HINT'| translate}}
- +
{{'GENERAL.VALIDATION.REQUIRED'| translate}} @@ -67,21 +73,25 @@
-
1.4 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-TYPE'| translate}} *
+
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-TYPE-HINT'| translate}}
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-TYPE' | translate}} - + {{formGroup.get('type').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}}
-
1.5 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE'| translate}} *
+
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE-HINT'| translate}}
- + {{ lang.name }} @@ -91,7 +101,7 @@
-
1.6 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS'| translate}}
+
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS-HINT'| translate}}
@@ -107,7 +117,7 @@ @@ -125,7 +135,7 @@
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS' | translate}} - + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -172,21 +182,23 @@
-
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}} *
+
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME-HINT' | translate}}
- + {{selectedTocEntry.form.get('title').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}}
@if(!viewOnly &&!selectedTocEntry?.subEntries?.length){
- +
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' | translate}} } @@ -264,11 +276,11 @@
- - @@ -280,12 +292,12 @@
- - + -
diff --git a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.scss b/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.scss index 513cd1bb0..87274146c 100644 --- a/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.scss +++ b/frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.scss @@ -29,7 +29,7 @@ font-weight: 700; font-size: 18px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; margin-bottom: 0.625rem; } @@ -39,7 +39,7 @@ font-weight: 400; font-size: 16px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; margin-bottom: 0.125rem; } @@ -66,7 +66,7 @@ transition-timing-function: ease-out; transition-delay: 50ms; box-shadow: 0px 1px 2px #bfbfbf; - background-color: var(--secondary-color); + background-color: var(--sys-tertiary); } #progress-container{ box-shadow: 1px 1px 6px #00000029;; @@ -74,7 +74,7 @@ -$blue-color : var(--primary-color); +$blue-color : var(--sys-primary); $blue-color-light: #5cf7f2; @@ -87,7 +87,7 @@ $blue-color-light: #5cf7f2; transition-duration: 200ms; transition-delay: 50ms; transition-timing-function: ease-in-out; - color: #212121; + color: var(--dark-gray); font-size: 0.9em; } @@ -107,7 +107,7 @@ $blue-color-light: #5cf7f2; .actions-list{ - box-shadow: 0px 3px 12px var(--primary-color)99; + box-shadow: 0px 3px 12px var(--sys-primary)99; border-radius: 4px; padding: 1em 0.9em; min-width: 166px; @@ -129,7 +129,7 @@ $blue-color-light: #5cf7f2; margin-right: 0.5em; margin-left: -.09em; height: auto; - color: var(--primary-color);; + color: var(--sys-primary);; } .input_icon{ width: 14px; @@ -140,7 +140,7 @@ $blue-color-light: #5cf7f2; } } .action-list-label{ - color: #212121; + color: var(--dark-gray); font-size: small; opacity: 0.6; } @@ -215,7 +215,7 @@ $blue-color-light: #5cf7f2; position: fixed; bottom: 20em; right: 2em; - color: var(--primary-color) !important; + color: var(--sys-primary) !important; cursor: pointer; font-size: 1rem; font-weight: 400; diff --git a/frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.scss b/frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.scss index 4bdae917f..cd28e5e0f 100644 --- a/frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.scss +++ b/frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.scss @@ -28,7 +28,7 @@ $scroller-height: 3em; #guide-steps{ - color: #212121; + color: var(--dark-gray); opacity: 0.6; font-size: 1.6em; margin-top: 0px; diff --git a/frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.html b/frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.html index 8a688c503..8c8e85e63 100644 --- a/frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.html +++ b/frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.html @@ -84,7 +84,7 @@ - + New input icon {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}} @@ -124,7 +124,7 @@
@@ -157,7 +157,7 @@ diff --git a/frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.scss b/frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.scss index eb96cde92..497946881 100644 --- a/frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.scss +++ b/frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.scss @@ -23,9 +23,9 @@ -$blue-color : var(--primary-color); +$blue-color : var(--sys-primary); $blue-color-light: #5cf7f2; -$yellow: var(--secondary-color); +$yellow: var(--sys-tertiary); .badge-ball{ display: inline-block; border-radius: 50%; diff --git a/frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html b/frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html index 5b829b2b7..5cdc64c78 100644 --- a/frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html +++ b/frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html @@ -6,7 +6,7 @@
-
- @@ -86,28 +86,28 @@
- - edit{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.EDIT' | translate}} + edit{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.EDIT' | translate}} - queue{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.NEW-VERSION' | translate}} + queue{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.NEW-VERSION' | translate}} - content_copy{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.CLONE' | translate}} + content_copy{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.CLONE' | translate}} - library_books + library_books {{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.VIEW-VERSIONS' | translate}} diff --git a/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html b/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html index e4e3d74cd..b16663353 100644 --- a/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html +++ b/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html @@ -7,7 +7,7 @@ -
+

{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.TITLE' | translate}}

@@ -42,12 +42,12 @@
-
-
diff --git a/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.ts b/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.ts index 7ea3bc8e1..ef8edb855 100644 --- a/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.ts +++ b/frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.ts @@ -1,7 +1,8 @@ -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { DescriptionTemplateStatus } from '@app/core/common/enum/description-template-status'; import { IsActive } from '@app/core/common/enum/is-active.enum'; import { DescriptionTemplateFilter } from '@app/core/query/description-template.lookup'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { BaseComponent } from '@common/base/base.component'; import { Guid } from '@common/types/guid'; @@ -21,10 +22,11 @@ export class DescriptionTemplateListingFiltersComponent extends BaseComponent im // * State internalFilters: DescriptionTemplateListingFilters = this._getEmptyFilters(); - + accessibilityTheme = computed(() => this.fontService.accessibleFontSignal()); protected appliedFilterCount: number = 0; constructor( public enumUtils: EnumUtils, + protected fontService: FontAccessibilityService ) { super(); } ngOnInit() { diff --git a/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.html b/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.html index 19f71e4e7..fa8d9e373 100644 --- a/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.html +++ b/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.html @@ -4,7 +4,7 @@

{{ data.message }}

-
@@ -34,11 +34,11 @@
- +
- +
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/description-types/editor/description-template-type-editor.component.html b/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.html index c9927441e..2237d2fe0 100644 --- a/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.html +++ b/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.html @@ -8,22 +8,22 @@
- +
-
-
- diff --git a/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.scss b/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.scss index ad0844212..fa9b7b395 100644 --- a/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.scss +++ b/frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.scss @@ -7,7 +7,7 @@ .action-btn { border-radius: 30px; - background-color: var(--secondary-color); + background-color: var(--sys-tertiary); border: 1px solid transparent; padding-left: 2em; padding-right: 2em; diff --git a/frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html b/frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html index 7f062a88c..8805c8917 100644 --- a/frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html +++ b/frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html @@ -6,7 +6,7 @@
- - edit{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.ACTIONS.EDIT' | translate}} + edit{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.ACTIONS.EDIT' | translate}} diff --git a/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html b/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html index a18761565..497ac33ee 100644 --- a/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html +++ b/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html @@ -7,7 +7,7 @@ -
+

{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.TITLE' | translate}}

@@ -42,12 +42,12 @@
-
-
diff --git a/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.ts b/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.ts index cd136e6da..45507bd1d 100644 --- a/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.ts +++ b/frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.ts @@ -1,7 +1,8 @@ -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { DescriptionTemplateTypeStatus } from '@app/core/common/enum/description-template-type-status'; import { IsActive } from '@app/core/common/enum/is-active.enum'; import { DescriptionTemplateTypeFilter } from '@app/core/query/description-template-type.lookup'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { BaseComponent } from '@common/base/base.component'; import { nameof } from 'ts-simple-nameof'; @@ -20,10 +21,11 @@ export class DescriptionTemplateTypeListingFiltersComponent extends BaseComponen // * State internalFilters: DescriptionTemplateTypeListingFilters = this._getEmptyFilters(); - + accessibilityTheme = computed(() => this.fontService.accessibleFontSignal()); protected appliedFilterCount: number = 0; constructor( public enumUtils: EnumUtils, + protected fontService: FontAccessibilityService ) { super(); } ngOnInit() { diff --git a/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html b/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html index 514d5263e..4d2db3c64 100644 --- a/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html +++ b/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html @@ -7,7 +7,7 @@ -
+

{{'LOCK-LISTING.FILTER.TITLE' | translate}}

@@ -42,12 +42,12 @@
-
-
diff --git a/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.ts b/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.ts index ef99b84e5..bddfc7f11 100644 --- a/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.ts +++ b/frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.ts @@ -1,7 +1,8 @@ import { COMMA, ENTER } from '@angular/cdk/keycodes'; -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { LockTargetType } from '@app/core/common/enum/lock-target-type'; import { LockFilter } from '@app/core/query/lock.lookup'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; import { UserService } from '@app/core/services/user/user.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { BaseComponent } from '@common/base/base.component'; @@ -24,11 +25,12 @@ export class LockListingFiltersComponent extends BaseComponent implements OnInit // * State internalFilters: LockListingFilters = this._getEmptyFilters(); - + accessibilityTheme = computed(() => this.fontService.accessibleFontSignal()); protected appliedFilterCount: number = 0; constructor( public enumUtils: EnumUtils, public userService: UserService, + protected fontService: FontAccessibilityService ) { super(); } ngOnInit() { diff --git a/frontend/src/app/ui/admin/entity-locks/lock-listing.component.html b/frontend/src/app/ui/admin/entity-locks/lock-listing.component.html index 461ce7f25..99e6121ba 100644 --- a/frontend/src/app/ui/admin/entity-locks/lock-listing.component.html +++ b/frontend/src/app/ui/admin/entity-locks/lock-listing.component.html @@ -66,12 +66,12 @@
- diff --git a/frontend/src/app/ui/admin/language/editor/language-editor.component.html b/frontend/src/app/ui/admin/language/editor/language-editor.component.html index 1537c4b26..920c5d76e 100644 --- a/frontend/src/app/ui/admin/language/editor/language-editor.component.html +++ b/frontend/src/app/ui/admin/language/editor/language-editor.component.html @@ -6,16 +6,16 @@
- +
-
- @@ -28,7 +28,7 @@
-
+
{{'LANGUAGE-EDITOR.FIELDS.CODE' | translate}} diff --git a/frontend/src/app/ui/admin/language/editor/language-editor.component.scss b/frontend/src/app/ui/admin/language/editor/language-editor.component.scss index 44417366d..402b5137c 100644 --- a/frontend/src/app/ui/admin/language/editor/language-editor.component.scss +++ b/frontend/src/app/ui/admin/language/editor/language-editor.component.scss @@ -12,7 +12,7 @@ } ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { - background-color: var(--primary-color-3); + background-color: var(--sys-primary); } ::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { diff --git a/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html b/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html index 2b6dc4ac8..773259626 100644 --- a/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html +++ b/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html @@ -7,7 +7,7 @@ -
+

{{'LANGUAGE-LISTING.FILTER.TITLE' | translate}}

@@ -31,12 +31,12 @@
-
-
diff --git a/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.ts b/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.ts index 4f0881c85..0603d4d2a 100644 --- a/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.ts +++ b/frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.ts @@ -1,6 +1,7 @@ -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { IsActive } from '@app/core/common/enum/is-active.enum'; import { TenantFilter } from '@app/core/query/tenant.lookup'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { BaseComponent } from '@common/base/base.component'; import { nameof } from 'ts-simple-nameof'; @@ -17,10 +18,11 @@ export class LanguageListingFiltersComponent extends BaseComponent implements On // * State internalFilters: LanguageListingFilters = this._getEmptyFilters(); - + accessibilityTheme = computed(() => this.fontService.accessibleFontSignal()); protected appliedFilterCount: number = 0; constructor( public enumUtils: EnumUtils, + protected fontService: FontAccessibilityService ) { super(); } ngOnInit() { diff --git a/frontend/src/app/ui/admin/language/listing/language-listing.component.html b/frontend/src/app/ui/admin/language/listing/language-listing.component.html index 109e324a0..7dacce28b 100644 --- a/frontend/src/app/ui/admin/language/listing/language-listing.component.html +++ b/frontend/src/app/ui/admin/language/listing/language-listing.component.html @@ -6,7 +6,7 @@
- - edit{{'LANGUAGE-LISTING.ACTIONS.EDIT' | translate}} + edit{{'LANGUAGE-LISTING.ACTIONS.EDIT' | translate}} diff --git a/frontend/src/app/ui/admin/maintenance-tasks/maintenance-tasks.component.html b/frontend/src/app/ui/admin/maintenance-tasks/maintenance-tasks.component.html index 072e36ff7..e67d0c345 100644 --- a/frontend/src/app/ui/admin/maintenance-tasks/maintenance-tasks.component.html +++ b/frontend/src/app/ui/admin/maintenance-tasks/maintenance-tasks.component.html @@ -17,8 +17,8 @@
- - + +
@@ -32,28 +32,28 @@

{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.MAIN-TITLE')}}

- - - - + + + +

{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACCOUNTING-TITLE')}}

- - - - - - - - + + + + + + + +

{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.INDICATOR-TITLE')}}

- - - - + + + +
diff --git a/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.html b/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.html index 42dffad37..986ef8043 100644 --- a/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.html +++ b/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.html @@ -6,16 +6,16 @@
-
- +
- +
@@ -78,7 +78,7 @@
- +
@@ -235,7 +235,7 @@ {{'GENERAL.VALIDATION.REQUIRED' | translate}}
- +
@@ -337,7 +337,7 @@
- + {{'PLAN-BLUEPRINT-EDITOR.SECTIONS-REQUIRED' | translate}} {{formGroup.get('definition').get('sections').getError('backendError').message}}
@@ -346,11 +346,11 @@
- +
-
diff --git a/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss b/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss index e52566192..8ff62a16e 100644 --- a/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss +++ b/frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss @@ -18,7 +18,7 @@ .drag-handle { cursor: move; - color: var(--primary-color); + color: var(--sys-primary); } .drag-handle-disabled { cursor: auto; @@ -26,27 +26,13 @@ } ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { - background-color: var(--primary-color-3); + background-color: var(--sys-primary); } ::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { background-color: #b0b0b0; } -.finalize-btn { - border-radius: 30px; - border: 1px solid var(--primary-color); - background: transparent; - padding-left: 2em; - padding-right: 2em; - box-shadow: 0px 3px 6px #1E202029; - color: var(--primary-color); - &:disabled{ - background-color: #CBCBCB; - color: #FFF; - border: 0px; - } -} .dlt-section-btn { margin: 0; @@ -75,13 +61,13 @@ .field-delete-icon{ font-size: 1.2em; width: 14px; - color: var(--primary-color); + color: var(--sys-primary); } .field-delete-text{ font-size: 1em; margin-left: 0.5em; - color: var(--primary-color); + color: var(--sys-primary); } } diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html index 5f680095c..de65b53c0 100644 --- a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html +++ b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html @@ -1,19 +1,19 @@
- -
+

{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}

-
@@ -41,12 +41,12 @@
-
-
diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.scss b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.scss index 92f62796d..ec3501cdd 100644 --- a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.scss +++ b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.scss @@ -15,6 +15,7 @@ .filter-button{ padding-top: .6rem; padding-bottom: .6rem; + color: #000000; } ::ng-deep .mdc-form-field { diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.ts b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.ts index e578e40aa..977baf6f6 100644 --- a/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.ts +++ b/frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.ts @@ -1,10 +1,11 @@ -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { PlanBlueprintStatus } from '@app/core/common/enum/plan-blueprint-status'; import { IsActive } from '@app/core/common/enum/is-active.enum'; import { PlanBlueprintFilter } from '@app/core/query/plan-blueprint.lookup'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { BaseComponent } from '@common/base/base.component'; import { nameof } from 'ts-simple-nameof'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; @Component({ selector: 'app-plan-blueprint-listing-filters', @@ -20,10 +21,11 @@ export class PlanBlueprintListingFiltersComponent extends BaseComponent implemen // * State internalFilters: PlanBlueprintListingFilters = this._getEmptyFilters(); - + accessibilityTheme = computed(() => this.fontService.accessibleFontSignal()); protected appliedFilterCount: number = 0; constructor( public enumUtils: EnumUtils, + protected fontService: FontAccessibilityService ) { super(); } ngOnInit() { diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.html b/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.html index 8cb7d434d..fb08c4aea 100644 --- a/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.html +++ b/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.html @@ -4,7 +4,7 @@

{{ data.message }}

-
@@ -34,11 +34,11 @@
- +
- +
diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss b/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss index 0b4772fdb..c7670e8f1 100644 --- a/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss +++ b/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss @@ -9,35 +9,10 @@ border-radius: 30px; min-width: 101px; height: 43px; - color: #212121; + color: var(--dark-gray); font-weight: 500; } -.next-btn { - background: #ffffff 0% 0% no-repeat padding-box; - border: 1px solid var(--primary-color); - border-radius: 30px; - opacity: 1; -min-width: 101px; - height: 43px; - color: var(--primary-color); - font-weight: 500; -} - -.next-btn[disabled] { - width: 100px; - height: 43px; - background: #ffffff 0% 0% no-repeat padding-box; - border: 1px solid #b5b5b5; - border-radius: 30px; - opacity: 1; -} - -.next-btn:not([disabled]):hover { - background-color: var(--primary-color); - color: #ffffff; -} - //ngx dropzone .drop-file { background-color: #fafafa; 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/plan-blueprint/listing/plan-blueprint-listing.component.html b/frontend/src/app/ui/admin/plan-blueprint/listing/plan-blueprint-listing.component.html index 3b6763cb9..576b1f429 100644 --- a/frontend/src/app/ui/admin/plan-blueprint/listing/plan-blueprint-listing.component.html +++ b/frontend/src/app/ui/admin/plan-blueprint/listing/plan-blueprint-listing.component.html @@ -6,7 +6,7 @@
-
- @@ -81,28 +81,28 @@
- - edit{{'PLAN-BLUEPRINT-LISTING.ACTIONS.EDIT' | translate}} + edit{{'PLAN-BLUEPRINT-LISTING.ACTIONS.EDIT' | translate}} - queue{{'PLAN-BLUEPRINT-LISTING.ACTIONS.NEW-VERSION' | translate}} + queue{{'PLAN-BLUEPRINT-LISTING.ACTIONS.NEW-VERSION' | translate}} - content_copy{{'PLAN-BLUEPRINT-LISTING.ACTIONS.CLONE' | translate}} + content_copy{{'PLAN-BLUEPRINT-LISTING.ACTIONS.CLONE' | translate}} - library_books + library_books {{'PLAN-BLUEPRINT-LISTING.ACTIONS.VIEW-VERSIONS' | translate}} diff --git a/frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html b/frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html index d898ca1da..0fcdab54d 100644 --- a/frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html +++ b/frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html @@ -1,40 +1,40 @@
-
-
-
-
- -
-
- -
+
+
+
+
+ +
+
+ +
-
-
-
+
- - - -
-
- - {{'PLAN-STATUS-EDITOR.FIELDS.NAME' | translate}} - - {{formGroup.controls.name.getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - -
+ + + +
+ + {{'PLAN-STATUS-EDITOR.FIELDS.NAME' | translate}} + + {{formGroup.controls.name.getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
{{'PLAN-STATUS-EDITOR.FIELDS.INTERNAL-STATUS' | translate}} @@ -45,33 +45,28 @@
- - {{'PLAN-STATUS-EDITOR.FIELDS.ACTION' | translate}} - - {{formGroup.controls.action.getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - -
-
-

{{'PLAN-STATUS-EDITOR.FIELDS.DESCRIPTION' | translate}}

-
- - @if(formGroup.controls.description.hasError('backendError')){ -
- {{formGroup.controls.description.getError('backendError').message}} -
+ + {{'PLAN-STATUS-EDITOR.FIELDS.ACTION' | translate}} + + {{formGroup.controls.action.getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
+

{{'PLAN-STATUS-EDITOR.FIELDS.DESCRIPTION' | translate}}

+
+ + @if(formGroup.controls.description.hasError('backendError')){ +
+ {{formGroup.controls.description.getError('backendError').message}} +
} -
-
+
+

- {{'PLAN-STATUS-EDITOR.FIELDS.AVAILABLE-ACTIONS' | translate}} -

+ {{'PLAN-STATUS-EDITOR.FIELDS.AVAILABLE-ACTIONS' | translate}} + {{'PLAN-STATUS-EDITOR.FIELDS.AVAILABLE-ACTIONS' | translate}} @@ -79,10 +74,10 @@
-
-

- {{'PLAN-STATUS-EDITOR.FIELDS.AUTHORIZATION' | translate}} -

+
+

+ {{'PLAN-STATUS-EDITOR.FIELDS.AUTHORIZATION' | translate}} +

@@ -91,7 +86,9 @@
- {{'PLAN-STATUS-EDITOR.FIELDS.ROLES' | translate}} + {{'PLAN-STATUS-EDITOR.FIELDS.ROLES' | translate}} +  *{{'GENERAL.VALIDATION.REQUIRED' | translate }} + {{enumUtils.toAppRoleString(userRole)}} @@ -99,9 +96,11 @@ {{'GENERAL.VALIDATION.REQUIRED' | translate}}
-
+
- {{'PLAN-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}} + {{'PLAN-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}} +  *{{'GENERAL.VALIDATION.REQUIRED' | translate }} + {{enumUtils.toPlanUserRoleString(planRole)}} @@ -122,11 +121,11 @@
-
-
- - - -
-
-
+
+
+ + + +
+
+
\ No newline at end of file diff --git a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html index 76e9e1f8b..22d21b3a7 100644 --- a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html +++ b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html @@ -7,7 +7,7 @@ -
+

{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}

@@ -41,12 +41,12 @@
-
-
diff --git a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.ts b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.ts index 3c40652a2..77f73187e 100644 --- a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.ts +++ b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.ts @@ -1,7 +1,8 @@ -import { Component, effect, EventEmitter, input, Input, Output } from '@angular/core'; +import { Component, computed, effect, EventEmitter, input, Input, Output } from '@angular/core'; import { IsActive } from '@app/core/common/enum/is-active.enum'; import { PlanStatusEnum } from '@app/core/common/enum/plan-status'; import { PlanStatusFilter } from '@app/core/query/plan-status.lookup'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { BaseComponent } from '@common/base/base.component'; @@ -17,8 +18,8 @@ export class PlanStatusListingFiltersComponent extends BaseComponent { internalFilters: PlanStatusListingFilters = this._getEmptyFilters(); appliedFilterCount: number = 0; internalStatusEnum = this.enumUtils.getEnumValues(PlanStatusEnum); - - constructor(protected enumUtils: EnumUtils) { + accessibilityTheme = computed(() => this.fontService.accessibleFontSignal()); + constructor(protected enumUtils: EnumUtils, protected fontService: FontAccessibilityService) { super(); effect(() => { const newFilters = this.filter(); diff --git a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.html b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.html index 7bae0856e..772c159f4 100644 --- a/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.html +++ b/frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.html @@ -7,7 +7,7 @@
- @@ -43,15 +43,15 @@
- - edit{{'PLAN-STATUS-LISTING.ACTIONS.EDIT' | translate}} + edit{{'PLAN-STATUS-LISTING.ACTIONS.EDIT' | translate}} diff --git a/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html b/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html index 084a2a2e9..4f2a18ce4 100644 --- a/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html +++ b/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html @@ -7,16 +7,16 @@
- +
-
- @@ -90,7 +90,7 @@
- +
@@ -133,8 +133,8 @@
- - + +
diff --git a/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.scss b/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.scss index f192e16a6..c67f75a2d 100644 --- a/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.scss +++ b/frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.scss @@ -11,14 +11,6 @@ } } -::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { - background-color: var(--primary-color-3); -} - -::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { - background-color: #b0b0b0; -} - ::ng-deep .mdc-form-field { label { margin: 0; diff --git a/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html b/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html index e07e3cae0..867896af0 100644 --- a/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html +++ b/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html @@ -7,7 +7,7 @@ -
+

{{'PREFILLING-SOURCE-LISTING.FILTER.TITLE' | translate}}

@@ -31,12 +31,12 @@
-
-
diff --git a/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.ts b/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.ts index ff8f023b2..d84b3a93c 100644 --- a/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.ts +++ b/frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.ts @@ -1,6 +1,7 @@ -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { IsActive } from '@app/core/common/enum/is-active.enum'; import { PrefillingSourceFilter } from '@app/core/query/prefilling-source.lookup'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { BaseComponent } from '@common/base/base.component'; import { nameof } from 'ts-simple-nameof'; @@ -17,10 +18,11 @@ export class PrefillingSourceListingFiltersComponent extends BaseComponent imple // * State internalFilters: PrefillingSourceListingFilters = this._getEmptyFilters(); - + accessibilityTheme = computed(() => this.fontService.accessibleFontSignal()); protected appliedFilterCount: number = 0; constructor( public enumUtils: EnumUtils, + protected fontService: FontAccessibilityService ) { super(); } ngOnInit() { diff --git a/frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html b/frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html index 307c7321a..592be3af4 100644 --- a/frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html +++ b/frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html @@ -7,7 +7,7 @@
- - edit{{'PREFILLING-SOURCE-LISTING.ACTIONS.EDIT' | translate}} + edit{{'PREFILLING-SOURCE-LISTING.ACTIONS.EDIT' | translate}} diff --git a/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html b/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html index 74270b0fb..8b8de0fe3 100644 --- a/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html +++ b/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html @@ -7,16 +7,16 @@
- +
-
- @@ -60,7 +60,7 @@

{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELDS' | translate}}

- +
@@ -76,7 +76,7 @@
-
+
{{fieldIndex + 1}}
@@ -124,7 +124,7 @@
- +
@@ -132,7 +132,7 @@

{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCES' | translate}}

- +
diff --git a/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.scss b/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.scss index cf8c26656..04c029250 100644 --- a/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.scss +++ b/frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.scss @@ -7,18 +7,10 @@ .add { background-color: white; - color: #009700; + color: #009700; //todo mchouliara } } -::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { - background-color: var(--primary-color-3); -} - -::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { - background-color: #b0b0b0; -} - .dlt-section-btn { margin: 0; @@ -47,12 +39,12 @@ .field-delete-icon{ font-size: 1.2em; width: 14px; - color: var(--primary-color); + color: var(--sys-primary); } .field-delete-text{ font-size: 1em; margin-left: 0.5em; - color: var(--primary-color); + color: var(--sys-primary); } } \ No newline at end of file diff --git a/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html b/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html index 282fc732b..af91fb9b1 100644 --- a/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html +++ b/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html @@ -7,7 +7,7 @@ -
+

{{'REFERENCE-TYPE-LISTING.FILTER.TITLE' | translate}}

@@ -31,12 +31,12 @@
-
-
diff --git a/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.ts b/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.ts index 4b42ca888..a1c61a66e 100644 --- a/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.ts +++ b/frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.ts @@ -1,6 +1,7 @@ -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { IsActive } from '@app/core/common/enum/is-active.enum'; import { ReferenceTypeFilter } from '@app/core/query/reference-type.lookup'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { BaseComponent } from '@common/base/base.component'; import { nameof } from 'ts-simple-nameof'; @@ -17,10 +18,12 @@ export class ReferenceTypeListingFiltersComponent extends BaseComponent implemen // * State internalFilters: ReferenceTypeListingFilters = this._getEmptyFilters(); + accessibilityTheme = computed(() => this.fontService.accessibleFontSignal()); protected appliedFilterCount: number = 0; constructor( public enumUtils: EnumUtils, + protected fontService: FontAccessibilityService ) { super(); } ngOnInit() { diff --git a/frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html b/frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html index 87e9cbdc6..f58a3283f 100644 --- a/frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html +++ b/frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html @@ -7,7 +7,7 @@
- - edit{{'REFERENCE-TYPE-LISTING.ACTIONS.EDIT' | translate}} + edit{{'REFERENCE-TYPE-LISTING.ACTIONS.EDIT' | translate}} diff --git a/frontend/src/app/ui/admin/reference/editor/reference-editor.component.html b/frontend/src/app/ui/admin/reference/editor/reference-editor.component.html index 494eebf23..138a9c643 100644 --- a/frontend/src/app/ui/admin/reference/editor/reference-editor.component.html +++ b/frontend/src/app/ui/admin/reference/editor/reference-editor.component.html @@ -6,16 +6,16 @@
- +
-
- @@ -25,7 +25,7 @@
-
+
{{'REFERENCE-EDITOR.FIELDS.LABEL' | translate}} @@ -92,7 +92,7 @@

{{'REFERENCE-EDITOR.FIELDS.FIELDS' | translate}} - +

diff --git a/frontend/src/app/ui/admin/reference/editor/reference-editor.component.scss b/frontend/src/app/ui/admin/reference/editor/reference-editor.component.scss index 84d122035..8b08c387c 100644 --- a/frontend/src/app/ui/admin/reference/editor/reference-editor.component.scss +++ b/frontend/src/app/ui/admin/reference/editor/reference-editor.component.scss @@ -9,12 +9,4 @@ background-color: white; color: #009700; } -} - -::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { - background-color: var(--primary-color-3); -} - -::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { - background-color: #b0b0b0; } \ No newline at end of file diff --git a/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html b/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html index 2d5f37137..84397e9a4 100644 --- a/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html +++ b/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html @@ -7,7 +7,7 @@ -
+

{{'REFERENCE-LISTING.FILTER.TITLE' | translate}}

@@ -53,12 +53,12 @@
-
-
diff --git a/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.ts b/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.ts index 5dd9be919..806a57ef2 100644 --- a/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.ts +++ b/frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.ts @@ -1,7 +1,8 @@ -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { IsActive } from '@app/core/common/enum/is-active.enum'; import { ReferenceSourceType } from '@app/core/common/enum/reference-source-type'; import { ReferenceFilter } from '@app/core/query/reference.lookup'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { BaseComponent } from '@common/base/base.component'; @@ -22,11 +23,12 @@ export class ReferenceListingFiltersComponent extends BaseComponent implements O // * State internalFilters: ReferenceListingFilters = this._getEmptyFilters(); - + accessibilityTheme = computed(() => this.fontService.accessibleFontSignal()); protected appliedFilterCount: number = 0; constructor( public enumUtils: EnumUtils, - public referenceTypeService: ReferenceTypeService + public referenceTypeService: ReferenceTypeService, + protected fontService: FontAccessibilityService ) { super(); } ngOnInit() { diff --git a/frontend/src/app/ui/admin/reference/listing/reference-listing.component.html b/frontend/src/app/ui/admin/reference/listing/reference-listing.component.html index 3d75e9fed..6e21405a5 100644 --- a/frontend/src/app/ui/admin/reference/listing/reference-listing.component.html +++ b/frontend/src/app/ui/admin/reference/listing/reference-listing.component.html @@ -7,7 +7,7 @@
- - edit{{'REFERENCE-LISTING.ACTIONS.EDIT' | translate}} + edit{{'REFERENCE-LISTING.ACTIONS.EDIT' | translate}} diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html index 5d2b00d8a..17461ada0 100644 --- a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html +++ b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html @@ -1,70 +1,44 @@
-
+
- {{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR' | translate}} - + + {{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR' | translate}} + + - {{formGroup.get('cssColors')?.get('primaryColor')?.getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - {{'GENERAL.VALIDATION.INVALID-COLOR' | translate}} - - - {{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR-2' | translate}} - - - {{formGroup.get('cssColors')?.get('primaryColor2')?.getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - {{'GENERAL.VALIDATION.INVALID-COLOR' | translate}} - - - {{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR-3' | translate}} - - - {{formGroup.get('cssColors')?.get('primaryColor3')?.getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - {{'GENERAL.VALIDATION.INVALID-COLOR' | translate}} - - - {{'TENANT-CONFIGURATION-EDITOR.FIELDS.SECONDARY-COLOR' | translate}} - - - {{formGroup.get('cssColors')?.get('secondaryColor')?.getError('backendError').message}} - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - {{'GENERAL.VALIDATION.INVALID-COLOR' | translate}} + {{cssColorForm?.get('primaryColor')?.getError('backendError').message}} + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + {{'GENERAL.VALIDATION.INVALID-COLOR' | translate}} + + + {{'TENANT-CONFIGURATION-EDITOR.FIELDS.CSS-OVERRIDE' | translate}} + + + {{cssColorForm?.get('cssOverride')?.getError('backendError').message}} +
-
-
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.scss b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.scss index e6b81ab51..57ed58056 100644 --- a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.scss +++ b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.scss @@ -1,7 +1,8 @@ -.css-colors { - -} ::ng-deep .mat-mdc-form-field-icon-suffix { margin-right: 0.2em; } + +.css-override { + min-height: 5rem; +} \ No newline at end of file diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.ts b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.ts index 742c52df1..b32261b34 100644 --- a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.ts +++ b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { UntypedFormGroup } from '@angular/forms'; +import { FormGroup, UntypedFormGroup } from '@angular/forms'; import { MatDialog } from '@angular/material/dialog'; import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service'; import { AppPermission } from '@app/core/common/enum/permission.enum'; @@ -10,7 +10,7 @@ import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog import { HttpError, HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service'; import { TranslateService } from '@ngx-translate/core'; import { map, takeUntil } from 'rxjs/operators'; -import { TenantConfigurationEditorModel } from './css-colors-editor.model'; +import { CssColorForm, TenantConfigurationEditorModel } from './css-colors-editor.model'; import { TenantConfiguration, TenantConfigurationPersist } from '@app/core/model/tenant-configuaration/tenant-configuration'; import { TenantConfigurationService } from '@app/core/services/tenant-configuration/tenant-configuration.service'; import { CssColorsEditorService } from './css-colors-editor.service'; @@ -19,9 +19,9 @@ import { BasePendingChangesComponent } from '@common/base/base-pending-changes.c import { Observable } from 'rxjs'; import { TenantConfigurationType } from '@app/core/common/enum/tenant-configuration-type'; import { HttpErrorResponse } from '@angular/common/http'; -import { ResponseErrorCode } from '@app/core/common/enum/respone-error-code'; import { LoggingService } from '@app/core/services/logging/logging-service'; import { AnalyticsService } from '@app/core/services/matomo/analytics-service'; +import { TenantHandlingService } from '@app/core/services/tenant/tenant-handling.service'; @Component({ @@ -61,7 +61,8 @@ export class CssColorsEditorComponent extends BasePendingChangesComponent implem private logger: LoggingService, private tenantConfigurationService: TenantConfigurationService, private cssColorsEditorService: CssColorsEditorService, - private analyticsService: AnalyticsService + private analyticsService: AnalyticsService, + private tenantHandlingService: TenantHandlingService ) { super(); } @@ -81,44 +82,18 @@ export class CssColorsEditorComponent extends BasePendingChangesComponent implem } + get cssColorForm(): FormGroup { + return this.formGroup.get('cssColors') as FormGroup; + } + private bindColorInputs() { - this.formGroup.get('cssColors')?.get('primaryColorInput').valueChanges.subscribe((color) => { - this.formGroup.get('cssColors')?.get('primaryColor').setValue(color, { + this.cssColorForm?.get('primaryColorInput').valueChanges.subscribe((color) => { + this.cssColorForm?.get('primaryColor').setValue(color, { emitEvent: false, }); }); - this.formGroup.get('cssColors')?.get('primaryColor').valueChanges.subscribe((color) => - this.formGroup.get('cssColors')?.get('primaryColorInput').setValue(color, { - emitEvent: false, - }) - ); - this.formGroup.get('cssColors')?.get('primaryColor2Input').valueChanges.subscribe((color) => { - this.formGroup.get('cssColors')?.get('primaryColor2').setValue(color, { - emitEvent: false, - }); - }); - this.formGroup.get('cssColors')?.get('primaryColor2').valueChanges.subscribe((color) => - this.formGroup.get('cssColors')?.get('primaryColor2Input').setValue(color, { - emitEvent: false, - }) - ); - this.formGroup.get('cssColors')?.get('primaryColor3Input').valueChanges.subscribe((color) => { - this.formGroup.get('cssColors')?.get('primaryColor3').setValue(color, { - emitEvent: false, - }); - }); - this.formGroup.get('cssColors')?.get('primaryColor3').valueChanges.subscribe((color) => - this.formGroup.get('cssColors')?.get('primaryColor3Input').setValue(color, { - emitEvent: false, - }) - ); - this.formGroup.get('cssColors')?.get('secondaryColorInput').valueChanges.subscribe((color) => { - this.formGroup.get('cssColors')?.get('secondaryColor').setValue(color, { - emitEvent: false, - }); - }); - this.formGroup.get('cssColors')?.get('secondaryColor').valueChanges.subscribe((color) => - this.formGroup.get('cssColors')?.get('secondaryColorInput').setValue(color, { + this.cssColorForm?.get('primaryColor').valueChanges.subscribe((color) => + this.cssColorForm?.get('primaryColorInput').setValue(color, { emitEvent: false, }) ); @@ -144,10 +119,10 @@ export class CssColorsEditorComponent extends BasePendingChangesComponent implem } } - onCallbackSuccess(data?: any): void { - + onCallbackSuccess(cssColors?: any): void { this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success); - this.refreshData(); + this.tenantHandlingService.applyTenantCssColors(cssColors); + this.refreshData(); } @@ -179,12 +154,11 @@ export class CssColorsEditorComponent extends BasePendingChangesComponent implem persistEntity(onSuccess?: (response) => void): void { const formData = this.formService.getValue(this.formGroup.value) as TenantConfigurationPersist; - - this.tenantConfigurationService.persist(formData) - .pipe(takeUntil(this._destroyed)).subscribe( - complete => onSuccess ? onSuccess(complete) : this.onCallbackSuccess(complete), - error => this.onCallbackError(error) - ); + this.tenantConfigurationService.persist(formData) + .pipe(takeUntil(this._destroyed)).subscribe({ + next: (complete) => onSuccess ? onSuccess(complete) : this.onCallbackSuccess(formData?.cssColors), + error: (error) => this.onCallbackError(error) + }); } formSubmit(): void { diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.model.ts b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.model.ts index e346182f8..4209e9c6f 100644 --- a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.model.ts +++ b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.model.ts @@ -1,4 +1,4 @@ -import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms"; +import { FormControl, FormGroup, UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms"; import { TenantConfigurationType } from "@app/core/common/enum/tenant-configuration-type"; import { CssColorsTenantConfiguration, CssColorsTenantConfigurationPersist, TenantConfiguration, TenantConfigurationPersist } from "@app/core/model/tenant-configuaration/tenant-configuration"; import { BaseEditorModel } from "@common/base/base-form-editor-model"; @@ -54,9 +54,7 @@ export class TenantConfigurationEditorModel extends BaseEditorModel implements T export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantConfigurationPersist { primaryColor: string; - primaryColor2: string; - primaryColor3: string; - secondaryColor: string; + cssOverride: string; protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder(); @@ -67,9 +65,7 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC public fromModel(item: CssColorsTenantConfiguration): CssColorsTenantConfigurationEditorModel { if (item) { this.primaryColor = item.primaryColor; - this.primaryColor2 = item.primaryColor2; - this.primaryColor3 = item.primaryColor3; - this.secondaryColor = item.secondaryColor; + this.cssOverride = item.cssOverride } return this; } @@ -78,7 +74,7 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC context?: ValidationContext, disabled?: boolean, rootPath?: string - }): UntypedFormGroup { + }): FormGroup { let { context = null, disabled = false, rootPath } = params ?? {} if (context == null) { context = CssColorsTenantConfigurationEditorModel.createValidationContext({ @@ -89,13 +85,8 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC const form: UntypedFormGroup = this.formBuilder.group({ primaryColor: [{ value: this.primaryColor, disabled: disabled }, context.getValidation('primaryColor').validators], - primaryColor2: [{ value: this.primaryColor2, disabled: disabled }, context.getValidation('primaryColor2').validators], - primaryColor3: [{ value: this.primaryColor3, disabled: disabled }, context.getValidation('primaryColor3').validators], - secondaryColor: [{ value: this.secondaryColor, disabled: disabled }, context.getValidation('secondaryColor').validators], primaryColorInput: [{ value: this.primaryColor, disabled: disabled}, context.getValidation('primaryColorInput').validators ], - primaryColor2Input: [{ value: this.primaryColor2, disabled: disabled}, context.getValidation('primaryColor2Input').validators ], - primaryColor3Input: [{ value: this.primaryColor3, disabled: disabled}, context.getValidation('primaryColor3Input').validators ], - secondaryColorInput: [{ value: this.secondaryColor, disabled: disabled}, context.getValidation('secondaryColorInput').validators ], + cssOverride: [{value: this.cssOverride, disabled: disabled}, context.getValidation('cssOverride').validators] }, { updateOn: "change" }); @@ -112,15 +103,16 @@ export class CssColorsTenantConfigurationEditorModel implements CssColorsTenantC const baseContext: ValidationContext = new ValidationContext(); const baseValidationArray: Validation[] = new Array(); baseValidationArray.push({ key: 'primaryColor', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}primaryColor`)] }); - baseValidationArray.push({ key: 'primaryColor2', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}primaryColor2`)] }); - baseValidationArray.push({ key: 'primaryColor3', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}primaryColor3`)] }); - baseValidationArray.push({ key: 'secondaryColor', validators: [validColorValidator(), Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}secondaryColor`)] }); baseValidationArray.push({ key: 'primaryColorInput', validators: [validColorValidator()] }); - baseValidationArray.push({ key: 'primaryColor2Input', validators: [validColorValidator()] }); - baseValidationArray.push({ key: 'primaryColor3Input', validators: [validColorValidator()] }); - baseValidationArray.push({ key: 'secondaryColorInput', validators: [validColorValidator()] }); + baseValidationArray.push({ key: 'cssOverride', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}cssOverride`)] }); baseContext.validation = baseValidationArray; return baseContext; } } + +export interface CssColorForm { + primaryColor: FormControl; + primaryColorInput: FormControl; + cssOverride: FormControl; +} \ No newline at end of file diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.resolver.ts b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.resolver.ts index 60da3eb84..b376d1bc5 100644 --- a/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.resolver.ts +++ b/frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.resolver.ts @@ -23,9 +23,7 @@ export class CssColorsEditorResolver extends BaseEditorResolver { nameof(x => x.cssColors), [nameof(x => x.cssColors), nameof(x => x.primaryColor)].join('.'), - [nameof(x => x.cssColors), nameof(x => x.primaryColor2)].join('.'), - [nameof(x => x.cssColors), nameof(x => x.primaryColor3)].join('.'), - [nameof(x => x.cssColors), nameof(x => x.secondaryColor)].join('.'), + [nameof(x => x.cssColors), nameof(x => x.cssOverride)].join('.'), nameof(x => x.createdAt), diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/default-user-locale/default-user-locale-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/default-user-locale/default-user-locale-editor.component.html index b31be6673..fe94a6ce5 100644 --- a/frontend/src/app/ui/admin/tenant-configuration/editor/default-user-locale/default-user-locale-editor.component.html +++ b/frontend/src/app/ui/admin/tenant-configuration/editor/default-user-locale/default-user-locale-editor.component.html @@ -36,11 +36,11 @@
-
-
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/deposit/deposit-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/deposit/deposit-editor.component.html index 997e2b38f..a7e21d910 100644 --- a/frontend/src/app/ui/admin/tenant-configuration/editor/deposit/deposit-editor.component.html +++ b/frontend/src/app/ui/admin/tenant-configuration/editor/deposit/deposit-editor.component.html @@ -9,7 +9,7 @@ {{'GENERAL.VALIDATION.REQUIRED' | translate}}
- +
@@ -94,11 +94,11 @@
-
-
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/description-workflow/description-workflow-editor/description-workflow-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/description-workflow/description-workflow-editor/description-workflow-editor.component.html index 342e767a3..f7a42bdc1 100644 --- a/frontend/src/app/ui/admin/tenant-configuration/editor/description-workflow/description-workflow-editor/description-workflow-editor.component.html +++ b/frontend/src/app/ui/admin/tenant-configuration/editor/description-workflow/description-workflow-editor/description-workflow-editor.component.html @@ -2,7 +2,9 @@
- {{'WORKFLOW-EDITOR.FIELDS.STARTING-STATUS' | translate}}* + {{'WORKFLOW-EDITOR.FIELDS.STARTING-STATUS' | translate}} +  *{{'GENERAL.VALIDATION.REQUIRED' | translate }} +
- +
@@ -35,7 +37,9 @@
- {{'WORKFLOW-EDITOR.FIELDS.FROM-STATUS' | translate}}* + {{'WORKFLOW-EDITOR.FIELDS.FROM-STATUS' | translate}} +  *{{'GENERAL.VALIDATION.REQUIRED' | translate }} +
@if(canDelete){
-
} @if(canSave){
-
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/file-transformer/file-transformer-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/file-transformer/file-transformer-editor.component.html index 1b2d89e70..fa0af0744 100644 --- a/frontend/src/app/ui/admin/tenant-configuration/editor/file-transformer/file-transformer-editor.component.html +++ b/frontend/src/app/ui/admin/tenant-configuration/editor/file-transformer/file-transformer-editor.component.html @@ -9,7 +9,7 @@ {{'GENERAL.VALIDATION.REQUIRED' | translate}}
- +
@@ -78,11 +78,11 @@
-
-
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/logo/logo-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/logo/logo-editor.component.html index cd2d05c54..c41941308 100644 --- a/frontend/src/app/ui/admin/tenant-configuration/editor/logo/logo-editor.component.html +++ b/frontend/src/app/ui/admin/tenant-configuration/editor/logo/logo-editor.component.html @@ -21,11 +21,11 @@
-
-
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/plan-workflow/plan-workflow-editor/plan-workflow-editor.component.html b/frontend/src/app/ui/admin/tenant-configuration/editor/plan-workflow/plan-workflow-editor/plan-workflow-editor.component.html index 458fd70d2..1f6b21b9a 100644 --- a/frontend/src/app/ui/admin/tenant-configuration/editor/plan-workflow/plan-workflow-editor/plan-workflow-editor.component.html +++ b/frontend/src/app/ui/admin/tenant-configuration/editor/plan-workflow/plan-workflow-editor/plan-workflow-editor.component.html @@ -2,7 +2,9 @@
- {{'WORKFLOW-EDITOR.FIELDS.STARTING-STATUS' | translate}}* + {{'WORKFLOW-EDITOR.FIELDS.STARTING-STATUS' | translate}} +  *{{'GENERAL.VALIDATION.REQUIRED' | translate }} +
- +
@@ -35,7 +37,9 @@
- {{'WORKFLOW-EDITOR.FIELDS.FROM-STATUS' | translate}}* + {{'WORKFLOW-EDITOR.FIELDS.FROM-STATUS' | translate}} +  *{{'GENERAL.VALIDATION.REQUIRED' | translate }} +
- {{'WORKFLOW-EDITOR.FIELDS.TO-STATUS' | translate}}* + {{'WORKFLOW-EDITOR.FIELDS.TO-STATUS' | translate}} +  *{{'GENERAL.VALIDATION.REQUIRED' | translate }} +
@if(canDelete){
-
} @if(canSave){
-
diff --git a/frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.html b/frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.html index 0578ceb22..4f1a39fc7 100644 --- a/frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.html +++ b/frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.html @@ -6,16 +6,16 @@
- +
-
- @@ -44,7 +44,9 @@
-

{{'TENANT-EDITOR.FIELDS.DESCRIPTION' | translate}} *

+

{{'TENANT-EDITOR.FIELDS.DESCRIPTION' | translate}} +  *{{'GENERAL.VALIDATION.REQUIRED' | translate }} +

diff --git a/frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.scss b/frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.scss index 44417366d..aebef193c 100644 --- a/frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.scss +++ b/frontend/src/app/ui/admin/tenant/editor/tenant-editor.component.scss @@ -9,12 +9,4 @@ background-color: white; color: #009700; } -} - -::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { - background-color: var(--primary-color-3); -} - -::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { - background-color: #b0b0b0; } \ No newline at end of file diff --git a/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html b/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html index 66020bab0..583b101da 100644 --- a/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html +++ b/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.html @@ -7,7 +7,7 @@ -
+

{{'TENANT-LISTING.FILTER.TITLE' | translate}}

@@ -31,12 +31,12 @@
-
-
diff --git a/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.ts b/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.ts index 4212f7d56..aa2b4cb2e 100644 --- a/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.ts +++ b/frontend/src/app/ui/admin/tenant/listing/filters/tenant-listing-filters.component.ts @@ -1,6 +1,7 @@ -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { IsActive } from '@app/core/common/enum/is-active.enum'; import { TenantFilter } from '@app/core/query/tenant.lookup'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { BaseComponent } from '@common/base/base.component'; import { nameof } from 'ts-simple-nameof'; @@ -17,10 +18,12 @@ export class TenantListingFiltersComponent extends BaseComponent implements OnIn // * State internalFilters: TenantListingFilters = this._getEmptyFilters(); + accessibilityTheme = computed(() => this.fontService.accessibleFontSignal()); protected appliedFilterCount: number = 0; constructor( public enumUtils: EnumUtils, + protected fontService: FontAccessibilityService ) { super(); } ngOnInit() { diff --git a/frontend/src/app/ui/admin/tenant/listing/tenant-listing.component.html b/frontend/src/app/ui/admin/tenant/listing/tenant-listing.component.html index 13b666668..64f170e88 100644 --- a/frontend/src/app/ui/admin/tenant/listing/tenant-listing.component.html +++ b/frontend/src/app/ui/admin/tenant/listing/tenant-listing.component.html @@ -8,7 +8,7 @@
- - edit{{'TENANT-LISTING.ACTIONS.EDIT' | translate}} + edit{{'TENANT-LISTING.ACTIONS.EDIT' | translate}} diff --git a/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.html b/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.html index df6f0ca90..a66145f17 100644 --- a/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.html +++ b/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.html @@ -6,16 +6,16 @@
- +
-
- diff --git a/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.scss b/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.scss index 729995b95..1361b50e0 100644 --- a/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.scss +++ b/frontend/src/app/ui/admin/usage-limit/editor/usage-limit-editor.component.scss @@ -7,14 +7,6 @@ .add { background-color: white; - color: #009700; + color: #009700; //todo mchouliara } -} - -::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { - background-color: var(--primary-color-3); -} - -::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background { - background-color: #b0b0b0; } \ No newline at end of file diff --git a/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html b/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html index f6bd2fba0..ac80a1629 100644 --- a/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html +++ b/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.html @@ -7,7 +7,7 @@ -
+

{{'USAGE-LIMIT-LISTING.FILTER.TITLE' | translate}}

@@ -42,12 +42,12 @@
-
-
diff --git a/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.ts b/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.ts index 01bc688eb..a6c5f6fee 100644 --- a/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.ts +++ b/frontend/src/app/ui/admin/usage-limit/listing/filters/usage-limit-listing-filters.component.ts @@ -1,7 +1,8 @@ -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { IsActive } from '@app/core/common/enum/is-active.enum'; import { UsageLimitTargetMetric } from '@app/core/common/enum/usage-limit-target-metric'; import { UsageLimitFilter } from '@app/core/query/usage-limit.lookup'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { BaseComponent } from '@common/base/base.component'; import { nameof } from 'ts-simple-nameof'; @@ -20,10 +21,12 @@ export class UsageLimitListingFiltersComponent extends BaseComponent implements // * State internalFilters: UsageLimitListingFilters = this._getEmptyFilters(); + accessibilityTheme = computed(() => this.fontService.accessibleFontSignal()); protected appliedFilterCount: number = 0; constructor( public enumUtils: EnumUtils, + protected fontService: FontAccessibilityService ) { super(); } ngOnInit() { diff --git a/frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.html b/frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.html index 7c1dd0127..ebcc19c21 100644 --- a/frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.html +++ b/frontend/src/app/ui/admin/usage-limit/listing/usage-limit-listing.component.html @@ -8,7 +8,7 @@
- - edit{{'USAGE-LIMIT-LISTING.ACTIONS.EDIT' | translate}} + edit{{'USAGE-LIMIT-LISTING.ACTIONS.EDIT' | translate}} diff --git a/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html b/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html index d0bfa6b86..a772da1a1 100644 --- a/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html +++ b/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.html @@ -7,7 +7,7 @@ -
+

{{'USER-LISTING.FILTER.TITLE' | translate}}

@@ -47,12 +47,12 @@
-
-
diff --git a/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.ts b/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.ts index 7c149e1ac..e0a0c26d4 100644 --- a/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.ts +++ b/frontend/src/app/ui/admin/user/listing/filters/user-listing-filters.component.ts @@ -1,8 +1,9 @@ -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { AppRole } from '@app/core/common/enum/app-role'; import { IsActive } from '@app/core/common/enum/is-active.enum'; import { UserRoleLookup } from '@app/core/query/user-role.lookup'; import { UserFilter } from '@app/core/query/user.lookup'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { BaseComponent } from '@common/base/base.component'; import { nameof } from 'ts-simple-nameof'; @@ -24,10 +25,12 @@ export class UserListingFiltersComponent extends BaseComponent implements OnInit // * State internalFilters: UserListingFilters = this._getEmptyFilters(); + accessibilityTheme = computed(() => this.fontService.accessibleFontSignal()); protected appliedFilterCount: number = 0; constructor( public enumUtils: EnumUtils, + protected fontService: FontAccessibilityService ) { super(); } ngOnInit() { diff --git a/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.html b/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.html index eb3ea830a..dc5d05d5e 100644 --- a/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.html +++ b/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.html @@ -1,10 +1,10 @@
-

{{'USER-INVITE-TO-TENANT-DIALOG.TITLE' | translate}}

+
{{'USER-INVITE-TO-TENANT-DIALOG.TITLE' | translate}}
- +
@@ -50,7 +50,7 @@
- + {{formGroup.get('users').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}}
diff --git a/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.scss b/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.scss index a2b4488c7..5769aa12e 100644 --- a/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.scss +++ b/frontend/src/app/ui/admin/user/listing/user-invite-to-tenant-dialog/user-invite-to-tenant-dialog.component.scss @@ -23,7 +23,7 @@ .hint { font-size: 0.875rem; font-weight: 500; - color: #212121; + color: var(--dark-gray); opacity: 0.81; } @@ -45,7 +45,7 @@ .select-role { width: 50% !important; font-size: 14px; - color: #848484; + color: var(--gray); height: min-content; margin-right: 2rem; border: none; 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/admin/user/listing/user-listing.component.html b/frontend/src/app/ui/admin/user/listing/user-listing.component.html index 1b36bebb2..79d8c0508 100644 --- a/frontend/src/app/ui/admin/user/listing/user-listing.component.html +++ b/frontend/src/app/ui/admin/user/listing/user-listing.component.html @@ -7,12 +7,12 @@
-
- @@ -68,8 +68,8 @@
- - + +
{{row.name}}
diff --git a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html index 4cadec168..b43f5b15e 100644 --- a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html +++ b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html @@ -9,13 +9,13 @@
-
-
@@ -36,15 +36,15 @@
- visibility_off - public + visibility_off + public
- +
- +
@@ -105,12 +105,12 @@
diff --git a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss index f2242d7b4..ca1423415 100644 --- a/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss +++ b/frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss @@ -45,10 +45,10 @@ $mat-card-header-size: 40px !default; .upload-btn { background-color: white; - color: #212121; + color: var(--dark-gray); font-weight: bold; box-shadow: 0px 3px 6px #1e202029; - border: 2px solid #212121; + border: 2px solid var(--dark-gray); } .actions { @@ -60,12 +60,12 @@ $mat-card-header-size: 40px !default; } .warn { - color: #f16868; + color: var(--sys-error); } .comments-count { - background-color: var(--primary-color) !important;// #129D99; - color: #FFFFFF !important; + background-color: var(--sys-primary) !important;// #129D99; + color: var(--sys-on-primary) !important; min-width: 2rem; border-radius: 15px; } @@ -120,7 +120,7 @@ $mat-card-header-size: 40px !default; .action-button { font-weight: 400; border-radius: 20px; - color: var(--primary-color); + color: var(--sys-primary); font-weight: 500; &.active-action { 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-confirmation.component.html b/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.html index 444ad5c3b..80010480e 100644 --- a/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.html +++ b/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.html @@ -14,7 +14,7 @@
- +
diff --git a/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.scss b/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.scss index e3c437802..ccc605d4a 100644 --- a/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.scss +++ b/frontend/src/app/ui/auth/login/merge-email-confirmation/merge-email-confirmation.component.scss @@ -6,7 +6,7 @@ .merge-account-title { font-size: 1.25rem; - color: #212121; + color: var(--dark-gray); padding-top: 4.1875rem; padding-left: 3.75rem; padding-bottom: 4.0625rem; 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/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.html b/frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.html index 7f193c91d..7049318a6 100644 --- a/frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.html +++ b/frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.html @@ -15,7 +15,7 @@
- +
diff --git a/frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.scss b/frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.scss index 36639eb22..7bce22e4a 100644 --- a/frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.scss +++ b/frontend/src/app/ui/auth/login/unlink-email-confirmation/unlink-email-confirmation.component.scss @@ -6,7 +6,7 @@ .unlink-account-title { font-size: 1.25rem; - color: #212121; + color: var(--dark-gray); padding-top: 4.1875rem; padding-left: 3.75rem; padding-bottom: 4.0625rem; diff --git a/frontend/src/app/ui/auth/login/user-invite-confirmation/user-invite-confirmation.component.scss b/frontend/src/app/ui/auth/login/user-invite-confirmation/user-invite-confirmation.component.scss index 608916719..d34c8b83f 100644 --- a/frontend/src/app/ui/auth/login/user-invite-confirmation/user-invite-confirmation.component.scss +++ b/frontend/src/app/ui/auth/login/user-invite-confirmation/user-invite-confirmation.component.scss @@ -6,7 +6,7 @@ .user-invite-title { font-size: 1.25rem; - color: #212121; + color: var(--dark-gray); padding-top: 4.1875rem; padding-left: 3.75rem; padding-bottom: 4.0625rem; diff --git a/frontend/src/app/ui/contact/contact-content/contact-content.component.html b/frontend/src/app/ui/contact/contact-content/contact-content.component.html index 7089021b2..b1db2f7de 100644 --- a/frontend/src/app/ui/contact/contact-content/contact-content.component.html +++ b/frontend/src/app/ui/contact/contact-content/contact-content.component.html @@ -2,7 +2,7 @@
-

{{ 'CONTACT.SUPPORT.TITLE' | translate}}

+
{{ 'CONTACT.SUPPORT.TITLE' | translate}}
@@ -22,8 +22,8 @@
-
-
+
+
diff --git a/frontend/src/app/ui/contact/contact-content/contact-content.component.scss b/frontend/src/app/ui/contact/contact-content/contact-content.component.scss index c696eb3ec..516daa2f5 100644 --- a/frontend/src/app/ui/contact/contact-content/contact-content.component.scss +++ b/frontend/src/app/ui/contact/contact-content/contact-content.component.scss @@ -1,6 +1,7 @@ -h1 { +.title { text-align: center; margin: 2rem 0 1rem 0; + font-size: 3.3125rem; } img { @@ -26,30 +27,6 @@ img { width: 100%; } -.send-btn { - background: #ffffff 0% 0% no-repeat padding-box; - border: 1px solid var(--primary-color); - border-radius: 30px; - opacity: 1; - min-width: 101px; - height: 43px; - color: var(--primary-color); - font-weight: 500; -} - -.send-btn-disabled { - min-width: 6.64em; - height: 2.93em; - background: #FFFFFF; - border: 1px solid #B5B5B5; - border-radius: 30px; - font-weight: bold; - letter-spacing: -0.35px; - color: #B5B5B5; - margin-bottom: 0.25em; - cursor: default; -} - .cancel-btn { background: #ffffff 0% 0% no-repeat padding-box; border: 1px solid #B5B5B5; @@ -57,6 +34,6 @@ img { opacity: 1; min-width: 101px; height: 43px; - color: #212121; + color: var(--dark-gray); font-weight: 500; } diff --git a/frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.html b/frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.html index 46410c7a2..59ad07930 100644 --- a/frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.html +++ b/frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.html @@ -4,7 +4,7 @@ {{'CONTACT.SUPPORT.SUBTITLE' | translate}}
-
diff --git a/frontend/src/app/ui/dashboard/dashboard.component.html b/frontend/src/app/ui/dashboard/dashboard.component.html index ad4614a5c..593bc8c29 100644 --- a/frontend/src/app/ui/dashboard/dashboard.component.html +++ b/frontend/src/app/ui/dashboard/dashboard.component.html @@ -5,8 +5,10 @@
-
- clear +
+

{{'NEW-RELEASE-NOTIFICATION.HINT' | translate}}

@@ -15,17 +17,19 @@
- + {{'NEW-RELEASE-NOTIFICATION.ACTIONS.LEARN-MORE' | translate}}
-
- clear +
+

{{'DASHBOARD.PLAN-QUESTION' | translate}}

{{'DASHBOARD.INFO-PLAN-TEXT' | translate}}

@@ -41,16 +45,16 @@
- +
- +
- + {{('ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate) ?? 'dashboard popup image' }}
@@ -58,25 +62,25 @@
{{'DASHBOARD.LATEST-ACTIVITY' | translate}}
- + - + - + - +
- clear +
-

{{'DASHBOARD.TITLE' | translate}}

+

{{'DASHBOARD.TITLE' | translate}}

{{'DASHBOARD.INFO-TEXT' | translate}}

- + {{('ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate) ?? 'dashboard popup image' }}
diff --git a/frontend/src/app/ui/dashboard/dashboard.component.scss b/frontend/src/app/ui/dashboard/dashboard.component.scss index abebdf212..b4670938a 100644 --- a/frontend/src/app/ui/dashboard/dashboard.component.scss +++ b/frontend/src/app/ui/dashboard/dashboard.component.scss @@ -23,7 +23,7 @@ text-align: left; font: Bold 20px/30px Roboto; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); padding-left: 40px; padding-right: 55px; opacity: 1; @@ -31,10 +31,8 @@ .card-content { text-align: left; - font-weight: 300; - font-size: 1rem; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); padding-left: 40px; padding-top: 36px; padding-right: 55px; @@ -43,7 +41,7 @@ .clear-icon { cursor: pointer; - color: #212121; + color: var(--dark-gray); padding: 0.4rem; } @@ -53,44 +51,12 @@ padding: 0.4rem; } -.normal-btn { - min-width: 162px; - max-width: 256px; - height: 40px; - cursor: pointer; - background: var(--primary-color) 0% 0% no-repeat padding-box; - box-shadow: 0px 3px 6px #1e202029; - border-radius: 30px; - border: none; - color: #ffffff; - opacity: 1; - line-height: 1; - font-size: 0.87rem; - padding: 0.62rem 1.87rem; - margin-left: 40px; -} - -.yellow-btn { - min-width: 162px; - height: 40px; - cursor: pointer; - background: var(--secondary-color) 0% 0% no-repeat padding-box; - border-radius: 30px; - opacity: 1; - border: none; - color: #000000; - opacity: 1; - line-height: 1; - font-size: 0.87rem; - padding: 0.62rem 1.87rem; -} .personal-usage { text-align: left; - font-weight: 300; font-size: 1.25rem; letter-spacing: 0px; - color: #212121; + color: #000000; opacity: 0.6; } @@ -98,8 +64,8 @@ text-align: left; font: Bold 48px/30px Roboto; letter-spacing: 0px; - color: #212121; - opacity: 0.36; + color: #000000; + opacity: 0.6; padding-top: 2.5rem; padding-bottom: 0.5rem; } @@ -108,7 +74,7 @@ text-align: left; font: Bold 48px/30px Roboto; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.85; padding-top: 2.5rem; padding-bottom: 0.5rem; @@ -120,7 +86,10 @@ font-weight: 300; font-size: 1rem; letter-spacing: 0px; - color: var(--primary-color-2); + color: var(--link-color); + &:hover { + color: var(--sys-primary) + } opacity: 1; } @@ -129,7 +98,7 @@ font-weight: 300; font-size: 1rem; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.6; } @@ -138,8 +107,8 @@ font-weight: 300; font-size: 1.25rem; letter-spacing: 0px; - color: #212121; - opacity: 0.6; + color: var(--dark-gray); + opacity: 0.7; padding-bottom: 1.2rem; } @@ -149,7 +118,7 @@ .plan-card, .description-card { - min-width: 712px; + min-width: min(100%, 712px); background: #ffffff 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #0000001a; border-radius: 4px; @@ -174,28 +143,15 @@ input[type="text"] { } .plan-label { - background: var(--primary-color) 0% 0% no-repeat padding-box; + background: var(--sys-primary) 0% 0% no-repeat padding-box; border-radius: 4px 0px; opacity: 1; min-width: 67px; height: 37px; - color: #ffffff; + color: var(--sys-on-primary); line-height: 2.4; } -.description-label { - width: auto; - height: 37px; - background: var(--secondary-color) 0% 0% no-repeat padding-box; - border-radius: 4px 0px; - text-align: left; - line-height: 2.8; - font-size: 0.875rem; - letter-spacing: 0px; - color: #212121; - font-weight: 400; -} - .icon-align { display: inline-flex; vertical-align: middle; @@ -218,18 +174,18 @@ input[type="text"] { flex-direction: row; border-top: 1px solid #dbdbdb; line-height: 4; - color: #848484; + color: var(--gray); } .description-card-actions a, .plan-card-actions a { - color: #848484 !important; + color: var(--gray) !important; text-decoration: none !important; } .description-card-actions a:hover, .plan-card-actions a:hover { - color: var(--primary-color) !important; + color: var(--sys-primary) !important; } .plan-description-descriptions-title { @@ -245,16 +201,14 @@ input[type="text"] { font-weight: 700; } -.show-more { - color: black !important; -} + .show-more:hover { - color: var(--primary-color) !important; + color: var(--sys-primary) !important; } .draft { - color: #f16868; + color: var(--draft-color); } .stats { @@ -262,11 +216,11 @@ input[type="text"] { } .empty-list { - color: #212121; + color: var(--dark-gray); font-size: 1.25rem; font-weight: 300; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.6; display: flex; padding-top: 4.68rem; @@ -274,7 +228,7 @@ input[type="text"] { } .add-description { - background: var(--secondary-color) 0% 0% no-repeat padding-box; + background: var(--sys-tertiary) 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #1e202029; border-radius: 30px; opacity: 1; @@ -316,7 +270,7 @@ mat-tab-group.my-mat-tab .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-m :host ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { - background: var(--primary-color); + background: var(--sys-primary); height: 5px; } @@ -380,7 +334,7 @@ mat-tab-group.my-mat-tab .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-m text-align: left; font: Bold 30px/34px Roboto; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); padding-left: 40px; padding-right: 55px; opacity: 1; @@ -389,9 +343,8 @@ mat-tab-group.my-mat-tab .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-m .new-releases-content { text-align: left; font-weight: 300; - font-size: 1rem; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); padding-left: 40px; font: normal normal normal 16px/24px Roboto; padding-top: 36px; @@ -404,3 +357,7 @@ mat-tab-group.my-mat-tab .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-m right: 0; bottom: 0; } + +.dashboard-title { + font-size: 1.125rem; //h4 +} \ No newline at end of file diff --git a/frontend/src/app/ui/dashboard/dashboard.component.ts b/frontend/src/app/ui/dashboard/dashboard.component.ts index 3cba5ff49..099a8482c 100644 --- a/frontend/src/app/ui/dashboard/dashboard.component.ts +++ b/frontend/src/app/ui/dashboard/dashboard.component.ts @@ -112,7 +112,8 @@ export class DashboardComponent extends BaseComponent implements OnInit { disableClose: false, data: { isDialog: true - } + }, + maxWidth: '600px' }); } } @@ -140,7 +141,8 @@ export class DashboardComponent extends BaseComponent implements OnInit { data: { startNewPlan: false, formGroup: formGroup - } + }, + maxWidth: '600px' }); dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => { if (result) { diff --git a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html index 3faa82b3b..503a6b1b5 100644 --- a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html +++ b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html @@ -21,7 +21,7 @@
- + search {{formGroup.get('like').getError('backendError').message}} @@ -39,12 +39,12 @@
- +
- +
diff --git a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss index 30ec96771..1108068f3 100644 --- a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss +++ b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss @@ -14,12 +14,12 @@ input[type="text"] { } .plan-label { - background: var(--primary-color) 0% 0% no-repeat padding-box; + background: var(--sys-primary) 0% 0% no-repeat padding-box; border-radius: 4px 0px; opacity: 1; min-width: 67px; height: 37px; - color: #ffffff; + color: var(--sys-on-primary); line-height: 2.4; } @@ -34,7 +34,7 @@ input[type="text"] { flex-direction: row; border-top: 1px solid #dbdbdb; line-height: 4; - color: #848484; + color: var(--gray); } .description-card-actions, @@ -43,18 +43,18 @@ input[type="text"] { flex-direction: row; border-top: 1px solid #dbdbdb; line-height: 4; - color: #848484; + color: var(--gray); } .description-card-actions a, .plan-card-actions a { - color: #848484 !important; + color: var(--gray) !important; text-decoration: none !important; } .description-card-actions a:hover, .plan-card-actions a:hover { - color: var(--primary-color) !important; + color: var(--sys-primary) !important; } .plan-description-descriptions-title { @@ -70,16 +70,13 @@ input[type="text"] { font-weight: 700; } -.show-more { - color: black !important; -} .show-more:hover { - color: var(--primary-color) !important; + color: var(--sys-primary) !important; } .draft { - color: #f16868; + color: var(--draft-color); } .pointer { @@ -93,7 +90,7 @@ input[type="text"] { } .search-form mat-icon { - color: var(--primary-color); + color: var(--sys-primary); } ::ng-deep .search-form .mat-form-field-wrapper { @@ -115,7 +112,7 @@ input[type="text"] { font-weight: 300; font-size: 1.25rem; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.6; } diff --git a/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.html b/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.html index 26cb12dd9..ddb36b5af 100644 --- a/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.html +++ b/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.html @@ -2,7 +2,7 @@
{{'DESCRIPTION-COPY-DIALOG.TITLE' | translate}}
- +
@@ -27,7 +27,7 @@
-
-
+
+
diff --git a/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.scss b/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.scss index d28fc193c..57e595ac7 100644 --- a/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.scss +++ b/frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.scss @@ -12,22 +12,11 @@ border-radius: 30px; min-width: 101px; height: 43px; - color: #212121; + color: var(--dark-gray); font-weight: 500; } .confirm-btn { - background: #ffffff 0% 0% no-repeat padding-box; - border: 1px solid var(--primary-color); - border-radius: 30px; - opacity: 1; -min-width: 101px; + min-width: 101px; height: 43px; - color: var(--primary-color); - font-weight: 500; -} - -.confirm-btn:hover { - background-color: var(--primary-color); - color: #ffffff; -} +} \ No newline at end of file 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 3992fd4bc..57a8f3027 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,25 +1,25 @@ -import { map } from 'rxjs/operators'; -import { Component } from "@angular/core"; -import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog"; -import { Inject } from "@angular/core"; -import { TranslateService } from "@ngx-translate/core"; -import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration'; -import { Plan, PlanDescriptionTemplate } from '@app/core/model/plan/plan'; -import { PlanService } from '@app/core/services/plan/plan.service'; -import { DescriptionService } from '@app/core/services/description/description.service'; -import { PlanDescriptionTemplateLookup } from '@app/core/query/plan-description-template.lookup'; +import { Component, computed, HostBinding, Inject } from "@angular/core"; +import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog"; import { IsActive } from '@app/core/common/enum/is-active.enum'; -import { PlanLookup } from '@app/core/query/plan.lookup'; -import { Guid } from '@common/types/guid'; import { PlanStatusEnum } from '@app/core/common/enum/plan-status'; -import { nameof } from 'ts-simple-nameof'; -import { FilterService } from '@common/modules/text-filter/filter-service'; import { DescriptionTemplatesInSection, PlanBlueprint, PlanBlueprintDefinition, PlanBlueprintDefinitionSection } from '@app/core/model/plan-blueprint/plan-blueprint'; -import { TenantLookup } from '@app/core/query/tenant.lookup'; +import { Plan, PlanDescriptionTemplate } from '@app/core/model/plan/plan'; import { Tenant } from '@app/core/model/tenant/tenant'; -import { AuthService } from '@app/core/services/auth/auth.service'; +import { PlanDescriptionTemplateLookup } from '@app/core/query/plan-description-template.lookup'; import { PlanStatusLookup } from '@app/core/query/plan-status.lookup'; +import { PlanLookup } from '@app/core/query/plan.lookup'; +import { TenantLookup } from '@app/core/query/tenant.lookup'; +import { AuthService } from '@app/core/services/auth/auth.service'; +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 { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration'; +import { FilterService } from '@common/modules/text-filter/filter-service'; +import { Guid } from '@common/types/guid'; +import { TranslateService } from "@ngx-translate/core"; +import { map } from 'rxjs/operators'; +import { nameof } from 'ts-simple-nameof'; @Component({ selector: 'description-copy-dialog-component', @@ -27,11 +27,12 @@ import { PlanStatusLookup } from '@app/core/query/plan-status.lookup'; styleUrls: ['./description-copy-dialog.component.scss'], }) export class DescriptionCopyDialogComponent { + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); sections: PlanBlueprintDefinitionSection[] = []; descriptionDescriptionTemplateLabel: String; planAutoCompleteConfiguration: SingleAutoCompleteConfiguration = { - initialItems: (data?: any) => this.planService.query(this.buildPlanLookup(null,null,null, this.planDescriptionTemplateLookup)).pipe(map(x => x.items)), + initialItems: (data?: any) => this.planService.query(this.buildPlanLookup(null, null, null, this.planDescriptionTemplateLookup)).pipe(map(x => x.items)), filterFn: (searchQuery: string, data?: any) => this.planService.query(this.buildPlanLookup(searchQuery, null, null, this.planDescriptionTemplateLookup)).pipe(map(x => x.items)), getSelectedItem: (selectedItem: any) => this.planService.query(this.buildPlanLookup(null, null, [selectedItem])).pipe(map(x => x.items[0])), displayFn: (item: Plan) => item.label, @@ -94,18 +95,19 @@ export class DescriptionCopyDialogComponent { public language: TranslateService, private filterService: FilterService, private authService: AuthService, + protected fontService: FontAccessibilityService, @Inject(MAT_DIALOG_DATA) public data: any ) { } ngOnInit() { } - findSection(plan: Plan){ + findSection(plan: Plan) { const availableSectionIds = plan.planDescriptionTemplates?.filter(x => x.descriptionTemplateGroupId === this.data.descriptionTemplate.groupId && x.isActive == IsActive.Active).map(y => y.sectionId); this.sections = plan.blueprint.definition.sections.filter(x => x.hasTemplates == true && availableSectionIds?.includes(x.id)) || []; - if(this.sections.length == 1){ + if (this.sections.length == 1) { this.data.formGroup.get('sectionId').setValue(this.sections[0].id); - }else { + } else { this.data.formGroup.get('sectionId').setValue(null); } diff --git a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.html b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.html index 9cc7995f8..b695dabd8 100644 --- a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.html +++ b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.html @@ -7,10 +7,12 @@
-
{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.TITLE' | translate}}*
+
- + {{formGroup.get('label').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -20,11 +22,13 @@
-
{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION' | translate}}
- {{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION-HINT' | translate}} + +
{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION-HINT' | translate}}
- +
{{formGroup.get('description').getError('backendError').message}} @@ -36,19 +40,21 @@
-
{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.TAGS' | translate}}
+
- +
-
{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION-TEMPLATE' | translate}}*
+
- +
{{descriptionTemplate.label}}, diff --git a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss index 3541ff08c..821ca234c 100644 --- a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss +++ b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss @@ -4,9 +4,9 @@ text-align: left; font-weight: 400; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 1; - margin: 3rem 0rem 3rem 0rem; + margin: 2rem 0rem 1.5rem 0rem; } .heading { @@ -14,7 +14,7 @@ font-weight: 700; font-size: 18px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; margin-top: 1.625rem; margin-bottom: 0.625rem; @@ -25,7 +25,7 @@ font-weight: 400; font-size: 16px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; margin-bottom: 2.125rem; } @@ -44,13 +44,13 @@ .input-btn { border: none; - color: #aaaaaa; + color: var(--gray); background-color: #ffffff00; cursor: pointer; } .input-btn :hover { - color: var(--primary-color-3) !important; + color: var(--sys-primary) !important; } .plan-link { diff --git a/frontend/src/app/ui/description/editor/description-base-fields-editor/dialog-description-template/deprecated-description-template-dialog.component.html b/frontend/src/app/ui/description/editor/description-base-fields-editor/dialog-description-template/deprecated-description-template-dialog.component.html index f2838029b..19c18cb62 100644 --- a/frontend/src/app/ui/description/editor/description-base-fields-editor/dialog-description-template/deprecated-description-template-dialog.component.html +++ b/frontend/src/app/ui/description/editor/description-base-fields-editor/dialog-description-template/deprecated-description-template-dialog.component.html @@ -4,7 +4,7 @@

{{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.TITLE' | translate}} {{ data.label }}

- +
@@ -18,9 +18,9 @@
- +
- +
diff --git a/frontend/src/app/ui/description/editor/description-editor.component.html b/frontend/src/app/ui/description/editor/description-editor.component.html index 686a06144..c5036fab5 100644 --- a/frontend/src/app/ui/description/editor/description-editor.component.html +++ b/frontend/src/app/ui/description/editor/description-editor.component.html @@ -6,7 +6,7 @@
-
+
@if(!viewOnly){
{{'DESCRIPTION-EDITOR.TITLE-ADD-DESCRIPTION' | translate}}
{{'DESCRIPTION-EDITOR.TITLE-EDIT-DESCRIPTION' | translate}}
@@ -16,11 +16,11 @@ }@else {
{{'DESCRIPTION-EDITOR.TITLE-PREVIEW-DESCRIPTION' | translate}}
} -
-
{{'DESCRIPTION-EDITOR.TO-PLAN' | translate}}
-
: {{ item?.plan?.label }}
+
+
{{'DESCRIPTION-EDITOR.TO-PLAN' | translate}}
+
: {{ item?.plan?.label }}
- + open_in_new
@@ -30,7 +30,7 @@
- @@ -46,21 +46,24 @@
-
- @@ -68,9 +71,9 @@ - + - +
@@ -97,7 +100,7 @@
{{'DESCRIPTION-EDITOR.TOC.TITLE' | translate}}
-
+
@@ -128,11 +131,11 @@
-
+
- @@ -140,12 +143,12 @@
@if(reachedLast){ @if(!isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly) { - } }@else{ - @@ -161,7 +164,7 @@
-
+
{{numberingText}} {{fieldSet.title}}
-
@@ -29,6 +29,6 @@
-
-
+
+
diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.scss b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.scss index 9c226f284..f6d1fa6c8 100644 --- a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.scss +++ b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/dialog-editor/form-fieldset-editor-dialog.component.scss @@ -3,6 +3,6 @@ font-weight: 700; font-size: 18px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; } 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/description-form/components/form-field-set/field-set-title/field-set-title.component.html b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html index e728ead21..e104347ad 100644 --- a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html +++ b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html @@ -1,10 +1,10 @@
-
+
+ info
-
-
+
+
@@ -24,8 +24,8 @@
{{'DESCRIPTION-EDITOR.ACTIONS.VIEW-MORE' | translate}}
-
-
+
+ {{'DESCRIPTION-EDITOR.ACTIONS.VIEW-LESS' | translate}} diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss index c7e9e0fb0..68f73391f 100644 --- a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss +++ b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.scss @@ -4,7 +4,7 @@ font-weight: 700; font-size: 18px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; margin-top: 1.625rem; margin-bottom: 0.625rem; @@ -21,9 +21,9 @@ h6 { font-weight: 400; } -.more { +.more { //TODO mchouliara link text-decoration: underline; - color: var(--secondary-color); + color: var(--sys-tertiary); cursor: pointer; font-size: 1rem; font-weight: 400; @@ -47,12 +47,12 @@ h6 { @keyframes titleFocus { 0% { - color: #212121; + color: var(--dark-gray); } 50% { - color: var(--primary-color); + color: var(--sys-primary); } 100% { - color: #212121; + color: var(--dark-gray); } } diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html index 405362dc6..50af6b2cf 100644 --- a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html +++ b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html @@ -6,8 +6,10 @@
-
@@ -19,9 +21,9 @@
-
{{field.label}}
+
- +
@@ -35,12 +37,12 @@
{{'GENERAL.VALIDATION.MULTIPLICITY.MIN' | translate: { min: fieldSet.multiplicity.min} }} {{'GENERAL.VALIDATION,MULTIPLICITY.MAX' | translate: { max: fieldSet.multiplicity.max} }} - - - {{fieldSet.multiplicity.placeholder}} - {{'DESCRIPTION-EDITOR.ACTIONS.MULTIPLICITY-ADD-ONE-FIELD' | translate}} + {{fieldSet?.multiplicity?.placeholder}} + {{'DESCRIPTION-EDITOR.ACTIONS.MULTIPLICITY-ADD-ONE-FIELD' | translate}}
@@ -95,7 +97,7 @@
- +
diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.scss b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.scss index 6f27b7a56..0e8970da0 100644 --- a/frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.scss +++ b/frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.scss @@ -17,3 +17,8 @@ overflow: hidden; text-overflow: ellipsis; } + +.add-more-button { + font-size: 1rem; + color: var(--dark-gray); +} \ No newline at end of file diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html b/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html index 27b6faf16..47743f0b4 100644 --- a/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html +++ b/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html @@ -1,17 +1,17 @@
-
{{fieldSet.title}}
+ info -
{{fieldSet.description}} -
-
+ {{fieldSet.description}} + + {{fieldSet.extendedDescription}} -
+
{{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} {{'GENERAL.VALIDATION.URL.MESSAGE' | translate}} @@ -21,10 +21,10 @@
- + - +
@@ -32,7 +32,7 @@ {{ field.data.label }} - + {{opt.label}} {{propertiesFormGroup?.get(field.id).get('textListValue').getError('backendError').message}} @@ -42,7 +42,7 @@ {{ field.data.label }} - + {{opt.label}} @@ -57,7 +57,7 @@ {{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('textListValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -67,7 +67,7 @@ {{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -81,7 +81,7 @@ {{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('textListValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -91,7 +91,7 @@ {{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -101,7 +101,7 @@
- + {{field.data.label}} {{propertiesFormGroup?.get(field.id).get('booleanValue').getError('backendError').message}}
@@ -109,7 +109,7 @@
{{ field.data.label }}{{ isRequired ? '*' : ''}} - + @@ -120,8 +120,15 @@
- +
@@ -133,7 +140,7 @@
- + {{ fileNameDisplay }} @@ -152,9 +159,9 @@
- - {{ "TYPES.DESCRIPTION-TEMPLATE-COMBO-BOX-TYPE.ACTIONS.YES" | translate }} - {{ "TYPES.DESCRIPTION-TEMPLATE-COMBO-BOX-TYPE.ACTIONS.NO" | translate }} + + {{ "TYPES.DESCRIPTION-TEMPLATE-COMBO-BOX-TYPE.ACTIONS.YES" | translate }} + {{ "TYPES.DESCRIPTION-TEMPLATE-COMBO-BOX-TYPE.ACTIONS.NO" | translate }} {{propertiesFormGroup?.get(field.id).get('booleanValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -163,8 +170,8 @@
- - {{option.label}} + + {{option.label}} {{propertiesFormGroup?.get(field.id).get('textValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -174,7 +181,7 @@ {{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('dateValue').getError('backendError').message}} @@ -189,7 +196,7 @@
{{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -210,7 +217,7 @@
{{ field.data.label }} - + {{propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -225,12 +232,12 @@ {{'GENERAL.VALIDATION.REQUIRED' | translate}}
- + {{propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}}
- + {{validationIcon}}
diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts b/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts index 0b0c01d27..9ddbc435a 100644 --- a/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts +++ b/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.ts @@ -45,7 +45,7 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn @Input() isChild: Boolean = false; @Input() detectChangesObservable: Observable; - + @Input() path: string; visible: boolean = true; descriptionTemplateFieldTypeEnum = DescriptionTemplateFieldType; diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.scss b/frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.scss index f258b4d1c..b20541c3b 100644 --- a/frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.scss +++ b/frontend/src/app/ui/description/editor/description-form/components/form-section/form-section.component.scss @@ -7,7 +7,7 @@ .addOneFieldButton { margin-top: -15px; margin-left: -11px; - color: var(--primary-color); + color: var(--sys-primary); } .panel-title, .panel-desc { @@ -15,7 +15,7 @@ font-weight: 700; font-size: 1rem; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; margin-top: 1.625rem; margin-bottom: 0.625rem; diff --git a/frontend/src/app/ui/description/editor/description-form/description-form.component.scss b/frontend/src/app/ui/description/editor/description-form/description-form.component.scss index 4d0a47df9..5741291c5 100644 --- a/frontend/src/app/ui/description/editor/description-form/description-form.component.scss +++ b/frontend/src/app/ui/description/editor/description-form/description-form.component.scss @@ -13,9 +13,9 @@ text-align: left; font-weight: 400; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 1; - margin: 3rem 0rem 3rem 0rem; + margin: 2rem 0rem 2rem 0rem; } .dynamic-form-editor { diff --git a/frontend/src/app/ui/description/editor/description-form/description-form.module.ts b/frontend/src/app/ui/description/editor/description-form/description-form.module.ts index 73847140d..533eae1ed 100644 --- a/frontend/src/app/ui/description/editor/description-form/description-form.module.ts +++ b/frontend/src/app/ui/description/editor/description-form/description-form.module.ts @@ -16,6 +16,7 @@ import { DescriptionFormComponent } from './description-form.component'; import { FormAnnotationService } from '../../../annotations/annotation-dialog-component/form-annotation.service'; import { TagsFieldModule } from '@app/ui/tag/tags-field/tags-field.module'; import { DescriptionFormService } from './components/services/description-form.service'; +import { FormFocusDirective } from '@common/forms/form-focus.directive'; @NgModule({ @@ -28,7 +29,8 @@ import { DescriptionFormService } from './components/services/description-form.s FormattingModule, ReferenceFieldModule, AnnotationDialogModule, - TagsFieldModule + TagsFieldModule, + FormFocusDirective, ], declarations: [ DescriptionFormComponent, diff --git a/frontend/src/app/ui/description/editor/description-form/visibility-rules/visibility-rules.service.ts b/frontend/src/app/ui/description/editor/description-form/visibility-rules/visibility-rules.service.ts index 519ba968e..a4d38c0f8 100644 --- a/frontend/src/app/ui/description/editor/description-form/visibility-rules/visibility-rules.service.ts +++ b/frontend/src/app/ui/description/editor/description-form/visibility-rules/visibility-rules.service.ts @@ -649,7 +649,7 @@ export class VisibilityRulesService { for (let j = 0; j < propertyDefinitionFieldSet.items.length; j++) { const definitionFieldSetItem = propertyDefinitionFieldSet.items[j]; const fieldKey = this.buildVisibilityKey(fieldSetEntity.id, definitionFieldSetItem.ordinal); - const isCurrentHidden = !this._isVisibleMap[fieldKey] ?? false; + const isCurrentHidden = !this._isVisibleMap[fieldKey]; isHidden = isHidden && isCurrentHidden; } } diff --git a/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.html b/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.html index 666a761a2..b5039cb6c 100644 --- a/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.html +++ b/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.html @@ -1,7 +1,7 @@ 
{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}} 
- - + +
{{value}}% 0% diff --git a/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss b/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss index ef44b4af5..7945047be 100644 --- a/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss +++ b/frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss @@ -1,5 +1,5 @@ .percentage { - color: #212121; + color: var(--dark-gray); opacity: 0.7; font-weight: 400; font-size: 0.875rem; @@ -14,7 +14,7 @@ //Progress bar ::ng-deep .mdc-linear-progress__bar-inner { - --mdc-linear-progress-active-indicator-color: var(--primary-color) !important; + --mdc-linear-progress-active-indicator-color: var(--sys-primary) !important; border-radius: 20px !important; } diff --git a/frontend/src/app/ui/description/editor/new-description/new-description.component.html b/frontend/src/app/ui/description/editor/new-description/new-description.component.html index 7e4478535..877576574 100644 --- a/frontend/src/app/ui/description/editor/new-description/new-description.component.html +++ b/frontend/src/app/ui/description/editor/new-description/new-description.component.html @@ -2,13 +2,13 @@
{{'NEW-DESCRIPTION-DIALOG.TITLE' | translate}} -
- +
@@ -38,9 +38,9 @@
- +
{{'NEW-DESCRIPTION-DIALOG.OR' | translate}}
- +
@@ -66,13 +66,13 @@
- +
- +
diff --git a/frontend/src/app/ui/description/editor/new-description/new-description.component.scss b/frontend/src/app/ui/description/editor/new-description/new-description.component.scss index f1065963f..6f94bf1d3 100644 --- a/frontend/src/app/ui/description/editor/new-description/new-description.component.scss +++ b/frontend/src/app/ui/description/editor/new-description/new-description.component.scss @@ -3,8 +3,8 @@ display: flex; width: 100%; height: 60px; - background-color: var(--secondary-color); - color: #212121; + background-color: var(--sys-tertiary); + color: var(--sys-on-tertiary); font-size: 1.25rem; } 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/editor/table-of-contents/table-of-contents-internal/table-of-contents-internal.scss b/frontend/src/app/ui/description/editor/table-of-contents/table-of-contents-internal/table-of-contents-internal.scss index c9978f6a4..0d99002fc 100644 --- a/frontend/src/app/ui/description/editor/table-of-contents/table-of-contents-internal/table-of-contents-internal.scss +++ b/frontend/src/app/ui/description/editor/table-of-contents/table-of-contents-internal/table-of-contents-internal.scss @@ -24,7 +24,7 @@ } .selected { - color: #212121; + color: var(--dark-gray); font-weight: 700 !important; opacity: 1 !important; } diff --git a/frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.scss b/frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.scss index eec33bd38..85082fd8b 100644 --- a/frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.scss +++ b/frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.scss @@ -35,7 +35,7 @@ span { text-decoration: none; display: block; overflow: hidden; - color: #21212194; + color: var(--dark-gray)94; font-weight: 400; span { @@ -48,7 +48,7 @@ span { } .selected { - color: #212121 !important; + color: var(--dark-gray) !important; font-weight: 700 !important; opacity: 1 !important; } diff --git a/frontend/src/app/ui/description/listing/description-listing.component.html b/frontend/src/app/ui/description/listing/description-listing.component.html index ecdb10ac0..9e55d07d8 100644 --- a/frontend/src/app/ui/description/listing/description-listing.component.html +++ b/frontend/src/app/ui/description/listing/description-listing.component.html @@ -6,10 +6,10 @@

{{'DESCRIPTION-LISTING.TEXT-INFO' | translate}} {{'DESCRIPTION-LISTING.LINK-PUBLIC-DESCRIPTIONS' | translate}} {{'DESCRIPTION-LISTING.TEXT-INFO-REST' | translate}}

{{'DESCRIPTION-LISTING.TEXT-INFO-PAR' | translate}}

- - + {{('ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate) ?? 'dashboard pop up image' }}
@@ -18,14 +18,14 @@
-
-
@@ -48,8 +48,8 @@
-
- @@ -81,7 +81,7 @@ >
- +
diff --git a/frontend/src/app/ui/description/listing/description-listing.component.scss b/frontend/src/app/ui/description/listing/description-listing.component.scss index 434916e35..545936284 100644 --- a/frontend/src/app/ui/description/listing/description-listing.component.scss +++ b/frontend/src/app/ui/description/listing/description-listing.component.scss @@ -2,7 +2,7 @@ text-align: left; font-size: 1.25rem; font-weight: 300; - color: #212121; + color: var(--dark-gray); padding: 0px; } @@ -43,7 +43,7 @@ text-align: left; font: Bold 20px/30px Roboto; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); padding-left: 40px; padding-right: 55px; opacity: 1; @@ -53,7 +53,7 @@ text-align: left; font-weight: 300; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); padding-left: 40px; padding-top: 36px; padding-right: 55px; @@ -62,7 +62,7 @@ .clear-icon { cursor: pointer; - color: #212121; + color: var(--dark-gray); padding: 0.4rem; } @@ -78,25 +78,27 @@ font-weight: 300; font-size: 1rem; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); } .filter-btn { - position: fixed; - right: 0px; - z-index: 100; - width: 37px; - - .filter-icon { - width: 1.5rem; - height: 1.5rem; - font-size: 1.5rem; - } + position: fixed; + right: 0px; + z-index: 100; + width: 37px; + transition: 0.3s ease-in-out; + -webkit-transition: 0.3s ease-in-out; + -moz-transition: 0.3s ease-in-out; + .filter-icon { + width: 1.5rem; + height: 1.5rem; + font-size: 1.5rem; + } } .filter-btn button { color: white; - background-color: var(--primary-color-2); + background-color: var(--sys-primary); width: 37px; height: 45px; } @@ -105,8 +107,11 @@ font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02rem; - color: #2d72d6; + color: var(--link-color); cursor: pointer; + &:hover{ + color: var(--sys-primary); + } } .search-form { @@ -115,7 +120,7 @@ } .search-form mat-icon { - color: var(--primary-color); + color: var(--sys-primary); } .empty-list { @@ -123,12 +128,12 @@ font-weight: 300; font-size: 1.25rem; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.6; } .pointer:hover { - color: var(--primary-color-3); + color: var(--sys-primary); } ::ng-deep .search-form .mat-form-field-wrapper { @@ -187,7 +192,7 @@ } ::ng-deep .mat-radio-button .mat-radio-outer-circle { - border: 1px solid #aaaaaa; + border: 1px solid var(--light-gray); } ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { diff --git a/frontend/src/app/ui/description/listing/description-listing.component.ts b/frontend/src/app/ui/description/listing/description-listing.component.ts index 418636a40..79c790e8f 100644 --- a/frontend/src/app/ui/description/listing/description-listing.component.ts +++ b/frontend/src/app/ui/description/listing/description-listing.component.ts @@ -331,7 +331,8 @@ export class DescriptionListingComponent extends BaseListingComponent { if (result) { diff --git a/frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.scss b/frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.scss index 6ad258085..ffc035659 100644 --- a/frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.scss +++ b/frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.scss @@ -1,6 +1,6 @@ .clear-icon { cursor: pointer; - color: #212121; + color: var(--dark-gray); padding: 0.4rem; } 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 f0c43d11e..f5a4dc3f9 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,9 +1,10 @@ -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 { IsActive } from '@app/core/common/enum/is-active.enum'; +import { DescriptionLookup, ReferencesWithType } from '@app/core/query/description.lookup'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; 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 { IsActive } from '@app/core/common/enum/is-active.enum'; @Component({ selector: 'description-filter-dialog-component', @@ -12,7 +13,7 @@ import { IsActive } from '@app/core/common/enum/is-active.enum'; }) export class DescriptionFilterDialogComponent implements OnInit { - + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); @ViewChild(DescriptionFilterComponent, { static: true }) filter: DescriptionFilterComponent; filters: DescriptionListingFilters; @@ -20,13 +21,14 @@ export class DescriptionFilterDialogComponent implements OnInit { constructor( public dialogRef: MatDialogRef, private analyticsService: AnalyticsService, - @Inject(MAT_DIALOG_DATA) public data: { - isPublic: boolean, + protected fontService: FontAccessibilityService, + @Inject(MAT_DIALOG_DATA) public data: { + isPublic: boolean, hasSelectedTenant: boolean, lookup: DescriptionLookup, referencesWithTypeItems: ReferencesWithType[], } - ) { + ) { this.filters = this._buildDescriptionFilters(data?.lookup, data?.referencesWithTypeItems); } @@ -49,9 +51,9 @@ export class DescriptionFilterDialogComponent implements OnInit { private _buildDescriptionFilters(lookup: DescriptionLookup, references: ReferencesWithType[]): DescriptionListingFilters { return { statusId: lookup.statusIds?.[0] ?? null, - isActive: lookup.isActive?.[0] == IsActive.Active ?? false, + isActive: lookup.isActive?.[0] == IsActive.Active, viewOnlyTenant: lookup.tenantSubQuery?.codes?.length > 0, - role: lookup.planSubQuery?.planUserSubQuery?.userRoles?.[0] ?? null, + role: lookup.planSubQuery?.planUserSubQuery?.userRoles?.[0] ?? null, descriptionTemplates: lookup.descriptionTemplateSubQuery?.ids ?? [], associatedPlanIds: lookup.planSubQuery?.ids ?? [], tags: lookup.descriptionTagSubQuery?.tagIds ?? [], diff --git a/frontend/src/app/ui/description/listing/filtering/description-filter.component.html b/frontend/src/app/ui/description/listing/filtering/description-filter.component.html index 9ef003838..6f9430bf8 100644 --- a/frontend/src/app/ui/description/listing/filtering/description-filter.component.html +++ b/frontend/src/app/ui/description/listing/filtering/description-filter.component.html @@ -67,7 +67,7 @@
{{'DESCRIPTION-LISTING.FILTERS.ROLE.NAME' | translate }}
- + {{ 'DESCRIPTION-LISTING.FILTERS.ROLE.TYPES.ANY' | translate }} {{ 'DESCRIPTION-LISTING.FILTERS.ROLE.TYPES.OWNER' | translate }} {{ 'DESCRIPTION-LISTING.FILTERS.ROLE.TYPES.VIEWER' | translate }} @@ -119,23 +119,21 @@
- - {{'DESCRIPTION-LISTING.ACTIONS.ADD-REFERENCE-TYPE' | translate}} - +
- -
diff --git a/frontend/src/app/ui/description/listing/filtering/description-filter.component.scss b/frontend/src/app/ui/description/listing/filtering/description-filter.component.scss index 6fc9b7456..ec80a7f36 100644 --- a/frontend/src/app/ui/description/listing/filtering/description-filter.component.scss +++ b/frontend/src/app/ui/description/listing/filtering/description-filter.component.scss @@ -27,7 +27,7 @@ .filters-title { width: 93px; - color: var(--primary-color-2); + color: var(--sys-primary); background-color: white; padding: 0px 20px; margin-top: -10px; diff --git a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.html b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.html index 72d06f2ca..ff23845ff 100644 --- a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.html +++ b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.html @@ -1,6 +1,6 @@
- -
+ +
{{'DESCRIPTION-LISTING.DESCRIPTION' | translate}}
@@ -28,7 +28,7 @@ . {{'DESCRIPTION-LISTING.GRANT' | translate}}: {{referenceService.getReferencesForTypesFirstSafe(description?.plan?.planReferences, [this.referenceTypeService.getGrantReferenceType()])?.reference?.label}}
-
+
{{'DESCRIPTION-LISTING.PART-OF' | translate}}
{{'DESCRIPTION-LISTING.PLAN' | translate}}
@@ -36,10 +36,35 @@
- open_in_new{{'DESCRIPTION-LISTING.ACTIONS.EXPORT' | translate}} - group_add{{'DESCRIPTION-LISTING.ACTIONS.INVITE-SHORT' | translate}} - file_copy{{'DESCRIPTION-LISTING.ACTIONS.COPY-DESCRIPTION' | translate}} - delete{{ 'DESCRIPTION-LISTING.ACTIONS.DELETE' | translate }} +
+ open_in_new + {{'DESCRIPTION-LISTING.ACTIONS.EXPORT' | translate}} +
+
+ group_add{{'DESCRIPTION-LISTING.ACTIONS.INVITE-SHORT' | translate}} +
+
+ file_copy{{'DESCRIPTION-LISTING.ACTIONS.COPY-DESCRIPTION' | translate}} +
+
+ delete{{ 'DESCRIPTION-LISTING.ACTIONS.DELETE' | translate }} +
}@else { @if(!isPublicView){ - } }
-
-
@@ -78,7 +78,7 @@
{{ this.description.plan.label }}
-
+
launch
@@ -159,12 +159,12 @@
-
-
-

{{ 'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate }}

+
+

{{ 'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate }}

@@ -192,7 +192,7 @@ @@ -215,7 +215,7 @@ />
diff --git a/frontend/src/app/ui/description/overview/description-overview.component.scss b/frontend/src/app/ui/description/overview/description-overview.component.scss index c6f04e8c9..a6a822b0a 100644 --- a/frontend/src/app/ui/description/overview/description-overview.component.scss +++ b/frontend/src/app/ui/description/overview/description-overview.component.scss @@ -6,14 +6,14 @@ // ********ICONS******** .back-icon { - opacity: 0.4; + opacity: 0.6; } .mat-mini-fab { width: 2.5em; height: 2.5em; - color: #212121; - background-color: var(--secondary-color); + color: var(--dark-gray); + background-color: var(--sys-tertiary); } .mat-mini-fab-icon, @@ -23,12 +23,12 @@ .actions-btn:hover, .finalize-btn:hover { - background-color: var(--primary-color); - color: #ffffff; + background-color: var(--sys-primary); + color: var(--sys-on-primary); } .status-icon { - color: #a7a7a7; + color: var(--gray); } .check-icon { @@ -61,7 +61,7 @@ .plan-btn { width: 35em; min-height: 2.3em; - background-color: var(--primary-color); + background-color: var(--sys-primary); border-radius: 4px; flex-direction: row; justify-content: space-between; @@ -70,25 +70,23 @@ .plan-btn, .plan-btn > mat-icon { - color: #ffffff; + color: var(--sys-on-primary); } .show-more-btn { width: 31.6em; padding: 0 1em; background-color: #ffffff00; - color: var(--primary-color); + color: var(--sys-primary); font-weight: 700; } .frame-btn { - border: 1px solid #212121; + border: 1px solid var(--dark-gray); color: black; background: #ffffff; } -.finalize-btn { -} .frame-btn, .finalize-btn { @@ -108,7 +106,8 @@ height: 2.9em; background: #ffffff; box-shadow: 0px 3px 6px #1e202029; - border: 2px solid #212121; + color: #1b1b1b; + border: 2px solid #1b1b1b; border-radius: 30px; } @@ -124,7 +123,8 @@ .description-logo { width: 6em; height: 2.6em; - background: var(--secondary-color); + background: var(--sys-tertiary); + color: var(--sys-on-tertiary); border-radius: 4px; font-size: 0.875em; } @@ -139,7 +139,7 @@ .label-txt, .label2-txt { - color: #848484; + color: #4b4a4a; font-weight: 400; } @@ -153,10 +153,13 @@ } .researcher { - font-size: 0.875em; - color: var(--primary-color); - padding-right: 0.5em; - align-self: center; + color: unset; + font-size: 0.875em; + &:hover { + color: var(--sys-primary); + } + padding-right: 0.5em; + align-self: center; } .header { @@ -167,20 +170,19 @@ .description-label, .header { font-size: 1.25em; - color: #212121; + color: #000000; } .desc-txt { width: 48.25em; font-size: 1em; - color: #212121; + color: #4b4a4a; margin-bottom: 1.875em; } .plan-btn-label { margin-right: 1em; - color: #ffffff; - opacity: 0.8; + color: var(--sys-on-primary); text-align: left; min-width: 0; text-wrap: nowrap; @@ -191,7 +193,7 @@ .doi-label { font-size: 1em; - color: #212121; + color: var(--dark-gray); opacity: 0.6; margin-bottom: 0.3em; } @@ -272,10 +274,15 @@ justify-content: center; } .deleted-item { - color: #cf1407; + color: var(--sys-error); } -.logo { - margin-right: 16px; - max-width: 24px; - max-height: 24px; + +.description-overview { + padding: 0 3rem; +} + +@media (max-width: 500px) { + .description-overview{ + padding: 0; + } } \ No newline at end of file diff --git a/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.html b/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.html index b5ad57253..bffa10c87 100644 --- a/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.html +++ b/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.html @@ -4,7 +4,7 @@ {{'DASHBOARD.SELECT-PLAN' | translate}}
- +
@@ -22,10 +22,10 @@
- +
- +
diff --git a/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss b/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss index db6cbd662..0f8a1deb2 100644 --- a/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss +++ b/frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.scss @@ -3,7 +3,7 @@ } .form-container { - width: 33rem; + width: min(100%, 33rem); min-height: 14rem; padding: 2.0rem; } @@ -29,7 +29,7 @@ font-weight: 500; font-size: 1.25rem; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 1; } @@ -47,7 +47,7 @@ text-align: left; text-decoration: underline; letter-spacing: 0px; - color: var(--primary-color); + color: var(--sys-primary); cursor: pointer; } 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 65c941288..24bb489e6 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,13 +1,18 @@ -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'; import { IsActive } from '@app/core/common/enum/is-active.enum'; +import { PlanStatusEnum } from '@app/core/common/enum/plan-status'; import { PlanBlueprintDefinitionSection } from '@app/core/model/plan-blueprint/plan-blueprint'; import { Plan } from '@app/core/model/plan/plan'; +import { Tenant } from '@app/core/model/tenant/tenant'; import { DateTimeFormatPipe } from '@app/core/pipes/date-time-format.pipe'; import { PlanDescriptionTemplateLookup } from '@app/core/query/plan-description-template.lookup'; +import { PlanStatusLookup } from '@app/core/query/plan-status.lookup'; import { PlanLookup } from '@app/core/query/plan.lookup'; +import { TenantLookup } from '@app/core/query/tenant.lookup'; +import { AuthService } from '@app/core/services/auth/auth.service'; +import { FontAccessibilityService } from '@app/core/services/font-accessibility.service'; import { PlanService } from '@app/core/services/plan/plan.service'; import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration'; import { BaseComponent } from '@common/base/base.component'; @@ -16,10 +21,6 @@ import { Guid } from '@common/types/guid'; import { TranslateService } from '@ngx-translate/core'; import { map } from 'rxjs/operators'; 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 { PlanStatusLookup } from '@app/core/query/plan-status.lookup'; @Component({ selector: 'app-start-new-description-dialog', @@ -27,7 +28,7 @@ import { PlanStatusLookup } from '@app/core/query/plan-status.lookup'; 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[] = []; @@ -50,7 +51,7 @@ export class StartNewDescriptionDialogComponent extends BaseComponent { lookup.isActive = [IsActive.Active]; const planStatusLookup: PlanStatusLookup = new PlanStatusLookup(); planStatusLookup.internalStatuses = [PlanStatusEnum.Draft]; - lookup.planStatusSubQuery = planStatusLookup; + lookup.planStatusSubQuery = planStatusLookup; lookup.project = { fields: [ nameof(x => x.id), @@ -86,6 +87,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/external-fetcher/external-fetcher-source.component.html b/frontend/src/app/ui/external-fetcher/external-fetcher-source.component.html index df93127eb..53210a21a 100644 --- a/frontend/src/app/ui/external-fetcher/external-fetcher-source.component.html +++ b/frontend/src/app/ui/external-fetcher/external-fetcher-source.component.html @@ -1,5 +1,5 @@ -
+
{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.KEY' | translate}} @@ -223,7 +223,7 @@

{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.QUERIES' | translate}}

- +
@@ -265,7 +265,7 @@

{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.CASES' | translate}}

- +
@@ -393,7 +393,7 @@
- +
{{'EXTERNAL-FETCHER-SOURCE-EDITOR.STATIC-ITEMS-REQUIRED' | translate}} {{formGroup.get('items').getError('backendError').message}} diff --git a/frontend/src/app/ui/faq/dialog/faq-dialog.component.html b/frontend/src/app/ui/faq/dialog/faq-dialog.component.html index 05893af52..28bd26c4d 100644 --- a/frontend/src/app/ui/faq/dialog/faq-dialog.component.html +++ b/frontend/src/app/ui/faq/dialog/faq-dialog.component.html @@ -4,13 +4,13 @@ {{'FAQ.TITLE' | translate}}
- +
-
+
diff --git a/frontend/src/app/ui/faq/dialog/faq-dialog.component.scss b/frontend/src/app/ui/faq/dialog/faq-dialog.component.scss index a176c4f54..0402f3395 100644 --- a/frontend/src/app/ui/faq/dialog/faq-dialog.component.scss +++ b/frontend/src/app/ui/faq/dialog/faq-dialog.component.scss @@ -14,7 +14,7 @@ .clear-icon { cursor: pointer; - color: #212121; + color: var(--dark-gray); padding: 0.4rem; width: auto !important; height: auto !important; 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/faq/faq-content/faq-content.component.html b/frontend/src/app/ui/faq/faq-content/faq-content.component.html index 30a3fd8fe..959704525 100644 --- a/frontend/src/app/ui/faq/faq-content/faq-content.component.html +++ b/frontend/src/app/ui/faq/faq-content/faq-content.component.html @@ -1,7 +1,7 @@
- +
\ No newline at end of file diff --git a/frontend/src/app/ui/glossary/dialog/glossary-dialog.component.html b/frontend/src/app/ui/glossary/dialog/glossary-dialog.component.html index 05640d396..6d7600ee3 100644 --- a/frontend/src/app/ui/glossary/dialog/glossary-dialog.component.html +++ b/frontend/src/app/ui/glossary/dialog/glossary-dialog.component.html @@ -4,7 +4,7 @@ {{'GLOSSARY.TITLE' | translate}}
-
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/glossary/glossary-content/glossary-content.component.html b/frontend/src/app/ui/glossary/glossary-content/glossary-content.component.html index 0d965191d..80f8d7da8 100644 --- a/frontend/src/app/ui/glossary/glossary-content/glossary-content.component.html +++ b/frontend/src/app/ui/glossary/glossary-content/glossary-content.component.html @@ -1,5 +1,5 @@
- +
\ No newline at end of file diff --git a/frontend/src/app/ui/language/dialog/language-dialog.component.html b/frontend/src/app/ui/language/dialog/language-dialog.component.html index a3151ffa9..7562c977d 100644 --- a/frontend/src/app/ui/language/dialog/language-dialog.component.html +++ b/frontend/src/app/ui/language/dialog/language-dialog.component.html @@ -4,7 +4,7 @@ {{'LANGUAGE.TITLE' | translate}}
-
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/language/language-content/language.component.html b/frontend/src/app/ui/language/language-content/language.component.html index 2515aebc1..5fc0c1778 100644 --- a/frontend/src/app/ui/language/language-content/language.component.html +++ b/frontend/src/app/ui/language/language-content/language.component.html @@ -1,5 +1,5 @@ -
- {{'GENERAL.LANGUAGES.' + lang | translate}} -
+ @for(lang of languages; track lang){ + {{'GENERAL.LANGUAGES.' + lang | translate}} + } diff --git a/frontend/src/app/ui/language/language-content/language.component.scss b/frontend/src/app/ui/language/language-content/language.component.scss index aea7dec4f..2cddc2c4d 100644 --- a/frontend/src/app/ui/language/language-content/language.component.scss +++ b/frontend/src/app/ui/language/language-content/language.component.scss @@ -1,9 +1,4 @@ ::ng-deep.lang-menu { border-color: transparent; padding: 8px; -} - -::ng-deep.lang-button { - padding-top: 15px; - padding-bottom: 15px; -} +} \ No newline at end of file diff --git a/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html b/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html index bf6fa1a36..21b2ebd15 100644 --- a/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html +++ b/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html @@ -7,7 +7,7 @@
- + {{ item.title | translate:item.translateParams }} diff --git a/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.scss b/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.scss index 71c6a0de2..0950f80d2 100644 --- a/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.scss +++ b/frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.scss @@ -4,7 +4,7 @@ } .text-black{ - color: #000; + color: #000000; } .mat-icon{ diff --git a/frontend/src/app/ui/misc/theme-helper.ts b/frontend/src/app/ui/misc/theme-helper.ts new file mode 100644 index 000000000..ed9aa9881 --- /dev/null +++ b/frontend/src/app/ui/misc/theme-helper.ts @@ -0,0 +1,110 @@ +import { argbFromHex, themeFromSourceColor, applyTheme } from "@material/material-color-utilities"; + +const FONT_VARS = [ + "--sys-body-large-size", + "--sys-body-medium-size", + "--sys-body-small-size", + "--sys-display-large-size", + "--sys-display-medium-size", + "--sys-display-small-size", + "--sys-headline-large-size", + "--sys-headline-medium-size", + "--sys-headline-small-size", + "--sys-label-large-size", + "--sys-label-medium-size", + "--sys-label-small-size", + "--sys-title-large-size", + "--sys-title-medium-size", + "--sys-title-small-size", + "--mat-standard-button-toggle-label-text-size" +] + +export function generateDynamicTheme(primaryColor: string) { + const fallbackPrimary = '#18488F'; + + let argbPrimary; + try { + argbPrimary = argbFromHex(primaryColor); + } catch (error) { + // falling to default color if it's invalid color + argbPrimary = argbFromHex(fallbackPrimary); + } + + const targetElement = document.documentElement; + + // Get the theme from a hex color + const theme = themeFromSourceColor(argbPrimary); + + // Apply theme to root element + applyTheme(theme, { + target: targetElement, + dark: false, + brightnessSuffix: true, + }); + + const styles = targetElement.style; + + for (const key in styles) { + if (Object.prototype.hasOwnProperty.call(styles, key)) { + const propName = styles[key]; + if (propName.indexOf('--md-sys') === 0) { + const sysPropName = '--sys' + propName.replace('--md-sys-color', ''); + targetElement.style.setProperty( + sysPropName, + targetElement.style.getPropertyValue(propName) + ); + } + } + } +} + +export function overrideCss(input: string){ + let json; + const targetElement = document.documentElement; + try { + input = input.replace(/(\r\n|\n|\r)/gm, ""); + json = JSON.parse(input); + } catch(error) { + return; + } + for (const [key, rgba] of Object.entries(json)) { + if (key.indexOf('--md-sys') === 0) { + const sysPropName = '--sys' + key.replace('--md-sys-color', ''); + targetElement.style.setProperty( + sysPropName, + rgba.toString() + ); + } + targetElement.style.setProperty( + key, + rgba.toString() + ); + } +} + +export function toggleFontSize(large: boolean){ + if(large){ + FONT_VARS.forEach((key) => { + const prevValue = getComputedStyle(document.body).getPropertyValue(key); + const newValue = Number(prevValue.replace('rem', '')) * 1.125; + document.documentElement.style.setProperty( + key, + `${newValue}rem` + ) + }) + } else { + FONT_VARS.forEach((key) => { + const prevValue = getComputedStyle(document.body).getPropertyValue(key); + const newValue = Number(prevValue.replace('rem', '')) / 1.125; + document.documentElement.style.setProperty( + key, + `${newValue}rem` + ) + }) + } +} + +interface ColorData { + tone: number; + hex: string; +} \ No newline at end of file diff --git a/frontend/src/app/ui/navbar/navbar.component.html b/frontend/src/app/ui/navbar/navbar.component.html index 7371d2d5d..0805401ee 100644 --- a/frontend/src/app/ui/navbar/navbar.component.html +++ b/frontend/src/app/ui/navbar/navbar.component.html @@ -1,110 +1,121 @@ -
- +
diff --git a/frontend/src/app/ui/navbar/navbar.component.scss b/frontend/src/app/ui/navbar/navbar.component.scss index e021e42db..f22bc5974 100644 --- a/frontend/src/app/ui/navbar/navbar.component.scss +++ b/frontend/src/app/ui/navbar/navbar.component.scss @@ -1,5 +1,23 @@ $mat-card-header-size: 40px !default; +@media (max-width: 991px) { + .navbar-item-sm { + display: block; + } + .navbar-item-lg { + display: none; + } +} + +@media (min-width: 991px) { + .navbar-item-sm { + display: none; + } + .navbar-item-lg { + display: block; + } +} + .my-mat-card-avatar { height: $mat-card-header-size; width: $mat-card-header-size; @@ -23,16 +41,22 @@ $mat-card-header-size: 40px !default; display: flex; background: #ffffff 0% 0% no-repeat padding-box; + #navigation { + color: #555; + } + box-shadow: 0px 0px 6px #00000029; opacity: 1; top: 0; left: 0; right: 0; + +// padding: 0.625rem 0; } .logo { margin-left: 5px; - height: 100%; + height: min(100%, 60px); } .extra-logo { @@ -40,40 +64,40 @@ $mat-card-header-size: 40px !default; height: 100%; } .logo-image { - height: 100%; + height: min(100%, 60px); } .extra-logo-image { - height: 100%; + height: min(100%, 60px); } .faq-title { text-align: left; - font: Bold 15px/18px "Roboto"; - letter-spacing: 0px; - color: #000000; + font-weight: bold; opacity: 1; - cursor: pointer; - text-decoration: none !important; } +.faq-title, .lang { + color: var(--mdc-icon-button-icon-color) !important; + &:hover { + color: var(--sys-primary) + } +} .faq-title:hover, .lang:hover { - color: var(--primary-color-2) !important; + color: var(--sys-primary) !important; } -.lang { - opacity: 0.8; -} .hamburger { - display: inline-block; - cursor: pointer; - padding: 0.6rem; - margin-left: 0.8rem; - margin-right: 0.8rem; + all:unset; + display: inline-block; + cursor: pointer; + padding: 0.6rem; + margin-left: 0.8rem; + margin-right: 0.8rem; } -.hamburger:hover { +.hamburger:hover, .hamburger:focus { background-color: #ececec !important; border-radius: 50%; } @@ -162,8 +186,9 @@ $mat-card-header-size: 40px !default; height: auto !important; } -::ng-deep .nav-mat-menu { - .mat-mdc-menu-content { +::ng-deep .mat-mdc-menu-content { padding: 0 !important; - } + .mat-button-toggle-group { + border: none !important; + } } diff --git a/frontend/src/app/ui/navbar/navbar.component.ts b/frontend/src/app/ui/navbar/navbar.component.ts index 66298f510..7b5b8ee09 100644 --- a/frontend/src/app/ui/navbar/navbar.component.ts +++ b/frontend/src/app/ui/navbar/navbar.component.ts @@ -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; @@ -296,7 +300,8 @@ export class NavbarComponent extends BaseComponent implements OnInit { disableClose: false, data: { isDialog: true - } + }, + maxWidth: '600px' }); } } @@ -329,4 +334,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(); + } + } diff --git a/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.html b/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.html index d33a4a52b..db0e8e534 100644 --- a/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.html +++ b/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.html @@ -1,17 +1,9 @@ -
+ + + + + + -
-
- -
- {{'USER-DIALOG.USER-PROFILE-SETTINGS' | translate}} - {{'USER-PROFILE.ASSOCIATED-PLANS' | translate}} -
- - -
- diff --git a/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.scss b/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.scss index 0a04ff11c..c9fc4e056 100644 --- a/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.scss +++ b/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.scss @@ -1,56 +1,13 @@ -$mat-card-header-size: 40px !default; -.my-mat-card-avatar { - height: $mat-card-header-size; - width: $mat-card-header-size; - border-radius: 50%; - flex-shrink: 0; -} .top-divider { border-top-style: none !important; } -.profile, .logout { - padding-left: 1.1875rem; - font-weight: 300; - color: #212121; - height: 1.875rem; - line-height: 1.875rem; +.profile-settings { + color: var(--dark-gray); text-align: left; } -.email-btn { - cursor: auto; - display: inline-block; - line-height: 2.25rem; - font-size: 0.875rem; -} - -.dropdown-top { - width: 0rem; - border-bottom: 0.625rem solid #FFFFFF; - border-left: 0.625rem solid transparent; - border-right: 0.625rem solid transparent; - position: fixed; - transform: translate(11.85rem, -0.6rem); -} - -.dropdown-options { - background-color: #FFFFFF; - min-width: 10rem; - width: 13.625rem; -} - -.dropdown-options a:hover { - background-color: #ececec8c !important; -} - -.dropdown-options a:hover { - background-color: #ddd; -} - -.check-icon { - color: var(--primary-color); - transform: scale(0.7); -} - +.mdc-list-item__--sys-on-primary{ + font-size: unset; +} \ No newline at end of file diff --git a/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.ts b/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.ts index dfe5988ca..500a3e854 100644 --- a/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.ts +++ b/frontend/src/app/ui/navbar/user-dialog/user-dialog.component.ts @@ -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; @@ -23,6 +24,7 @@ export class UserDialogComponent implements OnInit, OnDestroy { private router: Router, public dialogRef: MatDialogRef, private routerUtils: RouterUtilsService, + protected fontService: FontAccessibilityService, @Inject(MAT_DIALOG_DATA) public data: any ) { } diff --git a/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.html b/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.html index be4d6192b..7e1ce7184 100644 --- a/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.html +++ b/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.html @@ -2,13 +2,15 @@
{{'PLAN-CLONE-DIALOG.TITLE' | translate}}
- +
-
{{'PLAN-CLONE-DIALOG.FIELDS.LABEL' | translate}}*
+
{{'PLAN-CLONE-DIALOG.FIELDS.LABEL' | translate}} +  *{{'GENERAL.VALIDATION.REQUIRED' | translate }} +
@@ -54,7 +56,7 @@
-
-
+
+
\ No newline at end of file diff --git a/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.scss b/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.scss index 3d5d641b7..2e857a87c 100644 --- a/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.scss +++ b/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.scss @@ -6,7 +6,7 @@ font-weight: 700; font-size: 18px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; margin-bottom: 0.625rem; } @@ -16,7 +16,7 @@ font-weight: 700; font-size: 20px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; margin-bottom: 0.625rem; } diff --git a/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.ts b/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.ts index f16f0b92c..c777d1825 100644 --- a/frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.ts +++ b/frontend/src/app/ui/plan/clone-dialog/plan-clone-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, 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(); diff --git a/frontend/src/app/ui/plan/editor/plan-deposit-dropdown/plan-deposit-dropdown.component.html b/frontend/src/app/ui/plan/editor/plan-deposit-dropdown/plan-deposit-dropdown.component.html index 6aa51cfe0..42434c05c 100644 --- a/frontend/src/app/ui/plan/editor/plan-deposit-dropdown/plan-deposit-dropdown.component.html +++ b/frontend/src/app/ui/plan/editor/plan-deposit-dropdown/plan-deposit-dropdown.component.html @@ -1,4 +1,4 @@ -
+
+
@@ -12,7 +12,7 @@
- + {{formGroup.get('users').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}}
diff --git a/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.scss b/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.scss index 17143f8ea..7238bd021 100644 --- a/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.scss +++ b/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.scss @@ -23,7 +23,7 @@ .hint { font-size: 0.875rem; font-weight: 500; - color: #212121; + color: var(--dark-gray); opacity: 0.81; } @@ -45,7 +45,7 @@ .select-role { width: 50% !important; font-size: 14px; - color: #848484; + color: var(--gray); height: min-content; margin-right: 2rem; border: none; diff --git a/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.ts b/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.ts index 8eba91a99..513832b6a 100644 --- a/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.ts +++ b/frontend/src/app/ui/plan/invitation/dialog/plan-invitation-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 { 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(); diff --git a/frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.scss b/frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.scss index 818303e45..f506d1215 100644 --- a/frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.scss +++ b/frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.scss @@ -1,6 +1,6 @@ .clear-icon { cursor: pointer; - color: #212121; + color: var(--dark-gray); padding: 0.4rem; } diff --git a/frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.ts b/frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.ts index 5b778cf15..08c2a5208 100644 --- a/frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.ts +++ b/frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.ts @@ -1,11 +1,11 @@ -import { Inject, Component, ViewChild, OnInit } from '@angular/core'; +import { Component, computed, HostBinding, Inject, OnInit, ViewChild } 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'; +import { AnalyticsService } from '@app/core/services/matomo/analytics-service'; import { IsActive } from '@notification-service/core/enum/is-active.enum'; +import { PlanFilterComponent, PlanListingFilters } from '../plan-filter.component'; @Component({ selector: 'plan-filter-dialog-component', @@ -14,35 +14,36 @@ import { IsActive } from '@notification-service/core/enum/is-active.enum'; }) export class PlanFilterDialogComponent implements OnInit { - + @HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())(); @ViewChild(PlanFilterComponent, { static: true }) filter: PlanFilterComponent; - filters: PlanListingFilters; + filters: PlanListingFilters; constructor( public dialogRef: MatDialogRef, private analyticsService: AnalyticsService, - @Inject(MAT_DIALOG_DATA) public data: { + protected fontService: FontAccessibilityService, + @Inject(MAT_DIALOG_DATA) public data: { isPublic: boolean, hasSelectedTenant: boolean, - lookup: PlanLookup, + lookup: PlanLookup, referencesWithTypeItems: ReferencesWithType[], }) { - this.filters = this._buildPlanFilters(data?.lookup, data?.referencesWithTypeItems) - } + this.filters = this._buildPlanFilters(data?.lookup, data?.referencesWithTypeItems) + } ngOnInit() { this.analyticsService.trackPageView(AnalyticsService.PlanFilterDialog); } - private _buildPlanFilters(lookup: PlanLookup, references: ReferencesWithType[]): PlanListingFilters { + private _buildPlanFilters(lookup: PlanLookup, references: ReferencesWithType[]): PlanListingFilters { return { statusId: lookup.statusIds?.[0] ?? null, - isActive: lookup.isActive?.[0] == IsActive.Active ?? false, + isActive: lookup.isActive?.[0] == IsActive.Active, viewOnlyTenant: lookup.tenantSubQuery?.codes?.length > 0, descriptionTemplates: lookup.planDescriptionTemplateSubQuery?.descriptionTemplateGroupIds ? lookup.planDescriptionTemplateSubQuery?.descriptionTemplateGroupIds : [], planBlueprints: lookup.planBlueprintSubQuery?.ids ?? [], role: lookup.planUserSubQuery?.userRoles?.[0] ?? null, - references: references ?? [] + references: references ?? [] } } diff --git a/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.html b/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.html index 7b92c0daf..a77f9dd8c 100644 --- a/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.html +++ b/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.html @@ -56,7 +56,7 @@
{{ 'PLAN-LISTING.FILTERS.ROLE.NAME' | translate }}
- + {{ 'PLAN-LISTING.FILTERS.ROLE.TYPE.ANY' | translate }} {{ 'PLAN-LISTING.FILTERS.ROLE.TYPE.OWNER' | translate }} {{ 'PLAN-LISTING.FILTERS.ROLE.TYPE.VIEWER' | translate }} @@ -97,22 +97,20 @@
- - - {{'DESCRIPTION-LISTING.ACTIONS.ADD-REFERENCE-TYPE' | translate}} -
- -
diff --git a/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.scss b/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.scss index 5e7049968..fd6419002 100644 --- a/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.scss +++ b/frontend/src/app/ui/plan/listing/filtering/plan-filter.component.scss @@ -39,12 +39,11 @@ font-weight: 400; } -.filters { -} + .filters-title { width: 93px; - color: var(--primary-color-2); + color: var(--sys-primary); background-color: white; padding: 0px 20px; margin-top: -10px; @@ -57,17 +56,9 @@ } ::ng-deep .mat-checkbox .mat-checkbox-frame { - border: 1px solid #aaaaaa; + border: 1px solid var(--light-gray); } -::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, -.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, -.mat-accent .mat-pseudo-checkbox-checked, -.mat-accent .mat-pseudo-checkbox-indeterminate, -.mat-pseudo-checkbox-checked, -.mat-pseudo-checkbox-indeterminate { - background-color: var(--primary-color-3); -} ::ng-deep .mat-ripple-element { background-color: #2e74b649 !important; @@ -79,7 +70,7 @@ } ::ng-deep .mat-radio-button .mat-radio-outer-circle { - border: 1px solid #aaaaaa; + border: 1px solid var(--light-gray); } ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { diff --git a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.html b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.html index 170be805f..c2110e1b8 100644 --- a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.html +++ b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.html @@ -1,6 +1,10 @@
- -
+ +
{{ 'PLAN-LISTING.PLAN' | translate }}
@@ -33,7 +37,7 @@ . {{ 'PLAN-LISTING.GRANT' | translate }}: {{referenceService.getReferencesForTypesFirstSafe(plan?.planReferences, [this.referenceTypeService.getGrantReferenceType()])?.reference?.label}}
-
{{'PLAN-LISTING.CONTAINED-DESCRIPTIONS' | translate}}: ({{ plan.descriptions?.length }}) +
{{'PLAN-LISTING.CONTAINED-DESCRIPTIONS' | translate}}: ({{ plan.descriptions?.length ?? 0 }})
@@ -44,14 +48,28 @@ {{'GENERAL.ACTIONS.SHOW-MORE' | translate}}
- open_in_new{{'PLAN-LISTING.ACTIONS.EXPORT' | translate}} - add{{'PLAN-LISTING.ACTIONS.ADD-DESCRIPTION-SHORT' | translate}} - group_add{{'PLAN-LISTING.ACTIONS.INVITE-SHORT' | translate}} - filter_none{{'PLAN-LISTING.ACTIONS.CLONE' | translate}} - library_books{{'PLAN-LISTING.ACTIONS.VIEW-VERSION' | translate}} +
+ open_in_new{{'PLAN-LISTING.ACTIONS.EXPORT' | translate}} +
+
+ add{{'PLAN-LISTING.ACTIONS.ADD-DESCRIPTION-SHORT' | translate}} +
+
+ group_add{{'PLAN-LISTING.ACTIONS.INVITE-SHORT' | translate}} +
+
+ filter_none{{'PLAN-LISTING.ACTIONS.CLONE' | translate}} +
+
+ library_books{{'PLAN-LISTING.ACTIONS.VIEW-VERSION' | translate}} +
- delete{{ 'PLAN-LISTING.ACTIONS.DELETE' | translate }} - more_horiz +
+ delete{{ 'PLAN-LISTING.ACTIONS.DELETE' | translate }} +
+
+ more_horiz +
-
-
@@ -38,8 +38,8 @@
-
- @@ -67,7 +67,7 @@ >
- +
diff --git a/frontend/src/app/ui/plan/listing/plan-listing.component.scss b/frontend/src/app/ui/plan/listing/plan-listing.component.scss index be7d785fa..9e4bfd3d7 100644 --- a/frontend/src/app/ui/plan/listing/plan-listing.component.scss +++ b/frontend/src/app/ui/plan/listing/plan-listing.component.scss @@ -51,20 +51,20 @@ padding: 0px; } -.more-horiz { +.more-horiz { //TODO mchouliara link font-size: 28px; - color: #aaaaaa; + color: var(--gray); } .more-icon :hover { - color: var(--primary-color-3); + color: var(--sys-primary); } .header-title { text-align: left; font-size: 1.25rem; font-weight: 300; - color: #212121; + color: var(--dark-gray); padding: 0px; } @@ -105,7 +105,7 @@ text-align: left; font: Bold 20px/30px Roboto; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); padding-left: 40px; padding-right: 55px; opacity: 1; @@ -115,7 +115,7 @@ text-align: left; font-weight: 300; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); padding-left: 40px; padding-top: 38px; padding-right: 55px; @@ -124,7 +124,7 @@ .clear-icon { cursor: pointer; - color: #212121; + color: var(--dark-gray); padding: 0.4rem; } @@ -140,7 +140,7 @@ font-weight: 300; font-size: 1rem; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); } .filter-btn { @@ -148,19 +148,24 @@ right: 0px; z-index: 100; width: 37px; - transition: right 0.3s; - transition-timing-function: ease-in-out; + transition: 0.3s ease-in-out; + -webkit-transition: 0.3s ease-in-out; + -moz-transition: 0.3s ease-in-out; .filter-icon { width: 1.5rem; height: 1.5rem; font-size: 1.5rem; } + + &.right { + right: 446px; + } } .filter-btn button { color: white; - background-color: var(--primary-color-2); + background-color: var(--sys-primary); width: 37px; height: 45px; } @@ -171,7 +176,7 @@ } .search-form mat-icon { - color: var(--primary-color); + color: var(--sys-primary); } .empty-list { @@ -179,7 +184,7 @@ font-weight: 300; font-size: 1.25rem; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.6; } @@ -190,7 +195,7 @@ .pointer:hover, .zenodo-link:hover { - color: var(--primary-color-3); + color: var(--sys-primary); } ::ng-deep .search-form .mat-form-field-wrapper { @@ -211,7 +216,10 @@ font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02rem; - color: #2d72d6; + color: var(--link-color); + &:hover { + color: var(--sys-primary) + } cursor: pointer; } @@ -224,6 +232,9 @@ font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02rem; - color: #2d72d6; + color: var(--link-color); + &:hover { + color: var(--sys-primary) + } cursor: pointer; } \ No newline at end of file diff --git a/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.html b/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.html index fdbe308b7..e90b23923 100644 --- a/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.html +++ b/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.html @@ -2,13 +2,15 @@
{{'PLAN-NEW-VERSION-DIALOG.TITLE' | translate}}
- +
-
{{'PLAN-NEW-VERSION-DIALOG.FIELDS.LABEL' | translate}}*
+
{{'PLAN-NEW-VERSION-DIALOG.FIELDS.LABEL' | translate}} +  *{{'GENERAL.VALIDATION.REQUIRED' | translate }} +
@@ -32,7 +34,9 @@
-
{{'PLAN-NEW-VERSION-DIALOG.FIELDS.BLUEPRINT' | translate}}*
+
{{'PLAN-NEW-VERSION-DIALOG.FIELDS.BLUEPRINT' | translate}} +  *{{'GENERAL.VALIDATION.REQUIRED' | translate }} +
@@ -87,7 +91,7 @@
-
-
+
+
\ No newline at end of file diff --git a/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.scss b/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.scss index f5e76a72e..77e50cbb2 100644 --- a/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.scss +++ b/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.scss @@ -6,7 +6,7 @@ font-weight: 700; font-size: 18px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; margin-bottom: 0.625rem; } @@ -16,7 +16,7 @@ font-weight: 700; font-size: 20px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; margin-bottom: 0.625rem; } diff --git a/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.ts b/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.ts index 0aa9a84b2..487e531f7 100644 --- a/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.ts +++ b/frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.ts @@ -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, 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(); diff --git a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html index 842f32995..338eee967 100644 --- a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html +++ b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html @@ -2,37 +2,33 @@
- +
-

{{'START-NEW-PLAN-DIALOG.TITLE' | translate}}

+
{{'START-NEW-PLAN-DIALOG.TITLE' | translate}}

{{'START-NEW-PLAN-DIALOG.MESSAGE' | translate}}

-
-
-
- -
+
+
+
-
-

{{ 'START-NEW-PLAN-DIALOG.OR' | translate }}

+
+ {{ 'START-NEW-PLAN-DIALOG.OR' | translate }}
-
-
- -
+
+
diff --git a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss index e9fa54f0d..9f6fe0ca6 100644 --- a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss +++ b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss @@ -4,14 +4,14 @@ } .start-new-plan-dialog-wrapper { - width: 33.0rem; + width: min(100%, 33rem); min-height: 14rem; padding: 0.28rem 0.34rem 0.875rem 0.625rem; } .form-container { - width: 33rem; - min-height: 14rem; + width: min(100%, 33rem); + min-height: min(100%, 14rem); padding: 0.28rem 0.34rem 0.875rem 0.625rem; } @@ -20,7 +20,7 @@ } .content { - margin: 2.17rem 2.304rem 1.1875rem 3.065rem; + margin: 0.5rem 2rem; } .title, @@ -44,13 +44,13 @@ .upload-btn { background-color: white; - color: #212121; + color: var(--dark-gray); font-weight: bold; - border: 2px solid #212121; + border: 2px solid var(--dark-gray); } .actions { - width: 26.667rem; + width: min(100%, 26.667rem); display: flex; flex-direction: row; justify-content: space-between; @@ -58,5 +58,5 @@ } .warn { - color: #f16868; + color: var(--sys-error); } diff --git a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.ts b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.ts index 5e6a10fa5..2a8dcebe9 100644 --- a/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.ts +++ b/frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.ts @@ -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; @@ -61,7 +64,7 @@ export class StartNewPlanDialogComponent extends BaseComponent { uploadFile(event) { const dialogRef = this.dialog.open(PlanUploadDialogComponent, { - width: '528px', + maxWidth: '528px', data: { fileList: FileList, success: Boolean, diff --git a/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.html b/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.html index 351e06117..5725fb624 100644 --- a/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.html +++ b/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.html @@ -4,7 +4,7 @@

{{'PLAN-UPLOAD.TITLE' | translate}}

-
@@ -81,10 +81,10 @@
- +
- +
diff --git a/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.ts b/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.ts index 5d4486961..5500e3426 100644 --- a/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.ts +++ b/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.ts @@ -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, - 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(); diff --git a/frontend/src/app/ui/plan/overview/plan-overview.component.html b/frontend/src/app/ui/plan/overview/plan-overview.component.html index afbdc1bef..b3e204aef 100644 --- a/frontend/src/app/ui/plan/overview/plan-overview.component.html +++ b/frontend/src/app/ui/plan/overview/plan-overview.component.html @@ -1,4 +1,4 @@ -
+
@@ -7,7 +7,7 @@
- chevron_left + chevron_left {{'PLAN-OVERVIEW.ACTIONS.BACK' | translate}}
@@ -60,24 +60,24 @@
@if(isActive && canEditPlan(plan) && !lockStatus){ - } @else { @if(!isPublicView){ - } }
-
-
@@ -162,10 +162,10 @@ {{selectedModel.doi}}
- -
-

{{ 'PLAN-OVERVIEW.ACTIONS.EXPORT' | translate }}

+

{{ 'PLAN-OVERVIEW.ACTIONS.EXPORT' | translate }}

-
-
+
+
@@ -276,7 +276,7 @@ />
diff --git a/frontend/src/app/ui/plan/overview/plan-overview.component.scss b/frontend/src/app/ui/plan/overview/plan-overview.component.scss index 07a23a910..8bd068f3e 100644 --- a/frontend/src/app/ui/plan/overview/plan-overview.component.scss +++ b/frontend/src/app/ui/plan/overview/plan-overview.component.scss @@ -8,14 +8,14 @@ // ********ICONS******** .back-icon { - opacity: 0.4; + opacity: 0.6; } .mat-mdc-mini-fab { width: 2.5em; height: 2.5em; - background-color: var(--primary-color); - color: white; + // background-color: var(--sys-primary); + // color: var(--sys-on-primary); } .mat-mini-fab-icon, @@ -45,10 +45,10 @@ .description-btn { padding: 0 1.1em; - background-color: var(--secondary-color); + background-color: var(--sys-tertiary); border-radius: 4px; justify-content: space-between; - color: #212121; + color: var(--sys-on-tertiary); } .description-finalized-btn { @@ -56,26 +56,22 @@ background-color: #b2f772; border-radius: 4px; justify-content: space-between; - color: #212121; + color: #1b1b1b; } .show-more-btn { width: 31.6em; padding: 0 1em; background-color: #ffffff00; - color: var(--primary-color); + color: var(--sys-primary); font-weight: 700; } .frame-btn { - border: 1px solid #212121; + border: 1px solid #1b1b1b; color: black; } -.finalize-btn { - border: 1px solid var(--primary-color); - color: var(--primary-color); -} .grant-title { width: 130px; @@ -93,12 +89,18 @@ box-shadow: 0px 2px 6px #00000029; } +.finalize-btn { + border: 1px solid var(--sys-primary); + color: var(--sys-primary); +} + .invite-btn { width: 9.4em; height: 2.9em; background: #ffffff; box-shadow: 0px 3px 6px #1e202029; - border: 2px solid #212121; + border: 2px solid #1b1b1b; + color: #1b1b1b; border-radius: 30px; } // ********TEXT******** @@ -107,10 +109,10 @@ padding: 10px; min-width: 4.8em; height: 2.6em; - background: var(--primary-color); + background: var(--sys-primary); border-radius: 4px; font-size: 0.875em; - color: #ffffff; + color: var(--sys-on-primary); } .label-txt { @@ -123,7 +125,7 @@ .label-txt, .label2-txt { - color: #848484; + color: var(--dark-gray); font-weight: 400; } @@ -136,8 +138,11 @@ } .researcher { + color: unset; font-size: 0.875em; - color: var(--primary-color); + &:hover { + color: var(--sys-primary); + } padding-right: 0.5em; align-self: center; } @@ -150,12 +155,12 @@ .plan-label, .header { font-size: 1.25em; - color: #212121; + color: #1b1b1b; } .desc-txt { font-size: 1em; - color: #212121; + color: #1b1b1b; margin-bottom: 1.875em; } @@ -165,7 +170,7 @@ white-space: nowrap; text-overflow: ellipsis; letter-spacing: 0px; - color: #212121; + color: #1b1b1b; opacity: 0.8; font-style: normal; padding-bottom: 0.5rem; @@ -215,7 +220,7 @@ } .finalize-txt { - color: var(--primary-color); + color: var(--sys-primary); } .frame-txt, @@ -255,11 +260,11 @@ } .add-description-btn { - color: #212121 !important; + color: #1b1b1b !important; } .add-description-btn:hover { - color: var(--primary-color) !important; + color: var(--sys-primary) !important; } .show-more-btn { @@ -268,7 +273,7 @@ } ::ng-deep .mat-select-value { - color: #848484 !important; + color: var(--gray) !important; } .versions-select { @@ -276,12 +281,12 @@ } .select-repo { - border-bottom: 1px solid #212121; + border-bottom: 1px solid #1b1b1b; } .plan-btn { min-height: 2.3em; - background-color: var(--secondary-color); + background-color: var(--sys-tertiary); border-radius: 4px; flex-direction: row; justify-content: space-between; @@ -298,11 +303,15 @@ } .deleted-item { - color: #cf1407; + color: var(--sys-error); } -.logo { - margin-right: 16px; - max-width: 24px; - max-height: 24px; +.plan-overview { + padding: 0 3rem; +} + +@media (max-width: 500px) { + .plan-overview{ + padding: 0; + } } \ No newline at end of file diff --git a/frontend/src/app/ui/plan/overview/plan-overview.component.ts b/frontend/src/app/ui/plan/overview/plan-overview.component.ts index c99bc1055..7a261abff 100644 --- a/frontend/src/app/ui/plan/overview/plan-overview.component.ts +++ b/frontend/src/app/ui/plan/overview/plan-overview.component.ts @@ -562,7 +562,8 @@ export class PlanOverviewComponent extends BaseComponent implements OnInit { planId: rowId, planName: rowName, blueprint: this.selectedBlueprint - } + }, + minWidth: '80vw' }); } diff --git a/frontend/src/app/ui/plan/plan-authors/plan-authors.component.html b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.html index fa1ef6b0b..b0a9d7533 100644 --- a/frontend/src/app/ui/plan/plan-authors/plan-authors.component.html +++ b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.html @@ -19,7 +19,7 @@
@if(removeUser() && planUser.role != planUserRoleEnum.Owner){ - } diff --git a/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss index 9219f11e1..e99ab2a84 100644 --- a/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss +++ b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss @@ -10,11 +10,11 @@ border-radius: 3px; } .author-role { - color: #a8a8a8; + color: var(--gray); } .author-label { - color: #212121; + color: var(--dark-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -28,7 +28,7 @@ } .delete-btn:hover { - background-color: var(--primary-color); - color: #ffffff; + background-color: var(--sys-primary); + color: var(--sys-on-primary); } } diff --git a/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.html b/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.html index d7b704839..a0b966902 100644 --- a/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.html +++ b/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.html @@ -17,7 +17,7 @@
-
-
+
+
\ No newline at end of file diff --git a/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.scss b/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.scss index 8b524a42c..a3fbe861c 100644 --- a/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.scss +++ b/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.scss @@ -8,7 +8,7 @@ } .cancel { - background-color: #aaaaaa; + background-color: var(--light-gray); color: #ffffff; } diff --git a/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.ts b/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.ts index d164634bb..d8ec85937 100644 --- a/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.ts +++ b/frontend/src/app/ui/plan/plan-contact-prefill-dialog/plan-contact-prefill-dialog.component.ts @@ -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, - @Inject(MAT_DIALOG_DATA) public data: any + @Inject(MAT_DIALOG_DATA) public data: any, + protected fontService: FontAccessibilityService, ) { super(); this.label = data.label; diff --git a/frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.html b/frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.html index 22488d7fe..2efb38bb4 100644 --- a/frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.html +++ b/frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.html @@ -1,7 +1,7 @@
{{'PLAN-DELETE-DIALOG.WARNING' | translate}}
- +
@@ -16,7 +16,7 @@
-
-
+
+
diff --git a/frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.ts b/frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.ts index 748c95cda..a1218acf5 100644 --- a/frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.ts +++ b/frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.ts @@ -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, - @Inject(MAT_DIALOG_DATA) public data: any + @Inject(MAT_DIALOG_DATA) public data: any, + protected fontService: FontAccessibilityService, ) { this.descriptions = data.descriptions; } diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.html b/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.html index 68f919097..0852c4ad4 100644 --- a/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.html +++ b/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.html @@ -1,5 +1,5 @@ 
{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}}
- +
{{value}}%
diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.scss b/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.scss index 2a203a6dd..f2f036255 100644 --- a/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.scss +++ b/frontend/src/app/ui/plan/plan-editor-blueprint/form-progress-indication/plan-form-progress-indication.component.scss @@ -1,5 +1,5 @@ .percentage { - color: #212121; + color: var(--dark-gray); opacity: 0.7; font-weight: 400; font-size: 0.875rem; @@ -15,7 +15,7 @@ //Progress bar ::ng-deep .mdc-linear-progress__bar-inner { - --mdc-linear-progress-active-indicator-color: var(--primary-color) !important; + --mdc-linear-progress-active-indicator-color: var(--sys-primary) !important; border-radius: 20px !important; } diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html index f426a34fb..d306a6733 100644 --- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html +++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html @@ -9,16 +9,15 @@
{{(canEdit ? 'PLAN-EDITOR.TITLE-EDIT' : 'PLAN-EDITOR.TITLE-PREVIEW') | translate}}
{{ formGroup.get('label').value }} ({{'PLAN-EDITOR.UNSAVED-CHANGES' | translate}})
-
- +
- @@ -26,23 +25,26 @@
-
- -
- +
- +
@@ -77,34 +79,37 @@
-
{{'PLAN-EDITOR.FIELDS.TITLE' | translate}} *
+
{{'PLAN-EDITOR.FIELDS.TITLE' | translate}} - + {{formGroup.get('label').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}}
-
{{'PLAN-EDITOR.FIELDS.DESCRIPTION' | translate}}
+
- +
-
{{'PLAN-EDITOR.FIELDS.BLUEPRINT' | translate}} *
+ {{'PLAN-EDITOR.FIELDS.BLUEPRINT' | translate}} - + + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} +
-
@@ -114,7 +119,7 @@

{{'PLAN-EDITOR.ACTIONS.OR-CONTINUE-WITH' | translate}}

- +
@@ -138,7 +143,8 @@
  • {{section.label}} info -
    • + +
    1. @@ -171,13 +177,13 @@
      -
      - @@ -202,9 +208,15 @@
      -
      {{i + 1}}.{{j + 1}} {{enumUtils.toPlanBlueprintSystemFieldTypeString(field.systemFieldType)}}*
      -
      {{i + 1}}.{{j + 1}} {{field.referenceType.name}}*
      -
      {{i + 1}}.{{j + 1}} {{field.label}}*
      + + +
      @if(!isNew){
      -
      } @@ -226,7 +238,7 @@
      - + {{formGroup.get('label').getError('backendError').message}} @@ -234,12 +246,12 @@
      - +
      - + {{ lang.name }} @@ -262,7 +274,7 @@
      {{'PLAN-EDITOR.FIELDS.FIRST-NAME' | translate}} - + {{contact.get('firstName').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -286,13 +298,13 @@
      -
      -
      @@ -300,14 +312,14 @@ {{'GENERAL.VALIDATION.REQUIRED' | translate}}
      -
      - + {{enumUtils.toPlanAccessTypeString(planAccessType)}} @@ -324,17 +336,17 @@
      - + - +
      {{field.label}} - + {{formGroup.get('properties').get('planBlueprintValues').get(field.id).get('fieldValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -345,7 +357,7 @@
      {{field.label}} - + {{formGroup.get('properties').get('planBlueprintValues').get(field.id).get('dateValue').getError('backendError').message}} @@ -355,7 +367,7 @@
      {{field.label}} - + {{formGroup.get('properties').get('planBlueprintValues').get(field.id).get('numberValue').getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -370,10 +382,10 @@
      -
      {{'PLAN-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}
      + {{'PLAN-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}} - + {{formGroup.get('descriptionTemplates').get(section.id).getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss index 3fde2879a..6f1fc551b 100644 --- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss +++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss @@ -20,8 +20,8 @@ .editor-header { height: 64px; - background: var(--unnamed-color-var(--primary-color)) 0% 0% no-repeat padding-box; - background: var(--primary-color) 0% 0% no-repeat padding-box; + min-height: fit-content; + background: var(--sys-primary) 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #00000029; padding: 0.6rem; margin: 30px 0px 0px 0px; @@ -44,13 +44,12 @@ text-align: left; font-weight: 400; font-size: 14px; - color: #ffffff; - opacity: 0.75; + color: var(--sys-on-primary); } .subtitle { text-align: left; - color: #ffffff; + color: var(--sys-on-primary); font-weight: 700; font-size: 16px; opacity: 1; @@ -59,32 +58,8 @@ white-space: nowrap; } -.save-btn, .plan-export-btn { - background: #ffffff 0% 0% no-repeat padding-box !important; - border-radius: 30px; - opacity: 1; - width: auto; - min-width: 110px; - height: 40px; - display: flex; - justify-content: center; - align-items: center; - color: var(--primary-color); - &:disabled { - color: #CBCBCB; - } -} - -.plan-stepper { - position: fixed; - display: flex; - flex-direction: column; - height: calc(100vh - 190px); - overflow-y: auto; -} - .stepper-options { - height: calc(100vh - 550px); + height: calc(100vh - 29rem); overflow-y: auto; } @@ -93,17 +68,16 @@ font-weight: 300; font-size: 20px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.6; - margin: 2.875rem 0rem 2.875rem 0rem; - padding-left: 1rem; + margin: 2.5rem 0rem 1.5rem 1rem; } .stepper-list li { text-align: left; font-weight: 400; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); padding: 0.3rem 0.1rem; opacity: 0.6; cursor: pointer; @@ -116,21 +90,21 @@ } .stepper-list .active { - color: #212121; + color: var(--dark-gray); font-weight: 700; opacity: 1; } .stepper-list .active-description { - color: #212121; + color: var(--dark-gray); font-weight: 700; opacity: 1; .label { width: 100%; height: 27px; line-height: 27px; - background-color: var(--secondary-color); - color: #5d5d5d; + background-color: var(--sys-tertiary); + color: var(--sys-on-tertiary); border-radius: 4px; font-weight: 400; font-size: 14px; @@ -155,11 +129,11 @@ mat-icon.size-16 { } .remove-description { - color: #f16868; + color: var(--draft-color); } .remove-description:hover { - color: #f16868; + color: var(--draft-color); } .stepper-actions { @@ -181,16 +155,16 @@ mat-icon.size-16 { } .previous { - color: #212121; + color: var(--dark-gray); background: #f5f5f5 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #1e202029; - border: 2px solid #212121; + border: 2px solid var(--dark-gray); font-weight: 500; cursor: pointer; } .add-description-btn { - background: var(--secondary-color) 0% 0% no-repeat padding-box; + background: var(--sys-tertiary) 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #1e202029; font-weight: 500; white-space: normal; @@ -229,20 +203,20 @@ mat-icon.size-16 { text-align: left; font-weight: 400; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 1; margin: 1rem 0rem 3rem 0rem; } .changes { font-weight: 400; - color: #ffffff; + color: var(--sys-on-primary); } .discard-btn { background: transparent; - border: 1px solid #ffffff; - color: white; + border: 1px solid var(--sys-on-primary); + color: var(--sys-on-primary); width: 110px; display: flex; justify-content: center; @@ -254,7 +228,7 @@ a { } a:hover { - color: var(--primary-color-3); + color: var(--sys-primary); } .main-content { @@ -277,9 +251,9 @@ a:hover { text-align: left; font-weight: 400; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 1; - margin: 3rem 0rem 3rem 0rem; + margin: 2rem 0rem 1.5rem 0rem; } .link-icon { @@ -298,7 +272,7 @@ a:hover { font-weight: 700; font-size: 18px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; margin-top: 1.625rem; margin-bottom: 0.625rem; @@ -309,7 +283,7 @@ a:hover { font-weight: 400; font-size: 16px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; margin-bottom: 2.125rem; } @@ -328,7 +302,7 @@ a:hover { font-size: 0.875rem; font-weight: 400; padding: 0rem 0.5rem 0rem 0rem; - color: #212121; + color: var(--dark-gray); } .disabled-toggle { @@ -341,13 +315,13 @@ a:hover { .input-btn { border: none; - color: #aaaaaa; + color: var(--gray); background-color: #ffffff00; cursor: pointer; } .input-btn :hover { - color: var(--primary-color-3) !important; + color: var(--sys-primary) !important; } } @@ -356,7 +330,7 @@ a:hover { font-weight: 700; font-size: 18px; letter-spacing: 0px; - color: #212121; + color: var(--dark-gray); opacity: 0.81; margin-top: 1.625rem; margin-bottom: 0.625rem; @@ -373,9 +347,23 @@ a:hover { .drag-handle { cursor: move; - color: var(--primary-color); + color: var(--sys-primary); } .drag-handle-disabled { cursor: auto; color: rgba(0, 0, 0, 0.38);; -} \ No newline at end of file +} + +@media screen and (max-width: 430px){ + .form-container{ + margin-top: 9rem; + } + #editor-form { + height: fit-content !important; + } +} + + +.mat-mdc-raised-button:not(:disabled) { + color: #000000; +} diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.ts b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.ts index a9d6bf212..76fb1c920 100644 --- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.ts +++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.ts @@ -225,14 +225,17 @@ export class PlanEditorComponent extends BaseEditor imple super.ngOnInit(); if (this.isNew === false && this.step === 0) this.nextStep(); - this.formAnnotationService.init(this.item.id, AnnotationEntityType.Plan); - this.formAnnotationService.getAnnotationCountObservable().pipe(takeUntil(this._destroyed)).subscribe((annotationsPerAnchor: Map) => { - this.annotationsPerAnchor = annotationsPerAnchor; - }); - this.formAnnotationService.getOpenAnnotationSubjectObservable().pipe(takeUntil(this._destroyed)).subscribe((anchorId: string) => { - if (anchorId && anchorId == this.item.id?.toString()) this.showAnnotations(anchorId); - }); + if(this.item?.id){ + this.formAnnotationService.init(this.item.id, AnnotationEntityType.Plan); + this.formAnnotationService.getAnnotationCountObservable().pipe(takeUntil(this._destroyed)).subscribe((annotationsPerAnchor: Map) => { + this.annotationsPerAnchor = annotationsPerAnchor; + }); + + this.formAnnotationService.getOpenAnnotationSubjectObservable().pipe(takeUntil(this._destroyed)).subscribe((anchorId: string) => { + if (anchorId && anchorId == this.item.id?.toString()) this.showAnnotations(anchorId); + }); + } } ngAfterViewInit(): void { @@ -595,6 +598,10 @@ export class PlanEditorComponent extends BaseEditor imple // // selectBlueprint() { + if(!(this.formGroup.get('blueprint').value && this.formGroup.get('label').value)){ + this.formGroup.markAllAsTouched(); + return; + } this.planBlueprintService.getSingle(this.formGroup.get('blueprint').value, PlanEditorEntityResolver.blueprintLookupFields()).pipe(takeUntil(this._destroyed)) .subscribe(data => { this.selectedBlueprint = data; diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.module.ts b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.module.ts index bbb748d7d..ae703c480 100644 --- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.module.ts +++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.module.ts @@ -14,6 +14,7 @@ import { PlanFormProgressIndicationModule } from './form-progress-indication/pla import { PlanDeleteDialogModule } from '../plan-delete-dialog/plan-delete-dialog.module'; import { PlanContactPrefillDialogModule } from '../plan-contact-prefill-dialog/plan-contact-prefill-dialog.module'; import { AnnotationDialogModule } from '@app/ui/annotations/annotation-dialog-component/annotation-dialog.module'; +import { FormFocusDirective } from '@common/forms/form-focus.directive'; @NgModule({ imports: [ @@ -30,7 +31,8 @@ import { AnnotationDialogModule } from '@app/ui/annotations/annotation-dialog-co PlanUserFieldModule, PlanFormProgressIndicationModule, PlanContactPrefillDialogModule, - AnnotationDialogModule + AnnotationDialogModule, + FormFocusDirective ], declarations: [ PlanEditorComponent, diff --git a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.html b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.html index 688abe730..f1b9fc372 100644 --- a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.html +++ b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.html @@ -2,7 +2,7 @@
      {{ 'PLAN-FINALISE-DIALOG.TITLE' | translate }}
      -
      @@ -39,7 +39,7 @@ : {{ description.label }} - +

      {{ description.label }}

      @@ -64,7 +64,7 @@ @for(error of planErrors; track error){ - {{error | titlecase}} + {{error | titlecase}} } } @@ -87,10 +87,10 @@
      - +
      - +
      diff --git a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss index f7c7bf2b0..50b4979a5 100644 --- a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss +++ b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.scss @@ -63,70 +63,11 @@ color: black; } -.close-btn { - margin-left: auto; - cursor: pointer; -} - .descriptions span { - color: var(--primary-color-3); + color: var(--sys-primary); } .emptyList { font-style: italic; color: rgba(0, 0, 0, 0.26); } - -.save-btn { - background: var(--primary-color) 0% 0% no-repeat padding-box; - border-radius: 30px; - opacity: 1; - width: auto; - height: 40px; - display: flex; - justify-content: center; - align-items: center; - font-weight: 700; - color: #ffffff; - cursor: pointer; -} - -.submit-btn { - min-width: 84px; - height: 43px; - background: #ffffff; - color: var(--primary-color); - border: 1px solid var(--primary-color); - border-radius: 30px; - opacity: 1; -} - -.submit-btn[disabled] { - border: 1px solid #b5b5b5 !important; -} - -.submit-btn:not([disabled]):hover { - background-color: var(--primary-color); - color: #ffffff; -} - -.default-btn { - background: #ffffff 0% 0% no-repeat padding-box; - box-shadow: 0px 3px 6px #1e202029; - border: 1px solid #b5b5b5; - border-radius: 30px; - opacity: 1; - font-size: 0.87rem; - font-weight: 500; - color: #212121; - cursor: pointer; -} - -.cancel-btn { -min-width: 101px; - height: 43px; - background: #ffffff; - border: 1px solid #b5b5b5; - border-radius: 30px; - opacity: 1; -} diff --git a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.ts b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.ts index e60bf9285..fefedf723 100644 --- a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.ts +++ b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.ts @@ -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(); diff --git a/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.html b/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.html index 19312ffb6..5ef64bc13 100644 --- a/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.html +++ b/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.html @@ -35,10 +35,10 @@ drag_indicator
      - -
      - {{enumUtils.toPlanUserTypeString(userType)}} -
      + + @for(userType of planUserTypeEnumValues; track userType){ + {{enumUtils.toPlanUserTypeString(userType)}} + }
      diff --git a/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.scss b/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.scss index a47f72664..65a3af8c0 100644 --- a/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.scss +++ b/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.scss @@ -6,10 +6,16 @@ .drag-handle { cursor: move; - color: var(--primary-color); + color: var(--sys-primary); } .drag-handle-disabled { cursor: auto; color: rgba(0, 0, 0, 0.38);; } + +@media (max-width: 400px){ + ::ng-deep .mat-button-toggle-group{ + flex-direction: column; + } +} \ No newline at end of file diff --git a/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.ts b/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.ts index d63665019..9cf926171 100644 --- a/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.ts +++ b/frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.ts @@ -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() { diff --git a/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html b/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html index 636135c67..4c34fa5ad 100644 --- a/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html +++ b/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html @@ -5,7 +5,7 @@ {{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.TITLE' | translate}} {{label}}
      - +
      @@ -18,9 +18,9 @@ {{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.REFERENCE-ID' | translate}} - - check - clear + + check + clear {{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.IDENTIFIER-EXISTS' | translate}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -29,9 +29,9 @@ {{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.LABEL' | translate}} - - check - clear + + check + clear {{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.IDENTIFIER-EXISTS' | translate}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -40,9 +40,9 @@ {{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.DESCRIPTION' | translate}} - - check - clear + + check + clear {{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.IDENTIFIER-EXISTS' | translate}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -64,7 +64,7 @@ -
      -
      +
      +
      diff --git a/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.ts b/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.ts index 590deefb1..75eb37947 100644 --- a/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.ts +++ b/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.ts @@ -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, @Inject(MAT_DIALOG_DATA) public data: any, - private formService: FormService + private formService: FormService, + protected fontService: FontAccessibilityService, ) { super(); this.label = data.label; diff --git a/frontend/src/app/ui/reference/reference-field/reference-field.component.html b/frontend/src/app/ui/reference/reference-field/reference-field.component.html index 4f25effbe..c45937b81 100644 --- a/frontend/src/app/ui/reference/reference-field/reference-field.component.html +++ b/frontend/src/app/ui/reference/reference-field/reference-field.component.html @@ -2,7 +2,7 @@ @if(multipleAutoCompleteSearchConfiguration){ {{label?.length > 0 ? label : referenceType?.name}} - + {{form.getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -16,7 +16,7 @@ @if(singleAutoCompleteSearchConfiguration){ {{label?.length > 0 ? label : referenceType?.name}} - + {{form.getError('backendError').message}} {{'GENERAL.VALIDATION.REQUIRED' | translate}} diff --git a/frontend/src/app/ui/reference/reference-field/reference-field.component.scss b/frontend/src/app/ui/reference/reference-field/reference-field.component.scss index 8786eb99f..026bbdb66 100644 --- a/frontend/src/app/ui/reference/reference-field/reference-field.component.scss +++ b/frontend/src/app/ui/reference/reference-field/reference-field.component.scss @@ -1,6 +1,6 @@ .insert-manually { text-decoration: underline; - color: var(--primary-color-3); + color: var(--sys-primary); cursor: pointer; font-weight: 400; } diff --git a/frontend/src/app/ui/reference/reference-field/reference-field.component.ts b/frontend/src/app/ui/reference/reference-field/reference-field.component.ts index 664e044c0..96baa5dcf 100644 --- a/frontend/src/app/ui/reference/reference-field/reference-field.component.ts +++ b/frontend/src/app/ui/reference/reference-field/reference-field.component.ts @@ -20,7 +20,7 @@ import { FormService } from '@common/forms/form-service'; styleUrls: ['./reference-field.component.scss'] }) export class ReferenceFieldComponent extends BaseComponent implements OnInit, OnChanges { - + static nextId = 0 @Input() referenceType: ReferenceType = null; @Input() form: UntypedFormGroup = null; @Input() label: string = null; @@ -29,6 +29,7 @@ export class ReferenceFieldComponent extends BaseComponent implements OnInit, On @Input() hint: string; @Input() placeholder: string; @Input() dependencies: UntypedFormGroup = null; + @Input() id: string = `multiple-autocomplete-${ReferenceFieldComponent.nextId++}`; referenceToUse: Reference[]= []; diff --git a/frontend/src/app/ui/sidebar/sidebar-footer/cookies-policy/cookies-policy.component.html b/frontend/src/app/ui/sidebar/sidebar-footer/cookies-policy/cookies-policy.component.html index a07814c46..e09aab5cf 100644 --- a/frontend/src/app/ui/sidebar/sidebar-footer/cookies-policy/cookies-policy.component.html +++ b/frontend/src/app/ui/sidebar/sidebar-footer/cookies-policy/cookies-policy.component.html @@ -1,5 +1,5 @@
      - +
      \ No newline at end of file diff --git a/frontend/src/app/ui/sidebar/sidebar-footer/opensource-licences/opensource-licences.component.html b/frontend/src/app/ui/sidebar/sidebar-footer/opensource-licences/opensource-licences.component.html index 3ee148b85..9f6cfedd4 100644 --- a/frontend/src/app/ui/sidebar/sidebar-footer/opensource-licences/opensource-licences.component.html +++ b/frontend/src/app/ui/sidebar/sidebar-footer/opensource-licences/opensource-licences.component.html @@ -1,7 +1,7 @@
      -

      {{ 'OPENSOURCE-LICENCES.TITLE' | translate}}

      +
      {{ 'OPENSOURCE-LICENCES.TITLE' | translate}}
      diff --git a/frontend/src/app/ui/sidebar/sidebar-footer/opensource-licences/opensource-licences.component.scss b/frontend/src/app/ui/sidebar/sidebar-footer/opensource-licences/opensource-licences.component.scss index 8ceabd898..2af95927e 100644 --- a/frontend/src/app/ui/sidebar/sidebar-footer/opensource-licences/opensource-licences.component.scss +++ b/frontend/src/app/ui/sidebar/sidebar-footer/opensource-licences/opensource-licences.component.scss @@ -1,6 +1,7 @@ -h1 { +.title { text-align: center; margin: 2rem 0 1rem 0; + font-size: 3.3125rem; } h4 { diff --git a/frontend/src/app/ui/sidebar/sidebar-footer/privacy/privacy.component.html b/frontend/src/app/ui/sidebar/sidebar-footer/privacy/privacy.component.html index 89e52c053..2d5bf3f31 100644 --- a/frontend/src/app/ui/sidebar/sidebar-footer/privacy/privacy.component.html +++ b/frontend/src/app/ui/sidebar/sidebar-footer/privacy/privacy.component.html @@ -1,7 +1,7 @@
      -

      {{ 'PRIVACY-POLICY.TITLE' | translate}}

      +
      {{ 'PRIVACY-POLICY.TITLE' | translate}}
      diff --git a/frontend/src/app/ui/sidebar/sidebar-footer/privacy/privacy.component.scss b/frontend/src/app/ui/sidebar/sidebar-footer/privacy/privacy.component.scss index 9b960ac31..b1e70a10e 100644 --- a/frontend/src/app/ui/sidebar/sidebar-footer/privacy/privacy.component.scss +++ b/frontend/src/app/ui/sidebar/sidebar-footer/privacy/privacy.component.scss @@ -1,5 +1,6 @@ -h1 { +.title { text-align: center; + font-size: 3.3125rem; } img { diff --git a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css index d5d41797e..258f9bdb0 100644 --- a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css +++ b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css @@ -12,11 +12,17 @@ border-radius: 0px; cursor: pointer; display: inline-flex; - font-size: small; + font-size: 13px; } .sidebar-footer .option:hover { - color: var(--primary-color-3); + background-color: #ececec; + border-radius: 6px; +} + +.sidebar-footer .option:focus { + background-color: #ececec; + border-radius: 6px; } .sidebar-footer .vl { @@ -25,5 +31,5 @@ } .option-active { - color: var(--primary-color-3) !important; + color: var(--sys-primary); } diff --git a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html index 61677a266..b88c0e8c6 100644 --- a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html +++ b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html @@ -1,9 +1,13 @@
      - -
      -
      -

      - {{ item.title | translate}}

      -
      -
      + @for(footerItems of nestedFooterItems; track footerItems){ + + }
      diff --git a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts index c7a6a7c49..d89766a21 100644 --- a/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts +++ b/frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts @@ -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(); } diff --git a/frontend/src/app/ui/sidebar/sidebar-footer/terms/terms.component.html b/frontend/src/app/ui/sidebar/sidebar-footer/terms/terms.component.html index 45cef287f..eeeaddee7 100644 --- a/frontend/src/app/ui/sidebar/sidebar-footer/terms/terms.component.html +++ b/frontend/src/app/ui/sidebar/sidebar-footer/terms/terms.component.html @@ -1,5 +1,5 @@
      - +
      \ No newline at end of file diff --git a/frontend/src/app/ui/sidebar/sidebar.component.css b/frontend/src/app/ui/sidebar/sidebar.component.css deleted file mode 100644 index 9ad3cb83e..000000000 --- a/frontend/src/app/ui/sidebar/sidebar.component.css +++ /dev/null @@ -1,81 +0,0 @@ -.logo-img { - width: 60px; - display: block; - max-height: none; - margin-left: 50px; -} - -.logo-img img { - width: 155px; - top: 0px; - position: inherit; -} - -.sidebarSubtitle p { - margin-left: 20px; - color: rgb(166, 166, 166); -} - -.nav hr { - border-top: 1px solid #fff; - border-bottom: 1px solid #E1E1E1; -} - -.sidebar-footer { - margin-top: auto; -} - -.sidebar-nav { - background: white; - height: 70px; -} - -.nav-row { - display: flex; - flex-direction: row; - align-items: center; - width: 100%; - padding: 0.5rem 0.8rem 0.5rem 1.2rem; - text-align: left; - letter-spacing: 0px; - color: #000000; - opacity: 1; - font-size: 0.93rem; -} - -.nav-subrow { - display: flex; - flex-direction: row; - align-items: center; - width: 100%; - text-align: left; - letter-spacing: 0px; - color: #000000; - opacity: 1; - font-size: 0.93rem; -} - -.nav-row:hover { - background-color: #ececec; - border-radius: 6px; -} - -.icon { - width: 24px; - height: 24px; - vertical-align: middle; - color: #6B6B6B; -} - -.nav-row span { - padding-left: 1.5rem; -} - -.mat-list { - padding-top: 0px !important; - display: flex !important; -} - -.mat-list div { - width: 100%; -} diff --git a/frontend/src/app/ui/sidebar/sidebar.component.html b/frontend/src/app/ui/sidebar/sidebar.component.html index 3aef5e1d1..4dc7a74bb 100644 --- a/frontend/src/app/ui/sidebar/sidebar.component.html +++ b/frontend/src/app/ui/sidebar/sidebar.component.html @@ -1,47 +1,47 @@
      - + @if(showItem(groupMenuItem)){ + +
      + + + + {{ groupMenuRoute.icon }} + person + {{groupMenuRoute.title | translate}} + + + + + +
      + {{ groupMenuRoute.icon }} + person + {{groupMenuRoute.title | translate}} +
      +       +       +       + + + + + + {{ groupMenuRoute.icon }} + {{groupMenuRoute.title | translate}} + + + + + + {{ groupMenuRoute.icon }} + {{groupMenuRoute.title | translate}} open_in_new + + + +       + }       diff --git a/frontend/src/app/ui/sidebar/sidebar.component.scss b/frontend/src/app/ui/sidebar/sidebar.component.scss index abcce3812..e9d1bf77d 100644 --- a/frontend/src/app/ui/sidebar/sidebar.component.scss +++ b/frontend/src/app/ui/sidebar/sidebar.component.scss @@ -1,63 +1,147 @@ $mat-card-header-size: 30px !default; - -.my-mat-card-avatar { - height: $mat-card-header-size; - width: $mat-card-header-size; - border-radius: 50%; - flex-shrink: 0; - margin-right: 7px; -} - -.nav-list-item { -} - -.nav-list-item-hidden { - display: none !important; - } - -.login { - margin-top: 15px !important; -} - -.login-label { - text-transform: uppercase; -} - -.firstSubtitle { - margin-top: 20px; -} - -.icon-mask { - color: #6b6b6b; - transform: translate(-8px, 8px); -} - -.active a { - font-weight: 700; -} - -.active a i { - color: var(--primary-color-2); -} - -.inner-line { - margin-left: 12px; - margin-right: 10px; - width: 20px; - height: 13px; - border-left: 1px solid #cccccc; - border-bottom: 1px solid #cccccc; -} - -.icon-external { - font-size: 1rem; - padding-left: 0.4rem !important; - color: #6b6b6b; -} - -mat-list-item { - display: flex !important; - height: auto !important; +.sidebar-wrapper { + height: 100%; + display: flex; + flex-direction: column; + .logo-img { + width: 60px; + display: block; + max-height: none; + margin-left: 50px; + } + + .logo-img img { + width: 155px; + top: 0px; + position: inherit; + } + + .sidebarSubtitle p { + margin-left: 20px; + color: rgb(166, 166, 166); + } + + .nav hr { + border-top: 1px solid #fff; + border-bottom: 1px solid #E1E1E1; + } + + .sidebar-footer { + margin-top: auto; + } + + .sidebar-nav { + background: white; + height: 70px; + } + + .nav-row { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + padding: 0.5rem 0.8rem 0.5rem 1.2rem; + text-align: left; + letter-spacing: 0px; + color: #000000; + opacity: 1; + font-size:0.93rem; + } + + .nav-subrow { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + text-align: left; + letter-spacing: 0px; + color: #000000; + opacity: 1; + font-size:0.93rem; + } + + .nav-row:hover, .nav-row:focus { + background-color: #ececec; + border-radius: 6px; + } + + .icon { + width: 24px; + height: 24px; + vertical-align: middle; + color: #6B6B6B; + } + + .nav-row span { + padding-left: 1.5rem; + } + + .mat-list { + padding-top: 0px !important; + display: flex !important; + } + + .mat-list div { + width: 100%; + } + + + .my-mat-card-avatar { + height: $mat-card-header-size; + width: $mat-card-header-size; + border-radius: 50%; + flex-shrink: 0; + margin-right: 7px; + } + + .nav-list-item-hidden { + display: none !important; + } + + .login { + margin-top: 15px !important; + } + + .login-label { + text-transform: uppercase; + } + + .firstSubtitle { + margin-top: 20px; + } + + .icon-mask { + color: #6b6b6b; + transform: translate(-8px, 8px); + } + + .active a { + font-weight: 700; + } + + .active a i { + color: var(--sys-primary); + } + + .inner-line { + margin-left: 12px; + margin-right: 10px; + width: 20px; + height: 13px; + border-left: 1px solid #cccccc; + border-bottom: 1px solid #cccccc; + } + + .icon-external { + font-size: 1rem; + padding-left: 0.4rem !important; + color: #6b6b6b; + } + + mat-list-item { + display: flex !important; + height: auto !important; + } } ::ng-deep .mat-list-item-content { diff --git a/frontend/src/app/ui/sidebar/sidebar.component.ts b/frontend/src/app/ui/sidebar/sidebar.component.ts index 00ce2f854..0115a5ad2 100644 --- a/frontend/src/app/ui/sidebar/sidebar.component.ts +++ b/frontend/src/app/ui/sidebar/sidebar.component.ts @@ -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, @@ -32,7 +33,7 @@ class GroupMenuItem { @Component({ selector: 'app-sidebar', templateUrl: './sidebar.component.html', - styleUrls: ['./sidebar.component.css', './sidebar.component.scss'] + styleUrls: ['./sidebar.component.scss'] }) export class SidebarComponent implements OnInit { generalItems: GroupMenuItem; diff --git a/frontend/src/app/ui/tag/tags-field/tags-field.component.html b/frontend/src/app/ui/tag/tags-field/tags-field.component.html index 616a3746e..e419bc272 100644 --- a/frontend/src/app/ui/tag/tags-field/tags-field.component.html +++ b/frontend/src/app/ui/tag/tags-field/tags-field.component.html @@ -3,12 +3,12 @@ {{tag}} - - + {{tag}} diff --git a/frontend/src/app/ui/tag/tags-field/tags-field.component.ts b/frontend/src/app/ui/tag/tags-field/tags-field.component.ts index 4515a5655..ccf9ce5b5 100644 --- a/frontend/src/app/ui/tag/tags-field/tags-field.component.ts +++ b/frontend/src/app/ui/tag/tags-field/tags-field.component.ts @@ -16,11 +16,11 @@ import { map, mergeMap, startWith, takeUntil } from 'rxjs/operators'; styleUrls: ['./tags-field.component.scss'] }) export class TagsComponent extends BaseComponent implements OnInit, OnChanges { - + static nextId: number = 0; @Input() form: UntypedFormControl = null; @Input() label: string; @Input() placeholder: string; - + @Input() name: string = `tag-field-${TagsComponent.nextId++}`; separatorKeysCodes: number[] = [ENTER, COMMA]; filteredTags: Observable; tags: string[] = []; diff --git a/frontend/src/app/ui/tenant/tenant-switch/tenant-switch.component.html b/frontend/src/app/ui/tenant/tenant-switch/tenant-switch.component.html index 9a36ad797..602d7ba80 100644 --- a/frontend/src/app/ui/tenant/tenant-switch/tenant-switch.component.html +++ b/frontend/src/app/ui/tenant/tenant-switch/tenant-switch.component.html @@ -1,5 +1,5 @@ -
      - {{ tenant.name }} -
      + @for(tenant of (tenants | async); track tenant){ + {{ tenant.name }} + }       diff --git a/frontend/src/app/ui/tenant/tenant-switch/tenant-switch.component.scss b/frontend/src/app/ui/tenant/tenant-switch/tenant-switch.component.scss index 5e19e49da..7cc532181 100644 --- a/frontend/src/app/ui/tenant/tenant-switch/tenant-switch.component.scss +++ b/frontend/src/app/ui/tenant/tenant-switch/tenant-switch.component.scss @@ -1,9 +1,4 @@ ::ng-deep.tenant-menu { border-color: transparent; padding: 8px; -} - -::ng-deep.tenant-button { - padding-top: 15px; - padding-bottom: 15px; -} +} \ No newline at end of file diff --git a/frontend/src/app/ui/user-guide/dialog/user-guide-dialog.component.html b/frontend/src/app/ui/user-guide/dialog/user-guide-dialog.component.html index f51a186d2..55d6987d8 100644 --- a/frontend/src/app/ui/user-guide/dialog/user-guide-dialog.component.html +++ b/frontend/src/app/ui/user-guide/dialog/user-guide-dialog.component.html @@ -4,13 +4,13 @@ {{'GUIDE.TITLE' | translate}}
      -
      - +
      diff --git a/frontend/src/app/ui/user-guide/dialog/user-guide-dialog.component.ts b/frontend/src/app/ui/user-guide/dialog/user-guide-dialog.component.ts index 8216c4625..64519205a 100644 --- a/frontend/src/app/ui/user-guide/dialog/user-guide-dialog.component.ts +++ b/frontend/src/app/ui/user-guide/dialog/user-guide-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-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, + protected fontService: FontAccessibilityService, @Inject(MAT_DIALOG_DATA) public data: any ) { this.isDialog = data.isDialog; diff --git a/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.html b/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.html index 7a78d1d08..f2314f085 100644 --- a/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.html +++ b/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.html @@ -1,6 +1,11 @@
      +
      +
      +
      {{ 'GUIDE.TITLE' | translate}}
      +
      +
      - +
      diff --git a/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.scss b/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.scss index 059d9d08e..c7b2071bb 100644 --- a/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.scss +++ b/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.scss @@ -6,18 +6,6 @@ cursor: pointer !important; } -#userguide { -} - -.custom-header { - font-size: 20px; - letter-spacing: 0px; - color: #212121; - margin-top: 67px; - margin-bottom: 38px; - opacity: 1; -} - .iframe { width: 100%; height: calc(100vh - 80px); @@ -28,3 +16,9 @@ :host :hover ::ng-deep .tocElement { cursor: pointer !important; } + +.title { + text-align: center; + margin: 2rem 0 0 0; + font-size: 3.3125rem; +} \ No newline at end of file diff --git a/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.ts b/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.ts index 6c91fd53e..03b948d1e 100644 --- a/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.ts +++ b/frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.ts @@ -1,5 +1,5 @@ import { HttpClient } from '@angular/common/http'; -import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; import { Router } from '@angular/router'; import { SupportiveMaterialFieldType } from '@app/core/common/enum/supportive-material-field-type'; @@ -19,6 +19,8 @@ import { takeUntil } from 'rxjs/operators'; styleUrls: ['./user-guide-content.component.scss'] }) export class UserGuideContentComponent extends BaseComponent implements OnInit { + @Input() isDialog: boolean; + readonly useInnerHTML: boolean = false; //GK: Change for TESTING PURPOSES ONLY guideHTML: any; diff --git a/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.html b/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.html index 92fd453dd..e9b679f52 100644 --- a/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.html +++ b/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.html @@ -5,7 +5,7 @@ {{'USER-PROFILE.ACTIONS.LINK-NEW-ACCOUNT' | translate}}
      - +
      @@ -25,10 +25,10 @@
      - +
      - +
      diff --git a/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss b/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss index fa53b5323..01e14e530 100644 --- a/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss +++ b/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss @@ -4,43 +4,19 @@ display: flex; width: 100%; height: 89px; - background-color: var(--primary-color); - color: #ffffff; + background-color: var(--sys-primary); + color: var(--sys-on-primary); font-size: 1.25rem; } .title { font-weight: 700; font-size: 1.25rem; - color: #212121; + color: var(--dark-gray); opacity: 1; } .template-title { margin-left: 37px; } - - .cancel-btn { - min-width: 101px; - height: 43px; - background: #ffffff; - border: 1px solid #b5b5b5; - border-radius: 30px; - opacity: 1; - } - - .add-btn { - width: 84px; - height: 43px; - background: #ffffff; - color: var(--primary-color); - border: 1px solid var(--primary-color); - border-radius: 30px; - opacity: 1; - } - - .add-btn:hover { - background-color: var(--primary-color); - color: #ffffff; - } } diff --git a/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.ts b/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.ts index 0c701635c..79206fe2f 100644 --- a/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.ts +++ b/frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.ts @@ -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, + protected fontService: FontAccessibilityService, @Inject(MAT_DIALOG_DATA) public data: any ) { } diff --git a/frontend/src/app/ui/user-profile/user-profile.component.html b/frontend/src/app/ui/user-profile/user-profile.component.html index b412fa774..d4efe6a0f 100644 --- a/frontend/src/app/ui/user-profile/user-profile.component.html +++ b/frontend/src/app/ui/user-profile/user-profile.component.html @@ -1,12 +1,12 @@
      -
    {{usersMap.get(user?.get('userId')?.value)?.name}} {{enumUtils.toUserDescriptionTemplateRoleString(user?.get('role')?.value)}} - +