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

[Library|Trunk] 

Navbar: create an object header with all information about logo - title
	{ route: string, url: string, title: string, logoUrl: string, logoSmallUrl:string, position:'left'|'center'|'right' , badge: boolean };
	this will replace community, stakeholder objects



git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59509 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2020-10-06 08:12:14 +00:00
parent c7beacfec2
commit 4467b01559
2 changed files with 64 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
sharedComponents/navigationBar.component.html
View File

@ -1,5 +1,5 @@
<div *ngIf="showMenu">
<div *ngIf="properties.environment =='beta' || properties.environment =='development'"
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge"
class="uk-visible@m">
<a [routerLink]="logoRoute" [href]="logoUrl"><img class="large-beta-indication"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
@ -8,42 +8,32 @@
</div>
<div class="tm-header-mobile uk-hidden@m">
<nav class="uk-navbar-container uk-navbar" uk-navbar="">
<div *ngIf="properties.environment =='beta' || properties.environment =='development'"
class="uk-position-top-left">
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge"
class="uk-position-top-left">
<img class="small-beta-indication"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
alt="BETA">
</div>
<!-- class="uk-navbar-right"--> <!-- if we want to revert the menu - put it on the right -->
<div *ngIf="!onlyTop || userMenu" class="uk-navbar-left">
<a class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="" style="z-index:1000;">
<a *ngIf="!offCanvasFlip" class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="" style="z-index:1000;">
<div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div>
</a>
<a *ngIf="community && !homeurl" class="uk-navbar-item uk-logo"
[href]="'https://'+(properties.environment =='beta'?'beta.':'')+community.id+'.openaire.eu'" target="_blank">
<img *ngIf="community.logoUrl && community.logoUrl.length > 0" src="{{community.logoUrl}}"
[alt]=community.name class="uk-responsive-height">
<div *ngIf="!community.logoUrl || community.logoUrl.length == 0 || showCommunityName"
class="uk-margin-left uk-text-large">
{{community.name}} </div>
</a>
<a *ngIf="community && homeurl" class="uk-navbar-item uk-logo" routerLinkActive="uk-link" routerLink="/">
<img *ngIf="community.logoUrl && community.logoUrl.length > 0" src="{{community.logoUrl}}"
[alt]=community.name class="uk-responsive-height">
<div *ngIf="!community.logoUrl || community.logoUrl.length == 0 || showCommunityName"
class="uk-margin-left uk-text-large">
{{community.name}} </div>
</a>
<ng-container *ngIf="showLogo && header.position == 'left'">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: true}"></ng-container>
</ng-container>
<div *ngIf="enableSearch && isEnabled([searchRoute], showPage)"
class=" uk-width-large ">
<search-bar [searchPlaceHolder]="searchPlaceHolder"
[searchRoute]="searchRoute" [properties]="properties" [communityId]="communityId"></search-bar>
</div>
</div>
<div class="uk-navbar-center">
<a *ngIf="!community" class="uk-navbar-item uk-logo"
routerLinkActive="uk-link" routerLink="/">
<img src="{{logoPath}}logo-small-{{portal}}.png" alt="OpenAIRE" class="uk-responsive-height">
<div *ngIf="showLogo && header.position == 'center'" class="uk-navbar-center">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: true}"></ng-container>
</div>
<div *ngIf="!onlyTop || userMenu" class="uk-navbar-right">
<a *ngIf="offCanvasFlip" class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="" style="z-index:1000;">
<div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div>
</a>
</div>
<!--div class="uk-navbar-right uk-margin-xlarge-top">
@ -51,25 +41,30 @@
</div-->
</nav>
<!-- uk-offcanvas="flip: true"--> <!-- if we want to revert the menu - put it on the right -->
<div id="tm-mobile" uk-offcanvas="" mode="slide" overlay="" class="uk-offcanvas uk-hidden@m" style="z-index:10000;">
</div>
<div *ngIf="specialAnnouncementContent" class="uk-hidden@m" [innerHTML]="specialAnnouncementContent">
<div id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+offCanvasFlip:'')" mode="slide" overlay=""
class="uk-offcanvas uk-hidden@m"
style="z-index:9999;">
<div class="uk-offcanvas-bar">
<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>
<div class="uk-panel" id="module-0">
<ul class="uk-nav uk-nav-default">
<li *ngIf="portal != 'usage-counts' && !stakeholder" class="uk-nav-header uk-parent">
<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>
[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>
[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>
[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>
@ -128,10 +123,7 @@
</div>
</div>
</div>
<div *ngIf="specialAnnouncementContent" class="uk-hidden@m" [innerHTML]="specialAnnouncementContent">
</div>
<div *ngIf="!community && !stakeholder && portal != 'connect-admin' && portal != 'usage-counts'"
<div *ngIf="(['explore','connect','monitor','provide','develop']).indexOf(portal)!=-1"
class="tm-toolbar custom-{{portal}}-toolbar uk-visible@m">
<div class="uk-container uk-flex uk-flex-middle uk-container-expand">
<div class="uk-margin-auto-left">
@ -175,42 +167,15 @@
<div id="stickyNavbar" [class]="'uk-navbar-container uk-sticky uk-navbar-transparent '+portal+'-menu'" uk-sticky=""
media="768" cls-active="uk-active uk-navbar-sticky" animation="uk-animation-slide-top"
top=".tm-header + [class*=&quot;uk-section&quot;]" cls-inactive="uk-navbar-transparent" style="">
<div *ngIf="properties.environment =='beta' || properties.environment =='development'">
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge">
<img class="beta-indication-sticky"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
alt="BETA">
</div>
<div class="uk-container uk-container-expand">
<nav class="uk-navbar" uk-navbar="{&quot;align&quot;:&quot;left&quot;}">
<div *ngIf="showLogo" class="uk-navbar-left uk-visible@l">
<a *ngIf="!community" routerLinkActive="uk-link" routerLink="/"
class="uk-logo uk-navbar-item">
<img src="{{logoPath}}logo-large-{{portal}}.png" alt="OpenAIRE" class="uk-responsive-height">
</a>
<a *ngIf="community && homeurl" routerLinkActive="uk-link" routerLink="/" class="uk-logo uk-navbar-item">
<img *ngIf="community.logoUrl && community.logoUrl.length > 0" src="{{community.logoUrl}}"
[alt]=community.name class="uk-responsive-height">
<div *ngIf="!community.logoUrl || community.logoUrl.length == 0 || showCommunityName"
class="uk-margin-left uk-text-large"> {{community.name}} </div>
</a>
<a *ngIf="community && !homeurl"
[href]="'https://'+(properties.environment =='beta'?'beta.':'')+community.id+'.openaire.eu'"
target="_blank" class="uk-logo uk-navbar-item">
<img *ngIf="community.logoUrl && community.logoUrl.length > 0" src="{{community.logoUrl}}"
[alt]=community.name class="uk-responsive-height">
<div *ngIf="!community.logoUrl || community.logoUrl.length == 0 || showCommunityName"
class="uk-margin-left uk-text-large"> {{community.name}} </div>
</a>
<span *ngIf="stakeholder" class="uk-navbar-item uk-flex uk-flex-middle">
<div *ngIf="stakeholder.logoUrl">
<img [src]="stakeholder.logoUrl" alt="OpenAIRE" style="max-height: 40px">
</div>
<div class="uk-margin-left uk-text-large">
{{stakeholder.name}}
</div>
</span>
<div *ngIf="showLogo && header.position== 'left'" class="uk-navbar-left uk-visible@l">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
<div *ngIf="enableSearch && isEnabled([searchRoute], showPage)"
class=" uk-margin-left uk-width-xlarge ">
<search-bar [searchPlaceHolder]="searchPlaceHolder"
@ -218,33 +183,8 @@
[communityId]="communityId"></search-bar>
</div>
</div>
<div *ngIf="showLogo" class="uk-navbar-left uk-visible@m uk-hidden@l">
<a *ngIf="!community" routerLinkActive="uk-link" routerLink="/"
class="uk-logo uk-navbar-item">
<img src="{{logoPath}}logo-large-{{portal}}.png" alt="OpenAIRE" class="uk-responsive-height">
</a>
<span *ngIf="stakeholder" class="uk-navbar-item uk-flex uk-flex-middle" style="max-width: 50vw">
<div *ngIf="stakeholder.logoUrl">
<img [src]="stakeholder.logoUrl" alt="OpenAIRE" style="max-height: 40px">
</div>
<div class="uk-margin-left uk-text-large">
{{stakeholder.name}}
</div>
</span>
<a *ngIf="community && homeurl" routerLinkActive="uk-link" routerLink="/" class="uk-logo uk-navbar-item">
<img *ngIf="community.logoUrl && community.logoUrl.length > 0" src="{{community.logoUrl}}"
[alt]=community.name class="uk-responsive-height">
<div *ngIf="!community.logoUrl || community.logoUrl.length == 0 || showCommunityName"
class="uk-margin-left uk-text-large"> {{community.name}} </div>
</a>
<a *ngIf="community && !homeurl"
[href]="'https://'+(properties.environment =='beta'?'beta.':'')+community.id+'.openaire.eu'"
target="_blank" class="uk-logo uk-navbar-item">
<img *ngIf="community.logoUrl && community.logoUrl.length > 0" src="{{community.logoUrl}}"
[alt]=community.name class="uk-responsive-height">
<div *ngIf="!community.logoUrl || community.logoUrl.length == 0 || showCommunityName"
class="uk-margin-left uk-text-large"> {{community.name}} </div>
</a>
<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>
<div *ngIf="enableSearch && isEnabled([searchRoute], showPage)"
class="uk-width-large ">
<search-bar [searchPlaceHolder]="searchPlaceHolder"
@ -252,6 +192,9 @@
[communityId]="communityId"></search-bar>
</div>
</div>
<div *ngIf="showLogo && header.position == 'center'" class="uk-margin-auto uk-visible@m">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
</div>
<!-- <div *ngIf="!onlyTop" class="uk-navbar-center"> -->
<div *ngIf="!onlyTop" class="uk-navbar-right uk-position-top-right">
<ul [class]="'uk-navbar-nav'+(!userMenu?' uk-margin-right':'')">
@ -316,3 +259,23 @@
</div>
</div>
</div>
<ng-template #header_template let-mobile="mobile">
<a *ngIf="!header.url" routerLinkActive="uk-link" [routerLink]="header.url"
class="uk-logo uk-navbar-item">
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
[src]="!mobile?header.logoUrl:header.logoSmallUrl"
[alt]="header.title"
class="uk-responsive-height">
<span *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)"
class="uk-logo uk-text-bold uk-padding-remove">
{{header.title}}</span>
</a>
<a *ngIf="header.url"
[href]="header.url"
target="_blank" class="uk-logo uk-navbar-item">
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)" [src]="!mobile?header.logoUrl:header.logoSmallUrl" [alt]="header.title" class="uk-responsive-height">
<span *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)" class="uk-logo uk-text-bold uk-padding-remove">
{{header.title}}</span>
</a>
</ng-template>

