[Library|Trunk]
updates with the dashboard theme change - layout service: add is small screen subject - sidebar updates - search page: change filters on burger menu - loading component update git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59554 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
958b8b5a38
commit
170414c894
|
@ -34,6 +34,7 @@ export class LayoutService {
|
||||||
* Add isFrontPage: true on data of route config, if current route is for front page.
|
* Add isFrontPage: true on data of route config, if current route is for front page.
|
||||||
*/
|
*/
|
||||||
private _isFrontPageSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
private _isFrontPageSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||||
|
private _isSmallScreenSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||||
|
|
||||||
constructor(private router: Router) {
|
constructor(private router: Router) {
|
||||||
this.router.events.subscribe(event => {
|
this.router.events.subscribe(event => {
|
||||||
|
@ -69,6 +70,12 @@ export class LayoutService {
|
||||||
} else {
|
} else {
|
||||||
this.setFrontPage(false);
|
this.setFrontPage(false);
|
||||||
}
|
}
|
||||||
|
if (data['isSmallScreen'] !== undefined &&
|
||||||
|
data['isSmallScreen'] === true) {
|
||||||
|
this.setSmallScreen(true);
|
||||||
|
} else {
|
||||||
|
this.setSmallScreen(false);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -120,4 +127,11 @@ export class LayoutService {
|
||||||
setFrontPage(value: boolean) {
|
setFrontPage(value: boolean) {
|
||||||
this._isFrontPageSubject.next(value);
|
this._isFrontPageSubject.next(value);
|
||||||
}
|
}
|
||||||
|
get isSmallScreen(): boolean{
|
||||||
|
return this._isSmallScreenSubject.getValue();
|
||||||
|
}
|
||||||
|
|
||||||
|
setSmallScreen(value: boolean) {
|
||||||
|
this._isSmallScreenSubject.next(value);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
<aside id="sidebar_main">
|
<aside id="sidebar_main" >
|
||||||
|
<div id="sidebar_content">
|
||||||
<a *ngIf= "showHeader" class="sidebar_main_header uk-text-center" [href]="headerUrl"
|
<a *ngIf= "showHeader" class="sidebar_main_header uk-text-center" [href]="headerUrl"
|
||||||
[class.uk-disabled]="(!headerUrl)">
|
[class.uk-disabled]="(!headerUrl)">
|
||||||
<img *ngIf="properties.environment =='beta' || properties.environment =='development'" class="badge"
|
<img *ngIf="properties.environment =='beta' || properties.environment =='development'" class="badge"
|
||||||
|
@ -6,38 +7,38 @@
|
||||||
[alt]="properties.environment">
|
[alt]="properties.environment">
|
||||||
<img *ngIf="headerLogoUrl" class="logo " [src]="headerLogoUrl">
|
<img *ngIf="headerLogoUrl" class="logo " [src]="headerLogoUrl">
|
||||||
<div *ngIf="!headerLogoUrl" class="portalLogo logo" ></div>
|
<div *ngIf="!headerLogoUrl" class="portalLogo logo" ></div>
|
||||||
|
<div *ngIf="headerName" class="uk-disabled uk-text-muted uk-text-center">{{headerName}}</div>
|
||||||
</a>
|
</a>
|
||||||
<div *ngIf="items.length > 0" class="menu_section uk-margin-large-top">
|
<div *ngIf="items.length > 0" class="menu_section uk-margin-large-top">
|
||||||
<ul class="uk-margin-large-top">
|
<ul class="uk-margin-large-top uk-list">
|
||||||
<li *ngIf="headerName"><a
|
<!-- <li *ngIf="headerName"><a-->
|
||||||
class="uk-disabled"><span class="menu_title uk-text-muted uk-text-uppercase">{{headerName}}</span></a></li>
|
<!-- 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"
|
||||||
[title]="item.title"
|
[title]="item.title"
|
||||||
[class.submenu_trigger]="item.items.length > 1">
|
[class.submenu_trigger]="item.items.length > 1" [class.uk-margin]="!isTheActiveMenuItem(item)">
|
||||||
<a *ngIf="item.items.length <= 1" [routerLink]="(item.route && !isTheActiveMenuItem(item))?item.route:null"
|
<a *ngIf="item.items.length <= 1" [routerLink]="(item.route && !isTheActiveMenuItem(item))?item.route:null"
|
||||||
[queryParams]=item.params [queryParamsHandling]="queryParamsHandling">
|
[queryParams]=item.params [queryParamsHandling]="queryParamsHandling" class="uk-text-center">
|
||||||
<span *ngIf="item.icon" class="menu_icon">
|
<div *ngIf="item.icon && !open" class="menu_icon uk-margin-auto">
|
||||||
<span [innerHTML]="satinizeHTML(item.icon)"></span>
|
<span [innerHTML]="satinizeHTML(item.icon)"></span>
|
||||||
</span>
|
</div>
|
||||||
<span *ngIf="!item.icon" class="menu_icon"><i class="material-icons">donut_large</i></span>
|
<div *ngIf="!item.icon && !open" class="menu_icon uk-margin-auto"><i class="material-icons">donut_large</i></div>
|
||||||
<span class="menu_title">{{item.title}}</span>
|
<span class="menu_title" [class.uk-text-small]="!open">{{item.title}}</span>
|
||||||
<div class="menu_mini_title">{{item.title}}</div>
|
|
||||||
</a>
|
</a>
|
||||||
<ng-template [ngIf]="item.items.length > 1">
|
<ng-template [ngIf]="item.items.length > 1">
|
||||||
<a (click)="item.open = !item.open">
|
<a (click)="item.open = !item.open" >
|
||||||
<span *ngIf="item.icon" class="menu_icon"><i class="material-icons">{{item.icon}}</i></span>
|
<div *ngIf="item.icon && !open" class="menu_icon "><i class="material-icons">{{item.icon}}</i></div>
|
||||||
<span class="menu_title">{{item.title}}</span>
|
<span class="menu_title " [class.uk-text-small]="!open">{{item.title}}</span>
|
||||||
<div class="menu_mini_title">{{item.title}}</div>
|
|
||||||
</a>
|
</a>
|
||||||
<ul [style.display]="(item.open?'block':'none')">
|
<ul [style.display]="(item.open?'block':'none')">
|
||||||
<ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index">
|
<ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index">
|
||||||
<li *ngIf="subItem.route" [class.act_item]="isTheActiveMenuItem(item, subItem)">
|
<li *ngIf="subItem.route" [class.act_item]="isTheActiveMenuItem(item, subItem)">
|
||||||
<a [routerLink]="!isTheActiveMenuItem(item, subItem)?subItem.route:null"
|
<a [routerLink]="!isTheActiveMenuItem(item, subItem)?subItem.route:null"
|
||||||
[queryParams]=subItem.params [queryParamsHandling]="queryParamsHandling">
|
[queryParams]=subItem.params [queryParamsHandling]="queryParamsHandling">
|
||||||
<span *ngIf="subItem.icon" class="menu_icon"><i class="material-icons">{{subItem.icon}}</i></span>
|
<div *ngIf="subItem.icon" class="menu_icon"><i class="material-icons">{{subItem.icon}}</i></div>
|
||||||
<span class="menu_title">{{subItem.title}}</span>
|
<span class="menu_title ">{{subItem.title}}</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
@ -46,16 +47,23 @@
|
||||||
</li>
|
</li>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</ul>
|
</ul>
|
||||||
<ng-template [ngIf]="searchLink">
|
<ng-template [ngIf]="specialMenuItem">
|
||||||
<ul class="searchLink uk-margin-large-top">
|
<ul class="searchLink uk-margin-large-top uk-list">
|
||||||
<li [class.current_section]="isTheActiveUrl(searchLink)" title="Search for Research Results" >
|
<li [class.current_section]="isTheActiveUrl(specialMenuItem.route)" [title]="specialMenuItem.title"
|
||||||
<a [routerLink]="searchLink" [queryParams]="searchParams">
|
[class.uk-margin]="!isTheActiveUrl(specialMenuItem.route)" >
|
||||||
<span class="menu_icon"><i class="material-icons">search</i></span>
|
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params" class="uk-text-center">
|
||||||
<span class="menu_title">Search for Research Results</span>
|
<span class="menu_icon uk-margin-small-right " [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span>
|
||||||
<div class="menu_mini_title">Search</div>
|
<span class="menu_title"
|
||||||
|
[class.uk-text-small]="!open">{{specialMenuItem.title}}</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="!isSmallScreen" id="sidebar_switcher_toggle" class="clickable "
|
||||||
|
(click)="toggleOpen($event)" >
|
||||||
|
<span class="uk-position-center" *ngIf="!open" uk-icon="icon:chevron-right; ratio: 1.5" ></span>
|
||||||
|
<span class="uk-position-center" *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
|
@ -3,6 +3,7 @@ import {MenuItem} from "../../../sharedComponents/menu";
|
||||||
import {Router} from "@angular/router";
|
import {Router} from "@angular/router";
|
||||||
import {DomSanitizer} from "@angular/platform-browser";
|
import {DomSanitizer} from "@angular/platform-browser";
|
||||||
import {properties} from "../../../../../environments/environment";
|
import {properties} from "../../../../../environments/environment";
|
||||||
|
import {LayoutService} from "./layout.service";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'dashboard-sidebar',
|
selector: 'dashboard-sidebar',
|
||||||
|
@ -17,11 +18,11 @@ 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() searchLink = null;
|
@Input() specialMenuItem:MenuItem = null;
|
||||||
@Input() searchParams = {};
|
@Input() searchParams = {};
|
||||||
@Input() queryParamsHandling = "";
|
@Input() queryParamsHandling = "";
|
||||||
properties;
|
properties;
|
||||||
constructor(private router: Router, private sanitizer: DomSanitizer) {
|
constructor(private router: Router, private sanitizer: DomSanitizer, private layoutService: LayoutService) {
|
||||||
this.properties = properties;
|
this.properties = properties;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -46,4 +47,15 @@ export class SideBarComponent implements OnInit {
|
||||||
satinizeHTML(html){
|
satinizeHTML(html){
|
||||||
return this.sanitizer.bypassSecurityTrustHtml(html);
|
return this.sanitizer.bypassSecurityTrustHtml(html);
|
||||||
}
|
}
|
||||||
|
public get isSmallScreen() {
|
||||||
|
return this.layoutService.isSmallScreen;
|
||||||
|
}
|
||||||
|
public get open() {
|
||||||
|
return this.layoutService.open;
|
||||||
|
}
|
||||||
|
|
||||||
|
public toggleOpen(event: MouseEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
this.layoutService.setOpen(!this.open);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -208,7 +208,7 @@
|
||||||
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
|
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
|
||||||
[texts]="pageContents['top']"></helper>
|
[texts]="pageContents['top']"></helper>
|
||||||
<div [class]="(showRefine && !properties.isDashboard)? 'uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s' :'uk-width-1-1'">
|
<div [class]="(showRefine && !properties.isDashboard)? 'uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s' :'uk-width-1-1'">
|
||||||
<div *ngIf="showRefine" class="uk-offcanvas-content uk-hidden@m uk-margin-top">
|
<div *ngIf="showRefine && !dashboard" class="uk-offcanvas-content uk-hidden@m uk-margin-top">
|
||||||
|
|
||||||
<a href="#offcanvas-usage" uk-toggle>
|
<a href="#offcanvas-usage" uk-toggle>
|
||||||
<span class="uk-icon uk-margin-small-right uk-margin-small-left">
|
<span class="uk-icon uk-margin-small-right uk-margin-small-left">
|
||||||
|
@ -411,27 +411,28 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="properties.isDashboard" id="style_switcher" class="filters_switcher"
|
<div *ngIf="properties.isDashboard" id="filters_switcher_toggle" href="#style_switcher" uk-toggle="" >
|
||||||
[class.switcher_active]="filterToggle">
|
<i class=" uk-text-muted">
|
||||||
<div id="style_switcher_toggle" (click)="filterToggle= !filterToggle" [style.display]="(filterToggle?'none':'inherit')">
|
<svg style="margin-top: 8px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||||
<i class=" uk-text-muted">
|
viewBox="0 0 20 20"
|
||||||
<svg style="margin-top: 8px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
fill="white" width="24px" height="16px">
|
||||||
viewBox="0 0 24 24"
|
<g>
|
||||||
fill="white" width="24px" height="24px">
|
<path d="M0,0h24 M24,24H0" fill="none"/>
|
||||||
<g>
|
<path
|
||||||
<path d="M0,0h24 M24,24H0" fill="none"/>
|
d="M4.25,5.61C6.57,8.59,10,13,10,13v5c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-5c0,0,3.43-4.41,5.75-7.39 C20.26,4.95,19.79,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"/>
|
||||||
<path
|
<path d="M0,0h24v24H0V0z" fill="none"/>
|
||||||
d="M4.25,5.61C6.57,8.59,10,13,10,13v5c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-5c0,0,3.43-4.41,5.75-7.39 C20.26,4.95,19.79,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"/>
|
</g>
|
||||||
<path d="M0,0h24v24H0V0z" fill="none"/>
|
</svg>
|
||||||
</g>
|
</i>
|
||||||
</svg>
|
</div>
|
||||||
</i>
|
<div *ngIf="properties.isDashboard" id="style_switcher" class=" uk-offcanvas filters_switcher"
|
||||||
</div>
|
uk-offcanvas="flip:true" mode="slide" overlay="" style="z-index:982;" >
|
||||||
<div lass="uk-padding-small uk-padding-remove-top" click-outside-or-esc
|
|
||||||
(clickOutside)="(filterToggle)?filterToggle = false:filterToggle" [clickClose]="false" >
|
<div class="uk-offcanvas-bar offcanvas-white">
|
||||||
<div class="uk-text-right" ><a (click)="filterToggle=!filterToggle"> <i
|
<div class="uk-float-right" >
|
||||||
class=" material-icons md-icon"></i>
|
<button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button>
|
||||||
</a></div>
|
|
||||||
|
</div>
|
||||||
<div class="uk-padding uk-padding-remove-top uk-overflow-auto" style="height:calc(100vh - 100px);">
|
<div class="uk-padding uk-padding-remove-top uk-overflow-auto" style="height:calc(100vh - 100px);">
|
||||||
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
|
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
|
||||||
</div>
|
</div>
|
||||||
|
@ -439,3 +440,4 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert>
|
<modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert>
|
||||||
|
<span class="loading-gif uk-align-center" ></span>
|
||||||
|
|
|
@ -4,11 +4,12 @@ import {Component, Input} from "@angular/core";
|
||||||
selector: 'loading',
|
selector: 'loading',
|
||||||
template: `
|
template: `
|
||||||
<div class="uk-flex uk-flex-center uk-margin-small-top">
|
<div class="uk-flex uk-flex-center uk-margin-small-top">
|
||||||
<div class="md-preloader" [ngClass]="(color)?('md-preloader-' + color):''">
|
<!--<div class="md-preloader" [ngClass]="(color)?('md-preloader-' + color):''">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="48" width="48" viewBox="0 0 75 75">
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="48" width="48" viewBox="0 0 75 75">
|
||||||
<circle cx="37.5" cy="37.5" r="33.5" stroke-width="4"></circle>
|
<circle cx="37.5" cy="37.5" r="33.5" stroke-width="4"></circle>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>-->
|
||||||
|
<span class="portal-color" uk-spinner="ratio: 2"></span>
|
||||||
</div>`
|
</div>`
|
||||||
})
|
})
|
||||||
export class LoadingComponent {
|
export class LoadingComponent {
|
||||||
|
|
Loading…
Reference in New Issue