[Library | Trunk]: Change sidebar, add some icons
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59728 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou
parent
5ccca64ee0
commit
7db42368ec
|
|
@ -1,69 +1,68 @@
|
|||
<aside id="sidebar_main" >
|
||||
<aside id="sidebar_main">
|
||||
<div id="sidebar_content">
|
||||
<a *ngIf= "showHeader" class="sidebar_main_header uk-text-center" [href]="headerUrl"
|
||||
[class.uk-disabled]="(!headerUrl)">
|
||||
<img *ngIf="properties.environment =='beta' || properties.environment =='development'" class="badge"
|
||||
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
|
||||
[alt]="properties.environment">
|
||||
<img *ngIf="headerLogoUrl" class="logo " [src]="headerLogoUrl">
|
||||
<div *ngIf="!headerLogoUrl" class="portalLogo logo" ></div>
|
||||
<div *ngIf="headerName" class="uk-disabled uk-text-muted uk-text-center">{{headerName}}</div>
|
||||
</a>
|
||||
<div *ngIf="items.length > 0" class="menu_section uk-margin-large-top">
|
||||
<ul class="uk-margin-large-top uk-list">
|
||||
<!-- <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">
|
||||
<li [class.current_section]="isTheActiveMenuItem(item)"
|
||||
[class.act_section]="item.open"
|
||||
[title]="item.title"
|
||||
[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"
|
||||
[queryParams]=item.params [queryParamsHandling]="queryParamsHandling" class="uk-text-center" [class.uk-text-bold]="isTheActiveMenuItem(item)">
|
||||
<div *ngIf="item.icon && !open" class="menu_icon uk-margin-auto">
|
||||
<span [innerHTML]="satinizeHTML(item.icon)"></span>
|
||||
</div>
|
||||
<div *ngIf="!item.icon && !open" class="menu_icon uk-margin-auto"><i class="material-icons">donut_large</i></div>
|
||||
<span class="menu_title" [class.uk-text-small]="!open">{{item.title}}</span>
|
||||
</a>
|
||||
<ng-template [ngIf]="item.items.length > 1">
|
||||
<a (click)="item.open = !item.open" class="uk-text-center">
|
||||
<div *ngIf="item.icon && !open" class="menu_icon "><i class="material-icons">{{item.icon}}</i></div>
|
||||
<span class="menu_title " [class.uk-text-small]="!open">{{item.title}}</span>
|
||||
|
||||
<a *ngIf="showHeader" class="sidebar_main_header uk-text-center" [href]="headerUrl"
|
||||
[class.uk-disabled]="(!headerUrl)">
|
||||
<img *ngIf="properties.environment =='beta' || properties.environment =='development'" class="badge"
|
||||
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
|
||||
[alt]="properties.environment">
|
||||
<img *ngIf="headerLogoUrl" class="logo " [src]="headerLogoUrl">
|
||||
<div *ngIf="!headerLogoUrl" class="portalLogo logo"></div>
|
||||
<div *ngIf="headerName" class="uk-disabled uk-text-muted uk-text-center">{{headerName}}</div>
|
||||
</a>
|
||||
<div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top">
|
||||
<ul class="uk-list">
|
||||
<ng-template ngFor [ngForOf]="items" let-item let-i="index">
|
||||
<li [class.uk-active]="isTheActiveMenuItem(item)"
|
||||
[class.act_section]="item.open"
|
||||
[class.submenu_trigger]="item.items.length > 1">
|
||||
<a *ngIf="item.items.length <= 1" [routerLink]="(item.route && !isTheActiveMenuItem(item))?item.route:null"
|
||||
[queryParams]=item.params [queryParamsHandling]="queryParamsHandling" class="uk-text-center">
|
||||
<div *ngIf="item.icon && !open" class="uk-margin-auto">
|
||||
<span [innerHTML]="satinizeHTML(item.icon)"></span>
|
||||
</div>
|
||||
<div *ngIf="!item.icon && !open" class="uk-margin-auto"><i
|
||||
class="material-icons">donut_large</i></div>
|
||||
<span [class.uk-text-small]="!open">{{item.title}}</span>
|
||||
</a>
|
||||
<ul [style.display]="(item.open?'block':'none')" class="uk-text-center">
|
||||
<ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index">
|
||||
<li *ngIf="subItem.route" [class.act_item]="isTheActiveMenuItem(item, subItem)" [class.current_section]="isTheActiveMenuItem(subItem)">
|
||||
<a [routerLink]="!isTheActiveMenuItem(item, subItem)?subItem.route:null"
|
||||
[queryParams]=subItem.params [queryParamsHandling]="queryParamsHandling">
|
||||
<div *ngIf="subItem.icon" class="menu_icon"><i class="material-icons">{{subItem.icon}}</i></div>
|
||||
<span class="menu_title ">{{subItem.title}}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
</ng-template>
|
||||
</li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
<ng-template [ngIf]="specialMenuItem">
|
||||
<ul class="searchLink uk-margin-large-top uk-list">
|
||||
<li [class.current_section]="isTheActiveUrl(specialMenuItem.route)" [title]="specialMenuItem.title"
|
||||
[class.uk-margin]="!isTheActiveUrl(specialMenuItem.route)" >
|
||||
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params" class="uk-text-center">
|
||||
<span class="menu_icon uk-margin-small-right " [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span>
|
||||
<span class="menu_title"
|
||||
[class.uk-text-small]="!open">{{specialMenuItem.title}}</span>
|
||||
</a>
|
||||
</li>
|
||||
<ng-template [ngIf]="item.items.length > 1">
|
||||
<a (click)="item.open = !item.open">
|
||||
<div *ngIf="item.icon && !open" class="menu_icon "><i class="material-icons">{{item.icon}}</i></div>
|
||||
<span [class.uk-text-small]="!open">{{item.title}}</span>
|
||||
|
||||
</a>
|
||||
<ul [style.display]="(item.open?'block':'none')">
|
||||
<ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index">
|
||||
<li *ngIf="subItem.route" [class.uk-active]="isTheActiveMenuItem(item, subItem)">
|
||||
<a [routerLink]="!isTheActiveMenuItem(item, subItem)?subItem.route:null"
|
||||
[queryParams]=subItem.params [queryParamsHandling]="queryParamsHandling">
|
||||
<div *ngIf="subItem.icon"><i class="material-icons">{{subItem.icon}}</i></div>
|
||||
<span>{{subItem.title}}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
</ng-template>
|
||||
</li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
</div>
|
||||
<ng-template [ngIf]="specialMenuItem">
|
||||
<div class="special_section uk-margin-large-top">
|
||||
<ul class="uk-list">
|
||||
<li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
|
||||
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params" class="uk-text-center">
|
||||
<span class="uk-margin-small-right" [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span>
|
||||
<span [ngClass]="specialMenuItem.customClass"
|
||||
[class.uk-text-small]="!open">{{specialMenuItem.title}}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-template>
|
||||
</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>
|
||||
(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>
|
||||
|
|
|
|||
|
|
@ -12,8 +12,9 @@ export class MenuItem {
|
|||
items: MenuItem[] = [];
|
||||
icon: string;
|
||||
open: boolean;
|
||||
customClass: string = null;
|
||||
|
||||
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon=null, fragment = null) {
|
||||
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon=null, fragment = null, customClass = null) {
|
||||
this.id = id;
|
||||
this.title = title;
|
||||
this.url = url;
|
||||
|
|
@ -26,6 +27,7 @@ export class MenuItem {
|
|||
this.items = [];
|
||||
this.icon = icon;
|
||||
this.fragment = fragment;
|
||||
this.customClass = customClass;
|
||||
}
|
||||
|
||||
public setMarkAsActive(showActive: boolean) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, Input, OnInit} from "@angular/core";
|
||||
import {Component, ElementRef, Input, OnInit} from "@angular/core";
|
||||
import {IconsService} from "./icons.service";
|
||||
|
||||
/**
|
||||
|
|
@ -54,7 +54,8 @@ export class IconsComponent implements OnInit{
|
|||
this.svg = this.iconsService.getIcon(iconName);
|
||||
}
|
||||
|
||||
constructor(private iconsService: IconsService) {}
|
||||
constructor(private iconsService: IconsService,
|
||||
private elementRef: ElementRef) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.style = {
|
||||
|
|
@ -62,5 +63,6 @@ export class IconsComponent implements OnInit{
|
|||
fill: this.fill,
|
||||
stroke: this.stroke
|
||||
};
|
||||
this.elementRef.nativeElement.style = 'line-height: 20px;';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,3 +77,17 @@ export const cloud_upload = {
|
|||
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l4.65-4.65c.2-.2.51-.2.71 0L17 13h-3z"/></svg>'
|
||||
}
|
||||
|
||||
export const add = {
|
||||
name: 'add',
|
||||
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z"/></svg>'
|
||||
}
|
||||
|
||||
export const group = {
|
||||
name: 'group',
|
||||
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V18c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-1.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05.02.01.03.03.04.04 1.14.83 1.93 1.94 1.93 3.41V18c0 .35-.07.69-.18 1H22c.55 0 1-.45 1-1v-1.5c0-2.33-4.67-3.5-7-3.5z"/></svg>'
|
||||
}
|
||||
|
||||
export const lock = {
|
||||
name: 'lock',
|
||||
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><g fill="none"><path d="M0 0h24v24H0V0z"/><path d="M0 0h24v24H0V0z" opacity=".87"/></g><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"/></svg>'
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue