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

focusable navbar, translations for alt texts, move all dashboard styles to dashboard.scss

This commit is contained in:
mchouliara 2024-09-20 15:16:07 +03:00
parent f7456207ba
commit 0da19960db
24 changed files with 281 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.html
View File

@ -14,7 +14,7 @@
<div class="row justify-content-center mt-4 mb-2"> <div class="row justify-content-center mt-4 mb-2">
<div class="col-auto add-question" (click)="addFieldSetAfter(-9999,0)" *ngIf="!viewOnly"> <div class="col-auto add-question" (click)="addFieldSetAfter(-9999,0)" *ngIf="!viewOnly">
<img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2" <img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2"
alt="Add Question icon"> aria-hidden>
<span>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span> <span>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
</div> </div>
</div> </div>
@ -30,7 +30,7 @@
<div class="action-list-item" (click)="onAddFieldSet()"> <div class="action-list-item" (click)="onAddFieldSet()">
<!-- <mat-icon class="action-list-icon">folder</mat-icon> --> <!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon" <img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon"
alt="Add Question icon"> aria-hidden>
<span <span
class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET'
| translate}}</span> | translate}}</span>
@ -86,7 +86,7 @@
<div class="action-list-item" (click)="onAddFieldSet()"> <div class="action-list-item" (click)="onAddFieldSet()">
<!-- <mat-icon class="action-list-icon">folder</mat-icon> --> <!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon" <img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon"
alt="Add Question icon"> aria-hidden>
<span <span
class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET'
| translate}}</span> | translate}}</span>
@ -98,7 +98,7 @@
<div class="action-list-item" (click)="onCloneFieldSet(fieldset)"> <div class="action-list-item" (click)="onCloneFieldSet(fieldset)">
<!-- <mat-icon class="action-list-icon">file_copy</mat-icon> --> <!-- <mat-icon class="action-list-icon">file_copy</mat-icon> -->
<img src="/assets/images/editor/icons/clone.svg" class="input_icon" <img src="/assets/images/editor/icons/clone.svg" class="input_icon"
alt="Clone icon"> aria-hidden>
<span class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.CLONE' | <span class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.CLONE' |
translate}}</span> translate}}</span>
</div> </div>
@ -120,7 +120,7 @@
<div class="col-auto add-question" (click)="addFieldSetAfter(fieldset.get('ordinal').value, i)" <div class="col-auto add-question" (click)="addFieldSetAfter(fieldset.get('ordinal').value, i)"
*ngIf="!viewOnly"> *ngIf="!viewOnly">
<img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2" <img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2"
alt="Add Question icon"> aria-hidden>
<span>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span> <span>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
</div> </div>
</div> </div>

4
frontend/src/app/ui/admin/user/listing/user-listing.component.html
View File

@ -68,8 +68,8 @@
<ng-template #nameCellTemplate let-row="row" let-item> <ng-template #nameCellTemplate let-row="row" let-item>
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-auto"> <div class="col-auto">
<img *ngIf="row?.additionalInfo?.avatarUrl" class="user-avatar" [src]="row?.additionalInfo?.avatarUrl" (error)="this.setDefaultAvatar($event)" alt="user avatar"> <img *ngIf="row?.additionalInfo?.avatarUrl" class="user-avatar" [src]="row?.additionalInfo?.avatarUrl" (error)="this.setDefaultAvatar($event)" aria-hidden>
<img *ngIf="!row?.additionalInfo?.avatarUrl" class="user-avatar" [src]="'assets/images/profile-placeholder.png'" alt="user avatar"> <img *ngIf="!row?.additionalInfo?.avatarUrl" class="user-avatar" [src]="'assets/images/profile-placeholder.png'" aria-hidden>
</div> </div>
<div class="col">{{row.name}}</div> <div class="col">{{row.name}}</div>

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

