[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:
argiro.kokogiannaki 2020-10-12 12:39:42 +00:00
parent 958b8b5a38
commit 170414c894
5 changed files with 87 additions and 50 deletions

View File

@ -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);
}
} }

View File

@ -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>

View File

@ -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);
}
} }

View File

@ -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>

View File

@ -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 {