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

fix sidebar lists, fix navbar duplicate user menut toggle button, change top navbar behavior on small screen size, add title to user guide

This commit is contained in:
mchouliara 2024-09-17 12:55:19 +03:00
parent 74a67236a0
commit d73965cb0a
9 changed files with 74 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,15 +15,9 @@
<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">
@if(this.isAuthenticated() && !onInvalidUrl()){ <button mat-icon-button [matMenuTriggerFor]="toggleMenu" aria-label="user options dropwdown">
<button type="button" [matMenuTriggerFor]="toggleMenu" aria-label="user options dropwdown"> <mat-icon>more_horiz</mat-icon>
<img alt="round user avatar image" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)"> </button>
</button>
}@else{
<button mat-icon-button [matMenuTriggerFor]="toggleMenu" aria-label="user options dropwdown">
<mat-icon>more_horiz</mat-icon>
</button>
}
</li> </li>
<li class="new-plan-dialog col-md-auto ml-auto navbar-item-lg"> <li class="new-plan-dialog col-md-auto ml-auto navbar-item-lg">
@ -78,7 +72,7 @@
<mat-menu #toggleMenu="matMenu"> <mat-menu #toggleMenu="matMenu">
<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()"> <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" aria-label="language select" (click)="$event.stopPropagation();">
<mat-icon>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span> <mat-icon>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
@ -100,9 +94,6 @@
<li class="d-flex justify-content-center"> <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> <button type="button" mat-button class="rounded-btn primary" (click)="openNewPlanDialog()">{{ 'NAV-BAR.START-NEW-PLAN' | translate }}</button>
</li> </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> </ul>
</mat-menu> </mat-menu>
</div> </div>

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

@ -19,6 +19,10 @@
color: var(--primary-color-3); color: var(--primary-color-3);
} }
.sidebar-footer .option:focus {
color: var(--primary-color-3);
}
.sidebar-footer .vl { .sidebar-footer .vl {
border-right: 1px solid #d4d4d4; border-right: 1px solid #d4d4d4;
color: white; color: white;

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

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

82
frontend/src/app/ui/sidebar/sidebar.component.html
View File

@ -1,47 +1,47 @@
<div class="sidebar-wrapper"> <div class="sidebar-wrapper">
<mat-list class="nav mat-list" *ngFor="let groupMenuItem of groupMenuItems; let firstGroup = first; let i = index" [class.nav-list-item]="showItem(groupMenuItem)" [class.nav-list-item-hidden]="!showItem(groupMenuItem)" [ngClass]="{'flex-grow-1': i == groupMenuItems.length - 2}"> <mat-list class="nav mat-list" *ngFor="let groupMenuItem of groupMenuItems; let firstGroup = first; let i = index" [class.nav-list-item]="showItem(groupMenuItem)" [class.nav-list-item-hidden]="!showItem(groupMenuItem)" [ngClass]="{'flex-grow-1': i == groupMenuItems.length - 2}">
<div *ngIf="showItem(groupMenuItem);"> @if(showItem(groupMenuItem)){
<hr *ngIf="!firstGroup"> <mat-list-item routerLinkActive="active" [isActiveMatchOptions]="{ paths: 'exact', queryParams: 'ignored' }" *ngFor="let groupMenuRoute of groupMenuItem.routes; let first = first" class="nav-item" [ngClass]="{'mt-4': first && firstGroup}">
<mat-list-item routerLinkActive="active" [isActiveMatchOptions]="{ paths: 'exact', queryParams: 'ignored' }" *ngFor="let groupMenuRoute of groupMenuItem.routes; let first = first" class="nav-item" [ngClass]="{'mt-4': first && firstGroup}"> <hr *ngIf="first && !firstGroup">
<ng-container *ngIf="groupMenuRoute.routeType == routeType.System; else infoItems"> <ng-container *ngIf="groupMenuRoute.routeType == routeType.System; else infoItems">
<a class="new-plan nav-link nav-row" *ngIf="groupMenuRoute.path !== '/descriptions'; else description" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]" [ngClass]="{'plan-tour': groupMenuRoute.path == '/plans'}"> <a class="new-plan nav-link nav-row" *ngIf="groupMenuRoute.path !== '/descriptions'; else description" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]" [ngClass]="{'plan-tour': groupMenuRoute.path == '/plans'}">
<i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i> <i class="material-symbols-outlined icon" aria-hidden>{{ groupMenuRoute.icon }}</i>
<i *ngIf="groupMenuRoute.path == '/plans'" class="material-symbols-outlined icon-mask">person</i> <i *ngIf="groupMenuRoute.path == '/plans'" class="material-symbols-outlined icon-mask" aria-hidden>person</i>
<span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span> <span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span>
</a> </a>
<ng-template #description> <ng-template #description>
<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/descriptions'" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]"> <a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/descriptions'" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]">
<span class="mb-3 inner-line"></span> <span class="mb-3 inner-line"></span>
<div class="pl-0 pt-1 pb-1 container-fluid nav-subrow description-tour"> <div class="pl-0 pt-1 pb-1 container-fluid nav-subrow description-tour">
<i class="mb-1 material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i> <i class="mb-1 material-symbols-outlined icon" aria-hidden>{{ groupMenuRoute.icon }}</i>
<i class="mb-1 material-symbols-outlined icon-mask">person</i> <i class="mb-1 material-symbols-outlined icon-mask" aria-hidden>person</i>
<span class="pl-0 mt-1" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span> <span class="pl-0 mt-1" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span>
</div> </div>
</a> </a>
</ng-template> </ng-template>
</ng-container> </ng-container>
<ng-template #infoItems> <ng-template #infoItems>
<ng-container *ngIf="groupMenuRoute.path && groupMenuRoute.path != ''; else externalLink"> <ng-container *ngIf="groupMenuRoute.path && groupMenuRoute.path != ''; else externalLink">
<a class="nav-link nav-row" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]"> <a class="nav-link nav-row" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]">
<i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i> <i class="material-symbols-outlined icon" aria-hidden>{{ groupMenuRoute.icon }}</i>
<span>{{groupMenuRoute.title | translate}}</span> <span>{{groupMenuRoute.title | translate}}</span>
</a> </a>
</ng-container> </ng-container>
<ng-template #externalLink> <ng-template #externalLink>
<a class="nav-link nav-row" *ngIf="groupMenuRoute.externalUrl && groupMenuRoute.externalUrl!=''" href="{{groupMenuRoute.externalUrl}}" target="_blank"> <a class="nav-link nav-row" *ngIf="groupMenuRoute.externalUrl && groupMenuRoute.externalUrl!=''" href="{{groupMenuRoute.externalUrl}}" target="_blank">
<i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i> <i class="material-symbols-outlined icon" aria-hidden>{{ groupMenuRoute.icon }}</i>
<span>{{groupMenuRoute.title | translate}} <span class="material-symbols-outlined icon-external">open_in_new</span></span> <span>{{groupMenuRoute.title | translate}} <span class="material-symbols-outlined icon-external">open_in_new</span></span>
</a> </a>
</ng-template> </ng-template>
</ng-template> </ng-template>
</mat-list-item> </mat-list-item>
</div> }
</mat-list> </mat-list>
<!-- Sidebar Footer --> <!-- Sidebar Footer -->

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