@ -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="new releases icon"> <img src="../../../assets/images/new-releases-logo.png" alt="{{'ALT-TEXT.NEW-RELEASES' | translate}}">
</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="colorful art of a person working on an oversized computer" src="../../../assets/images/dashboard-popup.png"> <img class="laptop-img\6" alt="{{'ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate }}" src="../../../assets/images/dashboard-popup.png">
</span> </span>
</div> </div>
</div> </div>
@ -62,25 +62,25 @@
<div *ngIf="this.hasPlans()" class="col"> <div *ngIf="this.hasPlans()" class="col">
<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div> <div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
<mat-tab-group dynamicHeight color="#00000" mat-stretch-tabs="false" mat-align-tabs="start" class="my-mat-tab remove-border-bottom" [selectedIndex]="indexFromCurrentType" (selectedTabChange)="currentType = $event.tab.ariaLabel"> <mat-tab-group dynamicHeight color="#00000" mat-stretch-tabs="false" mat-align-tabs="start" class="my-mat-tab remove-border-bottom" [selectedIndex]="indexFromCurrentType" (selectedTabChange)="currentType = $event.tab.ariaLabel">
<mat-tab aria-label="recent" label="{{'DASHBOARD.ALL' | translate}}"> <mat-tab aria-label="{{'DASHBOARD.ALL' | translate}}" label="{{'DASHBOARD.ALL' | translate}}">
<app-recent-edited-activity <app-recent-edited-activity
[currentType]="currentType" [currentType]="currentType"
[type]="ActivityListingType.Recent" [type]="ActivityListingType.Recent"
></app-recent-edited-activity> ></app-recent-edited-activity>
</mat-tab> </mat-tab>
<mat-tab aria-label="drafts" label="{{'DASHBOARD.DRAFTS' | translate}}"> <mat-tab aria-label="{{'DASHBOARD.DRAFTS' | translate}}" label="{{'DASHBOARD.DRAFTS' | translate}}">
<app-recent-edited-activity <app-recent-edited-activity
[currentType]="currentType" [currentType]="currentType"
[type]="ActivityListingType.Drafts" [type]="ActivityListingType.Drafts"
></app-recent-edited-activity> ></app-recent-edited-activity>
</mat-tab> </mat-tab>
<mat-tab aria-label="plans" label="{{'DASHBOARD.PLANS' | translate}}"> <mat-tab aria-label="{{'DASHBOARD.PLANS' | translate}}" label="{{'DASHBOARD.PLANS' | translate}}">
<app-recent-edited-activity <app-recent-edited-activity
[currentType]="currentType" [currentType]="currentType"
[type]="ActivityListingType.Plans" [type]="ActivityListingType.Plans"
></app-recent-edited-activity> ></app-recent-edited-activity>
</mat-tab> </mat-tab>
<mat-tab aria-label="descriptions" label="{{'DASHBOARD.DESCRIPTIONS' | translate}}"> <mat-tab aria-label="{{'DASHBOARD.DESCRIPTIONS' | translate}}" label="{{'DASHBOARD.DESCRIPTIONS' | translate}}">
<app-recent-edited-activity <app-recent-edited-activity
[currentType]="currentType" [currentType]="currentType"
[type]="ActivityListingType.Descriptions" [type]="ActivityListingType.Descriptions"
@ -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="colorful art of a person working on an oversized computer" src="../../../assets/images/dashboard-popup.png"> <img class="col-auto ml-auto laptop-img" alt="{{'ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate }}" src="../../../assets/images/dashboard-popup.png">
</div> </div>
</div> </div>
</div> </div>

2
frontend/src/app/ui/description/listing/description-listing.component.html
View File

@ -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="colorful art of a person working on an oversized computer" src="../../../assets/images/dashboard-popup.png"> <img class="col-auto ml-auto laptop-img" alt="{{'ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate }}" src="../../../assets/images/dashboard-popup.png">
</div> </div>
</div> </div>
</div> </div>

4
frontend/src/app/ui/description/listing/filtering/description-filter.component.html
View File

