[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:
parent
c64df20405
commit
ca8b732a64
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue