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

refactor dashboard, top navbar

This commit is contained in:
mchouliara 2024-09-17 11:50:12 +03:00
parent 94a23c0ee0
commit 74a67236a0
48 changed files with 257 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/library/guided-tour/guided-tour.component.html
View File

@ -30,14 +30,14 @@
(click)="guidedTourService.nextStep()">
{{ nextText }}
</button>
<button *ngIf="!guidedTourService.onResizeMessage && !currentTourStep.isStepUnique"
<button *ngIf="!guidedTourService.onResizeMessage && !currentTourStep.isStepUnique" mat-button
(click)="guidedTourService.skipTour()" class="rounded-btn primary-inverted">
{{ skipText }}
</button>
</div>
</div>
<div class="col-auto p-0 d-flex align-items-end">
<img src="../../../assets/images/guided-tour-side.png">
<img src="../../../assets/images/guided-tour-side.png" alt="cartoon tour pointing to text with raised arm">
</div>
</div>
</div>

2
frontend/src/app/library/notification/popup/popup-notification.component.html
View File

@ -14,6 +14,6 @@
</div>
<div mat-dialog-actions class="row d-flex">
<div class="ml-auto col-auto">
<button mat-button tabindex="-1" class="rounded-btn primary-inverted" (click)="close()">{{'GENERAL.NOTIFICATION-DIALOG.POPUP.CLOSE' | translate}}</button>
<button mat-button class="rounded-btn primary-inverted" (click)="close()">{{'GENERAL.NOTIFICATION-DIALOG.POPUP.CLOSE' | translate}}</button>
</div>
</div>

2
frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.html
View File

@ -2,7 +2,7 @@
<div mat-dialog-title class="row d-flex align-items-center header">
<div class="col"><span class="template-title align-self-center" matTooltip="{{descriptionTemplate.label}}">{{'DESCRIPTION-TEMPLATE-PREVIEW.TEMPLATE' | translate}} - {{descriptionTemplate.label}}</span></div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="closeDialog()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="closeDialog()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div *ngIf="progressIndication" class="progress-bar">

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

@ -4,7 +4,7 @@
<h4>{{ data.message }}</h4>
</div>
<div class="col-auto ml-auto">
<button mat-icon-button tabindex="-1" (click)="cancel()">
<button mat-icon-button (click)="cancel()">
<mat-icon>close</mat-icon>
</button>
</div>

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

@ -4,7 +4,7 @@
<h4>{{ data.message }}</h4>
</div>
<div class="col-auto ml-auto">
<button mat-icon-button tabindex="-1" (click)="cancel()">
<button mat-icon-button (click)="cancel()">
<mat-icon>close</mat-icon>
</button>
</div>

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

@ -4,7 +4,7 @@
<h1 class="title">{{'USER-INVITE-TO-TENANT-DIALOG.TITLE' | translate}}</h1>
</div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="closeDialog()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="closeDialog()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div mat-dialog-content class="row">

2
frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html
View File

@ -14,7 +14,7 @@
</button>
</div>
<div class="col-auto pl-0 dense-4" >
<button mat-icon-button tabindex="-1" (click)="close()">
<button mat-icon-button (click)="close()">
<mat-icon>close</mat-icon>
</button>
</div>

2
frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.html
View File

@ -4,7 +4,7 @@
{{'CONTACT.SUPPORT.SUBTITLE' | translate}}
</div>
<div class="col-auto ml-auto">
<button mat-icon-button (click)="close()" tabindex="-1">
<button mat-icon-button (click)="close()">
<mat-icon>close</mat-icon>
</button>
</div>

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