@ -11,7 +11,7 @@
<!-- Status Filter--> <!-- Status Filter-->
<div class="col-10" *ngIf="!isPublic"> <div class="col-10" *ngIf="!isPublic">
<h6 class="category-title">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.NAME' | translate}}</h6> <h6 class="category-title">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.NAME' | translate}}</h6>
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')" class="row"> <mat-radio-group aria-label="{{'ALT-TEXT.SELECT-OPTION' | translate}}" [formControl]="formGroup.get('status')" class="row">
<mat-radio-button [value]="null" [checked]="formGroup.get('status')?.value == null" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.TYPES.ANY' | translate }}</mat-radio-button> <mat-radio-button [value]="null" [checked]="formGroup.get('status')?.value == null" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.TYPES.ANY' | translate }}</mat-radio-button>
<mat-radio-button [value]="statuses.Draft" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.TYPES.DRAFT' | translate }}</mat-radio-button> <mat-radio-button [value]="statuses.Draft" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.TYPES.DRAFT' | translate }}</mat-radio-button>
<mat-radio-button [value]="statuses.Finalized" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.TYPES.FINALIZED' | translate }}</mat-radio-button> <mat-radio-button [value]="statuses.Finalized" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.TYPES.FINALIZED' | translate }}</mat-radio-button>
@ -63,7 +63,7 @@
<!-- Role Filter --> <!-- Role Filter -->
<div class="col-10" *ngIf="isAuthenticated()"> <div class="col-10" *ngIf="isAuthenticated()">
<h6 class="category-title">{{'DESCRIPTION-LISTING.FILTERS.ROLE.NAME' | translate }}</h6> <h6 class="category-title">{{'DESCRIPTION-LISTING.FILTERS.ROLE.NAME' | translate }}</h6>
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('role')" class="row"> <mat-radio-group aria-label="{{'ALT-TEXT.SELECT-OPTION' | translate}}" [formControl]="formGroup.get('role')" class="row">
<mat-radio-button [value]="null" [checked]="formGroup.get('role').value == null" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.ROLE.TYPES.ANY' | translate }}</mat-radio-button> <mat-radio-button [value]="null" [checked]="formGroup.get('role').value == null" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.ROLE.TYPES.ANY' | translate }}</mat-radio-button>
<mat-radio-button [value]="planRole.Owner" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.ROLE.TYPES.OWNER' | translate }}</mat-radio-button> <mat-radio-button [value]="planRole.Owner" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.ROLE.TYPES.OWNER' | translate }}</mat-radio-button>
<mat-radio-button [value]="planRole.Viewer" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.ROLE.TYPES.VIEWER' | translate }}</mat-radio-button> <mat-radio-button [value]="planRole.Viewer" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.ROLE.TYPES.VIEWER' | translate }}</mat-radio-button>

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

@ -1,25 +1,25 @@
<ng-container> <ng-container>
<nav class="navbar navbar-expand-lg fixed-navbar"> <nav class="navbar navbar-expand-lg fixed-navbar">
<div class="container-fluid h-100"> <div class="container-fluid h-100">
<button class="hamburger change" id="hamburger" (click)="toggleMyNav($event)" aria-label="hide or show navigation sidebar"> <button class="hamburger change" id="hamburger" (click)="toggleMyNav($event)" [attr.aria-label]="'ALT-TEXT.HAMBURGER' | translate">
<div class="icon-bar1"></div> <div class="icon-bar1"></div>
<div class="icon-bar2"></div> <div class="icon-bar2"></div>
<div class="icon-bar3"></div> <div class="icon-bar3"></div>
</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="go to homepage" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension"> <img class="logo-image" alt="{{'ALT-TEXT.GO-TO-MAIN' | translate}}" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension">
</a> </a>
</h1> </h1>
@if(extraImageURL){ @if(extraImageURL){
<a class="extra-logo" [routerLink]="routerUtils.generateUrl(['home'])" aria-label="home"> <a class="extra-logo" [routerLink]="routerUtils.generateUrl(['home'])">
<img alt="logo image" class="extra-logo-image" [src]="extraImageURL"> <img aria-hidden class="extra-logo-image" [src]="extraImageURL" alt="{{'ALT-TEXT.GO-TO-MAIN' | translate}}" >
</a> </a>
} }
<ul class="horizontal-list justify-content-end" id="navigation"> <ul class="horizontal-list justify-content-end" id="navigation">
<li class="navbar-item-sm ml-auto"> <li class="navbar-item-sm ml-auto">
<button mat-icon-button [matMenuTriggerFor]="toggleMenu" aria-label="user options dropwdown"> <button mat-icon-button [matMenuTriggerFor]="toggleMenu" [attr.aria-label]="'ALT-TEXT.USER-OPTIONS' | translate">
<mat-icon>more_horiz</mat-icon> <mat-icon>more_horiz</mat-icon>
</button> </button>
</li> </li>
@ -31,16 +31,16 @@
<button mat-button class="faq-title" (click)="openFaqDialog()">{{ 'FAQ.TITLE' | translate }}</button> <button mat-button class="faq-title" (click)="openFaqDialog()">{{ 'FAQ.TITLE' | translate }}</button>
</li> </li>
<li class="navbar-item-lg" *ngIf="!(isAuthenticated() && onInvalidUrl())"> <li class="navbar-item-lg" *ngIf="!(isAuthenticated() && onInvalidUrl())">
<button mat-button [matMenuTriggerFor]="languageMenu" class="lang" aria-label="language select"> <button mat-button [matMenuTriggerFor]="languageMenu" class="lang">
<mat-icon>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span> <mat-icon aria-hidden>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
<mat-icon iconPositionEnd aria-hidden>arrow_drop_down</mat-icon> <mat-icon iconPositionEnd alt="{{'ALT-TEXT.LANGUAGE-SELECT' | translate}}">arrow_drop_down</mat-icon>
</button> </button>
<mat-menu #languageMenu="matMenu" class="nav-mat-menu"> <mat-menu #languageMenu="matMenu" class="nav-mat-menu">
<app-language (languageChange)="getLanguage($event)" class="d-lg-block d-none"></app-language> <app-language (languageChange)="getLanguage($event)" class="d-lg-block d-none"></app-language>
</mat-menu> </mat-menu>
</li> </li>
<li class="navbar-item-lg" *ngIf="isAuthenticated()"> <li class="navbar-item-lg" *ngIf="isAuthenticated()">
<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0 lang" aria-label="tenants"> <button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0 lang" aria-label="{{'ALT-TEXT.TENANT-SELECT' | translate}}">
<mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon> <mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon>
<mat-icon class="m-0" aria-hidden>arrow_drop_down</mat-icon> <mat-icon class="m-0" aria-hidden>arrow_drop_down</mat-icon>
</button> </button>
@ -52,16 +52,16 @@
<mat-menu #languageMenu="matMenu" class="nav-mat-menu"> <mat-menu #languageMenu="matMenu" class="nav-mat-menu">
<app-language (languageChange)="getLanguage($event)"></app-language> <app-language (languageChange)="getLanguage($event)"></app-language>
</mat-menu> </mat-menu>
<button mat-icon-button matTooltip="{{'NAV-BAR.INAPP-NOTIFICATIONS' | translate}}" (click)="toggleInAppNotifications()" aria-label="notifications"> <button mat-icon-button matTooltip="{{'NAV-BAR.INAPP-NOTIFICATIONS' | translate}}" (click)="toggleInAppNotifications()" [attr.aria-label]="'ALT-TEXT.NOTIFICATIONS' | translate">
<mat-icon aria-hidden [matBadge]="inAppNotificationCount" [matBadgeHidden]="inAppNotificationCount <= 0" matBadgeColor="warn">mail</mat-icon> <mat-icon aria-hidden [matBadge]="inAppNotificationCount" [matBadgeHidden]="inAppNotificationCount <= 0" matBadgeColor="warn" aria-hidden>mail</mat-icon>
</button> </button>
</li> </li>
<!-- Login --> <!-- Login -->
<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;" aria-label="user profile"> <button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;">
<img alt="user avatar image" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)"> <img alt="{{'ALT-TEXT.USER-OPTIONS' | translate}}" 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"/>
@ -78,17 +78,17 @@
<ul class="list m-2"> <ul class="list m-2">
<li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()" tabindex="0"> <li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()" tabindex="0">
<button mat-button class="faq-title" (click)="openFaqDialog()" aria-label="faq">{{ 'FAQ.TITLE' | translate }}</button> <button mat-button class="faq-title" (click)="openFaqDialog()" aria-label="faq">{{ 'FAQ.TITLE' | translate }}</button>
<button mat-button [matMenuTriggerFor]="languageMenu" class="lang" aria-label="language select" (click)="$event.stopPropagation();"> <button mat-button [matMenuTriggerFor]="languageMenu" class="lang" [attr.aria-label]="'ALT-TEXT.LANGUAGE-SELECT' | translate" (click)="$event.stopPropagation();">
<mat-icon>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span> <mat-icon aria-hidden>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
<mat-icon iconPositionEnd aria-hidden>arrow_drop_down</mat-icon> <mat-icon iconPositionEnd aria-hidden aria-hidden>arrow_drop_down</mat-icon>
</button> </button>
<mat-menu #languageMenu="matMenu" class="nav-mat-menu"> <mat-menu #languageMenu="matMenu" class="nav-mat-menu">
<app-language (languageChange)="getLanguage($event)"></app-language> <app-language (languageChange)="getLanguage($event)"></app-language>
</mat-menu> </mat-menu>
<ng-container *ngIf="isAuthenticated()"> <ng-container *ngIf="isAuthenticated()">
<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0" aria-label="tenants"> <button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0" [attr.aria-label]="'ALT-TEXT.TENANT-SELECT' | translate">
<mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon> <mat-icon class="m-0 material-symbols-outlined" aria-hidden>tenancy</mat-icon>
<mat-icon class="m-0">arrow_drop_down</mat-icon> <mat-icon class="m-0" aria-hidden>arrow_drop_down</mat-icon>
</button> </button>
<mat-menu #tenantMenu="matMenu" class="nav-mat-menu"> <mat-menu #tenantMenu="matMenu" class="nav-mat-menu">
<app-tenant-switch></app-tenant-switch> <app-tenant-switch></app-tenant-switch>

