MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change navbar base on new theme

This commit is contained in:
Konstantinos Triantafyllou 2022-02-28 14:38:26 +02:00
parent ada419f8e8
commit d590732aba
3 changed files with 222 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
login/userMini.component.ts
View File

@ -1,4 +1,4 @@
import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core'; import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {Session, User} from './utils/helper.class'; import {Session, User} from './utils/helper.class';
import {RouterHelper} from '../utils/routerHelper.class'; import {RouterHelper} from '../utils/routerHelper.class';
@ -6,72 +6,44 @@ import {Subscriber} from "rxjs";
import {MenuItem} from "../sharedComponents/menu"; import {MenuItem} from "../sharedComponents/menu";
import {UserManagementService} from "../services/user-management.service"; import {UserManagementService} from "../services/user-management.service";
// declare var logoutClicked; declare var UIkit;
@Component({ @Component({
selector: 'user-mini', selector: 'user-mini',
template: ` template: `
<ng-container *ngIf="!dashboard"> <ng-container *ngIf="!dashboard">
<ul *ngIf="!mobileView" class="uk-navbar-nav" [class.uk-dark]="dark"> <ul *ngIf="!mobileView" class="uk-navbar-nav" [class.uk-dark]="dark">
<li class="uk-parent"> <li class="uk-parent">
<a *ngIf="loggedIn" class="login"> <a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
<ng-container *ngIf="loggedIn">
<a class="login uk-icon">
<svg height="60" width="60"> <svg height="60" width="60">
<circle cx="30" cy="30" r="20" stroke-width="2"></circle> <circle cx="30" cy="30" r="20" stroke-width="2"></circle>
<text *ngIf="firstLetters" x="50%" y="50%" text-anchor="middle" dy=".4em" <text x="50%" y="50%" text-anchor="middle" dy=".4em" font-size="16">
font-size="16"> {{firstLetters?firstLetters:'AN'}}
{{firstLetters}}
</text> </text>
<svg *ngIf="!firstLetters" ratio="1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" width="20"
x="20">
<circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
<path d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
</svg>
</svg> </svg>
</a> </a>
<a *ngIf="!loggedIn" class="loginLink" id="userMenu-parent" (click)="logIn()">Sign in <span <div class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left">
class=" uk-margin-small-left uk-margin-small-right uk-icon"><svg width="20" height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
ratio="1"><circle fill="none"
stroke="#000"
stroke-width="1.1"
cx="9.9" cy="6.4"
r="4.4"></circle><path
fill="none" stroke="#000" stroke-width="1.1"
d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg> </span>
</a>
<div *ngIf="loggedIn" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" id="userMenu" 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"> <ul class="uk-nav uk-navbar-dropdown-nav">
<!--li><a href="" >My profile</a></li>
<li><a routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
<li *ngIf="isAuthorized"><a routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
<ng-container *ngFor="let item of userMenuItems "> <ng-container *ngFor="let item of userMenuItems ">
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization" [class.uk-active]="isTheActiveSubMenu(item)"> <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization"
<a *ngIf="item.route.length > 0" routerLink="{{item.route}}" [class.uk-active]="isTheActiveSubMenu(item)">
[queryParams]=item.params>{{item.title}}</a> <a *ngIf="item.route.length > 0" [routerLink]="item.route"
[queryParams]="item.params">{{item.title}}</a>
<a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}" <a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}"
target="_blank">{{item.title}}</a> target="_blank">{{item.title}}</a>
</li> </li>
</ng-container> </ng-container>
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li> <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
<li><a (click)="logOut()" id="logout">Log out</a></li> <li><a (click)="logOut()">Log out</a></li>
</ul> </ul>
</div> </div>
<div id="logout1"></div> </ng-container>
</div>
</div>
</li> </li>
</ul> </ul>
</ng-container> <ul *ngIf="mobileView" class="uk-nav uk-nav-default">
<li>
<ng-container *ngIf="!dashboard">
<li *ngIf="mobileView" class="uk-nav-header uk-parent ">
<span *ngIf="loggedIn" class="uk-flex uk-flex-middle"> <span *ngIf="loggedIn" class="uk-flex uk-flex-middle">
<span>{{user.fullname + " "}}</span> <span>{{user.fullname + " "}}</span>
<span class="uk-margin-small-right uk-icon"><svg width="20" height="20" <span class="uk-margin-small-right uk-icon"><svg width="20" height="20"
@ -87,44 +59,22 @@ import {UserManagementService} from "../services/user-management.service";
d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg> d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg>
</span> </span>
</span> </span>
<span *ngIf="!loggedIn"> <a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
<a class="loginLink" (click)="logIn()">Sign in <span class="uk-margin-small-right uk-icon"><svg width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
ratio="1"><circle
fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none"
stroke="#000"
stroke-width="1.1"
d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg></span>
</a>
</span>
<ul *ngIf="loggedIn" class="uk-nav-sub"> <ul *ngIf="loggedIn" class="uk-nav-sub">
<!--li><a href="" >My profile</a></li>
<li><a routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
<li *ngIf="isAuthorized"><a routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
<ng-container *ngFor="let item of userMenuItems "> <ng-container *ngFor="let item of userMenuItems ">
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization"> <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
<a *ngIf="item.route.length > 0" routerLink="{{item.route}}">{{item.title}}</a> <a *ngIf="item.route.length > 0" routerLink="{{item.route}}" (click)="closeCanvas()">{{item.title}}</a>
<a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}">{{item.title}}</a> <a *ngIf="item.route.length == 0 && item.url.length > 0" (click)="closeCanvas()" href="{{item.url}}">{{item.title}}</a>
</li> </li>
</ng-container> </ng-container>
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li> <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
<li><a (click)="logOut()" id="logout">Log out</a></li> <li><a (click)="logOut()">Log out</a></li>
</ul> </ul>
</li> </li>
</ul>
</ng-container> </ng-container>
<ng-container *ngIf="dashboard"> <ng-container *ngIf="dashboard">
<a *ngIf="!loggedIn" class="uk-flex" (click)="logIn()"> <a *ngIf="!loggedIn" class="uk-flex" (click)="logIn()">Sign in</a>
<span>Sign in</span>
<span class="uk-margin-small-left uk-margin-small-right uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1">
<circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
<path d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
</svg>
</span>
</a>
<a *ngIf="loggedIn" class="login uk-icon"> <a *ngIf="loggedIn" class="login uk-icon">
<svg height="60" width="60"> <svg height="60" width="60">
<circle cx="30" cy="30" r="20" stroke-width="2"></circle> <circle cx="30" cy="30" r="20" stroke-width="2"></circle>
@ -152,7 +102,7 @@ import {UserManagementService} from "../services/user-management.service";
</li> </li>
</ng-container> </ng-container>
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li> <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
<li><a (click)="logOut()" id="logout">Log out</a></li> <li><a (click)="logOut()">Log out</a></li>
</ul> </ul>
</div> </div>
</ng-container> </ng-container>
@ -172,7 +122,8 @@ export class UserMiniComponent implements OnInit, OnChanges {
@Input() logOutUrl; @Input() logOutUrl;
@Input() cookieDomain; @Input() cookieDomain;
@Input() dark: boolean = false; @Input() dark: boolean = false;
subscriptions = []; @Output() closeCanvasEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
private subscriptions = [];
constructor(private router: Router, private route: ActivatedRoute, private userManagementService: UserManagementService) { constructor(private router: Router, private route: ActivatedRoute, private userManagementService: UserManagementService) {
} }
@ -198,6 +149,10 @@ export class UserMiniComponent implements OnInit, OnChanges {
}); });
} }
closeCanvas() {
this.closeCanvasEmitter.emit(true);
}
initUser() { initUser() {
if (this.user) { if (this.user) {
this.loggedIn = true; this.loggedIn = true;
@ -225,11 +180,9 @@ export class UserMiniComponent implements OnInit, OnChanges {
isTheActiveSubMenu(menuItem: MenuItem): boolean { isTheActiveSubMenu(menuItem: MenuItem): boolean {
let currentRoute = this.router.url.split('?')[0]; let currentRoute = this.router.url.split('?')[0];
if (menuItem.route == currentRoute || menuItem.route == (currentRoute + "/") ) { return menuItem.route == currentRoute || menuItem.route == (currentRoute + "/");
return true;
}
return false;
} }
parseName() { parseName() {
this.firstLetters = ""; this.firstLetters = "";
if (this.user && this.user.firstname) { if (this.user && this.user.firstname) {

152
sharedComponents/navigationBar.component.html
View File

@ -32,74 +32,54 @@
</a> </a>
</div> </div>
</nav> </nav>
</div> </div>
<div *ngIf="specialAnnouncementContent" class="uk-hidden@m" [innerHTML]="specialAnnouncementContent"> <div *ngIf="specialAnnouncementContent" class="uk-hidden@m" [innerHTML]="specialAnnouncementContent">
</div> </div>
<div id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+offCanvasFlip:'')" mode="slide" overlay="" <div #canvas id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+(offCanvasFlip + ';'):'') + 'overlay: true'"
class="uk-offcanvas uk-hidden@m" class="uk-offcanvas uk-hidden@m"
style="z-index:9999;"> style="z-index:9999;">
<div class="uk-offcanvas-bar"> <div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button> <button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button>
<div class="uk-child-width-1-1 uk-grid" uk-grid=""> <div class="uk-padding">
<div>
<div class="uk-panel" id="module-0">
<ul class="uk-nav uk-nav-default"> <ul class="uk-nav uk-nav-default">
<!-- <li *ngIf="(['explore','connect','monitor','provide','develop']).indexOf(portal)!=-1"
class="uk-nav-header uk-parent">
Dashboards
<ul class="uk-nav-sub">
<li *ngIf="portal!='explore'"><a
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development' ?'beta.':'')+'explore.openaire.eu'"
target="_blank" class="uk-heading-bullet explore-heading-bullet">EXPLORE</a></li>
<li *ngIf="portal!='provide'"><a
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'provide.openaire.eu'"
target="_blank" class="uk-heading-bullet provide-heading-bullet">PROVIDE</a></li>
<li *ngIf="portal!='connect'"><a
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'connect.openaire.eu'"
target="_blank" class="uk-heading-bullet connect-heading-bullet">CONNECT</a></li>
<li *ngIf="portal!='monitor'"><a [href]="'https://'+(properties.environment =='beta' ||
properties.environment =='development'?'beta.':'')+'monitor.openaire.eu'" target="_blank"
class="uk-heading-bullet monitor-heading-bullet">MONITOR</a></li>
<li *ngIf="portal!='develop'"><a href="https://develop.openaire.eu" target="_blank"
class="uk-heading-bullet develop-heading-bullet">DEVELOP</a></li>
</ul>
</li>-->
<ng-container *ngIf="!onlyTop"> <ng-container *ngIf="!onlyTop">
<ng-container *ngFor="let menu of menuItems"> <ng-container *ngFor="let menu of menuItems">
<li class="uk-nav-header uk-parent " *ngIf="showHomeMenuItem && currentRoute.route !== '/'"> <li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
<a routerLinkActive="uk-link" routerLink="/">Home</a> <a routerLinkActive="uk-link" routerLink="/" (click)="closeCanvas(canvas)">Home</a>
</li> </li>
<li class="uk-nav-header uk-parent" [class.uk-active]="isTheActiveMenu(menu)" <li [class.uk-active]="isTheActiveMenu(menu)"
*ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)"> *ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)">
<!--a routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a--> <!--a routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->
<a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired)" <a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired)"
routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}" routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}"
[routerLinkActiveOptions]="{exact: true}" [routerLinkActiveOptions]="{exact: true}" (click)="closeCanvas(canvas)"
[queryParams]="menu.rootItem.params" [fragment]="menu.rootItem.fragment" [queryParams]="menu.rootItem.params" [fragment]="menu.rootItem.fragment">{{menu.rootItem.title}}</a>
class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
routerLinkActive="uk-link" href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}">{{menu.rootItem.title}}</a> routerLinkActive="uk-link" href="{{menu.rootItem.url}}" (click)="closeCanvas(canvas)"
<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))" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}">{{menu.rootItem.title}}</a>
class="uk-offcanvas-close custom-offcanvas-close">{{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))" (click)="closeCanvas(canvas)">{{menu.rootItem.title}}</a>
<ul class="uk-nav-sub"> <ul class="uk-nav-sub">
<ng-container *ngFor="let submenu of menu.items"> <ng-container *ngFor="let submenu of menu.items">
<li [class.uk-active]="isTheActiveMenuItem(submenu)" *ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 || submenu.url.length > 0)" <li [class.uk-active]="isTheActiveMenuItem(submenu)"
*ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 || submenu.url.length > 0)"
[class.uk-parent]="submenu.items && submenu.items.length > 0"> [class.uk-parent]="submenu.items && submenu.items.length > 0">
<a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link" <a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link" (click)="closeCanvas(canvas)"
routerLink="{{submenu.route}}" [queryParams]=submenu.params [fragment]="submenu.fragment" routerLink="{{submenu.route}}" [queryParams]=submenu.params
class="uk-offcanvas-close custom-offcanvas-close">{{submenu.title}}</a> [fragment]="submenu.fragment">{{submenu.title}}</a>
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" routerLinkActive="uk-link" <a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" routerLinkActive="uk-link"
href="{{submenu.url}}" target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a> href="{{submenu.url}}" (click)="closeCanvas(canvas)"
target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub"> <ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
<ng-container *ngFor="let subsubmenu of submenu.items"> <ng-container *ngFor="let subsubmenu of submenu.items">
<li> <li>
<a *ngIf="subsubmenu.route.length > 0" routerLinkActive="uk-link" <a *ngIf="subsubmenu.route.length > 0" routerLinkActive="uk-link"
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params" routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
[fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a> [fragment]="subsubmenu.fragment" (click)="closeCanvas(canvas)">{{subsubmenu.title}}</a>
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0" routerLinkActive="uk-link" <a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
href="{{subsubmenu.url}}" target="_blank">{{subsubmenu.title}}</a> routerLinkActive="uk-link" href="{{subsubmenu.url}}" (click)="closeCanvas(canvas)"
target="_blank">{{subsubmenu.title}}</a>
</li> </li>
</ng-container> </ng-container>
</ul> </ul>
@ -107,20 +87,16 @@
<li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)" <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> class="uk-nav-header">{{submenu.title}}</li>
</ng-container> </ng-container>
</ul> </ul>
</li> </li>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ul>
<ng-container *ngIf="userMenu"> <ng-container *ngIf="userMenu">
<user-mini [user]="user" mobileView=true <user-mini [user]="user" mobileView=true (closeCanvasEmitter)="closeCanvas(canvas)"
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl
[logOutUrl]=properties.logoutUrl [cookieDomain]=properties.cookieDomain></user-mini> [logOutUrl]=properties.logoutUrl [cookieDomain]=properties.cookieDomain></user-mini>
</ng-container> </ng-container>
</ul>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -161,12 +137,10 @@
</div> </div>
</div> </div>
</div>--> </div>-->
<div *ngIf="specialAnnouncementContent" class="uk-visible@m" [innerHTML]="specialAnnouncementContent"> <div *ngIf="specialAnnouncementContent" class="uk-visible@m" [innerHTML]="specialAnnouncementContent"></div>
<div class="uk-visible@m">
</div> <div [class]="'uk-sticky uk-navbar-transparent '+portal+'-menu'"
<div class="tm-header uk-visible@m tm-header-transparent" uk-header=""> uk-sticky="show-on-up: true" media="768" cls-active="uk-active uk-navbar-sticky"
<div id="stickyNavbar" [class]="'uk-navbar-container uk-sticky uk-navbar-transparent '+portal+'-menu'" uk-sticky="show-on-up: true"
media="768" cls-active="uk-active uk-navbar-sticky"
[attr.animation]="(header.stickyAnimation != false ?'uk-animation-slide-top':null)" [attr.animation]="(header.stickyAnimation != false ?'uk-animation-slide-top':null)"
top=".tm-header + [class*=&quot;uk-section&quot;]" cls-inactive="uk-navbar-transparent" style=""> top=".tm-header + [class*=&quot;uk-section&quot;]" cls-inactive="uk-navbar-transparent" style="">
<div <div
@ -175,25 +149,39 @@
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')" [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
alt="BETA" style="height: 102px; width: 102px"> alt="BETA" style="height: 102px; width: 102px">
</div> </div>
<div class="uk-container uk-container-expand"> <nav class="uk-navbar uk-navbar-container" uk-navbar>
<nav class="uk-navbar" uk-navbar="{&quot;align&quot;:&quot;center&quot;}">
<div *ngIf="showLogo && header.position== 'left'" class="uk-navbar-left uk-visible@l"> <div *ngIf="showLogo && header.position== 'left'" class="uk-navbar-left uk-visible@l">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container> <ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
</div> </div>
<div *ngIf="showLogo && header.position == 'left'" class="uk-navbar-left uk-visible@m uk-hidden@l"> <div *ngIf="showLogo && header.position == 'left'" class="uk-navbar-left uk-visible@m uk-hidden@l">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container> <ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
</div> </div>
<div *ngIf="showLogo && header.position == 'center' && header.menuPosition != 'center' " class="uk-margin-auto uk-visible@m"> <div *ngIf="showLogo && header.position == 'center' && header.menuPosition != 'center' "
class="uk-margin-auto uk-visible@m">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container> <ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
</div> </div>
<!-- <div *ngIf="!onlyTop" class="uk-navbar-center"> --> <!-- <div *ngIf="!onlyTop" class="uk-navbar-center"> -->
<div *ngIf="!onlyTop" [class.uk-navbar-right]="header.menuPosition != 'center'" <ng-container *ngIf="!onlyTop">
[class.uk-navbar-center]="header.menuPosition == 'center'">
<div *ngIf="showLogo && header.position == 'center' && header.menuPosition == 'center' " <div *ngIf="showLogo && header.position == 'center' && header.menuPosition == 'center' "
class="uk-margin-large-right uk-visible@m"> class="uk-margin-large-right uk-visible@m">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container> <ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
</div> </div>
<ul [class]="'uk-navbar-nav'+(!userMenu?' uk-margin-right':'')"> <div class="uk-navbar-center">
<ng-container *ngIf="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" [dark]="dark"
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
[cookieDomain]=properties.cookieDomain></user-mini>
<ng-content select="[after-login]"></ng-content>
</div>
<ng-template #mainMenu>
<ul class="uk-navbar-nav" [class.uk-margin-right]="!userMenu">
<li class="uk-parent" *ngIf="showHomeMenuItem && currentRoute.route !== '/'"> <li class="uk-parent" *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
<a routerLinkActive="uk-link" routerLink="/">Home</a> <a routerLinkActive="uk-link" routerLink="/">Home</a>
</li> </li>
@ -205,12 +193,14 @@
routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}" routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}"
[queryParams]="menu.rootItem.params" [queryParams]="menu.rootItem.params"
[fragment]="menu.rootItem.fragment"> {{menu.rootItem.title}}</a> [fragment]="menu.rootItem.fragment"> {{menu.rootItem.title}}</a>
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" routerLinkActive="uk-link" <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}" aria-expanded="false">{{menu.rootItem.title}}</a> routerLinkActive="uk-link"
href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}"
aria-expanded="false">{{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)) " <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)) "
class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a> class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left"
style="top: 80px; left: 0px;" id="{{menu.rootItem.id}}" uk-toggle> style="top: 80px; left: 0px;" id="{{menu.rootItem._id}}" uk-toggle>
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid=""> <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"> <div class="uk-first-column uk-height-max-medium uk-overflow-auto">
<ul class="uk-nav uk-navbar-dropdown-nav"> <ul class="uk-nav uk-navbar-dropdown-nav">
@ -222,15 +212,18 @@
<a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link" <a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link"
routerLink="{{submenu.route}}" [queryParams]="submenu.params" routerLink="{{submenu.route}}" [queryParams]="submenu.params"
[fragment]="submenu.fragment">{{submenu.title}}</a> [fragment]="submenu.fragment">{{submenu.title}}</a>
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" routerLinkActive="uk-link" <a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
href="{{submenu.url}}" target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a> routerLinkActive="uk-link"
href="{{submenu.url}}"
target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub"> <ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
<ng-container *ngFor="let subsubmenu of submenu.items"> <ng-container *ngFor="let subsubmenu of submenu.items">
<li> <li>
<a *ngIf="subsubmenu.route.length > 0" routerLinkActive="uk-link" <a *ngIf="subsubmenu.route.length > 0" routerLinkActive="uk-link"
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params" routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
[fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a> [fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a>
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0" routerLinkActive="uk-link" <a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
routerLinkActive="uk-link"
href="{{subsubmenu.url}}" target="_blank">{{subsubmenu.title}}</a> href="{{subsubmenu.url}}" target="_blank">{{subsubmenu.title}}</a>
</li> </li>
</ng-container> </ng-container>
@ -251,7 +244,8 @@
<ng-container *ngFor="let menu of customMenuItems"> <ng-container *ngFor="let menu of customMenuItems">
<li class="uk-parent"> <li class="uk-parent">
<!-- INTERNAL ROOT--> <!-- INTERNAL ROOT-->
<a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)" routerLinkActive="uk-link" <a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)"
routerLinkActive="uk-link"
routerLink="{{menu.route}}" routerLink="{{menu.route}}"
[queryParams]="menu.params" [queryParams]="menu.params"
[fragment]="menu.fragment"> [fragment]="menu.fragment">
@ -275,7 +269,8 @@
<ng-container *ngFor="let submenu of menu.items"> <ng-container *ngFor="let submenu of menu.items">
<li> <li>
<!-- INTERNAL CHILD --> <!-- INTERNAL CHILD -->
<a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)" routerLinkActive="uk-link" <a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)"
routerLinkActive="uk-link"
routerLink="{{submenu.route}}" routerLink="{{submenu.route}}"
[queryParams]="submenu.params" [queryParams]="submenu.params"
[fragment]="submenu.fragment" [fragment]="submenu.fragment"
@ -297,27 +292,12 @@
</li> </li>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ul> </ul>
<!-- </div> --> </ng-template>
<!-- <div *ngIf="userMenu" class="uk-navbar-right"> --> </ng-container>
<!-- <div *ngIf="userMenu" class="uk-navbar-right"> -->
<user-mini *ngIf="userMenu" [user]="user" [dark]="dark"
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
[cookieDomain]=properties.cookieDomain></user-mini>
</div>
</nav> </nav>
</div> </div>
</div> </div>
</div>
<div class="first_page_section uk-section-default uk-section uk-padding-remove-vertical">
<div
class="first_page_banner_headline uk-grid-collapse uk-flex-middle uk-margin-remove-vertical uk-grid uk-grid-stack"
uk-grid="">
</div>
</div>
</div> </div>
<ng-template #header_template let-mobile="mobile"> <ng-template #header_template let-mobile="mobile">
<a *ngIf="!header.url" [routerLink]="header.route" [class.uk-padding-remove]="header.position !== 'left'" <a *ngIf="!header.url" [routerLink]="header.route" [class.uk-padding-remove]="header.position !== 'left'"