@ -5,8 +5,10 @@
<div class="row flex-column-reverse flex-xl-row">
<div class="col-12 col-xl-10">
<div class="row">
<div *ngIf="newReleaseNotificationVisible" class="new-releases-card col-auto mt-0 mr-4">
<a class="col-auto d-flex" (click)="dismissNewReleaseNotification()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
<div *ngIf="newReleaseNotificationVisible" class="new-releases-card col-auto mt-0 pt-2 mr-4">
<button mat-icon-button aria-label="close release notifications" (click)="dismissNewReleaseNotification()">
<mat-icon>close</mat-icon>
</button>
<div class="row new-releases-hint-container m-0">
<p class="new-releases-chip mb-0 col-auto">{{'NEW-RELEASE-NOTIFICATION.HINT' | translate}}</p>
</div>
@ -24,8 +26,10 @@
</span>
</div>
</div>
<div class="card col-auto mt-0" [style.display]="isIntroCardVisible ? 'block' : 'none'">
<a *ngIf="this.hasPlans()" class="col-auto d-flex" (click)="dismissIntroCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
<div class="card col-auto mt-0 pt-2" [style.display]="isIntroCardVisible ? 'block' : 'none'">
<button mat-icon-button aria-label="close intro card" *ngIf="this.hasPlans()" (click)="dismissIntroCard()">
<mat-icon>close</mat-icon>
</button>
<p *ngIf="!this.hasPlans()" class="card-title mb-0 pt-4">{{'DASHBOARD.PLAN-QUESTION' | translate}}</p>
<p *ngIf="!this.hasPlans()" class="card-content mb-0">{{'DASHBOARD.INFO-PLAN-TEXT' | translate}}</p>
@ -50,7 +54,7 @@
</div>
</div>
<span class="col-auto ml-auto">
<img class="laptop-img\6" src="../../../assets/images/dashboard-popup.png">
<img class="laptop-img\6" alt="colorful art of a person working on an oversized computer" src="../../../assets/images/dashboard-popup.png">
</span>
</div>
</div>
@ -164,13 +168,15 @@
<div class="col-12 col-xl">
<div class="row">
<div class="col-auto card" [style.display]="isIntroCardVisible ? 'block' : 'none'">
<a class="col-auto d-flex" (click)="dismissIntroCard()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
<button mat-icon-button (click)="dismissIntroCard()" aria-label="close intro card">
<mat-icon>close</mat-icon>
</button>
<div class="d-flex flex-column align-items-center non-auth-title-container">
<h4 class="pt-4">{{'DASHBOARD.TITLE' | translate}}</h4>
<p class="col-auto app-info">{{'DASHBOARD.INFO-TEXT' | translate}}</p>
</div>
<div class="d-flex">
<img class="col-auto ml-auto laptop-img" src="../../../assets/images/dashboard-popup.png">
<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">
</div>
</div>
</div>

6
frontend/src/app/ui/dashboard/dashboard.component.scss
View File

@ -90,7 +90,7 @@
font-weight: 300;
font-size: 1.25rem;
letter-spacing: 0px;
color: #212121;
color: #000000;
opacity: 0.6;
}
@ -98,8 +98,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;
}

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

@ -2,7 +2,7 @@
<div mat-dialog-title class="row d-flex align-items-center">
<div class="col"><span>{{'DESCRIPTION-COPY-DIALOG.TITLE' | translate}}</span></div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>

4
frontend/src/app/ui/description/editor/description-base-fields-editor/dialog-description-template/deprecated-description-template-dialog.component.html
View File

@ -4,7 +4,7 @@
<h4 class="mt-1"> {{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.TITLE' | translate}} {{ data.label }}</h4>
</div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="cancel()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="cancel()"><mat-icon>close</mat-icon></button>
</div>
</div>
</div>
@ -18,7 +18,7 @@
</mat-dialog-content>
<mat-dialog-actions class="mt-3 mb-3 pb-1">
<div class="col-auto pb-1">
<button mat-button type="button" tabindex="-1" class="rounded-btn primary-inverted" (click)="cancel()"><span>{{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.ACTIONS.CANCEL' | translate}}</span></button>
<button mat-button type="button" class="rounded-btn primary-inverted" (click)="cancel()"><span>{{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.ACTIONS.CANCEL' | translate}}</span></button>
</div>
<div class="ml-auto col-auto pb-1">
<button mat-button type="button" class="rounded-btn primary" (click)="update()"><span>{{ 'DESCRIPTION-EDITOR.DEPRECATED-DESCRIPTION-TEMPLATE.ACTIONS.UPDATE' | translate}}</span></button>

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

@ -4,7 +4,7 @@
<h5 class="field-set-title">{{numberingText}} {{fieldSet.title}}</h5>
</div>
<div class="col-auto ml-auto">
<button mat-icon-button tabindex="-1" (click)="close()">
<button mat-icon-button (click)="close()">
<mat-icon>close</mat-icon>
</button>
</div>

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

@ -2,7 +2,7 @@
<div mat-dialog-title class="row d-flex p-0 m-0 header">
<span class="col template-title align-self-center">{{'NEW-DESCRIPTION-DIALOG.TITLE' | translate}}</span>
<span class="col-auto d-flex ml-auto align-self-center">
<button mat-icon-button (click)="closeDialog()" tabindex="-1">
<button mat-icon-button (click)="closeDialog()">
<mat-icon>close</mat-icon>
</button>
</span>

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()">
{{'DESCRIPTION-LISTING.ACTIONS.ADD-DESCRIPTION' | translate}}
</button>
<img class="col-auto ml-auto laptop-img" src="../../../assets/images/dashboard-popup.png">
<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">
</div>
</div>
</div>

2
frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.html
View File

@ -4,7 +4,7 @@
<span class="title">{{'DASHBOARD.SELECT-PLAN' | translate}}</span>
</div>
<div class="col-auto p-0">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div class="row mt-2 mb-4">

4
frontend/src/app/ui/faq/dialog/faq-dialog.component.html
View File

@ -4,13 +4,13 @@
{{'FAQ.TITLE' | translate}}
</div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div mat-dialog-content class="row pr-0">
<app-faq-content [isDialog]="isDialog"></app-faq-content>
</div>
<div mat-dialog-actions class="row">
<div class="ml-auto col-auto"><button mat-button tabindex="-1" mat-dialog-close class="rounded-btn neutral" (click)="cancel()">{{'FAQ.CLOSE' | translate}}</button></div>
<div class="ml-auto col-auto"><button mat-button mat-dialog-close class="rounded-btn neutral" (click)="cancel()">{{'FAQ.CLOSE' | translate}}</button></div>
</div>
</div>

2
frontend/src/app/ui/glossary/dialog/glossary-dialog.component.html
View File

@ -4,7 +4,7 @@
{{'GLOSSARY.TITLE' | translate}}
</div>
<div class="col-auto ml-auto">
<button mat-icon-button tabindex="-1" (click)="close()">
<button mat-icon-button (click)="close()">
<mat-icon>close</mat-icon>
</button>
</div>

2
frontend/src/app/ui/language/dialog/language-dialog.component.html
View File

@ -4,7 +4,7 @@
{{'LANGUAGE.TITLE' | translate}}
</div>
<div class="col-auto ml-auto">
<button mat-icon-button tabindex="-1" (click)="close()">
<button mat-icon-button (click)="close()">
<mat-icon>close</mat-icon>
</button>
</div>

6
frontend/src/app/ui/language/language-content/language.component.html
View File

@ -1,5 +1,5 @@
<mat-button-toggle-group class="lang-menu" vertical (change)="onLanguageSelected($event)" [value]="this.getCurrentLanguage()">
<div *ngFor="let lang of languages">
<mat-button-toggle class="lang-button" [value]="lang">{{'GENERAL.LANGUAGES.' + lang | translate}}</mat-button-toggle>
</div>
@for(lang of languages; track lang){
<mat-button-toggle class="no-borders" [value]="lang">{{'GENERAL.LANGUAGES.' + lang | translate}}</mat-button-toggle>
}
</mat-button-toggle-group>

7
frontend/src/app/ui/language/language-content/language.component.scss
View File

@ -1,9 +1,4 @@
::ng-deep.lang-menu {
border-color: transparent;
padding: 8px;
}
::ng-deep.lang-button {
padding-top: 15px;
padding-bottom: 15px;
}
}

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

@ -1,106 +1,109 @@
<ng-container>
<nav class="navbar navbar-expand-lg fixed-navbar">
<div class="container-fluid h-100">
<button class="hamburger change" id="hamburger" (click)="toggleMyNav($event)" title="hide or show navigation sidebar">
<div class="icon-bar1"></div>
<div class="icon-bar2"></div>
<div class="icon-bar3"></div>
</button>
<a class="logo mr-auto" [routerLink]="routerUtils.generateUrl(['home'])"><img class="logo-image" alt="website logo" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension"></a>
@if(extraImageURL){
<a class="extra-logo" [routerLink]="routerUtils.generateUrl(['home'])" aria-label="home">
<img alt="logo image" class="extra-logo-image" [src]="extraImageURL">
</a>
}
<div class="hamburger change" id="hamburger" (click)="toggleMyNav($event)">
<div class="icon-bar1"></div>
<div class="icon-bar2"></div>
<div class="icon-bar3"></div>
</div>
<a class="logo" [routerLink]="routerUtils.generateUrl(['home'])"><img class="logo-image" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension"></a>
<ng-container>
<a class="extra-logo" [routerLink]="routerUtils.generateUrl(['home'])"><img class="extra-logo-image" [src]="extraImageURL"></a>
</ng-container>
<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu">
<img *ngIf="this.isAuthenticated();else loginoption" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
</button>
<ul class="horizontal-list justify-content-end" id="navigation">
<li class="navbar-item-sm ml-auto">
@if(this.isAuthenticated() && !onInvalidUrl()){
<button type="button" [matMenuTriggerFor]="toggleMenu" aria-label="user options dropwdown">
<img alt="round user avatar image" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
</button>
}@else{
<button mat-icon-button [matMenuTriggerFor]="toggleMenu" aria-label="user options dropwdown">
<mat-icon>more_horiz</mat-icon>
</button>
}
</li>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<div class="new-plan-dialog col-md-auto ml-auto">
<li class="new-plan-dialog col-md-auto ml-auto navbar-item-lg">
<button type="button" mat-button class="rounded-btn primary" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
</div>
<div class="col-md-auto p-0" *ngIf="!(isAuthenticated() && onInvalidUrl())">
<a class="ml-4 mr-4 faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
<button mat-button [matMenuTriggerFor]="languageMenu" class="lang">
</li>
<li class="navbar-item-lg" *ngIf="!(isAuthenticated() && onInvalidUrl())">
<button mat-button class="faq-title" (click)="openFaqDialog()">{{ 'FAQ.TITLE' | translate }}</button>
</li>
<li class="navbar-item-lg" *ngIf="!(isAuthenticated() && onInvalidUrl())">
<button mat-button [matMenuTriggerFor]="languageMenu" class="lang" aria-label="language select">
<mat-icon>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
<mat-icon iconPositionEnd>arrow_drop_down</mat-icon>
<mat-icon iconPositionEnd aria-hidden>arrow_drop_down</mat-icon>
</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>
</mat-menu>
</div>
<div class="col-md-auto p-0" *ngIf="isAuthenticated()">
<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0 lang">
</li>
<li class="navbar-item-lg" *ngIf="isAuthenticated()">
<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0 lang" aria-label="tenants">
<mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon>
<mat-icon class="m-0">arrow_drop_down</mat-icon>
</button>
<mat-menu #tenantMenu="matMenu" class="nav-mat-menu">
<app-tenant-switch class="d-lg-block d-none"></app-tenant-switch>
</mat-menu>
</div>
<div class="col-auto p-0" *ngIf="isAuthenticated() && authentication.hasPermission(authentication.permissionEnum.ViewMineInAppNotificationPage)">
</li>
<li class="navbar-item-lg" *ngIf="isAuthenticated() && authentication.hasPermission(authentication.permissionEnum.ViewMineInAppNotificationPage)">
<mat-menu #languageMenu="matMenu" class="nav-mat-menu">
<app-language (languageChange)="getLanguage($event)"></app-language>
</mat-menu>
<button mat-icon-button matTooltip="{{'NAV-BAR.INAPP-NOTIFICATIONS' | translate}}" (click)="toggleInAppNotifications()">
<mat-icon [matBadge]="inAppNotificationCount" [matBadgeHidden]="inAppNotificationCount <= 0" matBadgeColor="warn">mail</mat-icon>
<button mat-icon-button matTooltip="{{'NAV-BAR.INAPP-NOTIFICATIONS' | translate}}" (click)="toggleInAppNotifications()" aria-label="notifications">
<mat-icon aria-hidden="true" [matBadge]="inAppNotificationCount" [matBadgeHidden]="inAppNotificationCount <= 0" matBadgeColor="warn">mail</mat-icon>
</button>
</div>
</li>
<div class="col-auto pr-0">
<ul class="navbar-nav">
<!-- Login -->
<li class="nav-item" *ngIf="this.isAuthenticated();else loginoption">
<img mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="userName">
</li>
<ng-template #loginoption>
<button mat-button [routerLink]=" ['/login'] ">
<span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
</button>
</ng-template>
</ul>
</div>
</div>
<!-- Login -->
<li class="pl-2">
@if(this.isAuthenticated()) {
<button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;" aria-label="user profile">
<img alt="round user avatar image" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
</button>
}@else {
<ng-container *ngTemplateOutlet="loginOptionTemplate"/>
}
</li>
</ul>
<ng-template #loginOptionTemplate>
<button mat-button [routerLink]=" ['/login'] ">
<span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
</button>
</ng-template>
<mat-menu #toggleMenu="matMenu">
<div *ngIf="!(isAuthenticated() && onInvalidUrl())">
<ul class="list m-2">
<ng-template #loginoption>
<li class="d-flex justify-content-center avatar">
<button mat-button [routerLink]=" ['/login'] " class="d-flex justify-content-center">
<span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
</button>
</li>
</ng-template>
<li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()">
<a class="mr-2 faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
<button mat-button [matMenuTriggerFor]="languageMenu" class="p-0 lang" (click)="$event.stopPropagation();">
<mat-icon class="mr-2">language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #languageMenu="matMenu" class="nav-mat-menu">
<app-language (languageChange)="getLanguage($event)"></app-language>
</mat-menu>
<ng-container *ngIf="isAuthenticated()">
<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0">
<mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon>
<mat-icon class="m-0">arrow_drop_down</mat-icon>
</button>
<mat-menu #tenantMenu="matMenu" class="nav-mat-menu">
<app-tenant-switch></app-tenant-switch>
</mat-menu>
</ng-container>
</li>
<li class="d-flex justify-content-center">
<button type="button" mat-button class="rounded-btn primary" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
</li>
<li *ngIf="isAuthenticated()" class="d-flex justify-content-center">
<button type="button" mat-button class="rounded-btn neutral" (click)="logout()">{{ 'USER-DIALOG.LOG-OUT' | translate }}</button>
</li>
</ul>
</div>
<ul class="list m-2">
<li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()">
<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();">
<mat-icon>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
<mat-icon iconPositionEnd aria-hidden>arrow_drop_down</mat-icon>
</button>
<mat-menu #languageMenu="matMenu" class="nav-mat-menu">
<app-language (languageChange)="getLanguage($event)"></app-language>
</mat-menu>
<ng-container *ngIf="isAuthenticated()">
<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0" aria-label="tenants">
<mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon>
<mat-icon class="m-0">arrow_drop_down</mat-icon>
</button>
<mat-menu #tenantMenu="matMenu" class="nav-mat-menu">
<app-tenant-switch></app-tenant-switch>
</mat-menu>
</ng-container>
</li>
<li class="d-flex justify-content-center">
<button type="button" mat-button class="rounded-btn primary" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
</li>
<li *ngIf="isAuthenticated()" class="d-flex justify-content-center">
<button type="button" mat-button class="rounded-btn neutral" (click)="logout()">{{ 'USER-DIALOG.LOG-OUT' | translate }}</button>
</li>
</ul>
</mat-menu>
</div>
</nav>

22
frontend/src/app/ui/navbar/navbar.component.scss
View File

@ -1,5 +1,22 @@
$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;
@ -66,6 +83,7 @@ $mat-card-header-size: 40px !default;
}
.hamburger {
all:unset;
display: inline-block;
cursor: pointer;
padding: 0.6rem;
@ -73,7 +91,7 @@ $mat-card-header-size: 40px !default;
margin-right: 0.8rem;
}
.hamburger:hover {
.hamburger:hover, .hamburger:focus {
background-color: #ececec !important;
border-radius: 50%;
}
@ -166,4 +184,4 @@ $mat-card-header-size: 40px !default;
.mat-mdc-menu-content {
padding: 0 !important;
}
}
}

24
frontend/src/app/ui/navbar/user-dialog/user-dialog.component.html
View File

@ -1,17 +1,9 @@
<div class="dropdown-top"></div>
<mat-action-list class="profile-settings p-2 unset-font-size">
<button mat-list-item class="profile pl-3 pr-3 w-100" (click)="navigateToProfile()">{{'USER-DIALOG.USER-PROFILE-SETTINGS' | translate}}</button>
<button mat-list-item class="profile pl-3 pr-3 w-100" (click)="navigateToMyPlans()">{{'USER-PROFILE.ASSOCIATED-PLANS' | translate}}</button>
<mat-divider></mat-divider>
<button mat-list-item class="logout pl-3 pr-3 w-100" (click)="logout()">
{{ 'USER-DIALOG.LOG-OUT' | translate }}
</button>
</mat-action-list>
<form>
<div class="mt-2 col-12 dropdown-options">
<mat-divider class="top-divider"></mat-divider>
<div class="profile-settings">
<a mat-button class="profile mt-2 w-100 ml-0 pl-1 d-inline-block" (click)="navigateToProfile()">{{'USER-DIALOG.USER-PROFILE-SETTINGS' | translate}}</a>
<a mat-button class="profile mb-2 w-100 ml-0 pl-1 d-inline-block" (click)="navigateToMyPlans()">{{'USER-PROFILE.ASSOCIATED-PLANS' | translate}}</a>
</div>
<mat-divider></mat-divider>
<div>
<a mat-button class="logout mt-2 w-100 ml-0 pl-1 d-inline-block" (click)="logout()">
{{ 'USER-DIALOG.LOG-OUT' | translate }}
</a>
</div>
</div>
</form>

51
frontend/src/app/ui/navbar/user-dialog/user-dialog.component.scss
View File

@ -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;
.profile-settings {
color: #212121;
height: 1.875rem;
line-height: 1.875rem;
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__primary-text{
font-size: unset;
}

2
frontend/src/app/ui/plan/clone-dialog/plan-clone-dialog.component.html
View File

@ -2,7 +2,7 @@
<div class="row align-items-center mt-3">
<div class="col heading-1">{{'PLAN-CLONE-DIALOG.TITLE' | translate}}</div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
<!-- Title Field -->

2
frontend/src/app/ui/plan/invitation/dialog/plan-invitation-dialog.component.html
View File

@ -4,7 +4,7 @@
<h1 class="title">{{'PLAN-USER-INVITATION-DIALOG.TITLE' | translate}}</h1>
</div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="closeDialog()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="closeDialog()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div mat-dialog-content class="row">

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

@ -7,7 +7,7 @@
<p class="mt-4 pt-2">{{'PLAN-LISTING.TEXT-INFO-QUESTION' | translate}} <a class="zenodo-link" href="https://zenodo.org/communities/liber-plan-cat/?page=1&size=20" target="_blank">{{'PLAN-LISTING.LINK-ZENODO' | translate}}</a> {{'PLAN-LISTING.GET-IDEA' | translate}}</p>
<div class="d-flex">
<div *ngIf="!isPublic" class="col left-content" (click)="restartTour()">{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}</div>
<img class="col-auto ml-auto laptop-img" src="../../../assets/images/dashboard-popup.png">
<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">
</div>
</div>
</div>

2
frontend/src/app/ui/plan/new-version-dialog/plan-new-version-dialog.component.html
View File

@ -2,7 +2,7 @@
<div class="row align-items-center mt-3">
<div class="col heading-1">{{'PLAN-NEW-VERSION-DIALOG.TITLE' | translate}}</div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
<!-- Title Field -->

4
frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.html
View File

@ -2,7 +2,7 @@
<div class="d-flex justify-content-between">
<div class="pl-0 col-auto"><a class="logo"><img class="logo" src="../../../assets/images/new-plan-logo.png" onerror="this.style.display='none'"></a></div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
@ -17,7 +17,7 @@
<div class="d-flex justify-content-between align-items-center">
<div class="import-file col-auto p-0">
<div class="pr-2">
<button mat-button tabindex="-1" type="button" class="rounded-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
<button mat-button type="button" class="rounded-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
<mat-icon class="pr-2">file_upload</mat-icon>
{{ 'START-NEW-PLAN-DIALOG.IMPORT-FROM-FILE' | translate }}
</button>

2
frontend/src/app/ui/plan/new/start-new-plan-dialogue/start-new-plan-dialog.component.scss
View File

@ -20,7 +20,7 @@
}
.content {
margin: 2.17rem 2.304rem 1.1875rem 3.065rem;
margin: 0.5rem 2rem;
}
.title,

2
frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.html
View File

@ -4,7 +4,7 @@
<h4>{{'PLAN-UPLOAD.TITLE' | translate}}</h4>
</div>
<div class="justify-content-end">
<button mat-icon-button tabindex="-1" (click)="close()">
<button mat-icon-button (click)="close()">
<mat-icon>close</mat-icon>
</button>
</div>

6
frontend/src/app/ui/plan/plan-delete-dialog/plan-delete-dialog.component.html
View File

@ -1,7 +1,7 @@
<div mat-dialog-title class="mt-2 row d-flex align-items-center">
<div class="col"><span class="text-danger">{{'PLAN-DELETE-DIALOG.WARNING' | translate}}</span></div>
<div>
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
<mat-dialog-content>
@ -16,7 +16,7 @@
</ng-container>
</div>
<div class="row" style="justify-content: space-between;">
<div class="col-auto"><button mat-button type="button" tabindex="-1" class="rounded-btn neutral" (click)="cancel()">{{'PLAN-DELETE-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
<div class="col-auto"><button mat-button type="button" tabindex="-1" (click)="confirm()" class="rounded-btn delete-inverted">{{'PLAN-DELETE-DIALOG.ACTIONS.DELETE' | translate}}</button></div>
<div class="col-auto"><button mat-button type="button" class="rounded-btn neutral" (click)="cancel()">{{'PLAN-DELETE-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
<div class="col-auto"><button mat-button type="button" (click)="confirm()" class="rounded-btn delete-inverted">{{'PLAN-DELETE-DIALOG.ACTIONS.DELETE' | translate}}</button></div>
</div>
</mat-dialog-content>

2
frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.html
View File

@ -2,7 +2,7 @@
<div class="row d-flex flex-row">
<div mat-dialog-title class="col-auto">{{ 'PLAN-FINALISE-DIALOG.TITLE' | translate }}</div>
<div class="col-auto ml-auto">
<button mat-icon-button tabindex="-1" (click)="close()">
<button mat-icon-button (click)="close()">
<mat-icon>close</mat-icon>
</button>
</div>

2
frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html
View File

@ -5,7 +5,7 @@
{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.TITLE' | translate}} {{label}}
</div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
</div>

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

@ -1,7 +1,7 @@
<div class="sidebar-footer col-12">
<div *ngFor="let footerItems of nestedFooterItems" class="row ml-2">
<div *ngFor="let item of footerItems; let index = index;" class="col-auto" [ngClass]="{'ml-3': index%2==1}">
<div *ngFor="let item of footerItems; let index = index;" class="col-auto" [ngClass]="{'ml-3': index%2==1}" tabindex="0">
<p class="option" [ngClass]="{'option-active': this.router.url === item.routerPath}" [routerLink]="routerUtils.generateUrl(item.routerPath)">
{{ item.title | translate}}</p>
</div>

6
frontend/src/app/ui/tenant/tenant-switch/tenant-switch.component.html
View File

@ -1,5 +1,5 @@
<mat-button-toggle-group class="tenant-menu" vertical (change)="onTenantSelected($event)" [value]="this.currentTenant">
<div *ngFor="let tenant of tenants | async">
<mat-button-toggle class="tenant-button" [value]="tenant.code">{{ tenant.name }}</mat-button-toggle>
</div>
@for(tenant of (tenants | async); track tenant){
<mat-button-toggle class="no-borders" [value]="tenant.code">{{ tenant.name }}</mat-button-toggle>
}
</mat-button-toggle-group>

7
frontend/src/app/ui/tenant/tenant-switch/tenant-switch.component.scss
View File

@ -1,9 +1,4 @@
::ng-deep.tenant-menu {
border-color: transparent;
padding: 8px;
}
::ng-deep.tenant-button {
padding-top: 15px;
padding-bottom: 15px;
}
}

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

@ -4,7 +4,7 @@
{{'GUIDE.TITLE' | translate}}
</div>
<div class="col-auto ml-auto">
<button mat-icon-button tabindex="-1" (click)="close()">
<button mat-icon-button (click)="close()">
<mat-icon>close</mat-icon>
</button>
</div>

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

@ -5,7 +5,7 @@
<span class="title">{{'USER-PROFILE.ACTIONS.LINK-NEW-ACCOUNT' | translate}}</span>
</div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="closeDialog()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="closeDialog()"><mat-icon>close</mat-icon></button>
</div>
</div>
</div>

18
frontend/src/assets/scss/core/_navbar.scss
View File

@ -81,24 +81,6 @@
margin-bottom: 0;
}
.navbar-toggler{
cursor: pointer;
outline: 0;
.navbar-toggler-icon{
width: 22px;
height: 2px;
vertical-align: middle;
outline: 0;
display: block;
border-radius: 1px;
& + .navbar-toggler-icon{
margin-top: 4px;
}
}
}
&.navbar-absolute{
position: absolute;
width: 100%;

4
frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.html
View File

@ -4,7 +4,7 @@
<span class="mr-3 title">{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.WARNING' | translate}}</span>
</div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="onClose()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="onClose()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div class="row mt-3 mr-3 mb-3">
@ -21,7 +21,7 @@
</div>
<div class="row mt-3 mb-3">
<div class="ml-auto col-auto">
<button mat-button type="button" tabindex="-1" class="rounded-btn neutral" (click)="onClose()">{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.ACTIONS.CANCEL' | translate}}</button>
<button mat-button type="button" class="rounded-btn neutral" (click)="onClose()">{{'GENERAL.FORM-VALIDATION-DISPLAY-DIALOG.ACTIONS.CANCEL' | translate}}</button>
</div>
</div>
</div>

4
frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.html
View File

@ -5,12 +5,12 @@
</div>
<div *ngIf="data.warning" class="col justify-content-center warn-text"> <h5><strong>{{ data.warning }}</strong></h5></div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div class="row justify-content-end mb-1" *ngIf="!data.icon && !data.warning">
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="close()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="close()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div class="row d-flex flex-row mb-2">

4
frontend/src/common/modules/multiple-choice-dialog/multiple-choice-dialog.component.html
View File

@ -5,7 +5,7 @@
</div>
<div *ngIf="data.warning" class="col justify-content-center warn-text">{{ data.warning }}</div>
<div class="col-auto justify-content-end">
<button mat-icon-button tabindex="-1" (click)="close()">
<button mat-icon-button (click)="close()">
<mat-icon>close</mat-icon>
</button>
</div>
@ -14,7 +14,7 @@
<div class="row align-items-center">
<div class="col message pl-3">{{ data.message }}</div>
<div *ngIf="!data.icon" class="col-auto justify-content-end">
<button mat-icon-button tabindex="-1" (click)="close()">
<button mat-icon-button (click)="close()">
<mat-icon>close</mat-icon>
</button>
</div>

2
frontend/src/index.html
View File

@ -1,5 +1,5 @@
<!doctype html>
<html>
<html lang="en">
<head>
<script src="https://apis.google.com/js/platform.js"></script>

46
frontend/src/notification-service/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.html
View File

@ -2,32 +2,30 @@
<div class="notification-popup-wrapper">
<div class="row">
<div class="col-12">
<mat-nav-list class="inapp-notification-listing-dialog">
<mat-action-list class="inapp-notification-listing-dialog unset-font-size">
<ng-container *ngFor="let inappNotification of inappNotifications; last as last;">
<a mat-list-item (click)="goToNotification(inappNotification)">
<div class="row justify-content-between">
<div class="col-auto">
<mat-icon *ngIf="inappNotification.trackingState === notificationInAppTrackingEnum.Delivered" mat-list-icon>drafts</mat-icon>
<mat-icon *ngIf="inappNotification.trackingState === notificationInAppTrackingEnum.Stored" mat-list-icon>mail</mat-icon>
</div>
<div class="col mt-1 pl-0" style="overflow: hidden; text-overflow: ellipsis;">
<span mat-line>{{ inappNotification.subject }}</span>
</div>
<div class="col-auto mt-1">
<span mat-line class="secondary-text">{{ inappNotification.createdAt | date : 'short'}}</span>
</div>
</div>
</a>
<mat-divider *ngIf="!last"></mat-divider>
<button mat-list-item (click)="goToNotification(inappNotification)">
<div class="row justify-content-between">
<div class="col-auto">
<mat-icon *ngIf="inappNotification.trackingState === notificationInAppTrackingEnum.Delivered" mat-list-icon>drafts</mat-icon>
<mat-icon *ngIf="inappNotification.trackingState === notificationInAppTrackingEnum.Stored" mat-list-icon>mail</mat-icon>
</div>
<div class="col mt-1 pl-0" style="overflow: hidden; text-overflow: ellipsis;">
<span mat-line>{{ inappNotification.subject }}</span>
</div>
<div class="col-auto mt-1">
<span mat-line class="secondary-text">{{ inappNotification.createdAt | date : 'short'}}</span>
</div>
</div>
</button>
<mat-divider></mat-divider>
</ng-container>
<a *ngIf="authService.hasPermission(authService.permissionEnum.ViewMineInAppNotificationPage)" (click)="goToNotifications()">
<mat-list-item>{{'NAV-BAR.INAPP-NOTIFICATIONS' | translate}}</mat-list-item>
</a>
<a *ngIf="authService.hasPermission(authService.permissionEnum.ViewMineInAppNotificationPage)" (click)="readAllNotifications()">
<mat-list-item>{{'NAV-BAR.READ-ALL-INAPP-NOTIFICATIONS' | translate}}</mat-list-item>
</a>
</mat-nav-list>
@if(authService.hasPermission(authService.permissionEnum.ViewMineInAppNotificationPage)){
<button mat-list-item (click)="goToNotifications()">{{'NAV-BAR.INAPP-NOTIFICATIONS' | translate}}</button>
<button mat-list-item (click)="readAllNotifications()">{{'NAV-BAR.READ-ALL-INAPP-NOTIFICATIONS' | translate}}</button>
}
</mat-action-list>
</div>
</div>
</div>

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

@ -15,6 +15,8 @@ import { IsActive } from '@notification-service/core/enum/is-active.enum';
import { NotificationInAppTracking } from "@notification-service/core/enum/notification-inapp-tracking.enum";
import { InAppNotification } from "@notification-service/core/model/inapp-notification.model";
import { RouterUtilsService } from "@app/core/services/router/router-utils.service";
import { Guid } from "@common/types/guid";
import moment from "moment";
@Component({
selector: 'app-mine-inapp-notification-listing-dialog',
@ -120,6 +122,25 @@ export class MineInAppNotificationListingDialogComponent extends BaseComponent i
.subscribe(
data => {
this.inappNotifications = data.items;
this.inappNotifications = [{
id: Guid.create(),
user: {
name: 'User Name',
additionalInfo: null,
contacts: null,
globalRoles: null,
tenantRoles: null,
credentials: null,
},
isActive: IsActive.Active,
type: Guid.create(),
trackingState: NotificationInAppTracking.Delivered,
subject: 'Hi',
body: 'Hello World',
createdAt: moment().toDate(),
updatedAt: moment().toDate(),
hash: '56565',
}]
},
error => this.httpErrorHandlingService.handleBackedRequestError(error)
);

33
frontend/src/styles.scss
View File

@ -610,4 +610,35 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
max-width: 1204px !important;
}
}
////////*////////
////////*////////
///
///
ul.horizontal-list {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
align-items: center;
li {
float: left;
}
}
ul.unstyled-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.mat-mdc-action-list.unset-font-size {
.mdc-list-item__primary-text{
font-size: unset;
}
}
.mat-button-toggle.no-borders{
border-top: none !important;
border: none;
}