4
frontend/src/app/ui/plan/listing/filtering/plan-filter.component.html
View File

@ -9,7 +9,7 @@
<!-- Visibility Filter--> <!-- Visibility Filter-->
<div *ngIf="!isPublic" class="col-10"> <div *ngIf="!isPublic" class="col-10">
<h6 class="category-title">{{ 'PLAN-LISTING.FILTERS.STATUS.NAME' | translate }}</h6> <h6 class="category-title">{{ 'PLAN-LISTING.FILTERS.STATUS.NAME' | translate }}</h6>
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')" class="row"> <mat-radio-group aria-label="{{'ALT-TEXT.SELECT-OPTION' | translate}}" [formControl]="formGroup.get('status')" class="row">
<mat-radio-button [value]="null" [checked]="formGroup.get('status')?.value == null" class="col-12">{{ 'PLAN-LISTING.FILTERS.STATUS.TYPE.ANY' | translate }}</mat-radio-button> <mat-radio-button [value]="null" [checked]="formGroup.get('status')?.value == null" class="col-12">{{ 'PLAN-LISTING.FILTERS.STATUS.TYPE.ANY' | translate }}</mat-radio-button>
<mat-radio-button [value]="status.Draft" class="col-12">{{ 'PLAN-LISTING.FILTERS.STATUS.TYPE.DRAFT' | translate }}</mat-radio-button> <mat-radio-button [value]="status.Draft" class="col-12">{{ 'PLAN-LISTING.FILTERS.STATUS.TYPE.DRAFT' | translate }}</mat-radio-button>
<mat-radio-button [value]="status.Finalized" class="col-12">{{ 'PLAN-LISTING.FILTERS.STATUS.TYPE.FINALIZED' | translate }}</mat-radio-button> <mat-radio-button [value]="status.Finalized" class="col-12">{{ 'PLAN-LISTING.FILTERS.STATUS.TYPE.FINALIZED' | translate }}</mat-radio-button>
@ -51,7 +51,7 @@
<!-- Role Filter --> <!-- Role Filter -->
<div *ngIf="isAuthenticated()" class="col-10"> <div *ngIf="isAuthenticated()" class="col-10">
<h6 class="category-title">{{ 'PLAN-LISTING.FILTERS.ROLE.NAME' | translate }}</h6> <h6 class="category-title">{{ 'PLAN-LISTING.FILTERS.ROLE.NAME' | translate }}</h6>
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('role')" class="row"> <mat-radio-group aria-label="{{'ALT-TEXT.SELECT-OPTION' | translate}}" [formControl]="formGroup.get('role')" class="row">
<mat-radio-button [value]="null" [checked]="formGroup.get('role')?.value == null" class="col-12">{{ 'PLAN-LISTING.FILTERS.ROLE.TYPE.ANY' | translate }}</mat-radio-button> <mat-radio-button [value]="null" [checked]="formGroup.get('role')?.value == null" class="col-12">{{ 'PLAN-LISTING.FILTERS.ROLE.TYPE.ANY' | translate }}</mat-radio-button>
<mat-radio-button [value]="role.Owner" class="col-12">{{ 'PLAN-LISTING.FILTERS.ROLE.TYPE.OWNER' | translate }}</mat-radio-button> <mat-radio-button [value]="role.Owner" class="col-12">{{ 'PLAN-LISTING.FILTERS.ROLE.TYPE.OWNER' | translate }}</mat-radio-button>
<mat-radio-button [value]="role.Viewer" class="col-12">{{ 'PLAN-LISTING.FILTERS.ROLE.TYPE.VIEWER' | translate }}</mat-radio-button> <mat-radio-button [value]="role.Viewer" class="col-12">{{ 'PLAN-LISTING.FILTERS.ROLE.TYPE.VIEWER' | translate }}</mat-radio-button>