15
sharedComponents/navigationBar.component.ts
View File

@ -1,4 +1,4 @@
import {Component, Input, OnDestroy, OnInit} from '@angular/core'; import {Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {Session, User} from '../login/utils/helper.class'; import {Session, User} from '../login/utils/helper.class';
import {ConfigurationService} from '../utils/configuration/configuration.service'; import {ConfigurationService} from '../utils/configuration/configuration.service';
@ -7,6 +7,8 @@ import {EnvProperties} from '../utils/properties/env-properties';
import {Subscription} from 'rxjs'; import {Subscription} from 'rxjs';
import {HelpContentService} from '../services/help-content.service'; import {HelpContentService} from '../services/help-content.service';
declare var UIkit;
export interface Header { export interface Header {
route?: string, route?: string,
url?: string, url?: string,
@ -69,6 +71,10 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
} }
} }
closeCanvas(element) {
UIkit.offcanvas(element).hide();
}
initialize() { initialize() {
if ((['provide', 'develop']).indexOf(this.portal) != -1) { if ((['provide', 'develop']).indexOf(this.portal) != -1) {
this.header = { this.header = {
@ -88,13 +94,13 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
this.subs.push(this.config.communityInformationState.subscribe(data => { this.subs.push(this.config.communityInformationState.subscribe(data => {
if (data) { if (data) {
if (data['entities']) { if (data['entities']) {
for (var i = 0; i < data['entities'].length; i++) { for (let i = 0; i < data['entities'].length; i++) {
this.showEntity['' + data['entities'][i]['pid'] + ''] = data['entities'][i]['isEnabled']; this.showEntity['' + data['entities'][i]['pid'] + ''] = data['entities'][i]['isEnabled'];
} }
} }
if (data['pages']) { if (data['pages']) {
for (var i = 0; i < data['pages'].length; i++) { for (let i = 0; i < data['pages'].length; i++) {
this.showPage[data['pages'][i]['route']] = data['pages'][i]['isEnabled']; this.showPage[data['pages'][i]['route']] = data['pages'][i]['isEnabled'];
} }
@ -117,7 +123,6 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
} }
} }
isEnabled(required, enabled) { isEnabled(required, enabled) {
if (!required) { if (!required) {
return true; return true;
@ -143,7 +148,7 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
count--; count--;
} }
} }
return (count > 0) ? true : false; return (count > 0);
} }
private handleError(message: string, error) { private handleError(message: string, error) {