[Library|Trunk]
Dashboard: Layout service: add mini menu option, front page option Sidebar: updates accorrding to the new mocks git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58836 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
a329f22ea9
commit
36c797b14b
|
@ -26,11 +26,14 @@ export class LayoutService {
|
||||||
* Add hasAdminMenu: true on data of route config, if global sidebar should be used.
|
* Add hasAdminMenu: true on data of route config, if global sidebar should be used.
|
||||||
*/
|
*/
|
||||||
private _hasAdminMenuSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
private _hasAdminMenuSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||||
|
private _hasMiniMenuSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||||
|
private _isFrontPageSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||||
|
|
||||||
constructor(private router: Router) {
|
constructor(private router: Router) {
|
||||||
this.router.events.subscribe(event => {
|
this.router.events.subscribe(event => {
|
||||||
if (event instanceof ActivationStart) {
|
if (event instanceof ActivationStart) {
|
||||||
let data = event.snapshot.data;
|
let data = event.snapshot.data;
|
||||||
|
console.debug(data)
|
||||||
if (data['hasSidebar'] !== undefined &&
|
if (data['hasSidebar'] !== undefined &&
|
||||||
data['hasSidebar'] === false) {
|
data['hasSidebar'] === false) {
|
||||||
this.setHasSidebar(false);
|
this.setHasSidebar(false);
|
||||||
|
@ -49,6 +52,18 @@ export class LayoutService {
|
||||||
} else {
|
} else {
|
||||||
this.setHasAdminMenu(false);
|
this.setHasAdminMenu(false);
|
||||||
}
|
}
|
||||||
|
if (data['hasMiniMenu'] !== undefined &&
|
||||||
|
data['hasMiniMenu'] === true) {
|
||||||
|
this.setHasMiniMenu(true);
|
||||||
|
} else {
|
||||||
|
this.setHasMiniMenu(false);
|
||||||
|
}
|
||||||
|
if (data['isFrontPage'] !== undefined &&
|
||||||
|
data['isFrontPage'] === true) {
|
||||||
|
this.setFrontPage(true);
|
||||||
|
} else {
|
||||||
|
this.setFrontPage(false);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -85,4 +100,19 @@ export class LayoutService {
|
||||||
setHasAdminMenu(value: boolean) {
|
setHasAdminMenu(value: boolean) {
|
||||||
this._hasAdminMenuSubject.next(value);
|
this._hasAdminMenuSubject.next(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get hasMiniMenu(): Observable<boolean> {
|
||||||
|
return this._hasMiniMenuSubject.asObservable();
|
||||||
|
}
|
||||||
|
|
||||||
|
setHasMiniMenu(value: boolean) {
|
||||||
|
this._hasMiniMenuSubject.next(value);
|
||||||
|
}
|
||||||
|
get isFrontPage(): Observable<boolean> {
|
||||||
|
return this._isFrontPageSubject.asObservable();
|
||||||
|
}
|
||||||
|
|
||||||
|
setFrontPage(value: boolean) {
|
||||||
|
this._isFrontPageSubject.next(value);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,16 +1,12 @@
|
||||||
<aside id="sidebar_main">
|
<aside id="sidebar_main">
|
||||||
<div *ngIf= "showHeader" class="sidebar_main_header uk-text-center">
|
<div *ngIf= "showHeader" class="sidebar_main_header uk-text-center">
|
||||||
<img class="badge "
|
<img *ngIf="headerLogoUrl" class="logo " [src]="headerLogoUrl">
|
||||||
src="assets/theme-assets/prototype_flag.svg"
|
<div *ngIf="!headerLogoUrl" class="portalLogo logo" ></div>
|
||||||
alt="BETA">
|
|
||||||
<img *ngIf="headerLogoUrl" class="logo" [src]="headerLogoUrl">
|
|
||||||
<div *ngIf="headerDashboard || headerName" class="logo">
|
|
||||||
<div class="uk-text-bold uk-margin-top">{{headerName}}</div>
|
|
||||||
<div>{{headerDashboard}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="menu_section uk-margin-top">
|
<div class="menu_section uk-margin-top">
|
||||||
<ul>
|
<ul>
|
||||||
|
<li *ngIf="headerName"><a
|
||||||
|
class="uk-disabled"><span class="menu_title uk-text-muted uk-text-uppercase">{{headerName}}</span></a></li>
|
||||||
<ng-template ngFor [ngForOf]="items" let-item let-i="index">
|
<ng-template ngFor [ngForOf]="items" let-item let-i="index">
|
||||||
<li [class.current_section]="isTheActiveMenuItem(item)"
|
<li [class.current_section]="isTheActiveMenuItem(item)"
|
||||||
[class.act_section]="item.open"
|
[class.act_section]="item.open"
|
||||||
|
@ -39,5 +35,14 @@
|
||||||
</li>
|
</li>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</ul>
|
</ul>
|
||||||
|
<ng-template [ngIf]="showSearch">
|
||||||
|
<hr>
|
||||||
|
<ul>
|
||||||
|
<li title="This functionality is comming soon. Stay tuned!"><a
|
||||||
|
class="uk-disabled">
|
||||||
|
<span class="menu_icon"><i class="material-icons">search</i></span>
|
||||||
|
<span class="menu_title uk-text-muted ">Search for Research Results</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</ng-template>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import {Component, Input, OnInit} from '@angular/core';
|
import { Component, Input, OnInit} from '@angular/core';
|
||||||
import {MenuItem} from "../../../sharedComponents/menu";
|
import {MenuItem} from "../../../sharedComponents/menu";
|
||||||
import {Router} from "@angular/router";
|
import {Router} from "@angular/router";
|
||||||
|
|
||||||
|
@ -14,6 +14,7 @@ export class SideBarComponent implements OnInit {
|
||||||
@Input() showHeader: boolean = true;
|
@Input() showHeader: boolean = true;
|
||||||
@Input() activeItem: string = '';
|
@Input() activeItem: string = '';
|
||||||
@Input() activeSubItem: string = '';
|
@Input() activeSubItem: string = '';
|
||||||
|
@Input() showSearch = false;
|
||||||
|
|
||||||
constructor(private router: Router) {}
|
constructor(private router: Router) {}
|
||||||
|
|
||||||
|
|
|
@ -12,7 +12,7 @@ export class MenuItem {
|
||||||
icon: string;
|
icon: string;
|
||||||
open: boolean;
|
open: boolean;
|
||||||
|
|
||||||
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params) {
|
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon=null) {
|
||||||
this.id = id;
|
this.id = id;
|
||||||
this.title = title;
|
this.title = title;
|
||||||
this.url = url;
|
this.url = url;
|
||||||
|
@ -23,6 +23,7 @@ export class MenuItem {
|
||||||
this.params = params;
|
this.params = params;
|
||||||
this.markAsActive = true;
|
this.markAsActive = true;
|
||||||
this.items = [];
|
this.items = [];
|
||||||
|
this.icon = icon;
|
||||||
}
|
}
|
||||||
|
|
||||||
public setMarkAsActive(showActive: boolean) {
|
public setMarkAsActive(showActive: boolean) {
|
||||||
|
|
Loading…
Reference in New Issue