2
frontend/src/app/ui/plan/plan-user-field/plan-user-field.component.html
View File

@ -35,7 +35,7 @@
<mat-icon *ngIf="isUserSelected(userIndex)" [ngClass]="{'drag-handle-disabled': viewOnly}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon> <mat-icon *ngIf="isUserSelected(userIndex)" [ngClass]="{'drag-handle-disabled': viewOnly}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
</div> </div>
<div class="col-12 col-xl-auto"> <div class="col-12 col-xl-auto">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="user.get('userType')" (change)="userTypeChange($event, userIndex)" class="w-100"> <mat-button-toggle-group name="fontStyle" aria-label="{{'ALT-TEXT.INTERNAL-EXTERNAL-USER' | translate}}" [formControl]="user.get('userType')" (change)="userTypeChange($event, userIndex)" class="w-100">
<div *ngFor="let userType of planUserTypeEnumValues" class="col p-0"> <div *ngFor="let userType of planUserTypeEnumValues" class="col p-0">
<mat-button-toggle class="lang-button w-100" [value]="userType">{{enumUtils.toPlanUserTypeString(userType)}}</mat-button-toggle> <mat-button-toggle class="lang-button w-100" [value]="userType">{{enumUtils.toPlanUserTypeString(userType)}}</mat-button-toggle>
</div> </div>

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

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

81
frontend/src/app/ui/sidebar/sidebar.component.css
View File

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

83
frontend/src/app/ui/sidebar/sidebar.component.scss
View File