9
sharedComponents/navigationBar.component.ts
View File

@ -24,6 +24,7 @@ export class NavigationBarComponent {
@Input() userMenuItems: MenuItem[];
@Input() menuItems: RootMenuItem [];
@Input() community: { id: string, name: string, logoUrl: string };
@Input() header: { route: string, url: string, title: string, logoUrl: string, logoSmallUrl:string, position:'left'|'center'|'right' , badge: boolean };
@Input() showMenu: boolean = true;
@Input() homeurl: boolean = true;
@Input() properties: EnvProperties;
@ -32,6 +33,7 @@ export class NavigationBarComponent {
@Input() searchRoute: string = "/search/find";
@Input() searchPlaceHolder: string = "Search for research results";
@Input() showLogo: boolean = true;
@Input() offCanvasFlip: boolean = false;
keyword: string = "";
logosrc: string = "";
@ -69,6 +71,13 @@ export class NavigationBarComponent {
}
initialize() {
if((['explore','connect','monitor','provide','develop', 'usage-counts']).indexOf(this.portal)!=-1){
this.header = { route: "/", url: null, title: this.portal, logoUrl: this.logoPath + 'logo-large-' + this.portal + '.png', logoSmallUrl:this.logoPath + 'logo-small-' + this.portal + '.png', position:'left', badge:true };
}else if(this.community){
this.header = { route: (this.homeurl?"/":null), url: (!this.homeurl?'https://'+(this.properties.environment =='beta'?'beta.':'')+this.community.id+'.openaire.eu':null), title: this.community.name, logoUrl: this.community.logoUrl, logoSmallUrl:this.community.logoUrl, position:'left', badge:true };
}else if (this.stakeholder){
this.header = { route:"", url: null, title: this.stakeholder.name, logoUrl: this.stakeholder.logoUrl, logoSmallUrl:this.stakeholder.logoUrl, position:'left', badge:true };
}
this.activeRouteEnabled = false;
this.isAuthorized = Session.isClaimsCurator(this.user) || Session.isPortalAdministrator(this.user);
if (this.properties.adminToolsAPIURL && this.communityId) {