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
parent
74a67236a0
commit
d73965cb0a
|
|
@ -15,15 +15,9 @@
|
|||
|
||||
<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>
|
||||
}
|
||||
<button mat-icon-button [matMenuTriggerFor]="toggleMenu" aria-label="user options dropwdown">
|
||||
<mat-icon>more_horiz</mat-icon>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="new-plan-dialog col-md-auto ml-auto navbar-item-lg">
|
||||
|
|
@ -78,7 +72,7 @@
|
|||
|
||||
<mat-menu #toggleMenu="matMenu">
|
||||
<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 [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>
|
||||
|
|
@ -100,9 +94,6 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
color: var(--primary-color-3);
|
||||
}
|
||||
|
||||
.sidebar-footer .option:focus {
|
||||
color: var(--primary-color-3);
|
||||
}
|
||||
|
||||
.sidebar-footer .vl {
|
||||
border-right: 1px solid #d4d4d4;
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
<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}" tabindex="0">
|
||||
<p class="option" [ngClass]="{'option-active': this.router.url === item.routerPath}" [routerLink]="routerUtils.generateUrl(item.routerPath)">
|
||||
{{ item.title | translate}}</p>
|
||||
</div>
|
||||
</div>
|
||||
@for(footerItems of nestedFooterItems; track footerItems){
|
||||
<ul class="row horizontal-list">
|
||||
@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">
|
||||
<span [routerLink]="routerUtils.generateUrl(item.routerPath)">
|
||||
{{ item.title | translate}}
|
||||
</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,47 @@
|
|||
<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}">
|
||||
<div *ngIf="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}">
|
||||
<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'}">
|
||||
<i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i>
|
||||
<i *ngIf="groupMenuRoute.path == '/plans'" class="material-symbols-outlined icon-mask">person</i>
|
||||
<span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span>
|
||||
</a>
|
||||
|
||||
<ng-template #description>
|
||||
<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/descriptions'" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]">
|
||||
<span class="mb-3 inner-line"></span>
|
||||
<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-mask">person</i>
|
||||
<span class="pl-0 mt-1" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span>
|
||||
</div>
|
||||
</a>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #infoItems>
|
||||
|
||||
<ng-container *ngIf="groupMenuRoute.path && groupMenuRoute.path != ''; else externalLink">
|
||||
<a class="nav-link nav-row" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]">
|
||||
<i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i>
|
||||
<span>{{groupMenuRoute.title | translate}}</span>
|
||||
</a>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #externalLink>
|
||||
<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>
|
||||
<span>{{groupMenuRoute.title | translate}} <span class="material-symbols-outlined icon-external">open_in_new</span></span>
|
||||
</a>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</mat-list-item>
|
||||
</div>
|
||||
@if(showItem(groupMenuItem)){
|
||||
<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">
|
||||
|
||||
<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" aria-hidden>{{ groupMenuRoute.icon }}</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>
|
||||
</a>
|
||||
|
||||
<ng-template #description>
|
||||
<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/descriptions'" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]">
|
||||
<span class="mb-3 inner-line"></span>
|
||||
<div class="pl-0 pt-1 pb-1 container-fluid nav-subrow description-tour">
|
||||
<i class="mb-1 material-symbols-outlined icon" aria-hidden>{{ groupMenuRoute.icon }}</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>
|
||||
</div>
|
||||
</a>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #infoItems>
|
||||
|
||||
<ng-container *ngIf="groupMenuRoute.path && groupMenuRoute.path != ''; else externalLink">
|
||||
<a class="nav-link nav-row" [routerLink]="[routerUtils.generateUrl(groupMenuRoute.path)]">
|
||||
<i class="material-symbols-outlined icon" aria-hidden>{{ groupMenuRoute.icon }}</i>
|
||||
<span>{{groupMenuRoute.title | translate}}</span>
|
||||
</a>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #externalLink>
|
||||
<a class="nav-link nav-row" *ngIf="groupMenuRoute.externalUrl && groupMenuRoute.externalUrl!=''" href="{{groupMenuRoute.externalUrl}}" target="_blank">
|
||||
<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>
|
||||
</a>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</mat-list-item>
|
||||
}
|
||||
</mat-list>
|
||||
|
||||
<!-- Sidebar Footer -->
|
||||
|
|
|
|||
|
|
@ -8,9 +8,6 @@ $mat-card-header-size: 30px !default;
|
|||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.nav-list-item {
|
||||
}
|
||||
|
||||
.nav-list-item-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
<div class="container-fluid">
|
||||
<div *ngIf="!isDialog" class="row">
|
||||
<div class="col-md-12">
|
||||
<h1>{{ 'GUIDE.TITLE' | translate}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<iframe *ngIf="!useInnerHTML && guideHTMLUrl" class="iframe" id='userguide' [src]="guideHTMLUrl" (load)="onIFrameLoad(iframe)" #iframe></iframe>
|
||||
<span #guide *ngIf="useInnerHTML" id='userguide' [innerHTML]="guideHTML"></span>
|
||||
|
|
|
|||
|
|
@ -6,18 +6,6 @@
|
|||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
#userguide {
|
||||
}
|
||||
|
||||
.custom-header {
|
||||
font-size: 20px;
|
||||
letter-spacing: 0px;
|
||||
color: #212121;
|
||||
margin-top: 67px;
|
||||
margin-bottom: 38px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.iframe {
|
||||
width: 100%;
|
||||
height: calc(100vh - 80px);
|
||||
|
|
@ -28,3 +16,8 @@
|
|||
:host :hover ::ng-deep .tocElement {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 2rem 0 0 0;
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { HttpClient } from '@angular/common/http';
|
||||
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
|
||||
import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
|
||||
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
|
||||
import { Router } from '@angular/router';
|
||||
import { SupportiveMaterialFieldType } from '@app/core/common/enum/supportive-material-field-type';
|
||||
|
|
@ -19,6 +19,8 @@ import { takeUntil } from 'rxjs/operators';
|
|||
styleUrls: ['./user-guide-content.component.scss']
|
||||
})
|
||||
export class UserGuideContentComponent extends BaseComponent implements OnInit {
|
||||
@Input() isDialog: boolean;
|
||||
|
||||
readonly useInnerHTML: boolean = false; //GK: Change for TESTING PURPOSES ONLY
|
||||
|
||||
guideHTML: any;
|
||||
|
|
|
|||
Loading…
Reference in New Issue