@ -1,5 +1,88 @@
$mat-card-header-size: 30px !default; $mat-card-header-size: 30px !default;
.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 { .my-mat-card-avatar {
height: $mat-card-header-size; height: $mat-card-header-size;
width: $mat-card-header-size; width: $mat-card-header-size;

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

@ -32,7 +32,7 @@ class GroupMenuItem {
@Component({ @Component({
selector: 'app-sidebar', selector: 'app-sidebar',
templateUrl: './sidebar.component.html', templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css', './sidebar.component.scss'] styleUrls: ['./sidebar.component.scss']
}) })
export class SidebarComponent implements OnInit { export class SidebarComponent implements OnInit {
generalItems: GroupMenuItem; generalItems: GroupMenuItem;

2
frontend/src/app/ui/user-profile/user-profile.component.html
View File

@ -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="user avatar"> <img mat-card-avatar class="avatar" [src]="userProfile.avatarUrl" (error)="applyFallbackAvatar($event)" alt="{{''ALT-TEXT.USER-AVATAR' | translate}}">
</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>

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

@ -2575,5 +2575,18 @@
}, },
"copy": "Copy", "copy": "Copy",
"clone": "Clone", "clone": "Clone",
"new-version": "New Version" "new-version": "New Version",
"ALT-TEXT": {
"HAMBURGER": "hide or show navigation sidebar",
"GO-TO-MAIN": "Go to home page",
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
"USER-OPTIONS": "Open user options",
"NEW-RELEASES": "New releases",
"LANGUAGE-SELECT": "Select Language",
"TENANT-SELECT": "Select Tenant",
"NOTIFICATIONS": "Notifications",
"USER-AVATAR": "User avatar",
"SELECT-OPTION": "Select an option",
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
}
} }

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

@ -2575,5 +2575,18 @@
}, },
"copy": "Copy", "copy": "Copy",
"clone": "Clone", "clone": "Clone",
"new-version": "New Version" "new-version": "New Version",
"ALT-TEXT": {
"HAMBURGER": "hide or show navigation sidebar",
"GO-TO-MAIN": "Go to home page",
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
"USER-OPTIONS": "Open user options",
"NEW-RELEASES": "New releases",
"LANGUAGE-SELECT": "Select Language",
"TENANT-SELECT": "Select Tenant",
"NOTIFICATIONS": "Notifications",
"USER-AVATAR": "User avatar",
"SELECT-OPTION": "Select an option",
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
}
} }

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

@ -2575,5 +2575,19 @@
}, },
"copy": "Copy", "copy": "Copy",
"clone": "Clone", "clone": "Clone",
"new-version": "New Version" "new-version": "New Version",
"ALT-TEXT": {
"HAMBURGER": "hide or show navigation sidebar",
"GO-TO-MAIN": "Go to home page",
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
"USER-OPTIONS": "Open user options",
"NEW-RELEASES": "New releases",
"LANGUAGE-SELECT": "Select Language",
"TENANT-SELECT": "Select Tenant",
"NOTIFICATIONS": "Notifications",
"USER-AVATAR": "User avatar",
"SELECT-OPTION": "Select an option",
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
}
} }

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

@ -2575,5 +2575,18 @@
}, },
"copy": "Copy", "copy": "Copy",
"clone": "Clone", "clone": "Clone",
"new-version": "New Version" "new-version": "New Version",
"ALT-TEXT": {
"HAMBURGER": "hide or show navigation sidebar",
"GO-TO-MAIN": "Go to home page",
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
"USER-OPTIONS": "Open user options",
"NEW-RELEASES": "New releases",
"LANGUAGE-SELECT": "Select Language",
"TENANT-SELECT": "Select Tenant",
"NOTIFICATIONS": "Notifications",
"USER-AVATAR": "User avatar",
"SELECT-OPTION": "Select an option",
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
}
} }

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

@ -2575,5 +2575,18 @@
}, },
"copy": "Copy", "copy": "Copy",
"clone": "Clone", "clone": "Clone",
"new-version": "New Version" "new-version": "New Version",
"ALT-TEXT": {
"HAMBURGER": "hide or show navigation sidebar",
"GO-TO-MAIN": "Go to home page",
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
"USER-OPTIONS": "Open user options",
"NEW-RELEASES": "New releases",
"LANGUAGE-SELECT": "Select Language",
"TENANT-SELECT": "Select Tenant",
"NOTIFICATIONS": "Notifications",
"USER-AVATAR": "User avatar",
"SELECT-OPTION": "Select an option",
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
}
} }

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

