[develop | DONE | ADDED]: menu.ts: In MenuItem class added field "badge?: string", which is used only in FAIRCORE4EOSC | navigationBar.component.html: Added <span> in menu item (only in no-link parent), to show a badge in FAIRCORE4EOSC.

This commit is contained in:
Konstantina Galouni 2024-03-15 15:43:58 +02:00
parent c64df20405
commit ca8b732a64
2 changed files with 9 additions and 3 deletions

View File

@ -23,10 +23,11 @@ export class MenuItem {
isFeatured: boolean; isFeatured: boolean;
isActive: boolean; isActive: boolean;
target: string = "_blank"; target: string = "_blank";
badge?: string = ""; // used only for RDGraph portal (FAIRCORE4EOSC)
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[],
routeRequired: string[], params, icon: Icon = null, fragment = null, customClass = null, routeActive = null, routeRequired: string[], params, icon: Icon = null, fragment = null, customClass = null, routeActive = null,
target: string = "_blank", type: string = "internal", isFeatured: boolean = false, items: MenuItem[] = []) { target: string = "_blank", type: string = "internal", isFeatured: boolean = false, items: MenuItem[] = [], badge: string = "") {
this._id = id; this._id = id;
this.title = title; this.title = title;
this.url = url; this.url = url;
@ -43,6 +44,7 @@ export class MenuItem {
this.target = target; this.target = target;
this.type = type; this.type = type;
this.isFeatured = isFeatured; this.isFeatured = isFeatured;
this.badge = badge;
} }
public static isTheActiveMenu(menu: MenuItem, currentRoute: any, activeMenuItem: string = ""): boolean { public static isTheActiveMenu(menu: MenuItem, currentRoute: any, activeMenuItem: string = ""): boolean {

View File

@ -41,7 +41,9 @@
<a *ngIf="!menu.url" [routerLink]="menu.route && (isEnabled([menu.route], showPage) || !menu.routeRequired) && menu.items.length === 0?menu.route:null" <a *ngIf="!menu.url" [routerLink]="menu.route && (isEnabled([menu.route], showPage) || !menu.routeRequired) && menu.items.length === 0?menu.route:null"
(click)="menu.items.length === 0?closeCanvas(canvas):null" (click)="menu.items.length === 0?closeCanvas(canvas):null"
[queryParams]="menu.params" [queryParams]="menu.params"
[fragment]="menu.fragment">{{menu.title}}<span *ngIf="menu.items.length > 0" class="uk-nav-parent-icon"></span></a> [fragment]="menu.fragment">
<span *ngIf="menu.badge" style="position: relative"><span class="badge-mobile">{{menu.badge}}</span></span>
{{menu.title}}<span *ngIf="menu.items.length > 0" class="uk-nav-parent-icon"></span></a>
<a *ngIf="menu.url" <a *ngIf="menu.url"
(click)="menu.items.length === 0?closeCanvas(canvas):null" (click)="menu.items.length === 0?closeCanvas(canvas):null"
[href]="menu.items.length === 0?menu.url:null" [href]="menu.items.length === 0?menu.url:null"
@ -215,7 +217,9 @@
<a *ngIf="menu.route.length == 0 && menu.url.length > 0" <a *ngIf="menu.route.length == 0 && menu.url.length > 0"
href="{{menu.url}}" target="{{menu.target}}" href="{{menu.url}}" target="{{menu.target}}"
[class.custom-external]="menu.target != '_self'">{{menu.title}}</a> [class.custom-external]="menu.target != '_self'">{{menu.title}}</a>
<a *ngIf="(menu.route.length == 0 && menu.url.length == 0) || ( menu.route.length >0 && menu.routeRequired && !isEnabled([menu.route], showPage) && isAtleastOneEnabled(menu.routeRequired, showPage))">{{menu.title}}</a> <a *ngIf="(menu.route.length == 0 && menu.url.length == 0) || ( menu.route.length >0 && menu.routeRequired && !isEnabled([menu.route], showPage) && isAtleastOneEnabled(menu.routeRequired, showPage))">
<span *ngIf="menu.badge" class="badge">{{menu.badge}}</span>
{{menu.title}}</a>
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left uk-height-max-medium uk-overflow-auto"> <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left uk-height-max-medium uk-overflow-auto">
<!-- Do not delete this div, because it will remove the margin bottom of navbar --> <!-- Do not delete this div, because it will remove the margin bottom of navbar -->
<div> <div>