more style fixes, added alt texts
This commit is contained in:
parent
c7e4ae3ff9
commit
2d4504a91b
|
@ -41,7 +41,6 @@ export class AppComponent implements OnInit, AfterViewInit {
|
||||||
cssConfigLoaded = false;
|
cssConfigLoaded = false;
|
||||||
|
|
||||||
@ViewChild('sidenav') sidenav: MatSidenav;
|
@ViewChild('sidenav') sidenav: MatSidenav;
|
||||||
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private router: Router,
|
private router: Router,
|
||||||
|
|
|
@ -37,7 +37,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto p-0 d-flex align-items-end">
|
<div class="col-auto p-0 d-flex align-items-end">
|
||||||
<img src="../../../assets/images/guided-tour-side.png" alt="cartoon tour pointing to text with raised arm">
|
<img src="../../../assets/images/guided-tour-side.png" alt="{{('ALT-TEXT.GUIDED-TOUR-IMG' | translate) ?? 'tour guide image'}}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,10 +3,11 @@ import { GuidedTourComponent } from './guided-tour.component';
|
||||||
import { NgModule, ErrorHandler, ModuleWithProviders } from '@angular/core';
|
import { NgModule, ErrorHandler, ModuleWithProviders } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { WindowRefService } from './windowref.service';
|
import { WindowRefService } from './windowref.service';
|
||||||
|
import { TranslateModule } from '@ngx-translate/core';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [GuidedTourComponent],
|
declarations: [GuidedTourComponent],
|
||||||
imports: [CommonModule],
|
imports: [CommonModule, TranslateModule],
|
||||||
providers: [WindowRefService],
|
providers: [WindowRefService],
|
||||||
exports: [GuidedTourComponent]
|
exports: [GuidedTourComponent]
|
||||||
})
|
})
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="progressIndication" class="progress-bar">
|
<div *ngIf="progressIndication" class="progress-bar">
|
||||||
<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
|
<mat-progress-bar color="primary" mode="indeterminate" [attr.aria-label]="'ALT-TEXT.PROGRESS-BAR' | translate"></mat-progress-bar>
|
||||||
</div>
|
</div>
|
||||||
<div mat-dialog-content class="definition-content">
|
<div mat-dialog-content class="definition-content">
|
||||||
<app-description-form *ngIf="formGroup && formGroup.get('properties')" [propertiesFormGroup]="previewPropertiesFormGroup" [descriptionId]="descriptionId" [descriptionTemplate]="descriptionTemplate" [canAnnotate]="false" [visibilityRulesService]="visibilityRulesService" [isNew]="true"></app-description-form>
|
<app-description-form *ngIf="formGroup && formGroup.get('properties')" [propertiesFormGroup]="previewPropertiesFormGroup" [descriptionId]="descriptionId" [descriptionTemplate]="descriptionTemplate" [canAnnotate]="false" [visibilityRulesService]="visibilityRulesService" [isNew]="true"></app-description-form>
|
||||||
|
|
|
@ -160,7 +160,7 @@
|
||||||
<li class="list-inline-item" *ngIf="!viewOnly">
|
<li class="list-inline-item" *ngIf="!viewOnly">
|
||||||
|
|
||||||
<span [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger">
|
<span [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger">
|
||||||
<img src="/assets/images/editor/icons/add_input.svg" style="width: 18px;transform: translateY(-1px);" class="input_icon" alt="{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}}" />
|
<img src="/assets/images/editor/icons/add_input.svg" style="width: 18px;transform: translateY(-1px);" class="input_icon" alt="{{('DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate) ?? 'add input'}}" />
|
||||||
<span class="fieldset-new-input-action">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}}</span>
|
<span class="fieldset-new-input-action">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}}</span>
|
||||||
</span>
|
</span>
|
||||||
<mat-menu #inputmenu="matMenu" [class]="'add_input_menu'">
|
<mat-menu #inputmenu="matMenu" [class]="'add_input_menu'">
|
||||||
|
|
|
@ -105,12 +105,12 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<ng-container *ngIf="annotationsPerThread[thread].length === 1 && !this.showRepliesPerThread[thread]">
|
<ng-container *ngIf="annotationsPerThread[thread].length === 1 && !this.showRepliesPerThread[thread]">
|
||||||
<button mat-button class="action-button mt-3" (click)="showReplies(thread)">
|
<button mat-button class="action-button mt-3" (click)="showReplies(thread)">
|
||||||
<img src="/assets/images/annotations/reply.png" alt="{{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}"> <span class="mt-1 reply-btn"> 1 {{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}} </span>
|
<img src="/assets/images/annotations/reply.png" alt="{{ ('ANNOTATION-DIALOG.THREADS.REPLY' | translate) ?? 'reply'}}"> <span class="mt-1 reply-btn"> 1 {{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}} </span>
|
||||||
</button>
|
</button>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container *ngIf="annotationsPerThread[thread].length > 1 && !this.showRepliesPerThread[thread]">
|
<ng-container *ngIf="annotationsPerThread[thread].length > 1 && !this.showRepliesPerThread[thread]">
|
||||||
<button mat-button class="action-button mt-3" (click)="showReplies(thread)">
|
<button mat-button class="action-button mt-3" (click)="showReplies(thread)">
|
||||||
<img src="/assets/images/annotations/reply.png" alt="{{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}"> <span class="mt-1 reply-btn"> {{ annotationsPerThread[thread].length }} {{ 'ANNOTATION-DIALOG.THREADS.REPLIES' | translate}} </span>
|
<img src="/assets/images/annotations/reply.png" alt="{{ ('ANNOTATION-DIALOG.THREADS.REPLY' | translate) ?? 'reply'}}"> <span class="mt-1 reply-btn"> {{ annotationsPerThread[thread].length }} {{ 'ANNOTATION-DIALOG.THREADS.REPLIES' | translate}} </span>
|
||||||
</button>
|
</button>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<span class="new-releases-logo">
|
<span class="new-releases-logo">
|
||||||
<img src="../../../assets/images/new-releases-logo.png" alt="{{'ALT-TEXT.NEW-RELEASES' | translate}}">
|
<img src="../../../assets/images/new-releases-logo.png" alt="{{('ALT-TEXT.NEW-RELEASES' | translate) ?? 'new releases'}}">
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -54,7 +54,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="col-auto ml-auto">
|
<span class="col-auto ml-auto">
|
||||||
<img class="laptop-img\6" alt="{{'ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate }}" src="../../../assets/images/dashboard-popup.png">
|
<img class="laptop-img\6" alt="{{('ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate) ?? 'dashboard popup image' }}" src="../../../assets/images/dashboard-popup.png">
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -176,7 +176,7 @@
|
||||||
<p class="col-auto app-info">{{'DASHBOARD.INFO-TEXT' | translate}}</p>
|
<p class="col-auto app-info">{{'DASHBOARD.INFO-TEXT' | translate}}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<img class="col-auto ml-auto laptop-img" alt="{{'ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate }}" src="../../../assets/images/dashboard-popup.png">
|
<img class="col-auto ml-auto laptop-img" alt="{{('ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate) ?? 'dashboard popup image' }}" src="../../../assets/images/dashboard-popup.png">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="demo-progress-bar-container" *ngIf="!formGroup.disabled">
|
<div class="demo-progress-bar-container" *ngIf="!formGroup.disabled">
|
||||||
<div class="percentage d-flex justify-content-center"><span *ngIf="total>0">{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}}</span> </div>
|
<div class="percentage d-flex justify-content-center"><span *ngIf="total>0">{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}}</span> </div>
|
||||||
<mat-progress-bar *ngIf="value" class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="value"></mat-progress-bar>
|
<mat-progress-bar *ngIf="value" class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="value" [attr.aria-label]="'ALT-TEXT.PROGRESS-BAR' | translate"></mat-progress-bar>
|
||||||
<mat-progress-bar *ngIf="!value" class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="0"></mat-progress-bar>
|
<mat-progress-bar *ngIf="!value" class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="0" [attr.aria-label]="'ALT-TEXT.PROGRESS-BAR' | translate"></mat-progress-bar>
|
||||||
<div class="percentage" [ngStyle]="{'padding-left': value ? value - 10 + '%' : 0 + '%' }">
|
<div class="percentage" [ngStyle]="{'padding-left': value ? value - 10 + '%' : 0 + '%' }">
|
||||||
<span *ngIf="value">{{value}}%</span>
|
<span *ngIf="value">{{value}}%</span>
|
||||||
<span *ngIf="!value">0%</span>
|
<span *ngIf="!value">0%</span>
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="progressIndication" class="progress-bar">
|
<div *ngIf="progressIndication" class="progress-bar">
|
||||||
<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
|
<mat-progress-bar color="primary" mode="indeterminate" [attr.aria-label]="'ALT-TEXT.PROGRESS-BAR' | translate"></mat-progress-bar>
|
||||||
</div>
|
</div>
|
||||||
<div mat-dialog-content *ngIf="prefillForm" [formGroup]="prefillForm" class="definition-content">
|
<div mat-dialog-content *ngIf="prefillForm" [formGroup]="prefillForm" class="definition-content">
|
||||||
<div class="row d-flex align-items-center">
|
<div class="row d-flex align-items-center">
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<button mat-button class="rounded-btn secondary align-self-center" (click)="addNewDescription()">
|
<button mat-button class="rounded-btn secondary align-self-center" (click)="addNewDescription()">
|
||||||
{{'DESCRIPTION-LISTING.ACTIONS.ADD-DESCRIPTION' | translate}}
|
{{'DESCRIPTION-LISTING.ACTIONS.ADD-DESCRIPTION' | translate}}
|
||||||
</button>
|
</button>
|
||||||
<img class="col-auto ml-auto laptop-img" alt="{{'ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate }}" src="../../../assets/images/dashboard-popup.png">
|
<img class="col-auto ml-auto laptop-img" alt="{{('ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate) ?? 'dashboard pop up image' }}" src="../../../assets/images/dashboard-popup.png">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -33,32 +33,32 @@
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="description-card-actions">
|
<div class="description-card-actions">
|
||||||
<a
|
<div role="button"
|
||||||
class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem"
|
class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem"
|
||||||
*ngIf="fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description) && fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description).length > 0"
|
*ngIf="fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description) && fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description).length > 0"
|
||||||
[matMenuTriggerFor]="exportMenu"
|
[matMenuTriggerFor]="exportMenu"
|
||||||
>
|
>
|
||||||
<mat-icon class="material-icons icon-align pr-2" aria-hidden>open_in_new</mat-icon>
|
<mat-icon class="material-icons icon-align pr-2" aria-hidden>open_in_new</mat-icon>
|
||||||
{{'DESCRIPTION-LISTING.ACTIONS.EXPORT' | translate}}
|
{{'DESCRIPTION-LISTING.ACTIONS.EXPORT' | translate}}
|
||||||
</a>
|
</div>
|
||||||
<a
|
<div role="button"
|
||||||
class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem"
|
class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem"
|
||||||
*ngIf="canInvitePlanUsers"
|
*ngIf="canInvitePlanUsers"
|
||||||
(click)="openShareDialog()"
|
(click)="openShareDialog()"
|
||||||
>
|
>
|
||||||
<mat-icon class="material-icons icon-align pr-2" aria-hidden>group_add</mat-icon>{{'DESCRIPTION-LISTING.ACTIONS.INVITE-SHORT' | translate}}</a>
|
<mat-icon class="material-icons icon-align pr-2" aria-hidden>group_add</mat-icon>{{'DESCRIPTION-LISTING.ACTIONS.INVITE-SHORT' | translate}}</div>
|
||||||
<a
|
<div role="button"
|
||||||
class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem"
|
class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem"
|
||||||
*ngIf="isAuthenticated()"
|
*ngIf="isAuthenticated()"
|
||||||
(click)="copyToPlan(description)"
|
(click)="copyToPlan(description)"
|
||||||
>
|
>
|
||||||
<mat-icon class="material-icons icon-align pr-2" aria-hidden>file_copy</mat-icon>{{'DESCRIPTION-LISTING.ACTIONS.COPY-DESCRIPTION' | translate}}</a>
|
<mat-icon class="material-icons icon-align pr-2" aria-hidden>file_copy</mat-icon>{{'DESCRIPTION-LISTING.ACTIONS.COPY-DESCRIPTION' | translate}}</div>
|
||||||
<a
|
<div role="button"
|
||||||
class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem"
|
class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem"
|
||||||
*ngIf="canDelete"
|
*ngIf="canDelete"
|
||||||
(click)="deleteClicked(description.id)"
|
(click)="deleteClicked(description.id)"
|
||||||
>
|
>
|
||||||
<mat-icon class="material-icons icon-align pr-2" aria-hidden>delete</mat-icon>{{ 'DESCRIPTION-LISTING.ACTIONS.DELETE' | translate }}</a>
|
<mat-icon class="material-icons icon-align pr-2" aria-hidden>delete</mat-icon>{{ 'DESCRIPTION-LISTING.ACTIONS.DELETE' | translate }}</div>
|
||||||
</div>
|
</div>
|
||||||
<mat-menu #actionsMenu="matMenu">
|
<mat-menu #actionsMenu="matMenu">
|
||||||
<button *ngIf="isAuthenticated()" mat-menu-item (click)="copyToPlan(description)" class="menu-item">
|
<button *ngIf="isAuthenticated()" mat-menu-item (click)="copyToPlan(description)" class="menu-item">
|
||||||
|
|
|
@ -149,14 +149,14 @@ input[type="text"] {
|
||||||
color: var(--gray);
|
color: var(--gray);
|
||||||
}
|
}
|
||||||
|
|
||||||
.description-card-actions a,
|
.description-card-actions div,
|
||||||
.plan-card-actions a {
|
.plan-card-actions div {
|
||||||
color: var(--gray) !important;
|
color: var(--gray) !important;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description-card-actions a:hover,
|
.description-card-actions div:hover,
|
||||||
.plan-card-actions a:hover {
|
.plan-card-actions div:hover {
|
||||||
color: var(--primary-color) !important;
|
color: var(--primary-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -8,12 +8,12 @@
|
||||||
</button>
|
</button>
|
||||||
<h1 class="logo mr-auto" >
|
<h1 class="logo mr-auto" >
|
||||||
<a [routerLink]="routerUtils.generateUrl(['home'])">
|
<a [routerLink]="routerUtils.generateUrl(['home'])">
|
||||||
<img class="logo-image" alt="{{'ALT-TEXT.GO-TO-MAIN' | translate}}" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension">
|
<img class="logo-image" alt="{{('ALT-TEXT.GO-TO-MAIN' | translate) ?? 'go to main page'}}" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension">
|
||||||
</a>
|
</a>
|
||||||
</h1>
|
</h1>
|
||||||
@if(extraImageURL){
|
@if(extraImageURL){
|
||||||
<a class="extra-logo" [routerLink]="routerUtils.generateUrl(['home'])">
|
<a class="extra-logo" [routerLink]="routerUtils.generateUrl(['home'])">
|
||||||
<img aria-hidden class="extra-logo-image" [src]="extraImageURL" alt="{{'ALT-TEXT.GO-TO-MAIN' | translate}}" >
|
<img aria-hidden class="extra-logo-image" [src]="extraImageURL" alt="{{('ALT-TEXT.GO-TO-MAIN' | translate) ?? 'go to main page'}}" >
|
||||||
</a>
|
</a>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -70,7 +70,7 @@
|
||||||
<li class="pl-2">
|
<li class="pl-2">
|
||||||
@if(this.isAuthenticated()) {
|
@if(this.isAuthenticated()) {
|
||||||
<button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;">
|
<button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;">
|
||||||
<img alt="{{'ALT-TEXT.USER-OPTIONS' | translate}}" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
|
<img alt="{{('ALT-TEXT.USER-OPTIONS' | translate) ?? 'user options'}}" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
|
||||||
</button>
|
</button>
|
||||||
}@else {
|
}@else {
|
||||||
<ng-container *ngTemplateOutlet="loginOptionTemplate"/>
|
<ng-container *ngTemplateOutlet="loginOptionTemplate"/>
|
||||||
|
|
|
@ -41,7 +41,7 @@ $mat-card-header-size: 40px !default;
|
||||||
display: flex;
|
display: flex;
|
||||||
background: #ffffff 0% 0% no-repeat padding-box;
|
background: #ffffff 0% 0% no-repeat padding-box;
|
||||||
#navigation {
|
#navigation {
|
||||||
color: var(--dark-gray);
|
color: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
box-shadow: 0px 0px 6px #00000029;
|
box-shadow: 0px 0px 6px #00000029;
|
||||||
|
|
|
@ -41,28 +41,28 @@
|
||||||
<a class="d-flex justify-content-center pb-3 show-more" *ngIf="plan.descriptions?.length > 3" [routerLink]="isPublic ? this.routerUtils.generateUrl(['/explore-plans/overview/public/', plan.id]) : this.routerUtils.generateUrl(['/plans/overview/', plan.id])"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a>
|
<a class="d-flex justify-content-center pb-3 show-more" *ngIf="plan.descriptions?.length > 3" [routerLink]="isPublic ? this.routerUtils.generateUrl(['/explore-plans/overview/public/', plan.id]) : this.routerUtils.generateUrl(['/plans/overview/', plan.id])"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a>
|
||||||
</a>
|
</a>
|
||||||
<div class="plan-card-actions">
|
<div class="plan-card-actions">
|
||||||
<a class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canExportPlan && fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Plan).length > 0" [matMenuTriggerFor]="exportMenu">
|
<div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canExportPlan && fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Plan).length > 0" [matMenuTriggerFor]="exportMenu">
|
||||||
<mat-icon class="material-icons icon-align pr-2" aria-hidden>open_in_new</mat-icon>{{'PLAN-LISTING.ACTIONS.EXPORT' | translate}}
|
<mat-icon class="material-icons icon-align pr-2" aria-hidden>open_in_new</mat-icon>{{'PLAN-LISTING.ACTIONS.EXPORT' | translate}}
|
||||||
</a>
|
</div>
|
||||||
<a class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canEditPlan" [routerLink]="this.routerUtils.generateUrl(['/plans/edit/', plan.id])" target="_blank">
|
<div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canEditPlan" [routerLink]="this.routerUtils.generateUrl(['/plans/edit/', plan.id])" target="_blank">
|
||||||
<mat-icon class="material-icons icon-align">add</mat-icon>{{'PLAN-LISTING.ACTIONS.ADD-DESCRIPTION-SHORT' | translate}}
|
<mat-icon class="material-icons icon-align">add</mat-icon>{{'PLAN-LISTING.ACTIONS.ADD-DESCRIPTION-SHORT' | translate}}
|
||||||
</a>
|
</div>
|
||||||
<a class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canInvitePlanUsers" (click)="inviteToPlan()">
|
<div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canInvitePlanUsers" (click)="inviteToPlan()">
|
||||||
<mat-icon class="material-icons icon-align pr-2" aria-hidden>group_add</mat-icon>{{'PLAN-LISTING.ACTIONS.INVITE-SHORT' | translate}}
|
<mat-icon class="material-icons icon-align pr-2" aria-hidden>group_add</mat-icon>{{'PLAN-LISTING.ACTIONS.INVITE-SHORT' | translate}}
|
||||||
</a>
|
</div>
|
||||||
<a class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canClonePlan" (click)="cloneClicked()">
|
<div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canClonePlan" (click)="cloneClicked()">
|
||||||
<mat-icon class="material-icons icon-align pr-2" aria-hidden>filter_none</mat-icon>{{'PLAN-LISTING.ACTIONS.CLONE' | translate}}
|
<mat-icon class="material-icons icon-align pr-2" aria-hidden>filter_none</mat-icon>{{'PLAN-LISTING.ACTIONS.CLONE' | translate}}
|
||||||
</a>
|
</div>
|
||||||
<a class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="!isAuthenticated() && showAllVersionsAction" (click)="viewVersions(plan)">
|
<div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="!isAuthenticated() && showAllVersionsAction" (click)="viewVersions(plan)">
|
||||||
<mat-icon class="material-icons icon-align pr-2" aria-hidden>library_books</mat-icon>{{'PLAN-LISTING.ACTIONS.VIEW-VERSION' | translate}}
|
<mat-icon class="material-icons icon-align pr-2" aria-hidden>library_books</mat-icon>{{'PLAN-LISTING.ACTIONS.VIEW-VERSION' | translate}}
|
||||||
</a>
|
</div>
|
||||||
|
|
||||||
<a class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canDeletePlan" (click)="deleteClicked(plan.id)">
|
<div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canDeletePlan" (click)="deleteClicked(plan.id)">
|
||||||
<mat-icon class="material-icons icon-align pr-2" aria-hidden>delete</mat-icon>{{ 'PLAN-LISTING.ACTIONS.DELETE' | translate }}
|
<mat-icon class="material-icons icon-align pr-2" aria-hidden>delete</mat-icon>{{ 'PLAN-LISTING.ACTIONS.DELETE' | translate }}
|
||||||
</a>
|
</div>
|
||||||
<a class="col-auto pointer" *ngIf="showActionsMenu" [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
|
<div role="button" class="col-auto pointer" *ngIf="showActionsMenu" [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
|
||||||
<mat-icon>more_horiz</mat-icon>
|
<mat-icon>more_horiz</mat-icon>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<mat-menu #exportMenu="matMenu" xPosition="before">
|
<mat-menu #exportMenu="matMenu" xPosition="before">
|
||||||
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Plan)' (click)="fileTransformerService.exportPlan(plan.id, fileTransformer.repositoryId, fileTransformer.format, isPublic)">
|
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Plan)' (click)="fileTransformerService.exportPlan(plan.id, fileTransformer.repositoryId, fileTransformer.format, isPublic)">
|
||||||
|
|
|
@ -183,14 +183,14 @@ input[type="text"] {
|
||||||
color: var(--gray);
|
color: var(--gray);
|
||||||
}
|
}
|
||||||
|
|
||||||
.description-card-actions a,
|
.description-card-actions div,
|
||||||
.plan-card-actions a {
|
.plan-card-actions div {
|
||||||
color: var(--gray) !important;
|
color: var(--gray) !important;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description-card-actions a:hover,
|
.description-card-actions div:hover,
|
||||||
.plan-card-actions a:hover {
|
.plan-card-actions div:hover {
|
||||||
color: var(--primary-color) !important;
|
color: var(--primary-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -184,7 +184,7 @@
|
||||||
<ng-container *ngIf="isDraftPlan() && canFinalizePlan() && !isLocked">
|
<ng-container *ngIf="isDraftPlan() && canFinalizePlan() && !isLocked">
|
||||||
<div role="button" aria-describedby="{{ 'PLAN-OVERVIEW.ACTIONS.FINALIZE' | translate }}" class="row align-items-center" (click)="finalize(plan)">
|
<div role="button" aria-describedby="{{ 'PLAN-OVERVIEW.ACTIONS.FINALIZE' | translate }}" class="row align-items-center" (click)="finalize(plan)">
|
||||||
<div class="col-auto pr-0" aria-hidden>
|
<div class="col-auto pr-0" aria-hidden>
|
||||||
<button mat-mini-fab class="finalize-btn">
|
<button mat-mini-fab class="finalize-btn" aria-hidden="true">
|
||||||
<mat-icon class="mat-mini-fab-icon" aria-hidden>check</mat-icon>
|
<mat-icon class="mat-mini-fab-icon" aria-hidden>check</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -219,7 +219,7 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto pl-0">
|
<div class="col-auto pl-0">
|
||||||
<p class="mb-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">{{ 'PLAN-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
|
<p role="button" class="mb-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">{{ 'PLAN-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="demo-progress-bar-container">
|
<div class="demo-progress-bar-container">
|
||||||
<div class="percentage d-flex justify-content-center">{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}}</div>
|
<div class="percentage d-flex justify-content-center">{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}}</div>
|
||||||
<mat-progress-bar class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="value"></mat-progress-bar>
|
<mat-progress-bar class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="value" [attr.aria-label]="'ALT-TEXT.PROGRESS-BAR' | translate"></mat-progress-bar>
|
||||||
<div class="percentage" [ngStyle]="{'padding-left': value ? value - 10 + '%' : 0 + '%' }">{{value}}%</div>
|
<div class="percentage" [ngStyle]="{'padding-left': value ? value - 10 + '%' : 0 + '%' }">{{value}}%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="row mb-4">
|
<div class="row mb-4">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<img mat-card-avatar class="avatar" [src]="userProfile.avatarUrl" (error)="applyFallbackAvatar($event)" alt="{{''ALT-TEXT.USER-AVATAR' | translate}}">
|
<img mat-card-avatar class="avatar" [src]="userProfile.avatarUrl" (error)="applyFallbackAvatar($event)" alt="{{('ALT-TEXT.USER-AVATAR' | translate) ?? 'user avatar'}}">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto d-flex flex-column justify-content-center main-info">
|
<div class="col-auto d-flex flex-column justify-content-center main-info">
|
||||||
<div class="name">{{formGroup.get('name').value}}</div>
|
<div class="name">{{formGroup.get('name').value}}</div>
|
||||||
|
|
|
@ -2603,6 +2603,8 @@
|
||||||
"MORE-ACTIONS": "More actions",
|
"MORE-ACTIONS": "More actions",
|
||||||
"OPEN-MENU-FOR": "Open menu",
|
"OPEN-MENU-FOR": "Open menu",
|
||||||
"CLOSE-RELEASE": "Close release notifications",
|
"CLOSE-RELEASE": "Close release notifications",
|
||||||
"CLOSE-INTRO-CARD": "Close intro card"
|
"CLOSE-INTRO-CARD": "Close intro card",
|
||||||
|
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
|
||||||
|
"PROGRESS-BAR": "Percentage of the form that is completed"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2606,6 +2606,8 @@
|
||||||
"MORE-ACTIONS": "More actions",
|
"MORE-ACTIONS": "More actions",
|
||||||
"OPEN-MENU-FOR": "Open menu",
|
"OPEN-MENU-FOR": "Open menu",
|
||||||
"CLOSE-RELEASE": "Close release notifications",
|
"CLOSE-RELEASE": "Close release notifications",
|
||||||
"CLOSE-INTRO-CARD": "Close intro card"
|
"CLOSE-INTRO-CARD": "Close intro card",
|
||||||
|
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
|
||||||
|
"PROGRESS-BAR": "Percentage of the form that is completed"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2607,6 +2607,8 @@
|
||||||
"MORE-ACTIONS": "More actions",
|
"MORE-ACTIONS": "More actions",
|
||||||
"OPEN-MENU-FOR": "Open menu",
|
"OPEN-MENU-FOR": "Open menu",
|
||||||
"CLOSE-RELEASE": "Close release notifications",
|
"CLOSE-RELEASE": "Close release notifications",
|
||||||
"CLOSE-INTRO-CARD": "Close intro card"
|
"CLOSE-INTRO-CARD": "Close intro card",
|
||||||
|
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
|
||||||
|
"PROGRESS-BAR": "Percentage of the form that is completed"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2606,6 +2606,8 @@
|
||||||
"MORE-ACTIONS": "More actions",
|
"MORE-ACTIONS": "More actions",
|
||||||
"OPEN-MENU-FOR": "Open menu",
|
"OPEN-MENU-FOR": "Open menu",
|
||||||
"CLOSE-RELEASE": "Close release notifications",
|
"CLOSE-RELEASE": "Close release notifications",
|
||||||
"CLOSE-INTRO-CARD": "Close intro card"
|
"CLOSE-INTRO-CARD": "Close intro card",
|
||||||
|
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
|
||||||
|
"PROGRESS-BAR": "Percentage of the form that is completed"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2606,6 +2606,8 @@
|
||||||
"MORE-ACTIONS": "More actions",
|
"MORE-ACTIONS": "More actions",
|
||||||
"OPEN-MENU-FOR": "Open menu",
|
"OPEN-MENU-FOR": "Open menu",
|
||||||
"CLOSE-RELEASE": "Close release notifications",
|
"CLOSE-RELEASE": "Close release notifications",
|
||||||
"CLOSE-INTRO-CARD": "Close intro card"
|
"CLOSE-INTRO-CARD": "Close intro card",
|
||||||
|
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
|
||||||
|
"PROGRESS-BAR": "Percentage of the form that is completed"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2605,6 +2605,8 @@
|
||||||
"MORE-ACTIONS": "More actions",
|
"MORE-ACTIONS": "More actions",
|
||||||
"OPEN-MENU-FOR": "Open menu",
|
"OPEN-MENU-FOR": "Open menu",
|
||||||
"CLOSE-RELEASE": "Close release notifications",
|
"CLOSE-RELEASE": "Close release notifications",
|
||||||
"CLOSE-INTRO-CARD": "Close intro card"
|
"CLOSE-INTRO-CARD": "Close intro card",
|
||||||
|
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
|
||||||
|
"PROGRESS-BAR": "Percentage of the form that is completed"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2606,6 +2606,8 @@
|
||||||
"MORE-ACTIONS": "More actions",
|
"MORE-ACTIONS": "More actions",
|
||||||
"OPEN-MENU-FOR": "Open menu",
|
"OPEN-MENU-FOR": "Open menu",
|
||||||
"CLOSE-RELEASE": "Close release notifications",
|
"CLOSE-RELEASE": "Close release notifications",
|
||||||
"CLOSE-INTRO-CARD": "Close intro card"
|
"CLOSE-INTRO-CARD": "Close intro card",
|
||||||
|
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
|
||||||
|
"PROGRESS-BAR": "Percentage of the form that is completed"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2605,6 +2605,8 @@
|
||||||
"MORE-ACTIONS": "More actions",
|
"MORE-ACTIONS": "More actions",
|
||||||
"OPEN-MENU-FOR": "Open menu",
|
"OPEN-MENU-FOR": "Open menu",
|
||||||
"CLOSE-RELEASE": "Close release notifications",
|
"CLOSE-RELEASE": "Close release notifications",
|
||||||
"CLOSE-INTRO-CARD": "Close intro card"
|
"CLOSE-INTRO-CARD": "Close intro card",
|
||||||
|
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
|
||||||
|
"PROGRESS-BAR": "Percentage of the form that is completed"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2606,6 +2606,8 @@
|
||||||
"MORE-ACTIONS": "More actions",
|
"MORE-ACTIONS": "More actions",
|
||||||
"OPEN-MENU-FOR": "Open menu",
|
"OPEN-MENU-FOR": "Open menu",
|
||||||
"CLOSE-RELEASE": "Close release notifications",
|
"CLOSE-RELEASE": "Close release notifications",
|
||||||
"CLOSE-INTRO-CARD": "Close intro card"
|
"CLOSE-INTRO-CARD": "Close intro card",
|
||||||
|
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
|
||||||
|
"PROGRESS-BAR": "Percentage of the form that is completed"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2606,6 +2606,8 @@
|
||||||
"MORE-ACTIONS": "More actions",
|
"MORE-ACTIONS": "More actions",
|
||||||
"OPEN-MENU-FOR": "Open menu",
|
"OPEN-MENU-FOR": "Open menu",
|
||||||
"CLOSE-RELEASE": "Close release notifications",
|
"CLOSE-RELEASE": "Close release notifications",
|
||||||
"CLOSE-INTRO-CARD": "Close intro card"
|
"CLOSE-INTRO-CARD": "Close intro card",
|
||||||
|
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
|
||||||
|
"PROGRESS-BAR": "Percentage of the form that is completed"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2606,6 +2606,8 @@
|
||||||
"MORE-ACTIONS": "More actions",
|
"MORE-ACTIONS": "More actions",
|
||||||
"OPEN-MENU-FOR": "Open menu",
|
"OPEN-MENU-FOR": "Open menu",
|
||||||
"CLOSE-RELEASE": "Close release notifications",
|
"CLOSE-RELEASE": "Close release notifications",
|
||||||
"CLOSE-INTRO-CARD": "Close intro card"
|
"CLOSE-INTRO-CARD": "Close intro card",
|
||||||
|
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
|
||||||
|
"PROGRESS-BAR": "Percentage of the form that is completed"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -157,7 +157,6 @@ $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme
|
||||||
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
|
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
|
||||||
font-family: Roboto, sans-serif;
|
font-family: Roboto, sans-serif;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 1.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -172,6 +171,7 @@ a {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.required-text {
|
.required-text {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
@ -480,7 +480,7 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
|
||||||
|
|
||||||
&.rounded-btn{
|
&.rounded-btn{
|
||||||
padding: 0.62rem 1.87rem;
|
padding: 0.62rem 1.87rem;
|
||||||
height: 40px;
|
min-height: 40px;
|
||||||
|
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
Loading…
Reference in New Issue