@ -2575,5 +2575,18 @@
}, },
"copy": "Copy", "copy": "Copy",
"clone": "Clone", "clone": "Clone",
"new-version": "New Version" "new-version": "New Version",
"ALT-TEXT": {
"HAMBURGER": "hide or show navigation sidebar",
"GO-TO-MAIN": "Go to home page",
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
"USER-OPTIONS": "Open user options",
"NEW-RELEASES": "New releases",
"LANGUAGE-SELECT": "Select Language",
"TENANT-SELECT": "Select Tenant",
"NOTIFICATIONS": "Notifications",
"USER-AVATAR": "User avatar",
"SELECT-OPTION": "Select an option",
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
}
} }

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

@ -2575,5 +2575,18 @@
}, },
"copy": "Copy", "copy": "Copy",
"clone": "Clone", "clone": "Clone",
"new-version": "New Version" "new-version": "New Version",
"ALT-TEXT": {
"HAMBURGER": "hide or show navigation sidebar",
"GO-TO-MAIN": "Go to home page",
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
"USER-OPTIONS": "Open user options",
"NEW-RELEASES": "New releases",
"LANGUAGE-SELECT": "Select Language",
"TENANT-SELECT": "Select Tenant",
"NOTIFICATIONS": "Notifications",
"USER-AVATAR": "User avatar",
"SELECT-OPTION": "Select an option",
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
}
} }

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

@ -2575,5 +2575,18 @@
}, },
"copy": "Copy", "copy": "Copy",
"clone": "Clone", "clone": "Clone",
"new-version": "New Version" "new-version": "New Version",
"ALT-TEXT": {
"HAMBURGER": "hide or show navigation sidebar",
"GO-TO-MAIN": "Go to home page",
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
"USER-OPTIONS": "Open user options",
"NEW-RELEASES": "New releases",
"LANGUAGE-SELECT": "Select Language",
"TENANT-SELECT": "Select Tenant",
"NOTIFICATIONS": "Notifications",
"USER-AVATAR": "User avatar",
"SELECT-OPTION": "Select an option",
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
}
} }

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

@ -2575,5 +2575,18 @@
}, },
"copy": "Copy", "copy": "Copy",
"clone": "Clone", "clone": "Clone",
"new-version": "New Version" "new-version": "New Version",
"ALT-TEXT": {
"HAMBURGER": "hide or show navigation sidebar",
"GO-TO-MAIN": "Go to home page",
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
"USER-OPTIONS": "Open user options",
"NEW-RELEASES": "New releases",
"LANGUAGE-SELECT": "Select Language",
"TENANT-SELECT": "Select Tenant",
"NOTIFICATIONS": "Notifications",
"USER-AVATAR": "User avatar",
"SELECT-OPTION": "Select an option",
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
}
} }

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

@ -2575,5 +2575,18 @@
}, },
"copy": "Copy", "copy": "Copy",
"clone": "Clone", "clone": "Clone",
"new-version": "New Version" "new-version": "New Version",
"ALT-TEXT": {
"HAMBURGER": "hide or show navigation sidebar",
"GO-TO-MAIN": "Go to home page",
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
"USER-OPTIONS": "Open user options",
"NEW-RELEASES": "New releases",
"LANGUAGE-SELECT": "Select Language",
"TENANT-SELECT": "Select Tenant",
"NOTIFICATIONS": "Notifications",
"USER-AVATAR": "User avatar",
"SELECT-OPTION": "Select an option",
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
}
} }

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

@ -2575,5 +2575,18 @@
}, },
"copy": "Copy", "copy": "Copy",
"clone": "Clone", "clone": "Clone",
"new-version": "New Version" "new-version": "New Version",
"ALT-TEXT": {
"HAMBURGER": "hide or show navigation sidebar",
"GO-TO-MAIN": "Go to home page",
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
"USER-OPTIONS": "Open user options",
"NEW-RELEASES": "New releases",
"LANGUAGE-SELECT": "Select Language",
"TENANT-SELECT": "Select Tenant",
"NOTIFICATIONS": "Notifications",
"USER-AVATAR": "User avatar",
"SELECT-OPTION": "Select an option",
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
}
} }