@ -8,9 +8,6 @@ $mat-card-header-size: 30px !default;
margin-right: 7px; margin-right: 7px;
} }
.nav-list-item {
}
.nav-list-item-hidden { .nav-list-item-hidden {
display: none !important; display: none !important;
} }

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

@ -10,7 +10,7 @@
</div> </div>
</div> </div>
<div mat-dialog-content class="row"> <div mat-dialog-content class="row">
<app-user-guide-content></app-user-guide-content> <app-user-guide-content [isDialog]="isDialog"></app-user-guide-content>
</div> </div>
<div mat-dialog-actions class="row"> <div mat-dialog-actions class="row">
<div class="ml-auto col-auto"><button mat-button mat-dialog-close mat-raised-button color="primary" (click)="cancel()">{{'GUIDE.CLOSE' | translate}}</button></div> <div class="ml-auto col-auto"><button mat-button mat-dialog-close mat-raised-button color="primary" (click)="cancel()">{{'GUIDE.CLOSE' | translate}}</button></div>

5
frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.html
View File

@ -1,4 +1,9 @@
<div class="container-fluid"> <div class="container-fluid">
<div *ngIf="!isDialog" class="row">
<div class="col-md-12">
<h1>{{ 'GUIDE.TITLE' | translate}}</h1>
</div>
</div>
<div class="row"> <div class="row">
<iframe *ngIf="!useInnerHTML && guideHTMLUrl" class="iframe" id='userguide' [src]="guideHTMLUrl" (load)="onIFrameLoad(iframe)" #iframe></iframe> <iframe *ngIf="!useInnerHTML && guideHTMLUrl" class="iframe" id='userguide' [src]="guideHTMLUrl" (load)="onIFrameLoad(iframe)" #iframe></iframe>
<span #guide *ngIf="useInnerHTML" id='userguide' [innerHTML]="guideHTML"></span> <span #guide *ngIf="useInnerHTML" id='userguide' [innerHTML]="guideHTML"></span>

17
frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.scss
View File

@ -6,18 +6,6 @@
cursor: pointer !important; cursor: pointer !important;
} }
#userguide {
}
.custom-header {
font-size: 20px;
letter-spacing: 0px;
color: #212121;
margin-top: 67px;
margin-bottom: 38px;
opacity: 1;
}
.iframe { .iframe {
width: 100%; width: 100%;
height: calc(100vh - 80px); height: calc(100vh - 80px);
@ -28,3 +16,8 @@
:host :hover ::ng-deep .tocElement { :host :hover ::ng-deep .tocElement {
cursor: pointer !important; cursor: pointer !important;
} }
h1 {
text-align: center;
margin: 2rem 0 0 0;
}

4
frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.ts
View File

@ -1,5 +1,5 @@
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { SupportiveMaterialFieldType } from '@app/core/common/enum/supportive-material-field-type'; import { SupportiveMaterialFieldType } from '@app/core/common/enum/supportive-material-field-type';
@ -19,6 +19,8 @@ import { takeUntil } from 'rxjs/operators';
styleUrls: ['./user-guide-content.component.scss'] styleUrls: ['./user-guide-content.component.scss']
}) })
export class UserGuideContentComponent extends BaseComponent implements OnInit { export class UserGuideContentComponent extends BaseComponent implements OnInit {
@Input() isDialog: boolean;
readonly useInnerHTML: boolean = false; //GK: Change for TESTING PURPOSES ONLY readonly useInnerHTML: boolean = false; //GK: Change for TESTING PURPOSES ONLY
guideHTML: any; guideHTML: any;