Add replaceHeader in Navbar Header and a handler in layout service. Change header info in dashboard pages.
This commit is contained in:
parent
fd9794ec3a
commit
6a7559a3ad
|
|
@ -1,10 +1,10 @@
|
|||
<div page-content>
|
||||
<div header>
|
||||
<div class="uk-flex uk-flex-middle uk-margin-top info">
|
||||
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
|
||||
<img src="assets/common-assets/placeholder.png" class="uk-margin-right">
|
||||
<div>
|
||||
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Classes</div>
|
||||
<h1 class="uk-h4 uk-margin-remove">Super Admin</h1>
|
||||
<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Classes</div>
|
||||
<h1 class="uk-h6 uk-margin-remove">Super Admin</h1>
|
||||
</div>
|
||||
</div>
|
||||
<admin-tabs tab="class"></admin-tabs>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<div page-content>
|
||||
<div header>
|
||||
<div class="uk-flex uk-flex-middle uk-margin-top uk-margin-bottom info">
|
||||
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
|
||||
<a routerLink="../" [queryParams]=" { 'pageId': pageId }" class="uk-button uk-button-link uk-margin-medium-right">
|
||||
<icon name="west" ratio="2" [flex]="true"></icon>
|
||||
</a>
|
||||
<div>
|
||||
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">
|
||||
<div class="uk-text-background uk-text-bold uk-text-small">
|
||||
Admin Dashboard - {{pageHelpContent ? 'Update ' : 'Add new '}} class help text
|
||||
</div>
|
||||
<h1 *ngIf="page" class="uk-h4 uk-margin-remove">{{page.name}}<span *ngIf="myForm.dirty" class="uk-text-large"> (unsaved changes)</span></h1>
|
||||
<h1 *ngIf="page" class="uk-h6 uk-margin-remove">{{page.name}}<span *ngIf="myForm.dirty" class="uk-text-large"> (unsaved changes)</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<div page-content>
|
||||
<div header>
|
||||
<div class="uk-flex uk-flex-middle uk-margin-top info">
|
||||
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
|
||||
<a routerLink="../pages" class="uk-button uk-button-link uk-margin-medium-right">
|
||||
<icon name="west" ratio="2" [flex]="true"></icon>
|
||||
</a>
|
||||
<div>
|
||||
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">
|
||||
<div class="uk-text-background uk-text-bold uk-text-small">
|
||||
Admin Dashboard - Manage class help texts
|
||||
</div>
|
||||
<h1 *ngIf="page" class="uk-h4 uk-margin-remove">{{page.name}}</h1>
|
||||
<h1 *ngIf="page" class="uk-h6 uk-margin-remove">{{page.name}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<div page-content>
|
||||
<div header>
|
||||
<div class="uk-flex uk-flex-middle uk-margin-top info">
|
||||
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
|
||||
<ng-container *ngIf="showLogo">
|
||||
<img [src]="entity | logoUrl" class="uk-margin-right uk-blend-multiply">
|
||||
</ng-container>
|
||||
<div>
|
||||
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Entities</div>
|
||||
<h1 class="uk-h4 uk-margin-remove">{{name?name:'Super Admin'}}</h1>
|
||||
<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Entities</div>
|
||||
<h1 class="uk-h6 uk-margin-remove">{{name?name:'Super Admin'}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<admin-tabs tab="entity" [portal]="portal" [type]="type"></admin-tabs>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<div page-content>
|
||||
<div header>
|
||||
<div class="uk-flex uk-flex-middle uk-margin-top uk-margin-bottom info">
|
||||
<a routerLink="../" [queryParams]=" { 'pageId': pageId }" class="uk-button uk-button-link uk-margin-medium-right">
|
||||
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
|
||||
<a routerLink="../" [queryParams]=" { 'pageId': pageId }" class="uk-button uk-button-link uk-margin-right">
|
||||
<icon name="west" ratio="2" [flex]="true"></icon>
|
||||
</a>
|
||||
<div>
|
||||
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">
|
||||
<div class="uk-text-background uk-text-bold uk-text-small">
|
||||
Admin Dashboard - {{pageHelpContent ? 'Update ' : 'Add new '}} page help text
|
||||
</div>
|
||||
<h1 *ngIf="page" class="uk-h4 uk-margin-remove">{{page.name}}<span *ngIf="myForm.dirty" class="uk-text-large"> (unsaved changes)</span></h1>
|
||||
<h1 *ngIf="page" class="uk-h6 uk-margin-remove">{{page.name}}<span *ngIf="myForm.dirty" class="uk-text-large"> (unsaved changes)</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<div page-content>
|
||||
<div header>
|
||||
<div class="uk-flex uk-flex-middle uk-margin-top info">
|
||||
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
|
||||
<a routerLink="../pages" class="uk-button uk-button-link uk-margin-medium-right">
|
||||
<icon name="west" ratio="2" [flex]="true"></icon>
|
||||
</a>
|
||||
<div>
|
||||
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">
|
||||
<div class="uk-text-background uk-text-bold uk-text-small">
|
||||
Admin Dashboard - Manage page help texts
|
||||
</div>
|
||||
<h1 *ngIf="page" class="uk-h4 uk-margin-remove">{{page.name}}</h1>
|
||||
<h1 *ngIf="page" class="uk-h6 uk-margin-remove">{{page.name}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
<div page-content>
|
||||
<div header>
|
||||
<div class="uk-flex uk-flex-middle uk-margin-top info">
|
||||
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
|
||||
<ng-container *ngIf="showLogo">
|
||||
<img [src]="entity | logoUrl" class="uk-margin-right uk-blend-multiply">
|
||||
</ng-container>
|
||||
<div>
|
||||
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Menu Items</div>
|
||||
<h1 class="uk-h4 uk-margin-remove">{{name ? name : 'Super Admin'}}</h1>
|
||||
<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Menu Items</div>
|
||||
<h1 class="uk-h6 uk-margin-remove">{{name ? name : 'Super Admin'}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin uk-margin-remove-bottom">
|
||||
<admin-tabs tab="menu" [portal]="portal" [type]="type"></admin-tabs>
|
||||
</div>
|
||||
<admin-tabs tab="menu" [portal]="portal" [type]="type"></admin-tabs>
|
||||
</div>
|
||||
<div actions>
|
||||
<div class="uk-section-xsmall">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<div page-content>
|
||||
<div header>
|
||||
<div class="uk-flex uk-flex-middle uk-margin-top info">
|
||||
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
|
||||
<ng-container *ngIf="showLogo">
|
||||
<img [src]="entity | logoUrl" class="uk-margin-right uk-blend-multiply">
|
||||
</ng-container>
|
||||
<div>
|
||||
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Pages</div>
|
||||
<h1 class="uk-h4 uk-margin-remove">{{name ? name : 'Super Admin'}}</h1>
|
||||
<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Pages</div>
|
||||
<h1 class="uk-h6 uk-margin-remove">{{name ? name : 'Super Admin'}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<admin-tabs tab="page" [portal]="portal" [type]="type"></admin-tabs>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div page-content>
|
||||
<div header>
|
||||
<div class="uk-flex uk-flex-middle uk-margin-top info">
|
||||
<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
|
||||
<img src="assets/common-assets/placeholder.png" class="uk-margin-right">
|
||||
<div>
|
||||
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Portals</div>
|
||||
<h1 class="uk-h4 uk-margin-remove">Super Admin</h1>
|
||||
<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Portals</div>
|
||||
<h1 class="uk-h6 uk-margin-remove">Super Admin</h1>
|
||||
</div>
|
||||
</div>
|
||||
<admin-tabs tab="portal"></admin-tabs>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import {ActivatedRoute} from "@angular/router";
|
|||
@Component({
|
||||
selector: 'admin-tabs',
|
||||
template: `
|
||||
<ul class="uk-tab uk-margin-top uk-flex uk-flex-center uk-flex-left@m" uk-tab>
|
||||
<ul class="uk-tab uk-margin-remove-bottom uk-margin-medium-top uk-flex uk-flex-center uk-flex-left@m" uk-tab>
|
||||
<li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'portal'"><a routerLink="../portals">Portals</a></li>
|
||||
<li [class.uk-active]="tab === 'page'"><a routerLink="../pages">Pages</a></li>
|
||||
<li [class.uk-active]="tab === 'entity'"><a routerLink="../entities">Entities</a></li>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import {AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
|
||||
import {LayoutService} from "../sidebar/layout.service";
|
||||
|
||||
declare var UIkit;
|
||||
|
||||
|
|
@ -37,10 +38,10 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
public shouldSticky: boolean = true;
|
||||
@ViewChild('header') header: ElementRef;
|
||||
@ViewChild('actions') actions: ElementRef;
|
||||
public
|
||||
private observer: IntersectionObserver;
|
||||
private headerObserver: IntersectionObserver;
|
||||
private bottomObserver: IntersectionObserver;
|
||||
|
||||
constructor() {
|
||||
constructor(private layoutService: LayoutService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
|
@ -62,19 +63,30 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
if(typeof document !== "undefined") {
|
||||
let bottom = document.getElementById('bottom');
|
||||
if(bottom) {
|
||||
this.observer = new IntersectionObserver(entries => {
|
||||
this.bottomObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
this.shouldSticky = !entry.isIntersecting;
|
||||
})
|
||||
});
|
||||
this.observer.observe(bottom);
|
||||
this.bottomObserver.observe(bottom);
|
||||
}
|
||||
if(this.header) {
|
||||
this.headerObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
this.layoutService.setReplaceHeader(!entry.isIntersecting);
|
||||
})
|
||||
}, {threshold: 0.5});
|
||||
this.headerObserver.observe(this.header.nativeElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if(this.observer) {
|
||||
this.observer.disconnect();
|
||||
if(this.bottomObserver) {
|
||||
this.bottomObserver.disconnect();
|
||||
}
|
||||
if(this.headerObserver) {
|
||||
this.headerObserver.disconnect();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,6 +41,13 @@ export class LayoutService {
|
|||
* Add activeMenuItem: string on data of route config, if page should activate a specific MenuItem and route url does not match.
|
||||
*/
|
||||
private activeMenuItemSubject: BehaviorSubject<string> = new BehaviorSubject<string>("");
|
||||
|
||||
/**
|
||||
* Change to true will replace your Nav Header with the replaceHeader of your object.
|
||||
* Be sure that replaceHeader exists.
|
||||
*/
|
||||
private replaceHeaderSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
private observer: IntersectionObserver;
|
||||
sub: any;
|
||||
|
||||
ngOnDestroy() {
|
||||
|
|
@ -56,6 +63,7 @@ export class LayoutService {
|
|||
constructor(private router: Router) {
|
||||
this.sub = this.router.events.subscribe(event => {
|
||||
if (event instanceof ActivationStart) {
|
||||
this.setReplaceHeader(false);
|
||||
let data = event.snapshot.data;
|
||||
if (data['hasSidebar'] !== undefined &&
|
||||
data['hasSidebar'] === false) {
|
||||
|
|
@ -144,6 +152,14 @@ export class LayoutService {
|
|||
this.isFrontPageSubject.next(value);
|
||||
}
|
||||
|
||||
get replaceHeader(): Observable<boolean> {
|
||||
return this.replaceHeaderSubject.asObservable();
|
||||
}
|
||||
|
||||
setReplaceHeader(value: boolean) {
|
||||
this.replaceHeaderSubject.next(value);
|
||||
}
|
||||
|
||||
get isSmallScreen(): boolean {
|
||||
return this.isSmallScreenSubject.getValue();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<div #content page-content>
|
||||
<div page-content>
|
||||
<div header>
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
<div actions>
|
||||
<div class="uk-section-xsmall" [class.uk-padding-remove-top]="!content.isStickyActive" [class.uk-margin-xsmall-top]="!content.isStickyActive">
|
||||
<div class="uk-section-xsmall">
|
||||
<div class="uk-grid" uk-grid>
|
||||
<div class="uk-flex uk-flex-left@m uk-flex-center uk-width-expand">
|
||||
<ul class="uk-subnav uk-subnav-pill">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
@keyframes animation-logo {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(30%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animation-logo {
|
||||
animation-name: animation-logo;
|
||||
}
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
<div *ngIf="showMenu">
|
||||
<div class="uk-hidden@m">
|
||||
<div [ngClass]="portal + '-menu'">
|
||||
<nav class="uk-navbar-container uk-navbar" uk-navbar="">
|
||||
<div *ngIf="showMenu && activeHeader">
|
||||
<div class="uk-hidden@l">
|
||||
<nav class="uk-navbar-container uk-navbar" uk-navbar="">
|
||||
<div
|
||||
*ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge">
|
||||
*ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && activeHeader.badge">
|
||||
<img class="uk-position-top-left"
|
||||
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
|
||||
alt="BETA" style="height: 60px; width: 60px;">
|
||||
|
|
@ -23,7 +22,6 @@
|
|||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div #canvas id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+(offCanvasFlip + ';'):'') + 'overlay: true'"
|
||||
class="uk-offcanvas uk-hidden@m">
|
||||
<div class="uk-offcanvas-bar">
|
||||
|
|
@ -93,146 +91,147 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main-menu" class="uk-visible@m" [class.uk-light]='dark'>
|
||||
<div id="sticky-menu" class="uk-navbar-container" [ngClass]="portal + '-menu'" uk-sticky media="@m">
|
||||
<div
|
||||
*ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge">
|
||||
<img class="uk-position-top-left"
|
||||
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
|
||||
alt="BETA" style="height: 65px; width: 65px; z-index: 1000">
|
||||
</div>
|
||||
<div class="uk-container uk-container-expand">
|
||||
<nav class="uk-navbar" uk-navbar>
|
||||
<ng-container *ngIf="!onlyTop">
|
||||
<div class="uk-navbar-left">
|
||||
<ng-container *ngIf="showLogo && isHeaderLeft">
|
||||
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="uk-navbar-center">
|
||||
<ng-container *ngIf="showLogo && !isHeaderLeft">
|
||||
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!header.menuPosition || header.menuPosition === 'center'">
|
||||
<ng-container *ngTemplateOutlet="mainMenu"></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="uk-navbar-right">
|
||||
<ng-container *ngIf="header.menuPosition === 'right'">
|
||||
<ng-container *ngTemplateOutlet="mainMenu"></ng-container>
|
||||
</ng-container>
|
||||
<user-mini *ngIf="userMenu" [user]="user"
|
||||
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
|
||||
[cookieDomain]=properties.cookieDomain></user-mini>
|
||||
<ng-content select="[extra-m]"></ng-content>
|
||||
</div>
|
||||
<ng-template #mainMenu>
|
||||
<ul class="uk-navbar-nav" [class.uk-margin-right]="!userMenu">
|
||||
<li class="uk-parent" *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
|
||||
<a routerLink="/">Home</a>
|
||||
</li>
|
||||
<ng-container *ngFor="let menu of menuItems">
|
||||
<li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)"
|
||||
*ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)">
|
||||
<!--a routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="" aria-expanded="false">{{menu.rootItem.title}}</a-->
|
||||
<a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired )"
|
||||
routerLink="{{menu.rootItem.route}}"
|
||||
[queryParams]="menu.rootItem.params"
|
||||
[fragment]="menu.rootItem.fragment"> {{menu.rootItem.title}}</a>
|
||||
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
|
||||
href="{{menu.rootItem.url}}" target="{{menu.rootItem.target}}"
|
||||
[class.custom-external]="menu.rootItem.target != '_self'">{{menu.rootItem.title}}</a>
|
||||
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))">{{menu.rootItem.title}}</a>
|
||||
<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 -->
|
||||
<div>
|
||||
<ul class="uk-nav uk-navbar-dropdown-nav">
|
||||
<ng-container *ngFor="let submenu of menu.items">
|
||||
<li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) &&
|
||||
isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 ||
|
||||
submenu.url.length > 0)" [class.uk-active]="isTheActiveMenu(submenu)"
|
||||
[class.uk-parent]="submenu.items && submenu.items.length > 0">
|
||||
<a *ngIf="submenu.route.length > 0"
|
||||
routerLink="{{submenu.route}}" [queryParams]="submenu.params"
|
||||
[fragment]="submenu.fragment">{{submenu.title}}</a>
|
||||
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
|
||||
href="{{submenu.url}}" [class.custom-external]="submenu.target != '_self'"
|
||||
target="{{submenu.target}}">{{submenu.title}}</a>
|
||||
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
|
||||
<ng-container *ngFor="let subsubmenu of submenu.items">
|
||||
<li [class.uk-active]="isTheActiveMenu(subsubmenu)">
|
||||
<a *ngIf="subsubmenu.route.length > 0"
|
||||
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
|
||||
[fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a>
|
||||
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
|
||||
href="{{subsubmenu.url}}" [class.custom-external]="subsubmenu.target != '_self'" target="{{subsubmenu.target}}">{{subsubmenu.title}}</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
|
||||
<li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)"
|
||||
class="uk-nav-header">{{submenu.title}}</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<div id="main-menu" class="uk-visible@l">
|
||||
<div *ngIf="activeHeader" [class.uk-light]='activeHeader.darkBg'>
|
||||
<div class="uk-navbar-container" uk-sticky="media@m">
|
||||
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && activeHeader.badge">
|
||||
<img class="uk-position-top-left"
|
||||
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
|
||||
alt="BETA" style="height: 65px; width: 65px; z-index: 1000">
|
||||
</div>
|
||||
<div class="uk-container uk-container-expand">
|
||||
<nav class="uk-navbar" uk-navbar>
|
||||
<ng-container *ngIf="!onlyTop">
|
||||
<div class="uk-navbar-left">
|
||||
<ng-container *ngIf="showLogo && isHeaderLeft">
|
||||
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
|
||||
</ng-container>
|
||||
<!-- Custom menu items -->
|
||||
<!-- TODO: Add to mobile menu as well! -->
|
||||
<ng-container *ngIf="isMenuEnabled && additionalMenuItems?.length > 0">
|
||||
<ng-container *ngFor="let menu of additionalMenuItems">
|
||||
<li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)">
|
||||
<!-- INTERNAL ROOT-->
|
||||
<a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)"
|
||||
routerLink="{{menu.route}}"
|
||||
[queryParams]="menu.params"
|
||||
[fragment]="menu.fragment">
|
||||
{{menu.title}}
|
||||
</a>
|
||||
<!-- EXTERNAL ROOT-->
|
||||
<a *ngIf="menu.type == 'external' && menu.url"
|
||||
href="{{menu.url}}"
|
||||
target="_blank" class="custom-external">
|
||||
{{menu.title}}
|
||||
</a>
|
||||
<!-- NO ACTION ROOT-->
|
||||
<a *ngIf="menu.type == 'noAction'">
|
||||
{{menu.title}}
|
||||
</a>
|
||||
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left"
|
||||
style="top: 80px; left: 0px;" id="{{menu._id}}" uk-toggle>
|
||||
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
|
||||
<div class="uk-first-column uk-height-max-medium uk-overflow-auto">
|
||||
<ul class="uk-nav uk-navbar-dropdown-nav">
|
||||
<ng-container *ngFor="let submenu of menu.items">
|
||||
<li [class.uk-active]="isTheActiveMenu(submenu)">
|
||||
<!-- INTERNAL CHILD -->
|
||||
<a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)"
|
||||
routerLink="{{submenu.route}}"
|
||||
[queryParams]="submenu.params"
|
||||
[fragment]="submenu.fragment">
|
||||
{{submenu.title}}
|
||||
</a>
|
||||
<!-- EXTERNAL CHILD -->
|
||||
<a *ngIf="submenu.type == 'external' && submenu.url"
|
||||
href="{{submenu.url}}"
|
||||
target="_blank" class="custom-external">
|
||||
{{submenu.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-navbar-center">
|
||||
<ng-container *ngIf="showLogo && !isHeaderLeft">
|
||||
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!activeHeader.menuPosition || activeHeader.menuPosition === 'center'">
|
||||
<ng-container *ngTemplateOutlet="mainMenu"></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="uk-navbar-right">
|
||||
<ng-container *ngIf="activeHeader.menuPosition === 'right'">
|
||||
<ng-container *ngTemplateOutlet="mainMenu"></ng-container>
|
||||
</ng-container>
|
||||
<user-mini *ngIf="userMenu" [user]="user"
|
||||
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
|
||||
[cookieDomain]=properties.cookieDomain></user-mini>
|
||||
<ng-content select="[extra-m]"></ng-content>
|
||||
</div>
|
||||
<ng-template #mainMenu>
|
||||
<ul class="uk-navbar-nav" [class.uk-margin-right]="!userMenu">
|
||||
<li class="uk-parent" *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
|
||||
<a routerLink="/">Home</a>
|
||||
</li>
|
||||
<ng-container *ngFor="let menu of menuItems">
|
||||
<li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)"
|
||||
*ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)">
|
||||
<!--a routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="" aria-expanded="false">{{menu.rootItem.title}}</a-->
|
||||
<a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired )"
|
||||
routerLink="{{menu.rootItem.route}}"
|
||||
[queryParams]="menu.rootItem.params"
|
||||
[fragment]="menu.rootItem.fragment"> {{menu.rootItem.title}}</a>
|
||||
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
|
||||
href="{{menu.rootItem.url}}" target="{{menu.rootItem.target}}"
|
||||
[class.custom-external]="menu.rootItem.target != '_self'">{{menu.rootItem.title}}</a>
|
||||
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))">{{menu.rootItem.title}}</a>
|
||||
<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 -->
|
||||
<div>
|
||||
<ul class="uk-nav uk-navbar-dropdown-nav">
|
||||
<ng-container *ngFor="let submenu of menu.items">
|
||||
<li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) &&
|
||||
isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 ||
|
||||
submenu.url.length > 0)" [class.uk-active]="isTheActiveMenu(submenu)"
|
||||
[class.uk-parent]="submenu.items && submenu.items.length > 0">
|
||||
<a *ngIf="submenu.route.length > 0"
|
||||
routerLink="{{submenu.route}}" [queryParams]="submenu.params"
|
||||
[fragment]="submenu.fragment">{{submenu.title}}</a>
|
||||
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
|
||||
href="{{submenu.url}}" [class.custom-external]="submenu.target != '_self'"
|
||||
target="{{submenu.target}}">{{submenu.title}}</a>
|
||||
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
|
||||
<ng-container *ngFor="let subsubmenu of submenu.items">
|
||||
<li [class.uk-active]="isTheActiveMenu(subsubmenu)">
|
||||
<a *ngIf="subsubmenu.route.length > 0"
|
||||
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
|
||||
[fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a>
|
||||
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
|
||||
href="{{subsubmenu.url}}" [class.custom-external]="subsubmenu.target != '_self'" target="{{subsubmenu.target}}">{{subsubmenu.title}}</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
|
||||
<li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)"
|
||||
class="uk-nav-header">{{submenu.title}}</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
</nav>
|
||||
<!-- Custom menu items -->
|
||||
<!-- TODO: Add to mobile menu as well! -->
|
||||
<ng-container *ngIf="isMenuEnabled && additionalMenuItems?.length > 0">
|
||||
<ng-container *ngFor="let menu of additionalMenuItems">
|
||||
<li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)">
|
||||
<!-- INTERNAL ROOT-->
|
||||
<a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)"
|
||||
routerLink="{{menu.route}}"
|
||||
[queryParams]="menu.params"
|
||||
[fragment]="menu.fragment">
|
||||
{{menu.title}}
|
||||
</a>
|
||||
<!-- EXTERNAL ROOT-->
|
||||
<a *ngIf="menu.type == 'external' && menu.url"
|
||||
href="{{menu.url}}"
|
||||
target="_blank" class="custom-external">
|
||||
{{menu.title}}
|
||||
</a>
|
||||
<!-- NO ACTION ROOT-->
|
||||
<a *ngIf="menu.type == 'noAction'">
|
||||
{{menu.title}}
|
||||
</a>
|
||||
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left"
|
||||
style="top: 80px; left: 0px;" id="{{menu._id}}" uk-toggle>
|
||||
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
|
||||
<div class="uk-first-column uk-height-max-medium uk-overflow-auto">
|
||||
<ul class="uk-nav uk-navbar-dropdown-nav">
|
||||
<ng-container *ngFor="let submenu of menu.items">
|
||||
<li [class.uk-active]="isTheActiveMenu(submenu)">
|
||||
<!-- INTERNAL CHILD -->
|
||||
<a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)"
|
||||
routerLink="{{submenu.route}}"
|
||||
[queryParams]="submenu.params"
|
||||
[fragment]="submenu.fragment">
|
||||
{{submenu.title}}
|
||||
</a>
|
||||
<!-- EXTERNAL CHILD -->
|
||||
<a *ngIf="submenu.type == 'external' && submenu.url"
|
||||
href="{{submenu.url}}"
|
||||
target="_blank" class="custom-external">
|
||||
{{submenu.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- New navbar for featured menu items only -->
|
||||
|
|
@ -266,25 +265,27 @@
|
|||
</div>
|
||||
</div>
|
||||
<ng-template #header_template let-mobile="mobile">
|
||||
<a *ngIf="!header.url" [routerLink]="header.route" [class.uk-padding-remove]="!isHeaderLeft"
|
||||
class="uk-logo uk-navbar-item uk-text-center uk-text-bold" [class.uk-margin-medium-left]="!mobile">
|
||||
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
|
||||
[src]="!mobile?header.logoUrl:header.logoSmallUrl"
|
||||
[alt]="header.title">
|
||||
<ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
|
||||
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
|
||||
<p class="uk-margin-remove">{{header.title}}</p>
|
||||
<a *ngIf="!activeHeader.url" [routerLink]="activeHeader.route" [class.uk-padding-remove]="!isHeaderLeft"
|
||||
class="uk-logo uk-navbar-item uk-flex uk-flex-middle uk-animation-fast" [class.animation-logo]="replaceHeader" [class.uk-animation-fade]="!replaceHeader">
|
||||
<img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
|
||||
[src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
|
||||
[alt]="activeHeader.title">
|
||||
<div *ngIf="activeHeader.logoInfo" [innerHTML]="activeHeader.logoInfo"></div>
|
||||
<ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)">
|
||||
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
|
||||
<p class="uk-margin-remove">{{activeHeader.title}}</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
</a>
|
||||
<a *ngIf="header.url" [href]="header.url" [class.uk-padding-remove]="!isHeaderLeft"
|
||||
class="uk-logo uk-navbar-item uk-text-center uk-text-bold" [class.uk-margin-medium-left]="!mobile">
|
||||
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
|
||||
[src]="!mobile?header.logoUrl:header.logoSmallUrl"
|
||||
[alt]="header.title">
|
||||
<ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
|
||||
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
|
||||
<p class="uk-margin-remove">{{header.title}}</p>
|
||||
<a *ngIf="activeHeader.url" [href]="activeHeader.url" [class.uk-padding-remove]="!isHeaderLeft"
|
||||
class="uk-logo uk-navbar-item uk-flex uk-flex-middle uk-animation-fast" [class.animation-logo]="replaceHeader" [class.uk-animation-fade]="!replaceHeader">
|
||||
<img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
|
||||
[src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
|
||||
[alt]="activeHeader.title">
|
||||
<div *ngIf="activeHeader.logoInfo" [innerHTML]="activeHeader.logoInfo"></div>
|
||||
<ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)">
|
||||
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
|
||||
<p class="uk-margin-remove">{{activeHeader.title}}</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -17,19 +17,21 @@ export interface Header {
|
|||
title: string,
|
||||
logoUrl: string,
|
||||
logoSmallUrl: string,
|
||||
logoInfo?: string,
|
||||
position: 'left' | 'center' | 'right',
|
||||
badge: boolean
|
||||
stickyAnimation?: boolean
|
||||
menuPosition?: 'center' | 'right'
|
||||
badge: boolean,
|
||||
darkBg?: boolean,
|
||||
menuPosition?: 'center' | 'right',
|
||||
replaceHeader?: Header;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'navbar',
|
||||
templateUrl: 'navigationBar.component.html'
|
||||
templateUrl: 'navigationBar.component.html',
|
||||
styleUrls: ['navigation.component.less']
|
||||
})
|
||||
export class NavigationBarComponent implements OnInit, OnDestroy {
|
||||
@Input() portal: string = 'connect';
|
||||
@Input() dark: boolean = false;
|
||||
@Input() onlyTop: boolean = false;
|
||||
@Input() logoPath: string = 'assets/common-assets/';
|
||||
@Input() userMenu: boolean = true;
|
||||
|
|
@ -48,6 +50,8 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
|
|||
@Input() searchPlaceHolder: string = 'Search for research results';
|
||||
@Input() showLogo: boolean = true;
|
||||
@Input() offCanvasFlip: boolean = false;
|
||||
replaceHeader: boolean = false;
|
||||
public activeHeader: Header;
|
||||
keyword: string = '';
|
||||
public isAuthorized: boolean = false;
|
||||
subs: Subscription[] = [];
|
||||
|
|
@ -130,6 +134,10 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
|
|||
)
|
||||
);
|
||||
}
|
||||
this.subs.push(this.layoutService.replaceHeader.subscribe(replaceHeader => {
|
||||
this.replaceHeader = this.header.replaceHeader && replaceHeader;
|
||||
this.activeHeader = this.replaceHeader?this.header.replaceHeader:this.header;
|
||||
}));
|
||||
}
|
||||
|
||||
isEnabled(required, enabled) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue