Merge branch 'new-theme' of code-repo.d4science.org:MaDgIK/openaire-library into new-theme
This commit is contained in:
argirok
commit
7d5ac5eaf9
|
|
@ -1,62 +1,72 @@
|
|||
<h1 *ngIf="formTitle" class="uk-margin-auto">{{formTitle}}</h1>
|
||||
<ng-content select="[page-title]"></ng-content>
|
||||
<ng-content select="[page-description]"></ng-content>
|
||||
<div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center"
|
||||
role="alert">{{errorMessage}}</div>
|
||||
<div class="uk-margin-top" uk-grid [formGroup]="contactForm">
|
||||
<div *ngIf="contactForm.get('name')" class="uk-width-1-2@s uk-margin-medium-top">
|
||||
<div class="uk-child-width-1-2@s uk-child-width-1-1 uk-grid uk-grid-margin-large" [attr.uk-scrollspy-class]="scrollspy?'':null"
|
||||
[class.uk-grid-column-small]="smallForm" [formGroup]="contactForm" uk-grid>
|
||||
<div *ngIf="contactForm.get('name')">
|
||||
<input class="uk-input" type="text" placeholder="Name *" formControlName="name"
|
||||
[class.uk-form-danger]="contactForm.get('name').invalid && contactForm.get('name').touched">
|
||||
</div>
|
||||
<div *ngIf="contactForm.get('surname')" class="uk-width-1-2@s uk-margin-medium-top">
|
||||
<div *ngIf="contactForm.get('surname')">
|
||||
<input class="uk-input" type="text" placeholder="Surname *" formControlName="surname"
|
||||
[class.uk-form-danger]="contactForm.get('surname').invalid && contactForm.get('surname').touched">
|
||||
</div>
|
||||
<div *ngIf="contactForm.get('email')" class="uk-width-1-2@s uk-margin-medium-top">
|
||||
<div *ngIf="contactForm.get('email')">
|
||||
<input class="uk-input" type="text" placeholder="Email *" formControlName="email"
|
||||
[class.uk-form-danger]="contactForm.get('email').invalid && contactForm.get('email').touched">
|
||||
</div>
|
||||
<div *ngIf="contactForm.get('job')" class="uk-width-1-2@s uk-margin-medium-top">
|
||||
<div *ngIf="contactForm.get('job')">
|
||||
<input class="uk-input" type="text" placeholder="Job Title *" formControlName="job"
|
||||
[class.uk-form-danger]="contactForm.get('job').invalid && contactForm.get('job').touched">
|
||||
</div>
|
||||
<div *ngIf="contactForm.get('affiliation')" class="uk-width-1-2@s uk-margin-medium-top">
|
||||
<div *ngIf="contactForm.get('affiliation')">
|
||||
<input class="uk-input" type="text" placeholder="Affiliation *" formControlName="affiliation"
|
||||
[class.uk-form-danger]="contactForm.get('affiliation').invalid && contactForm.get('affiliation').touched">
|
||||
</div>
|
||||
<div *ngIf="contactForm.get('community')" class="uk-width-1-2@s uk-margin-medium-top">
|
||||
<input class="uk-input uk-width-1" type="text" placeholder="Research Community or Infrastructure *" formControlName="community"
|
||||
<div *ngIf="contactForm.get('community')">
|
||||
<input class="uk-input uk-width-1" type="text" placeholder="Research Community or Infrastructure *"
|
||||
formControlName="community"
|
||||
[class.uk-form-danger]="contactForm.get('community').invalid && contactForm.get('community').touched">
|
||||
</div>
|
||||
<div *ngIf="contactForm.get('organization')" class="uk-width-1-2@s uk-margin-medium-top">
|
||||
<div *ngIf="contactForm.get('organization')">
|
||||
<input class="uk-input uk-width-1-1" type="text" placeholder="Organization *" formControlName="organization"
|
||||
[class.uk-form-danger]="contactForm.get('organization').invalid && contactForm.get('organization').touched">
|
||||
</div>
|
||||
<div *ngIf="contactForm.get('organizationType')" class="uk-width-1-2@s uk-margin-medium-top">
|
||||
<div *ngIf="contactForm.get('organizationType')">
|
||||
<select class="uk-select uk-width-1-1" formControlName="organizationType">
|
||||
<option [value]="''" hidden selected>Organization Type *</option>
|
||||
<option *ngFor="let option of organizationTypes" [value]="option">{{option}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div *ngIf="contactForm.get('subject')" class="uk-width-1-1@s uk-margin-medium-top">
|
||||
<div *ngIf="contactForm.get('subject')" class="uk-width-1-1">
|
||||
<input class="uk-input uk-width-1-1" type="text" placeholder="Subject *" formControlName="subject"
|
||||
[class.uk-form-danger]="contactForm.get('subject').invalid && contactForm.get('subject').touched">
|
||||
</div>
|
||||
<div *ngIf="contactForm.get('message')" class="uk-width-1-1 uk-margin-medium-top">
|
||||
<div *ngIf="contactForm.get('message')" class="uk-width-1-1">
|
||||
<textarea rows="4" class="uk-textarea" placeholder="Comments *" formControlName="message"
|
||||
[class.uk-form-danger]="contactForm.get('message').invalid && contactForm.get('message').touched">
|
||||
</textarea>
|
||||
</div>
|
||||
<div *ngIf="contactForm.get('description')" class="uk-width-1-1 uk-margin-medium-top">
|
||||
<div *ngIf="contactForm.get('description')">
|
||||
<textarea rows="4" class="uk-textarea" placeholder="Description *" formControlName="description"
|
||||
[class.uk-form-danger]="contactForm.get('description').invalid && contactForm.get('description').touched">
|
||||
</textarea>
|
||||
</div>
|
||||
<div *ngIf="contactForm.get('recaptcha')" class="uk-width-1-2@s uk-margin-top">
|
||||
<div *ngIf="contactForm.get('recaptcha')" class="uk-flex uk-flex-center" [class.uk-width-1-1]="smallForm" [class.uk-flex-last@s]="!smallForm">
|
||||
<re-captcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey">
|
||||
</re-captcha>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top uk-width-1-1">
|
||||
<button class="uk-button uk-text-uppercase" [class.uk-button-primary]="!buttonClass" [ngClass]="buttonClass" (click)="send()">Send</button>
|
||||
<div class="uk-flex uk-flex-center" [class.uk-width-1-1]="smallForm" [class.uk-flex-column]="!smallForm">
|
||||
<div class="uk-flex uk-flex-center" [class.uk-flex-left@s]="!smallForm">
|
||||
<button class="uk-button uk-text-uppercase uk-flex uk-flex-middle"
|
||||
[class.uk-disabled]="contactForm.invalid || sending"
|
||||
[class.uk-button-primary]="!buttonClass && contactForm.valid"
|
||||
[ngClass]="(contactForm.valid?buttonClass:'')"
|
||||
(click)="send()">
|
||||
{{sendButton}}
|
||||
<span *ngIf="sending" class="uk-icon uk-margin-small-left"><loading [top_margin]="false" [size]="'small'"
|
||||
[color]="null"></loading></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
||||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import {FormGroup} from '@angular/forms';
|
||||
import {EnvProperties} from "../utils/properties/env-properties";
|
||||
import {Observable} from "rxjs";
|
||||
import {map, startWith} from "rxjs/operators";
|
||||
import {properties} from "../../../environments/environment";
|
||||
|
||||
@Component({
|
||||
selector: 'contact-us',
|
||||
|
|
@ -10,18 +9,16 @@ import {map, startWith} from "rxjs/operators";
|
|||
})
|
||||
|
||||
export class ContactUsComponent {
|
||||
@Input()
|
||||
public contactForm: FormGroup;
|
||||
@Input() formTitle: string;
|
||||
@Input() properties: EnvProperties;
|
||||
@Input() public contactForm: FormGroup;
|
||||
@Input() public formTitle: string;
|
||||
@Input() public organizationTypes: string[];
|
||||
@Input() public buttonClass: string;
|
||||
@Input() public sendButton: string = "Send";
|
||||
@Input() public smallForm: boolean = false;
|
||||
@Input() public scrollspy: boolean = false;
|
||||
@Input() public sending: boolean = false;
|
||||
@Output() sendEmitter: EventEmitter<any> = new EventEmitter<any>();
|
||||
@Input() errorMessage;
|
||||
@Input()
|
||||
public organizationTypes: string[];
|
||||
@Input()
|
||||
public right: boolean = true;
|
||||
@Input()
|
||||
public buttonClass: string;
|
||||
public properties: EnvProperties = properties;
|
||||
|
||||
public send() {
|
||||
this.sendEmitter.emit({
|
||||
|
|
|
|||
|
|
@ -7,11 +7,12 @@ import {ReactiveFormsModule} from "@angular/forms";
|
|||
import {MatAutocompleteModule} from "@angular/material/autocomplete";
|
||||
import {RecaptchaModule} from "ng-recaptcha";
|
||||
import {SafeHtmlPipeModule} from "../utils/pipes/safeHTMLPipe.module";
|
||||
import {LoadingModule} from "../utils/loading/loading.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule,
|
||||
ReactiveFormsModule, MatAutocompleteModule, RecaptchaModule, SafeHtmlPipeModule],
|
||||
ReactiveFormsModule, MatAutocompleteModule, RecaptchaModule, SafeHtmlPipeModule, LoadingModule],
|
||||
declarations: [
|
||||
ContactUsComponent
|
||||
],
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
<div *ngIf="!activeRootMenu.isFeatured"
|
||||
class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-remove-top"
|
||||
uk-grid>
|
||||
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
|
||||
|
|
@ -106,9 +106,13 @@
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div *ngIf="childrenMenuItems.length == 0"
|
||||
<div *ngIf="childrenMenuItems.length == 0 && !activeRootMenu.isFeatured"
|
||||
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
|
||||
<div>No menu items found</div>
|
||||
</div>
|
||||
<div *ngIf="activeRootMenu.isFeatured"
|
||||
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
|
||||
<div>Featured menu items can't have any sub menu items</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -118,8 +122,14 @@
|
|||
<form *ngIf="menuItemForm" [formGroup]="menuItemForm" class="uk grid uk-child-width-1-1" uk-grid>
|
||||
<div dashboard-input [formInput]="menuItemForm.get('title')" type="text" label="Name"
|
||||
placeholder="Write a name"></div>
|
||||
<div class="uk-flex" *ngIf="activeRootMenu && !activeRootMenu.items.length">
|
||||
<div class="uk-text-bold uk-form-label uk-margin-small-right">Featured</div>
|
||||
<mat-slide-toggle [formControl]="menuItemForm.get('isFeatured')"
|
||||
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Enable this to show your custom menu item in the community-specific navigation bar.</div><div class=' uk-margin-top'>If disabled, your custom menu item will appear in the default navigation bar.</div><div class=' uk-margin-top'>*Note that featured menu items can't have any children menu items(as a dropdown).</div></div>">
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div dashboard-input [formInput]="menuItemForm.get('type')" type="select" label="Type" placeholder="Choose a type"
|
||||
[options]="getTypeOptions()" [tooltip]="false"></div>
|
||||
[options]="getTypeOptions(menuItemForm.get('isFeatured').value)" [tooltip]="false"></div>
|
||||
<!-- Workflow for EXTERNAL -->
|
||||
<div dashboard-input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')"
|
||||
[validators]="menuItemForm.get('url').validator" type="URL" label="URL" placeholder="Write a URL"></div>
|
||||
|
|
|
|||
|
|
@ -132,13 +132,17 @@ export class MenuComponent implements OnInit {
|
|||
);
|
||||
}
|
||||
|
||||
getTypeOptions() {
|
||||
getTypeOptions(isFeatured: boolean = false) {
|
||||
if(this.isChild) {
|
||||
return this.typeOptions;
|
||||
} else {
|
||||
if(isFeatured) {
|
||||
return this.typeOptions;
|
||||
} else {
|
||||
return this.typeOptions.concat(this.rootOnlyTypeOptions);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getActiveRootItem(id: string): MenuItem {
|
||||
return this.rootMenuItems.find(element => element['_id'] == id);
|
||||
|
|
@ -247,6 +251,7 @@ export class MenuComponent implements OnInit {
|
|||
route: this._fb.control(""),
|
||||
url: this._fb.control(""),
|
||||
isEnabled: this._fb.control(""),
|
||||
isFeatured: this._fb.control(false),
|
||||
parentItemId: this._fb.control(isChild ? this.activeRootMenuId : null)
|
||||
});
|
||||
this.isChild = isChild;
|
||||
|
|
@ -261,6 +266,7 @@ export class MenuComponent implements OnInit {
|
|||
type: this._fb.control(menuItem['type'],Validators.required),
|
||||
route: this._fb.control(menuItem.route, (menuItem['type'] == "internal") ? [Validators.required] : []),
|
||||
url: this._fb.control(menuItem.url, (menuItem['type'] == "external") ? [Validators.required, StringUtils.urlValidator()] : []),
|
||||
isFeatured: this._fb.control(menuItem.isFeatured),
|
||||
parentItemId: this._fb.control(menuItem['parentItemId'])
|
||||
});
|
||||
this.isChild = isChild;
|
||||
|
|
|
|||
|
|
@ -1,82 +1,24 @@
|
|||
import {
|
||||
AfterViewInit,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ElementRef,
|
||||
HostListener,
|
||||
OnDestroy,
|
||||
ViewChild
|
||||
} from "@angular/core";
|
||||
import {Observable, Subscription} from "rxjs";
|
||||
import {distinctUntilChanged} from "rxjs/operators";
|
||||
import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from "@angular/core";
|
||||
|
||||
@Component({
|
||||
selector: '[page-content]',
|
||||
template: `
|
||||
<div id="page_content">
|
||||
<div #header id="page_content_header">
|
||||
<div #header id="page_content_header" uk-sticky="show-on-up: true; animation: uk-animation-slide-top; media: @m" [attr.offset]="offset">
|
||||
<div class="uk-container uk-container-large">
|
||||
<ng-content select="[header]"></ng-content>
|
||||
</div>
|
||||
<div id="page_content_inner" [ngStyle]="{'margin-top.px': (height)?height.toString():'0'}">
|
||||
</div>
|
||||
<div id="page_content_inner" class="uk-section uk-container uk-container-large">
|
||||
<ng-content select="[inner]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class PageContentComponent implements OnDestroy, AfterViewInit{
|
||||
public height = 0;
|
||||
private subscription: Subscription;
|
||||
@ViewChild('header') header: ElementRef;
|
||||
export class PageContentComponent implements OnInit{
|
||||
public offset: string;
|
||||
|
||||
constructor(private cdr: ChangeDetectorRef) {
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(event) {
|
||||
this.height = this.getHeight();
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
|
||||
getHeight(): number{
|
||||
return this.header.nativeElement.offsetHeight;
|
||||
}
|
||||
|
||||
setupHeightMutationObserver() {
|
||||
if (typeof document !== 'undefined') {
|
||||
const observable = new Observable<number>(observer => {
|
||||
const callback = (mutationsList, observer2) => {
|
||||
observer.next(this.getHeight());
|
||||
};
|
||||
|
||||
// Create an observer instance linked to the callback function
|
||||
const elementObserver = new MutationObserver(callback);
|
||||
|
||||
// Options for the observer (which mutations to observe)
|
||||
const config = {attributes: true, attributeFilter: ['class'], childList: true, subtree: true};
|
||||
// Start observing the target node for configured mutations
|
||||
elementObserver.observe(this.header.nativeElement, config);
|
||||
});
|
||||
|
||||
this.subscription = observable
|
||||
.pipe(
|
||||
distinctUntilChanged()//if the value hasn't changed, don't continue
|
||||
)
|
||||
.subscribe(newHeight => {
|
||||
this.height = this.getHeight();
|
||||
this.cdr.detectChanges();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.setupHeightMutationObserver();
|
||||
this.height = this.getHeight();
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if(this.subscription) {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
ngOnInit() {
|
||||
this.offset = getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,5 @@
|
|||
<aside id="sidebar_main">
|
||||
<div id="sidebar_content">
|
||||
<a *ngIf="showHeader" class="sidebar_main_header uk-text-center" target="_blank" [class.cursor-default]="!headerUrl" [attr.href]="(headerUrl)?headerUrl:null">
|
||||
<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">
|
||||
<div class="logo" [class.portal-logo]="!headerLogoUrl">
|
||||
<img *ngIf="headerLogoUrl" [src]="headerLogoUrl | urlPrefix">
|
||||
<div *ngIf="logoLabel" class="logo-label uk-position-bottom-right">{{logoLabel}}</div>
|
||||
</div>
|
||||
<div *ngIf="headerName" class="uk-disabled uk-text-muted uk-margin-small-left uk-margin-small-right" [class.uk-text-center]="!open" [ngClass]="open?('uk-text-' + headerPosition):''">{{headerName}}</div>
|
||||
</a>
|
||||
<div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top">
|
||||
<ul class="uk-list uk-nav-parent-icon" uk-nav>
|
||||
<ng-template ngFor [ngForOf]="items" let-item let-i="index">
|
||||
|
|
@ -17,32 +7,15 @@
|
|||
[class.uk-open]="isTheActiveMenuItem(item)"
|
||||
[class.uk-parent]="item.items.length > 1">
|
||||
<a *ngIf="item.items.length <= 1" [routerLink]="(item.route)?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>
|
||||
[title]="item.title"
|
||||
[queryParams]=item.params [queryParamsHandling]="queryParamsHandling">
|
||||
<div class="uk-grid uk-flex-middle uk-flex-center" uk-grid>
|
||||
<div *ngIf="item.icon" class="uk-width-auto">
|
||||
<icon class="menu-icon" [svg]="item.icon" [flex]="true"></icon>
|
||||
</div>
|
||||
<span *ngIf="open || !item.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate">{{item.title}}</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>
|
||||
<ng-template [ngIf]="item.items.length > 1">
|
||||
<a (click)="item.open = !item.open" class=" uk-parent uk-text-center">
|
||||
<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 [class.uk-hidden]="!open" class="uk-nav-sub uk-text-center">
|
||||
<ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index">
|
||||
<li *ngIf="subItem.route" [class.uk-active]="isTheActiveMenuItem(item, subItem)">
|
||||
<a [routerLink]="subItem.route"
|
||||
[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>
|
||||
|
|
@ -63,9 +36,9 @@
|
|||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div *ngIf="!isSmallScreen" id="sidebar_switcher_toggle" class="clickable "
|
||||
<!-- <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>
|
||||
</div>-->
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -11,16 +11,9 @@ import {LayoutService} from "./layout.service";
|
|||
})
|
||||
export class SideBarComponent implements OnInit {
|
||||
@Input() items: MenuItem[] = [];
|
||||
@Input() logoLabel: string;
|
||||
@Input() headerName: string;
|
||||
@Input() headerPosition: "left" | "center" | "right" = "center";
|
||||
@Input() headerLogoUrl: string;
|
||||
@Input() headerUrl: string;
|
||||
@Input() showHeader: boolean = true;
|
||||
@Input() activeItem: string = '';
|
||||
@Input() activeSubItem: string = '';
|
||||
@Input() specialMenuItem: MenuItem = null;
|
||||
@Input() searchParams = {};
|
||||
@Input() queryParamsHandling = "";
|
||||
properties;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,12 +5,14 @@ import {RouterModule} from "@angular/router";
|
|||
|
||||
import {SideBarComponent} from './sideBar.component';
|
||||
import {UrlPrefixModule} from "../../../utils/pipes/url-prefix.module";
|
||||
import {IconsModule} from "../../../utils/icons/icons.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
UrlPrefixModule
|
||||
UrlPrefixModule,
|
||||
IconsModule
|
||||
],
|
||||
declarations: [
|
||||
SideBarComponent
|
||||
|
|
|
|||
|
|
@ -499,7 +499,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<feedback *ngIf="dataProviderInfo" [dataProviderInfo]="dataProviderInfo"
|
||||
<feedback *ngIf="dataProviderInfo && properties.reCaptchaSiteKey" [dataProviderInfo]="dataProviderInfo"
|
||||
[properties]="properties" [entityType]="'content provider'" [fields]="feedbackFields"
|
||||
[showForm]="showFeedback" (show)="showFeedback = $event"></feedback>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -271,7 +271,7 @@
|
|||
[texts]="pageContents['bottom']"></helper>
|
||||
</div>
|
||||
</div>
|
||||
<feedback *ngIf="organizationInfo" [organizationInfo]="organizationInfo"
|
||||
<feedback *ngIf="organizationInfo && properties.reCaptchaSiteKey" [organizationInfo]="organizationInfo"
|
||||
[properties]="properties" [entityType]="'organization'" [fields]="feedbackFields"
|
||||
[showForm]="showFeedback" (show)="showFeedback = $event"></feedback>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -795,7 +795,7 @@
|
|||
</modal-alert>
|
||||
</div>
|
||||
</div>
|
||||
<feedback *ngIf="projectInfo" [projectInfo]="projectInfo"
|
||||
<feedback *ngIf="projectInfo && properties.reCaptchaSiteKey" [projectInfo]="projectInfo"
|
||||
[properties]="properties" [entityType]="'project'" [title]="projectName" [fields]="feedbackFields"
|
||||
[showForm]="showFeedback" (show)="showFeedback = $event"></feedback>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -658,7 +658,7 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
<feedback *ngIf="resultLandingInfo" [resultLandingInfo]="resultLandingInfo"
|
||||
<feedback *ngIf="resultLandingInfo && properties.reCaptchaSiteKey" [resultLandingInfo]="resultLandingInfo"
|
||||
[properties]="properties" [entityType]="getTypeName()" [fields]="feedbackFields"
|
||||
[showForm]="showFeedback" (show)="showFeedback = $event;"></feedback>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ import {Session} from "../../login/utils/helper.class";
|
|||
import {AnnotationComponent} from "../annotation/annotation.component";
|
||||
import {ParsingFunctions} from "../landing-utils/parsingFunctions.class";
|
||||
import {ConnectHelper} from "../../connect/connectHelper";
|
||||
import {$e} from "codelyzer/angular/styles/chars";
|
||||
|
||||
|
||||
@Component({
|
||||
|
|
@ -86,7 +85,6 @@ export class ResultLandingComponent {
|
|||
public warningMessage = "";
|
||||
public errorMessage = "";
|
||||
public showLoading: boolean = true;
|
||||
public dashboard = properties.isDashboard;
|
||||
|
||||
public routerHelper: RouterHelper = new RouterHelper();
|
||||
public activeTab: string = null;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
|
||||
import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {Session, User} from './utils/helper.class';
|
||||
import {RouterHelper} from '../utils/routerHelper.class';
|
||||
|
|
@ -6,156 +6,64 @@ import {Subscriber} from "rxjs";
|
|||
import {MenuItem} from "../sharedComponents/menu";
|
||||
import {UserManagementService} from "../services/user-management.service";
|
||||
|
||||
// declare var logoutClicked;
|
||||
@Component({
|
||||
selector: 'user-mini',
|
||||
template: `
|
||||
<ng-container *ngIf="!dashboard">
|
||||
|
||||
<ul *ngIf="!mobileView" class="uk-navbar-nav" [class.uk-dark]="dark">
|
||||
<li class="uk-parent">
|
||||
<a *ngIf="loggedIn" class="login">
|
||||
<a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
|
||||
<ng-container *ngIf="loggedIn">
|
||||
<a class="login uk-icon">
|
||||
<svg height="60" width="60">
|
||||
<circle cx="30" cy="30" r="20" stroke-width="2"></circle>
|
||||
<text *ngIf="firstLetters" x="50%" y="50%" text-anchor="middle" dy=".4em"
|
||||
font-size="16">
|
||||
{{firstLetters}}
|
||||
<text x="50%" y="50%" text-anchor="middle" dy=".4em" font-size="16">
|
||||
{{firstLetters ? firstLetters : 'AN'}}
|
||||
</text>
|
||||
<svg *ngIf="!firstLetters" ratio="1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" width="20"
|
||||
x="20">
|
||||
<circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
|
||||
<path d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
|
||||
</svg>
|
||||
</svg>
|
||||
</a>
|
||||
<a *ngIf="!loggedIn" class="loginLink" id="userMenu-parent" (click)="logIn()">Sign in <span
|
||||
class=" uk-margin-small-left uk-margin-small-right uk-icon"><svg width="20" height="20"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
ratio="1"><circle fill="none"
|
||||
stroke="#000"
|
||||
stroke-width="1.1"
|
||||
cx="9.9" cy="6.4"
|
||||
r="4.4"></circle><path
|
||||
fill="none" stroke="#000" stroke-width="1.1"
|
||||
d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg> </span>
|
||||
</a>
|
||||
|
||||
|
||||
<div *ngIf="loggedIn" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" id="userMenu" uk-toggle>
|
||||
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
|
||||
<div class="uk-first-column uk-height-max-medium uk-overflow-auto">
|
||||
<div class="uk-navbar-dropdown" uk-drop="pos: bottom-right">
|
||||
<ul class="uk-nav uk-navbar-dropdown-nav">
|
||||
<!--li><a href="" >My profile</a></li>
|
||||
<li><a routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
|
||||
<li *ngIf="isAuthorized"><a routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
|
||||
<ng-container *ngFor="let item of userMenuItems ">
|
||||
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization" [class.uk-active]="isTheActiveSubMenu(item)">
|
||||
<a *ngIf="item.route.length > 0" routerLink="{{item.route}}"
|
||||
[queryParams]=item.params>{{item.title}}</a>
|
||||
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization"
|
||||
[class.uk-active]="isTheActiveSubMenu(item)">
|
||||
<a *ngIf="item.route.length > 0" [routerLink]="item.route"
|
||||
[queryParams]="item.params">{{item.title}}</a>
|
||||
<a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}"
|
||||
target="_blank">{{item.title}}</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
|
||||
<li><a (click)="logOut()" id="logout">Log out</a></li>
|
||||
<li><a (click)="logOut()">Log out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="logout1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</li>
|
||||
</ul>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!dashboard">
|
||||
|
||||
<li *ngIf="mobileView" class="uk-nav-header uk-parent ">
|
||||
|
||||
<ul *ngIf="mobileView" class="uk-nav uk-nav-default">
|
||||
<li>
|
||||
<span *ngIf="loggedIn" class="uk-flex uk-flex-middle">
|
||||
<span>{{user.fullname + " "}}</span>
|
||||
<span class="uk-margin-small-right uk-icon"><svg width="20" height="20"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
ratio="1"><circle fill="none"
|
||||
stroke="#000"
|
||||
stroke-width="1.1"
|
||||
cx="9.9"
|
||||
cy="6.4"
|
||||
r="4.4"></circle><path
|
||||
fill="none" stroke="#000" stroke-width="1.1"
|
||||
d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg>
|
||||
<span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle>
|
||||
<path fill="none" stroke="#000" stroke-width="1.1"
|
||||
d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span *ngIf="!loggedIn">
|
||||
<a class="loginLink" (click)="logIn()">Sign in <span class="uk-margin-small-right uk-icon"><svg width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
ratio="1"><circle
|
||||
fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none"
|
||||
stroke="#000"
|
||||
stroke-width="1.1"
|
||||
d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg></span>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
|
||||
<ul *ngIf="loggedIn" class="uk-nav-sub">
|
||||
<!--li><a href="" >My profile</a></li>
|
||||
<li><a routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
|
||||
<li *ngIf="isAuthorized"><a routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
|
||||
<ng-container *ngFor="let item of userMenuItems ">
|
||||
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
|
||||
<a *ngIf="item.route.length > 0" routerLink="{{item.route}}">{{item.title}}</a>
|
||||
<a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}">{{item.title}}</a>
|
||||
<a *ngIf="item.route.length > 0" routerLink="{{item.route}}" (click)="closeCanvas()">{{item.title}}</a>
|
||||
<a *ngIf="item.route.length == 0 && item.url.length > 0" (click)="closeCanvas()"
|
||||
href="{{item.url}}">{{item.title}}</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
|
||||
<li><a (click)="logOut()" id="logout">Log out</a></li>
|
||||
<li><a (click)="logOut()">Log out</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="dashboard">
|
||||
<a *ngIf="!loggedIn" class="uk-flex" (click)="logIn()">
|
||||
<span>Sign in</span>
|
||||
<span class="uk-margin-small-left uk-margin-small-right uk-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1">
|
||||
<circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
|
||||
<path d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a *ngIf="loggedIn" class="login uk-icon">
|
||||
<svg height="60" width="60">
|
||||
<circle cx="30" cy="30" r="20" stroke-width="2"></circle>
|
||||
<text *ngIf="firstLetters" x="50%" y="50%" text-anchor="middle" dy=".4em"
|
||||
font-size="16">
|
||||
{{firstLetters}}
|
||||
</text>
|
||||
<svg *ngIf="!firstLetters" ratio="1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" width="20"
|
||||
x="20">
|
||||
<circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
|
||||
<path d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
|
||||
</svg>
|
||||
</svg>
|
||||
</a>
|
||||
<div *ngIf="loggedIn" uk-dropdown="mode: click; offset: -2; delay-hide: 0; flip: false; pos: bottom-right"
|
||||
#userMenu
|
||||
class="uk-padding-remove-horizontal">
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<ng-container *ngFor="let item of userMenuItems ">
|
||||
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
|
||||
<a *ngIf="item.route.length > 0" routerLink="{{item.route}}"
|
||||
[queryParams]=item.params>{{item.title}}</a>
|
||||
<a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}"
|
||||
target="_blank">{{item.title}}</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
|
||||
<li><a (click)="logOut()" id="logout">Log out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-container>
|
||||
`
|
||||
})
|
||||
export class UserMiniComponent implements OnInit, OnChanges {
|
||||
|
|
@ -164,7 +72,6 @@ export class UserMiniComponent implements OnInit, OnChanges {
|
|||
public isAuthorized: boolean = false;
|
||||
@Input() public mobileView: boolean = false;
|
||||
public firstLetters: string = "";
|
||||
@Input() public dashboard: boolean = false;
|
||||
public server: boolean = true;
|
||||
public routerHelper: RouterHelper = new RouterHelper();
|
||||
@Input() userMenuItems;
|
||||
|
|
@ -172,7 +79,8 @@ export class UserMiniComponent implements OnInit, OnChanges {
|
|||
@Input() logOutUrl;
|
||||
@Input() cookieDomain;
|
||||
@Input() dark: boolean = false;
|
||||
subscriptions = [];
|
||||
@Output() closeCanvasEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
|
||||
private subscriptions = [];
|
||||
|
||||
constructor(private router: Router, private route: ActivatedRoute, private userManagementService: UserManagementService) {
|
||||
}
|
||||
|
|
@ -198,6 +106,10 @@ export class UserMiniComponent implements OnInit, OnChanges {
|
|||
});
|
||||
}
|
||||
|
||||
closeCanvas() {
|
||||
this.closeCanvasEmitter.emit(true);
|
||||
}
|
||||
|
||||
initUser() {
|
||||
if (this.user) {
|
||||
this.loggedIn = true;
|
||||
|
|
@ -225,11 +137,9 @@ export class UserMiniComponent implements OnInit, OnChanges {
|
|||
|
||||
isTheActiveSubMenu(menuItem: MenuItem): boolean {
|
||||
let currentRoute = this.router.url.split('?')[0];
|
||||
if (menuItem.route == currentRoute || menuItem.route == (currentRoute + "/") ) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
return menuItem.route == currentRoute || menuItem.route == (currentRoute + "/");
|
||||
}
|
||||
|
||||
parseName() {
|
||||
this.firstLetters = "";
|
||||
if (this.user && this.user.firstname) {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
|
||||
.how .first > div:first-child:after {
|
||||
content: "we";
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
padding-bottom: 5%;
|
||||
position: absolute;
|
||||
|
|
@ -19,17 +21,19 @@
|
|||
|
||||
.how .second > div:first-child {
|
||||
position: relative;
|
||||
padding: 0 22% 0 22%;
|
||||
padding: 0 10% 0 20%;
|
||||
}
|
||||
|
||||
.how .second > div:first-child:after {
|
||||
content: "and";
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
padding-bottom: 5%;
|
||||
position: absolute;
|
||||
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/2.svg");
|
||||
right: -10%;
|
||||
top: 31%;
|
||||
right: -17%;
|
||||
top: 33%;
|
||||
width: 30%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -41,20 +45,22 @@
|
|||
}
|
||||
|
||||
.how .third > div:first-child {
|
||||
padding: 0 12% 0 12%;
|
||||
padding: 0 14% 0 13%;
|
||||
}
|
||||
|
||||
.how .third:after {
|
||||
content: "on which";
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
padding-right: 30%;
|
||||
padding-top: 5%;
|
||||
padding-bottom: 5%;
|
||||
position: absolute;
|
||||
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
|
||||
bottom: 6%;
|
||||
left: 6%;
|
||||
bottom: -6%;
|
||||
left: 13%;
|
||||
transform: translateY(100%);
|
||||
width: 55%;
|
||||
width: 140px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
|
@ -66,17 +72,19 @@
|
|||
|
||||
.how .fourth > div:first-child {
|
||||
position: relative;
|
||||
padding: 0 15% 0 15%;
|
||||
padding: 0 16% 0 16%;
|
||||
}
|
||||
|
||||
.how .fourth> div:first-child:after {
|
||||
content: "and";
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
padding-bottom: 5%;
|
||||
position: absolute;
|
||||
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/4.svg");
|
||||
left: -18%;
|
||||
top: 35%;
|
||||
top: 36%;
|
||||
width: 30%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -84,7 +92,7 @@
|
|||
}
|
||||
|
||||
.how .fifth {
|
||||
padding: 10% 2% 0 2%;
|
||||
padding: 11% 2% 0 2%;
|
||||
}
|
||||
|
||||
.how .fifth > div:first-child {
|
||||
|
|
@ -93,6 +101,8 @@
|
|||
|
||||
.how .fifth > div:first-child:after {
|
||||
content: "We";
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
padding-bottom: 5%;
|
||||
position: absolute;
|
||||
|
|
@ -125,7 +135,7 @@
|
|||
content: "";
|
||||
position: absolute;
|
||||
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg");
|
||||
left: -20%;
|
||||
left: -26%;
|
||||
top: -20%;
|
||||
height: 70%;
|
||||
width: 30%;
|
||||
|
|
@ -136,32 +146,17 @@
|
|||
|
||||
.how .final > div:first-child:after {
|
||||
content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
background-image: url("~src/assets/common-assets/monitor-assets/how/circle.png");
|
||||
right: -220px;
|
||||
top: -20%;
|
||||
width: 300px;
|
||||
padding: 8% 0 5% 220px;
|
||||
top: 30%;
|
||||
width: 250px;
|
||||
padding: 8% 0 5% 0;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom center;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 960px) {
|
||||
.how .third:after {
|
||||
bottom: -6%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.how .third:after {
|
||||
bottom: -10%;
|
||||
left: 25%;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 639px) {
|
||||
.how .first {
|
||||
position: relative;
|
||||
|
|
@ -171,11 +166,11 @@
|
|||
.how .first:after {
|
||||
content: "we";
|
||||
text-align: center;
|
||||
padding: 25px 105px 25px 0;
|
||||
padding: 10% 34% 10% 0;
|
||||
position: absolute;
|
||||
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
|
||||
left: 26%;
|
||||
top: 72%;
|
||||
top: 79%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
|
@ -183,17 +178,17 @@
|
|||
|
||||
.how .second {
|
||||
position: relative;
|
||||
padding: 0 15% 30% 15%;
|
||||
padding: 0 10% 30% 10%;
|
||||
}
|
||||
|
||||
.how .second:after {
|
||||
content: "and";
|
||||
text-align: center;
|
||||
padding: 25px 105px 25px 0;
|
||||
padding: 10% 34% 10% 0;
|
||||
position: absolute;
|
||||
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
|
||||
left: 25%;
|
||||
top: 70%;
|
||||
top: 80%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
|
@ -206,12 +201,13 @@
|
|||
|
||||
.how .third:after {
|
||||
content: "on which";
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 25px 105px 25px 0;
|
||||
padding: 10% 41% 10% 0;
|
||||
position: absolute;
|
||||
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
|
||||
left: 17%;
|
||||
top: 75%;
|
||||
left: 15%;
|
||||
top: 83%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
|
@ -229,7 +225,7 @@
|
|||
.how .fourth:after {
|
||||
content: "and";
|
||||
text-align: center;
|
||||
padding: 25px 105px 25px 0;
|
||||
padding: 10% 34% 10% 0;
|
||||
position: absolute;
|
||||
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
|
||||
left: 26%;
|
||||
|
|
@ -247,7 +243,7 @@
|
|||
.how .fifth:after {
|
||||
content: "We";
|
||||
text-align: center;
|
||||
padding: 25px 105px 25px 0;
|
||||
padding: 10% 34% 10% 0;
|
||||
position: absolute;
|
||||
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
|
||||
left: 27%;
|
||||
|
|
@ -277,8 +273,8 @@
|
|||
content: "";
|
||||
position: absolute;
|
||||
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg");
|
||||
left: 32%;
|
||||
top: -80%;
|
||||
left: 34%;
|
||||
top: -70%;
|
||||
height: 70%;
|
||||
width: 30%;
|
||||
background-size: contain;
|
||||
|
|
@ -288,12 +284,12 @@
|
|||
|
||||
.how .final > div:first-child:after {
|
||||
content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
background-image: url("~src/assets/common-assets/monitor-assets/how/circle.png");
|
||||
left: -62%;
|
||||
top: 85%;
|
||||
width: 300px;
|
||||
padding: 12% 0 0 70%;
|
||||
padding: 12% 0 0 54%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
|
|
|||
|
|
@ -3,32 +3,32 @@ import {Component} from "@angular/core";
|
|||
@Component({
|
||||
selector: 'how',
|
||||
template: `
|
||||
<div class="how">
|
||||
<div class="how" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 200">
|
||||
<div class="uk-flex uk-flex-wrap">
|
||||
<div class="uk-width-1-3@s first">
|
||||
<div class="uk-width-1-3@s first" uk-scrollspy-class>
|
||||
<div>
|
||||
<img src="assets/common-assets/monitor-assets/how/1.png" loading="lazy">
|
||||
</div>
|
||||
<div class="uk-text-center">
|
||||
<div class="uk-text-center uk-text-large">
|
||||
<span class="uk-text-uppercase uk-text-bold">Starting</span> from existing<br>research-related data sources
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-3@s second">
|
||||
<div class="uk-width-1-3@s second" uk-scrollspy-class>
|
||||
<div>
|
||||
<img src="assets/common-assets/monitor-assets/how/2.png" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-3@s third">
|
||||
<div class="uk-width-1-3@s third" uk-scrollspy-class>
|
||||
<div>
|
||||
<img src="assets/common-assets/monitor-assets/how/3.png" loading="lazy">
|
||||
</div>
|
||||
<div class="uk-text-center">
|
||||
<div class="uk-text-center uk-text-large">
|
||||
build an open, global<br>and trusted Research graph
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-wrap">
|
||||
<div class="uk-width-1-3@s fourth uk-flex-last@s">
|
||||
<div class="uk-width-1-3@s fourth uk-flex-last@s" uk-scrollspy-class>
|
||||
<div>
|
||||
<img src="assets/common-assets/monitor-assets/how/4.png" loading="lazy">
|
||||
</div>
|
||||
|
|
@ -37,7 +37,7 @@ import {Component} from "@angular/core";
|
|||
<span class="uk-text-primary">Open Science Indicators</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-3@s fifth">
|
||||
<div class="uk-width-1-3@s fifth" uk-scrollspy-class>
|
||||
<div>
|
||||
<img src="assets/common-assets/monitor-assets/how/5.png" loading="lazy">
|
||||
</div>
|
||||
|
|
@ -46,7 +46,7 @@ import {Component} from "@angular/core";
|
|||
<span class="uk-text-primary">Collaboration Indicators</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-1-3@s sixth uk-flex-first@s">
|
||||
<div class="uk-width-1-3@s sixth uk-flex-first@s" uk-scrollspy-class>
|
||||
<div>
|
||||
<img src="assets/common-assets/monitor-assets/how/6.png" loading="lazy">
|
||||
</div>
|
||||
|
|
@ -58,7 +58,7 @@ import {Component} from "@angular/core";
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="final">
|
||||
<div class="final" uk-scrollspy-class>
|
||||
<div>
|
||||
<img src="assets/common-assets/monitor-assets/how/7.png" loading="lazy">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
<div uk-height-viewport="offset-top: true;offset-bottom: 60" style="box-sizing: border-box; "
|
||||
class="image-front-topbar uk-background-norepeat uk-background-cover uk-background-bottom-center uk-section uk-padding-remove-bottom uk-flex uk-flex-middle uk-background-fixed generalSearchForm">
|
||||
<div class="uk-container">
|
||||
<div class="uk-position-relative">
|
||||
|
||||
|
||||
<div class="uk-container">
|
||||
<div class="uk-width-1-1">
|
||||
<div class="uk-position-relative uk-flex uk-flex-center">
|
||||
|
||||
|
||||
<div id="searchForm" class=" uk-container uk-grid uk-flex uk-flex-center uk-flex-middle">
|
||||
<div id="searchImage"></div>
|
||||
<advanced-search-form
|
||||
entityType="all"
|
||||
|
||||
|
|
@ -21,7 +20,6 @@
|
|||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@
|
|||
<ng-container *ngFor="let type of resultTypes.values; let i = index; let end = last; ">
|
||||
<ng-container *ngIf="type.selected">
|
||||
<span class="uk-width-auto">
|
||||
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)" [class.uk-disabled]="disabled">
|
||||
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)"
|
||||
[class.uk-disabled]="disabled">
|
||||
<span class="filter-tag uk-flex uk-flex-middle">
|
||||
<span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
|
||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||
|
|
@ -41,8 +42,10 @@
|
|||
<ng-container *ngFor="let filter of filters ">
|
||||
<ng-container *ngIf="filter.countSelectedValues > 0">
|
||||
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
|
||||
<span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)" class="uk-width-auto">
|
||||
<a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)" [class.uk-disabled]="disabled">
|
||||
<span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
|
||||
class="uk-width-auto">
|
||||
<a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)"
|
||||
[class.uk-disabled]="disabled">
|
||||
<span class="filter-tag uk-flex uk-flex-middle">
|
||||
<span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
|
||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||
|
|
@ -68,7 +71,8 @@
|
|||
class="uk-margin-top" role="alert">
|
||||
<loading></loading>
|
||||
</div>
|
||||
<div *ngIf="searchUtils.refineStatus != errorCodes.LOADING && searchUtils.refineStatus != errorCodes.DONE && results.length > 0"
|
||||
<div
|
||||
*ngIf="searchUtils.refineStatus != errorCodes.LOADING && searchUtils.refineStatus != errorCodes.DONE && results.length > 0"
|
||||
class="uk-margin-top uk-text-meta">
|
||||
<span *ngIf="searchUtils.refineStatus == errorCodes.NONE">No filters available</span>
|
||||
<span *ngIf="searchUtils.refineStatus != errorCodes.NONE" class="uk-text-warning">Filters temporarily unavailable. Please try again later.</span>
|
||||
|
|
@ -104,17 +108,17 @@
|
|||
</ng-template>
|
||||
<!-- TODO - Kostis Clean up -->
|
||||
<div *ngIf="!includeOnlyResultsAndFilter" [class]="usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
|
||||
(stickyForm?'':' uk-position-relative ') :
|
||||
(stickyForm?'':' ') :
|
||||
(+ (stickyForm?'':' uk-section') +' uk-padding-remove-bottom uk-padding-remove-top ' +
|
||||
((usedBy == 'deposit' || usedBy == 'orcid') ? ' uk-padding-remove-top ' : ' '))"
|
||||
[attr.uk-sticky]="(stickyForm?'{animation:false;offset:100;top:90;cls-active:uk-active uk-sticky-below;cls-inactive:uk-sticky '+
|
||||
(usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
|
||||
' uk-position-relative ' :(' uk-section ' ))+'}':null)">
|
||||
<div [class]="' uk-background-norepeat uk-background-bottom-center uk-padding-remove-bottom uk-flex uk-flex-middle uk-background-fixed '+searchFormClass
|
||||
+ (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') && !dashboard ?
|
||||
' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section' : '')
|
||||
+ (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId')?
|
||||
' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section uk-section-small' : '')
|
||||
+(simpleView?'':' advancedSearchFormBackground ')">
|
||||
<!-- TODO - Kostis until here-->
|
||||
<!-- TODO - Kostis until here-->
|
||||
<div class="uk-width-1-1">
|
||||
<div class="uk-container uk-container-large">
|
||||
<div class="uk-padding-small uk-padding-remove-bottom">
|
||||
|
|
@ -122,7 +126,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="uk-position-relative">
|
||||
<div class="uk-container uk-container-large uk-section" id="searchForm">
|
||||
<div class="uk-container uk-container-large uk-section uk-section-small uk-margin-bottom" id="searchForm">
|
||||
<div class="uk-grid uk-flex uk-flex-middle uk-flex-center" uk-grid>
|
||||
<div id="searchImage"></div>
|
||||
<advanced-search-form
|
||||
[entityType]="entityType"
|
||||
[fieldIds]="fieldIds"
|
||||
|
|
@ -132,8 +138,7 @@
|
|||
[isDisabled]="disabled"
|
||||
[simpleSearchLink]="simpleSearchLink"
|
||||
[advancedSearchLink]="advancedSearchLink"
|
||||
[advancedSearchLinkParameters]
|
||||
="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
|
||||
[advancedSearchLinkParameters]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
|
||||
[simpleView]="simpleView" [formPlaceholderText]="formPlaceholderText"
|
||||
[resultTypes]="resultTypes" [quickFilter]="quickFilter" [entitiesSelection]="entitiesSelection"
|
||||
[showSwitchSearchLink]="showSwitchSearchLink" [customFilter]="customFilter"
|
||||
|
|
@ -143,9 +148,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
|
||||
[searchAction]=false [description]="metaDescription" ></schema2jsonld>
|
||||
[searchAction]=false [description]="metaDescription"></schema2jsonld>
|
||||
<div id="tm-main" class="uk-margin-medium-top" [class.uk-margin-top]="stickyForm">
|
||||
<div uk-grid>
|
||||
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
|
||||
|
|
@ -153,8 +159,8 @@
|
|||
<div>
|
||||
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
|
||||
[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 *ngIf="showRefine && !dashboard" class="uk-hidden@m uk-margin-top">
|
||||
<div [class]="showRefine? 'uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s' :'uk-width-1-1'">
|
||||
<div *ngIf="showRefine" class="uk-hidden@m uk-margin-top">
|
||||
<a href="#mobile-filters" uk-toggle>
|
||||
<span class="uk-icon uk-margin-small-right uk-margin-small-left">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -171,7 +177,8 @@
|
|||
</svg>
|
||||
</span>
|
||||
<span>Filters <span
|
||||
*ngIf="(selectedRangeFilters+selectedFilters) > 0">({{(selectedRangeFilters + selectedFilters)}})</span></span>
|
||||
*ngIf="(selectedRangeFilters+selectedFilters) > 0">({{(selectedRangeFilters + selectedFilters)}}
|
||||
)</span></span>
|
||||
</a>
|
||||
<div #mobileFilters id="mobile-filters" uk-offcanvas="overlay: true" style="z-index:10000;">
|
||||
<!-- TODO - Kostis check offcanvas-white -->
|
||||
|
|
@ -196,8 +203,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="uk-grid uk-padding-small uk-padding-remove-vertical uk-margin-large-bottom">
|
||||
<div *ngIf="showRefine && !properties.isDashboard
|
||||
&& (results.length > 0
|
||||
<div *ngIf="showRefine && (results.length > 0
|
||||
|| (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING)
|
||||
|| (!hideFilters &&
|
||||
(existingFiltersWithValues > 0 || (selectedRangeFilters + selectedFilters + selectedTypesNum) > 0)
|
||||
|
|
@ -207,14 +213,6 @@
|
|||
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
|
||||
</div>
|
||||
<div class="uk-width-expand@m uk-with-1-1@s">
|
||||
<!-- Dashboard Filters -->
|
||||
<div *ngIf="properties.isDashboard"
|
||||
class="uk-width-1-1 uk-margin-top uk-margin-medium-bottom ">
|
||||
<div class="uk-flex uk-flex-bottom">
|
||||
<span class="uk-margin-small-right">Filters: </span>
|
||||
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {}"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Results only for Custom Filter? -->
|
||||
<div *ngIf="customFilter && !customFilter.isHiddenFilter &&
|
||||
customFilter.selected == false && customFilter.promptToAddFilter"
|
||||
|
|
@ -258,13 +256,16 @@
|
|||
</search-download>
|
||||
</div>
|
||||
<!-- No Dashboard Filters -->
|
||||
<div *ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))">
|
||||
<div
|
||||
*ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))">
|
||||
<ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container>
|
||||
</div>
|
||||
<div class="uk-grid uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m uk-margin-medium-top" uk-grid>
|
||||
<div *ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)">
|
||||
<div
|
||||
*ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<search-results-per-page class="uk-margin-right" *ngIf="searchUtils.totalResults >= 50" [size]="searchUtils.size"
|
||||
<search-results-per-page class="uk-margin-right" *ngIf="searchUtils.totalResults >= 50"
|
||||
[size]="searchUtils.size"
|
||||
(sizeChange)="sizeChanged($event)"
|
||||
[isDisabled]="disabled">
|
||||
</search-results-per-page>
|
||||
|
|
@ -281,7 +282,9 @@
|
|||
[isDisabled]="disabled">
|
||||
</search-paging>
|
||||
</div>
|
||||
<div *ngIf="(searchUtils.page <= pagingLimit) || (searchUtils.totalResults <= searchUtils.size*pagingLimit)" class="uk-margin">
|
||||
<div
|
||||
*ngIf="(searchUtils.page <= pagingLimit) || (searchUtils.totalResults <= searchUtils.size*pagingLimit)"
|
||||
class="uk-margin">
|
||||
<search-result *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
|
||||
[results]="results"
|
||||
[status]=searchUtils.status
|
||||
|
|
@ -329,7 +332,8 @@
|
|||
<div class="">
|
||||
<img src="assets/common-assets/graph.svg" style="opacity: 0.4; width:20px; height:22px" loading="lazy"
|
||||
alt="graph">
|
||||
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by <a href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a></span>
|
||||
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by <a
|
||||
href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a></span>
|
||||
</div>
|
||||
<div class="uk-text-right">
|
||||
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-muted">
|
||||
|
|
@ -352,33 +356,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="properties.isDashboard" id="filters_switcher_toggle" href="#style_switcher" uk-toggle="" >
|
||||
<i class=" uk-text-muted">
|
||||
<svg style="margin-top: 8px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
viewBox="0 0 20 20"
|
||||
fill="white" width="24px" height="16px">
|
||||
<g>
|
||||
<path d="M0,0h24 M24,24H0" fill="none"/>
|
||||
<path
|
||||
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 d="M0,0h24v24H0V0z" fill="none"/>
|
||||
</g>
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
<div *ngIf="properties.isDashboard" id="style_switcher" class=" uk-offcanvas filters_switcher"
|
||||
uk-offcanvas="flip:true" mode="slide" overlay="" style="z-index:982;" >
|
||||
|
||||
<div class="uk-offcanvas-bar offcanvas-white">
|
||||
<div class="uk-float-right" >
|
||||
<button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button>
|
||||
|
||||
</div>
|
||||
<div class="uk-padding uk-padding-remove-top uk-overflow-auto" style="height:calc(100vh - 100px);">
|
||||
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,6 @@ export class NewSearchPageComponent {
|
|||
@Input() showBreadcrumb: boolean = false;
|
||||
@Input() showDownload: boolean = true;
|
||||
@Input() breadcrumbs: Breadcrumb[] = [];
|
||||
public dashboard: boolean = properties.isDashboard;
|
||||
private subscriptions = [];
|
||||
public parameterNames: string[] = [];
|
||||
public parameterValues: string[] = [];
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
</modal-alert>
|
||||
<ng-template #resultPreview let-result="result">
|
||||
<div class="uk-flex uk-flex-center">
|
||||
<img *ngIf="result.logoUrl" [src]="result | logoUrl"
|
||||
<img *ngIf="result.logoUrl" [src]="result | logoUrl" class="uk-blend-multiply"
|
||||
[alt]="((result.title)?result.title:result.shortTitle) + ' logo'" loading="lazy">
|
||||
</div>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export class PortalSearchResultComponent implements OnInit{
|
|||
@ViewChild('AlertModal') modal;
|
||||
visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
|
||||
["PRIVATE", 'incognito'],
|
||||
["RESTRICTED", 'group']
|
||||
["RESTRICTED", 'restricted']
|
||||
]);
|
||||
public urlParam: string;
|
||||
public errorCodes: ErrorCodes = new ErrorCodes();
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {ManageModule} from "../../utils/manage/manage.module";
|
|||
import {IconsModule} from "../../utils/icons/icons.module";
|
||||
import {UrlPrefixModule} from "../../utils/pipes/url-prefix.module";
|
||||
import {IconsService} from "../../utils/icons/icons.service";
|
||||
import {incognito} from "../../utils/icons/icons";
|
||||
import {incognito, restricted} from "../../utils/icons/icons";
|
||||
import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -29,6 +29,6 @@ import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
|
|||
})
|
||||
export class PortalSearchResultModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
this.iconsService.registerIcons([incognito])
|
||||
this.iconsService.registerIcons([incognito, restricted])
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<ul [class]="'uk-list uk-margin uk-margin-top '+custom_class">
|
||||
<ul class="uk-list uk-list-xlarge uk-margin" [ngClass]="custom_class">
|
||||
<errorMessages [status]="[status]" [type]="'results'"></errorMessages>
|
||||
<li *ngFor="let result of previewResults" class="uk-animation-fade">
|
||||
<div class="uk-card uk-card-default uk-card-hover">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
|
||||
<result-preview [properties]="properties" [showOrganizations]="showOrganizations"
|
||||
[showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps">
|
||||
</result-preview>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export class SearchResultComponent implements OnInit, OnChanges {
|
|||
@Input() showLoading: boolean = false;
|
||||
@Input() showSubjects: boolean = true;
|
||||
@Input() showOrganizations: boolean = true;
|
||||
@Input() custom_class: string = "search-results";
|
||||
@Input() custom_class: string = "";
|
||||
@Input() properties: EnvProperties;
|
||||
@Input() showImpactFactors: boolean = false;
|
||||
@Input() showEnermaps: boolean;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ export class MenuItem {
|
|||
icon: string;
|
||||
open: boolean;
|
||||
customClass: string = null;
|
||||
isFeatured: boolean;
|
||||
|
||||
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon=null, fragment = null, customClass = null, routeActive = null) {
|
||||
this._id = id;
|
||||
|
|
|
|||
|
|
@ -1,22 +1,11 @@
|
|||
<div *ngIf="showMenu">
|
||||
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge"
|
||||
class="uk-visible@m">
|
||||
<a [routerLink]="header.route" [href]="header.url"><img class="large-beta-indication"
|
||||
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
|
||||
alt="BETA" style="height: 104px; width: 104px ">
|
||||
</a>
|
||||
<div class="uk-hidden@m">
|
||||
<div [ngClass]="portal + '-menu'">
|
||||
<nav class="uk-navbar-container uk-navbar" uk-navbar="">
|
||||
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge">
|
||||
<img class="uk-position-top-left" [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
|
||||
alt="BETA" style="height: 60px; width: 60px;">
|
||||
</div>
|
||||
<div class="tm-header-mobile uk-hidden@m">
|
||||
<nav class="uk-navbar-container uk-navbar" uk-navbar=""
|
||||
[class.uk-navbar-transparent]="header.stickyAnimation === false">
|
||||
<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" style="height: 60px; width: 60px ">
|
||||
</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 *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>
|
||||
|
|
@ -32,74 +21,51 @@
|
|||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
<div *ngIf="specialAnnouncementContent" class="uk-hidden@m" [innerHTML]="specialAnnouncementContent">
|
||||
</div>
|
||||
<div id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+offCanvasFlip:'')" mode="slide" overlay=""
|
||||
<div #canvas id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+(offCanvasFlip + ';'):'') + 'overlay: true'"
|
||||
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">
|
||||
<div class="uk-padding">
|
||||
<ul class="uk-nav uk-nav-default">
|
||||
<!-- <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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<li *ngIf="portal!='develop'"><a href="https://develop.openaire.eu" target="_blank"
|
||||
class="uk-heading-bullet develop-heading-bullet">DEVELOP</a></li>
|
||||
</ul>
|
||||
</li>-->
|
||||
<ng-container *ngIf="!onlyTop">
|
||||
<ng-container *ngFor="let menu of menuItems">
|
||||
<li class="uk-nav-header uk-parent " *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
|
||||
<a routerLinkActive="uk-link" routerLink="/">Home</a>
|
||||
<li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
|
||||
<a routerLink="/" (click)="closeCanvas(canvas)">Home</a>
|
||||
</li>
|
||||
<li class="uk-nav-header uk-parent" [class.uk-active]="isTheActiveMenu(menu)"
|
||||
<li [class.uk-active]="isTheActiveMenu(menu)"
|
||||
*ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)">
|
||||
<!--a routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->
|
||||
<!--a routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->
|
||||
<a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired)"
|
||||
routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}"
|
||||
[routerLinkActiveOptions]="{exact: true}"
|
||||
[queryParams]="menu.rootItem.params" [fragment]="menu.rootItem.fragment"
|
||||
class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>
|
||||
routerLink="{{menu.rootItem.route}}" (click)="closeCanvas(canvas)"
|
||||
[queryParams]="menu.rootItem.params" [fragment]="menu.rootItem.fragment">{{menu.rootItem.title}}</a>
|
||||
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
|
||||
routerLinkActive="uk-link" href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}">{{menu.rootItem.title}}</a>
|
||||
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || (menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))"
|
||||
class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>
|
||||
|
||||
href="{{menu.rootItem.url}}" (click)="closeCanvas(canvas)"
|
||||
target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}">{{menu.rootItem.title}}</a>
|
||||
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) ||
|
||||
(menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage)
|
||||
&& isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))" (click)="closeCanvas(canvas)">{{menu.rootItem.title}}</a>
|
||||
<ul class="uk-nav-sub">
|
||||
<ng-container *ngFor="let submenu of menu.items">
|
||||
<li [class.uk-active]="isTheActiveMenuItem(submenu)" *ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 || submenu.url.length > 0)"
|
||||
<li [class.uk-active]="isTheActiveMenuItem(submenu)"
|
||||
*ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 || submenu.url.length > 0)"
|
||||
[class.uk-parent]="submenu.items && submenu.items.length > 0">
|
||||
<a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link"
|
||||
routerLink="{{submenu.route}}" [queryParams]=submenu.params [fragment]="submenu.fragment"
|
||||
class="uk-offcanvas-close custom-offcanvas-close">{{submenu.title}}</a>
|
||||
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" routerLinkActive="uk-link"
|
||||
href="{{submenu.url}}" target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
|
||||
<a *ngIf="submenu.route.length > 0" (click)="closeCanvas(canvas)"
|
||||
routerLink="{{submenu.route}}" [queryParams]=submenu.params
|
||||
[fragment]="submenu.fragment">{{submenu.title}}</a>
|
||||
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
|
||||
href="{{submenu.url}}" (click)="closeCanvas(canvas)"
|
||||
target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
|
||||
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
|
||||
<ng-container *ngFor="let subsubmenu of submenu.items">
|
||||
<li>
|
||||
<a *ngIf="subsubmenu.route.length > 0" routerLinkActive="uk-link"
|
||||
<a *ngIf="subsubmenu.route.length > 0"
|
||||
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
|
||||
[fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a>
|
||||
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0" routerLinkActive="uk-link"
|
||||
href="{{subsubmenu.url}}" target="_blank">{{subsubmenu.title}}</a>
|
||||
[fragment]="subsubmenu.fragment" (click)="closeCanvas(canvas)">{{subsubmenu.title}}</a>
|
||||
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
|
||||
href="{{subsubmenu.url}}" (click)="closeCanvas(canvas)"
|
||||
target="_blank">{{subsubmenu.title}}</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
|
|
@ -107,110 +73,73 @@
|
|||
<li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)"
|
||||
class="uk-nav-header">{{submenu.title}}</li>
|
||||
</ng-container>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ul>
|
||||
<ng-container *ngIf="userMenu">
|
||||
<user-mini [user]="user" mobileView=true
|
||||
<user-mini [user]="user" mobileView=true (closeCanvasEmitter)="closeCanvas(canvas)"
|
||||
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl
|
||||
[logOutUrl]=properties.logoutUrl [cookieDomain]=properties.cookieDomain></user-mini>
|
||||
<ng-content select="[extra-s]"></ng-content>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<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">
|
||||
<div class="uk-grid-medium uk-child-width-auto uk-flex-middle uk-grid uk-grid-stack"
|
||||
uk-grid="margin: uk-margin-small-top">
|
||||
<div class="uk-first-column">
|
||||
<div class="uk-panel inner" id="module-119">
|
||||
<ul class="uk-subnav uk-subnav-line">
|
||||
<li><a [href]="'https://'+(properties.environment =='beta'?'beta':'www')+'.openaire.eu'" target="_blank"
|
||||
class="home-icon"><span class="uk-responsive-height">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
enable-background="new 0 0 20 20" height="20px" id="Layer_1" version="1.1"
|
||||
viewBox="0 0 48 48" width="20px" xml:space="preserve"><path id="home" clip-rule="evenodd" d="M44.715,23.711c-0.381,0.382-1,0.382-1.381,0l-8.939-8.938 c-0.064-0.051-0.119-0.106-0.17-0.171l-3.83-3.829c-0.064-0.051-0.119-0.106-0.17-0.171L24,4.377L4.667,23.711 c-0.381,0.382-1,0.382-1.381,0c-0.381-0.381-0.381-1,0-1.381L23.191,2.425c0.031-0.047,0.053-0.101,0.094-0.144 C23.482,2.085,23.742,1.994,24,2c0.258-0.006,0.518,0.084,0.715,0.281c0.043,0.042,0.062,0.096,0.096,0.144L30,7.616V4.997 c0,0,0,0,0,0c0-0.552,0.447-1,1-1h4c0.277,0,0.527,0.112,0.707,0.293C35.889,4.471,36,4.721,36,4.997v8.619l8.715,8.714 C45.096,22.711,45.096,23.33,44.715,23.711z M34,5.997h-2v3.619l2,2V5.997z M10,21.997c0.552,0,1,0.448,1,1v19c0,1.105,0.896,2,2,2 h6l0,0v-13c0-0.553,0.447-1,1-1h8c0.553,0,1,0.447,1,1v13l0,0h6c1.105,0,2-0.895,2-2v-19c0-0.552,0.447-1,1-1s1,0.448,1,1v19 c0,2.209-1.791,4-4,4H13c-2.209,0-4-1.791-4-4v-19C9,22.444,9.448,21.997,10,21.997z M27,43.996v-12h-6v12l0,0H27L27,43.996z" fill-rule="evenodd" fill="#fff"/></svg>
|
||||
</span><span class="visually-hidden">Home</span></a></li>
|
||||
<li [class]="(portal=='explore')?'custom-'+portal+'-li':''"><a
|
||||
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'explore.openaire.eu'"
|
||||
title="Search in OA. Link your research">Explore</a></li>
|
||||
<li [class]="(portal=='provide')?'custom-'+portal+'-li':''"><a
|
||||
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'provide.openaire.eu'"
|
||||
target="_blank" title="Content Provider Dashboard">Provide</a></li>
|
||||
<li [class]="(portal=='connect'||portal=='connect-admin')?'custom-'+portal+'-li':''"><a
|
||||
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development' ?'beta.':'')+'connect.openaire.eu'"
|
||||
target="_blank" title="Research Community Dashboard">Connect</a></li>
|
||||
<li [class]="(portal=='monitor')?'custom-'+portal+'-li':''"><a
|
||||
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'monitor.openaire.eu'"
|
||||
target="_blank" title="Monitoring Dashboard">Monitor</a></li>
|
||||
<li [class]="(portal=='develop')?'custom-'+portal+'-li':''"><a href="https://develop.openaire.eu"
|
||||
target="_blank" title="APIs">Develop</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-visible@m">
|
||||
<div class="uk-navbar-transparent" [ngClass]="portal + '-menu'"
|
||||
uk-sticky="show-on-up: true" media="@m" cls-active="uk-active uk-navbar-sticky" cls-inactive="uk-navbar-transparent"
|
||||
[attr.animation]="(header.stickyAnimation?'uk-animation-slide-top':null)">
|
||||
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge">
|
||||
<img class="uk-position-top-left" [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
|
||||
alt="BETA" style="height: 100px; width: 100px; z-index: 1000">
|
||||
</div>
|
||||
</div>-->
|
||||
<div *ngIf="specialAnnouncementContent" class="uk-visible@m" [innerHTML]="specialAnnouncementContent">
|
||||
|
||||
</div>
|
||||
<div class="tm-header uk-visible@m tm-header-transparent" uk-header="">
|
||||
<div id="stickyNavbar" [class]="'uk-navbar-container uk-sticky uk-navbar-transparent '+portal+'-menu'" uk-sticky="show-on-up: true"
|
||||
media="768" cls-active="uk-active uk-navbar-sticky"
|
||||
[attr.animation]="(header.stickyAnimation != false ?'uk-animation-slide-top':null)"
|
||||
top=".tm-header + [class*="uk-section"]" cls-inactive="uk-navbar-transparent" style="">
|
||||
<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" style="height: 102px; width: 102px">
|
||||
</div>
|
||||
<div class="uk-container uk-container-expand">
|
||||
<nav class="uk-navbar" uk-navbar="{"align":"center"}">
|
||||
<div *ngIf="showLogo && header.position== 'left'" class="uk-navbar-left uk-visible@l">
|
||||
<nav class="uk-navbar uk-flex uk-navbar-container uk-padding-large uk-padding-remove-vertical" uk-navbar>
|
||||
<ng-container *ngIf="!onlyTop">
|
||||
<div class="uk-navbar-left">
|
||||
<ng-container *ngIf="showLogo && isHeaderLeft">
|
||||
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="showLogo && header.position == 'left'" class="uk-navbar-left uk-visible@m uk-hidden@l">
|
||||
<div class="uk-navbar-center">
|
||||
<ng-container *ngIf="showLogo && !isHeaderLeft">
|
||||
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="header.menuPosition === 'center'">
|
||||
<ng-container *ngTemplateOutlet="mainMenu"></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="showLogo && header.position == 'center' && header.menuPosition != 'center' " class="uk-margin-auto uk-visible@m">
|
||||
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
|
||||
<div class="uk-navbar-right">
|
||||
<ng-container *ngIf="header.menuPosition === 'right'">
|
||||
<ng-container *ngTemplateOutlet="mainMenu"></ng-container>
|
||||
</ng-container>
|
||||
<user-mini *ngIf="userMenu" [user]="user" [dark]="dark"
|
||||
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
|
||||
[cookieDomain]=properties.cookieDomain></user-mini>
|
||||
<ng-content select="[extra-m]"></ng-content>
|
||||
</div>
|
||||
<!-- <div *ngIf="!onlyTop" class="uk-navbar-center"> -->
|
||||
<div *ngIf="!onlyTop" [class.uk-navbar-right]="header.menuPosition != 'center'"
|
||||
[class.uk-navbar-center]="header.menuPosition == 'center'">
|
||||
<div *ngIf="showLogo && header.position == 'center' && header.menuPosition == 'center' "
|
||||
class="uk-margin-large-right uk-visible@m">
|
||||
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
|
||||
</div>
|
||||
<ul [class]="'uk-navbar-nav'+(!userMenu?' uk-margin-right':'')">
|
||||
<ng-template #mainMenu>
|
||||
<ul class="uk-navbar-nav" [class.uk-margin-right]="!userMenu">
|
||||
<li class="uk-parent" *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
|
||||
<a routerLinkActive="uk-link" routerLink="/">Home</a>
|
||||
<a routerLink="/">Home</a>
|
||||
</li>
|
||||
<ng-container *ngFor="let menu of menuItems">
|
||||
<li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)"
|
||||
*ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)">
|
||||
<!--a routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="" aria-expanded="false">{{menu.rootItem.title}}</a-->
|
||||
<!--a routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="" aria-expanded="false">{{menu.rootItem.title}}</a-->
|
||||
<a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired )"
|
||||
routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}"
|
||||
routerLink="{{menu.rootItem.route}}"
|
||||
[queryParams]="menu.rootItem.params"
|
||||
[fragment]="menu.rootItem.fragment"> {{menu.rootItem.title}}</a>
|
||||
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" routerLinkActive="uk-link"
|
||||
href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}" aria-expanded="false">{{menu.rootItem.title}}</a>
|
||||
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
|
||||
href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}"
|
||||
aria-expanded="false">{{menu.rootItem.title}}</a>
|
||||
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)) "
|
||||
class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>
|
||||
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left"
|
||||
style="top: 80px; left: 0px;" id="{{menu.rootItem.id}}" uk-toggle>
|
||||
style="top: 80px; left: 0px;" id="{{menu.rootItem._id}}" uk-toggle>
|
||||
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
|
||||
<div class="uk-first-column uk-height-max-medium uk-overflow-auto">
|
||||
<ul class="uk-nav uk-navbar-dropdown-nav">
|
||||
|
|
@ -219,18 +148,19 @@
|
|||
isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 ||
|
||||
submenu.url.length > 0)" [class.uk-active]="isTheActiveMenuItem(submenu)"
|
||||
[class.uk-parent]="submenu.items && submenu.items.length > 0">
|
||||
<a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link"
|
||||
<a *ngIf="submenu.route.length > 0"
|
||||
routerLink="{{submenu.route}}" [queryParams]="submenu.params"
|
||||
[fragment]="submenu.fragment">{{submenu.title}}</a>
|
||||
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" routerLinkActive="uk-link"
|
||||
href="{{submenu.url}}" target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
|
||||
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
|
||||
href="{{submenu.url}}"
|
||||
target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
|
||||
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
|
||||
<ng-container *ngFor="let subsubmenu of submenu.items">
|
||||
<li>
|
||||
<a *ngIf="subsubmenu.route.length > 0" routerLinkActive="uk-link"
|
||||
<a *ngIf="subsubmenu.route.length > 0"
|
||||
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
|
||||
[fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a>
|
||||
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0" routerLinkActive="uk-link"
|
||||
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
|
||||
href="{{subsubmenu.url}}" target="_blank">{{subsubmenu.title}}</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
|
|
@ -247,11 +177,12 @@
|
|||
</li>
|
||||
</ng-container>
|
||||
<!-- Custom menu items -->
|
||||
<ng-container *ngIf="customMenuItems?.length > 0 && properties.environment == 'development'">
|
||||
<ng-container *ngFor="let menu of customMenuItems">
|
||||
<!-- TODO: Add to mobile menu as well! -->
|
||||
<ng-container *ngIf="additionalMenuItems?.length > 0 && properties.environment == 'development'">
|
||||
<ng-container *ngFor="let menu of additionalMenuItems">
|
||||
<li class="uk-parent">
|
||||
<!-- INTERNAL ROOT-->
|
||||
<a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)" routerLinkActive="uk-link"
|
||||
<a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)"
|
||||
routerLink="{{menu.route}}"
|
||||
[queryParams]="menu.params"
|
||||
[fragment]="menu.fragment">
|
||||
|
|
@ -275,7 +206,7 @@
|
|||
<ng-container *ngFor="let submenu of menu.items">
|
||||
<li>
|
||||
<!-- INTERNAL CHILD -->
|
||||
<a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)" routerLinkActive="uk-link"
|
||||
<a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)"
|
||||
routerLink="{{submenu.route}}"
|
||||
[queryParams]="submenu.params"
|
||||
[fragment]="submenu.fragment"
|
||||
|
|
@ -283,7 +214,7 @@
|
|||
{{submenu.title}}
|
||||
</a>
|
||||
<!-- EXTERNAL CHILD -->
|
||||
<a *ngIf="submenu.type == 'external' && submenu.url" routerLinkActive="uk-link"
|
||||
<a *ngIf="submenu.type == 'external' && submenu.url"
|
||||
href="{{submenu.url}}"
|
||||
target="_blank">
|
||||
{{submenu.title}}
|
||||
|
|
@ -297,47 +228,57 @@
|
|||
</li>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
</ul>
|
||||
<!-- </div> -->
|
||||
<!-- <div *ngIf="userMenu" class="uk-navbar-right"> -->
|
||||
<!-- <div *ngIf="userMenu" class="uk-navbar-right"> -->
|
||||
<user-mini *ngIf="userMenu" [user]="user" [dark]="dark"
|
||||
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
|
||||
[cookieDomain]=properties.cookieDomain></user-mini>
|
||||
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- New navbar for featured menu items - test only -->
|
||||
<ng-container *ngIf="featuredMenuItems?.length > 0 && properties.environment == 'development'">
|
||||
<div class="featuredNavBar">
|
||||
<ul>
|
||||
<ng-container *ngFor="let item of featuredMenuItems">
|
||||
<li>
|
||||
<!-- INTERNAL -->
|
||||
<a *ngIf="item.type == 'internal' && item.route && isEnabled([item.route], showPage)"
|
||||
routerLink="{{item.route}}"
|
||||
[queryParams]="item.params"
|
||||
[fragment]="item.fragment"
|
||||
[class.uk-active]="isTheActiveMenuItem(item)">
|
||||
{{item.title}}
|
||||
</a>
|
||||
<!-- EXTERNAL -->
|
||||
<a *ngIf="item.type == 'external' && item.url"
|
||||
href="{{item.url}}"
|
||||
target="_blank">
|
||||
{{item.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="first_page_section uk-section-default uk-section uk-padding-remove-vertical">
|
||||
<div
|
||||
class="first_page_banner_headline uk-grid-collapse uk-flex-middle uk-margin-remove-vertical uk-grid uk-grid-stack"
|
||||
uk-grid="">
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<ng-template #header_template let-mobile="mobile">
|
||||
<a *ngIf="!header.url" [routerLink]="header.route" [class.uk-padding-remove]="header.position !== 'left'"
|
||||
<a *ngIf="!header.url" [routerLink]="header.route" [class.uk-padding-remove]="!isHeaderLeft"
|
||||
class="uk-logo uk-navbar-item uk-text-center uk-text-bold">
|
||||
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
|
||||
[src]="!mobile?header.logoUrl:header.logoSmallUrl"
|
||||
[alt]="header.title"
|
||||
class="uk-responsive-height">
|
||||
class="uk-width-1-1">
|
||||
<ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
|
||||
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
|
||||
<p class="uk-margin-remove">{{header.title}}</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
</a>
|
||||
<a *ngIf="header.url" [href]="header.url" [class.uk-padding-remove]="header.position !== 'left'"
|
||||
<a *ngIf="header.url" [href]="header.url" [class.uk-padding-remove]="!isHeaderLeft"
|
||||
class="uk-logo uk-navbar-item uk-text-center uk-text-bold">
|
||||
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
|
||||
[src]="!mobile?header.logoUrl:header.logoSmallUrl"
|
||||
[alt]="header.title"
|
||||
class="uk-responsive-height">
|
||||
class="uk-width-1-1">
|
||||
<ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
|
||||
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
|
||||
<p class="uk-margin-remove">{{header.title}}</p>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
|
||||
import {Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {Session, User} from '../login/utils/helper.class';
|
||||
import {ConfigurationService} from '../utils/configuration/configuration.service';
|
||||
|
|
@ -6,6 +6,9 @@ import {MenuItem, RootMenuItem} from './menu';
|
|||
import {EnvProperties} from '../utils/properties/env-properties';
|
||||
import {Subscription} from 'rxjs';
|
||||
import {HelpContentService} from '../services/help-content.service';
|
||||
import {properties} from "../../../environments/environment";
|
||||
|
||||
declare var UIkit;
|
||||
|
||||
export interface Header {
|
||||
route?: string,
|
||||
|
|
@ -26,7 +29,7 @@ export interface Header {
|
|||
export class NavigationBarComponent implements OnInit, OnDestroy {
|
||||
@Input() portal: string = 'connect';
|
||||
@Input() dark: boolean = false;
|
||||
@Input() onlyTop: boolean;
|
||||
@Input() onlyTop: boolean = false;
|
||||
@Input() logoPath: string = 'assets/common-assets/';
|
||||
@Input() userMenu: boolean = true;
|
||||
@Input() showHomeMenuItem: boolean = false;
|
||||
|
|
@ -37,7 +40,7 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
|
|||
@Input() header: Header;
|
||||
@Input() showMenu: boolean = true;
|
||||
@Input() homeurl: boolean = true;
|
||||
@Input() properties: EnvProperties;
|
||||
@Input() properties: EnvProperties = properties;
|
||||
@Input() user: User;
|
||||
@Input() enableSearch: boolean = false;
|
||||
@Input() searchRoute: string = '/search/find';
|
||||
|
|
@ -49,9 +52,9 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
|
|||
subs: Subscription[] = [];
|
||||
showEntity = {};
|
||||
showPage = {};
|
||||
specialAnnouncementContent: string = null;
|
||||
|
||||
public customMenuItems: MenuItem[] = [];
|
||||
public additionalMenuItems: MenuItem[] = [];
|
||||
public featuredMenuItems: MenuItem[] = [];
|
||||
|
||||
constructor(private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
|
|
@ -69,6 +72,10 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
}
|
||||
|
||||
closeCanvas(element) {
|
||||
UIkit.offcanvas(element).hide();
|
||||
}
|
||||
|
||||
initialize() {
|
||||
if ((['provide', 'develop']).indexOf(this.portal) != -1) {
|
||||
this.header = {
|
||||
|
|
@ -88,13 +95,13 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
|
|||
this.subs.push(this.config.communityInformationState.subscribe(data => {
|
||||
if (data) {
|
||||
if (data['entities']) {
|
||||
for (var i = 0; i < data['entities'].length; i++) {
|
||||
for (let i = 0; i < data['entities'].length; i++) {
|
||||
|
||||
this.showEntity['' + data['entities'][i]['pid'] + ''] = data['entities'][i]['isEnabled'];
|
||||
}
|
||||
}
|
||||
if (data['pages']) {
|
||||
for (var i = 0; i < data['pages'].length; i++) {
|
||||
for (let i = 0; i < data['pages'].length; i++) {
|
||||
this.showPage[data['pages'][i]['route']] = data['pages'][i]['isEnabled'];
|
||||
|
||||
}
|
||||
|
|
@ -109,7 +116,16 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
|
|||
this.subs.push(
|
||||
this._helpContentService.getMenuItems(this.portal).subscribe(
|
||||
data => {
|
||||
this.customMenuItems = data;
|
||||
// Will divide all the custom menu items into 2 arrays.
|
||||
// One for the extra(added next to the hardcoded menu items in the existing nav bar) - additionalMenuItems
|
||||
// One for the featured(new nav bar below the existing one) - featuredMenuItems
|
||||
data.forEach(menuItem => {
|
||||
if(menuItem.isFeatured) {
|
||||
this.featuredMenuItems.push(menuItem);
|
||||
} else {
|
||||
this.additionalMenuItems.push(menuItem);
|
||||
}
|
||||
});
|
||||
},
|
||||
error => this.handleError("Server error fetching custom menu items", error)
|
||||
)
|
||||
|
|
@ -117,7 +133,6 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
isEnabled(required, enabled) {
|
||||
if (!required) {
|
||||
return true;
|
||||
|
|
@ -143,13 +158,17 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
|
|||
count--;
|
||||
}
|
||||
}
|
||||
return (count > 0) ? true : false;
|
||||
return (count > 0);
|
||||
}
|
||||
|
||||
private handleError(message: string, error) {
|
||||
console.error('NavigationBar (component): ' + message, error);
|
||||
}
|
||||
|
||||
get isHeaderLeft(): boolean {
|
||||
return this.header.position === 'left' || (this.header.position === 'center' && this.header.menuPosition === 'center' && this.menuItems.length > 0);
|
||||
}
|
||||
|
||||
get currentRoute() {
|
||||
return {
|
||||
route: this.router.url.split('?')[0].split('#')[0],
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
.quick-contact {
|
||||
position: fixed;
|
||||
bottom: 5vh;
|
||||
right: 5vw;
|
||||
}
|
||||
|
||||
.uk-card > .uk-background-secondary:first-child {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.uk-drop {
|
||||
max-height: 650px;
|
||||
height: calc(80vh - 100px);
|
||||
width: 500px;
|
||||
max-width: 80vw;
|
||||
}
|
||||
|
||||
.avatars > img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.avatars > img:nth-child(n+1) {
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<div class="quick-contact">
|
||||
<a class="uk-button uk-button-secondary uk-text-uppercase uk-flex uk-flex-middle">
|
||||
<icon *ngIf="!showDrop" name="mail" [flex]="true"></icon>
|
||||
<icon *ngIf="showDrop" name="close" [flex]="true"></icon>
|
||||
<span class="uk-margin-small-left">Contact</span>
|
||||
</a>
|
||||
<div #drop id="quick-contact" class="uk-card uk-card-default uk-drop uk-overflow-auto" uk-drop="mode: click; pos: top-right; animation: uk-animation-fade">
|
||||
<div class="uk-background-secondary uk-padding-small uk-text-center">
|
||||
<div class="uk-text-small">
|
||||
Send a message
|
||||
</div>
|
||||
<div class="uk-margin-small avatars">
|
||||
<img class="uk-border-circle" src="assets/monitor-assets/avatar.jpg">
|
||||
<img class="uk-border-circle" src="assets/monitor-assets/avatar.jpg">
|
||||
<img class="uk-border-circle" src="assets/monitor-assets/avatar.jpg">
|
||||
<img class="uk-border-circle" src="assets/monitor-assets/avatar.jpg">
|
||||
</div>
|
||||
<div class="uk-text-bold">
|
||||
How can we help?
|
||||
</div>
|
||||
<div class="uk-text-small">
|
||||
We usually respond in a few hours.
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card-body">
|
||||
<loading *ngIf="sending" class="uk-margin-xlarge-top"></loading>
|
||||
<contact-us *ngIf="contactForm && !sending" [organizationTypes]="organizationTypes" (sendEmitter)="send($event)"
|
||||
[smallForm]="true" sendButton="Send Message" [contactForm]="contactForm"></contact-us>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import {Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
|
||||
import {FormGroup} from "@angular/forms";
|
||||
import {Subscriber} from "rxjs";
|
||||
|
||||
declare var UIkit;
|
||||
|
||||
@Component({
|
||||
selector: 'quick-contact',
|
||||
templateUrl: 'quick-contact.component.html',
|
||||
styleUrls: ['quick-contact.component.css']
|
||||
})
|
||||
export class QuickContactComponent implements OnInit, OnDestroy {
|
||||
public showDrop: boolean = false;
|
||||
@Input()
|
||||
public contactForm: FormGroup;
|
||||
@Input()
|
||||
public sending = false;
|
||||
@Input()
|
||||
public organizationTypes: string[] = [];
|
||||
@Output() sendEmitter: EventEmitter<any> = new EventEmitter<any>();
|
||||
private subscriptions: any[] = [];
|
||||
@ViewChild('drop') drop: ElementRef;
|
||||
|
||||
ngOnInit() {
|
||||
if (document !== undefined) {
|
||||
this.subscriptions.push(UIkit.util.on(document, 'beforehide', '#quick-contact', (event) => {
|
||||
if(this.sending) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}));
|
||||
this.subscriptions.push(UIkit.util.on(document, 'show', '#quick-contact', (event) => {
|
||||
this.showDrop = true;
|
||||
}));
|
||||
this.subscriptions.push(UIkit.util.on(document, 'hide', '#quick-contact', (event) => {
|
||||
this.showDrop = false;
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscriptions.forEach(value => {
|
||||
if (value instanceof Subscriber) {
|
||||
value.unsubscribe();
|
||||
} else if (value instanceof Function) {
|
||||
value();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public close() {
|
||||
UIkit.drop(this.drop.nativeElement).hide();
|
||||
}
|
||||
|
||||
public send(event) {
|
||||
this.sendEmitter.emit(event);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
|
||||
import {QuickContactComponent} from './quick-contact.component';
|
||||
import {IconsModule} from '../../utils/icons/icons.module';
|
||||
import {ContactUsModule} from "../../contact-us/contact-us.module";
|
||||
import {LoadingModule} from "../../utils/loading/loading.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, IconsModule, ContactUsModule, LoadingModule
|
||||
],
|
||||
declarations: [
|
||||
QuickContactComponent
|
||||
],
|
||||
providers:[],
|
||||
exports: [
|
||||
QuickContactComponent
|
||||
]
|
||||
})
|
||||
export class QuickContactModule {
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { Injectable } from "@angular/core";
|
||||
import { BehaviorSubject, Observable } from "rxjs";
|
||||
|
||||
@Injectable({
|
||||
providedIn: "root"
|
||||
})
|
||||
export class QuickContactService {
|
||||
private display: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
|
||||
|
||||
public get isDisplayed(): Observable<boolean> {
|
||||
return this.display.asObservable();
|
||||
}
|
||||
|
||||
public setDisplay(display: boolean) {
|
||||
this.display.next(display);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<ul class="uk-nav uk-nav-default sidebar uk-overflow-auto uk-margin-left uk-margin-large-top" style="max-height: 85vh">
|
||||
<li class="uk-nav-header" *ngFor="let menu of menuItems" [class.uk-active]="isTheActiveMenu(menu.rootItem.route, menu.rootItem.params)">
|
||||
<a *ngIf="menu.rootItem.route && menu.rootItem.route != ''"
|
||||
[routerLink]="menu.rootItem.route" class="uk-link" [queryParams]=menu.rootItem.params>
|
||||
<span><span class="uk-margin-small-right uk-icon" [attr.uk-icon]=menu.ukIcon></span> {{menu.rootItem.title}}</span>
|
||||
</a>
|
||||
<a *ngIf="(!menu.rootItem.route || menu.rootItem.route == '') && (menu.rootItem.url && menu.rootItem.url != '')"
|
||||
[href]="menu.rootItem.url" class="uk-link" target="_blank">
|
||||
<span><span class="uk-margin-small-right uk-icon" [attr.uk-icon]=menu.ukIcon></span> {{menu.rootItem.title}}</span>
|
||||
</a>
|
||||
<span *ngIf="!menu.rootItem.route || menu.rootItem.route == ''"><span class="uk-margin-small-right uk-icon" [attr.uk-icon]=menu.ukIcon></span> {{menu.rootItem.title}}</span>
|
||||
<ul *ngIf="menu.items.length > 0" class="uk-nav-sub uk-margin-left">
|
||||
<li *ngFor="let item of menu.items" [class.uk-active]="isTheActiveMenu(item.rootItem.route, item.rootItem.params)">
|
||||
<a *ngIf="item.rootItem.route && item.rootItem.route != ''" [routerLink]="item.rootItem.route" class="uk-link" [queryParams]=item.rootItem.params>
|
||||
<span>{{item.rootItem.title}}</span>
|
||||
</a>
|
||||
<a *ngIf="(!item.rootItem.route || item.rootItem.route == '') && (item.rootItem.url && item.rootItem.url != '')"
|
||||
[href]="item.rootItem.url" class="uk-link" target="_blank">
|
||||
<span>{{item.rootItem.title}}</span>
|
||||
</a>
|
||||
<ul *ngIf="item.items.length > 0" class="uk-nav-sub uk-margin-left">
|
||||
<li *ngFor="let subItem of item.items" [class.uk-active]="isTheActiveMenu(subItem.route, subItem.params)">
|
||||
<a *ngIf="subItem.route && subItem.route != ''" [routerLink]="subItem.route" class="uk-link" [queryParams]=subItem.params>
|
||||
<span>{{subItem.title}}</span>
|
||||
</a>
|
||||
<a *ngIf="(!subItem.route || subItem.route == '') && (subItem.url && subItem.url != '')"
|
||||
[href]="subItem.url" class="uk-link" target="_blank">
|
||||
<span>{{subItem.title}}</span>
|
||||
</a>
|
||||
<span *ngIf="!subItem.route || subItem.route == ''">{{subItem.title}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import {SideMenuItem} from '../menu';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {Subscriber} from "rxjs";
|
||||
|
||||
@Component({
|
||||
selector: 'sidebar',
|
||||
templateUrl: 'sideBar.component.html'
|
||||
})
|
||||
export class SideBarComponent implements OnInit {
|
||||
@Input() communityId: string = '';
|
||||
@Input() menuItems: SideMenuItem[] = [];
|
||||
currentParams: any = {};
|
||||
sub;
|
||||
constructor(private router: Router,
|
||||
private route: ActivatedRoute) {
|
||||
}
|
||||
ngOnDestroy() {
|
||||
if (this.sub instanceof Subscriber) {
|
||||
this.sub.unsubscribe();
|
||||
}
|
||||
}
|
||||
ngOnInit(): void {
|
||||
this.sub = this.route.queryParams.subscribe(params => {
|
||||
this.currentParams = params;
|
||||
});
|
||||
}
|
||||
|
||||
private getCurrentRoute(): string {
|
||||
return this.router.url.split('?')[0];
|
||||
}
|
||||
|
||||
isTheActiveMenu(route: string, params: any): boolean {
|
||||
return route === this.getCurrentRoute() &&
|
||||
(!params || JSON.stringify(this.currentParams) === JSON.stringify(params));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
|
||||
import {RouterModule} from "@angular/router";
|
||||
|
||||
import {SideBarComponent} from './sideBar.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule
|
||||
],
|
||||
declarations: [
|
||||
SideBarComponent
|
||||
],
|
||||
providers: [],
|
||||
exports: [
|
||||
SideBarComponent
|
||||
]
|
||||
})
|
||||
export class SideBarModule {
|
||||
}
|
||||
|
|
@ -62,7 +62,7 @@ export class Composer {
|
|||
return email;
|
||||
}
|
||||
|
||||
public static composeEmailForMonitor(contactForm: any, admins: any): Email {
|
||||
public static composeEmailForMonitor(contactForm: any, admins: string[]): Email {
|
||||
let email: Email = new Email();
|
||||
|
||||
email.subject = "OpenAIRE - Monitor";
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@ import {Observable} from "rxjs";
|
|||
import {EnvProperties} from "../properties/env-properties";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class EmailService {
|
||||
|
||||
constructor(private http:HttpClient) {
|
||||
|
|
|
|||
|
|
@ -7,8 +7,7 @@ import {properties} from "../../../environments/environment";
|
|||
template: `
|
||||
<div *ngIf="status.some(checkErrorCode(errorCodes.LOADING))"
|
||||
[class]="(tab_error_class ? '' : 'uk-animation-fade') + ' uk-margin-top uk-width-1-1'" role="alert">
|
||||
<span *ngIf="!dashboard" class="loading-gif uk-align-center"></span>
|
||||
<loading *ngIf="dashboard"></loading>
|
||||
<loading></loading>
|
||||
</div>
|
||||
<div *ngIf="status.every(checkErrorCode(errorCodes.NONE))"
|
||||
[class]="(tab_error_class ? 'uk-margin-top' : 'uk-animation-fade') + ' uk-alert uk-alert-primary'" role="alert">No {{type}} available</div>
|
||||
|
|
@ -43,7 +42,6 @@ import {properties} from "../../../environments/environment";
|
|||
@Input() status: Array<number>;
|
||||
@Input() type: string;
|
||||
@Input() tab_error_class: boolean = false;
|
||||
dashboard = properties.isDashboard;
|
||||
|
||||
public errorCodes:ErrorCodes;
|
||||
|
||||
|
|
|
|||
|
|
@ -123,11 +123,11 @@ export class IconsComponent implements AfterViewInit {
|
|||
ngAfterViewInit() {
|
||||
if(this.svg) {
|
||||
let svg: Element = this.icon.nativeElement.getElementsByTagName('svg').item(0);
|
||||
if(!this.defaultSize) {
|
||||
if(!this.defaultSize && svg) {
|
||||
svg.setAttribute("width", (this.ratio * IconsComponent.DEFAULT_ICON_SIZE).toString());
|
||||
svg.setAttribute("height", (this.ratio * IconsComponent.DEFAULT_ICON_SIZE).toString());
|
||||
}
|
||||
if(this.gradient) {
|
||||
if(this.gradient && svg) {
|
||||
this.addGradient(svg);
|
||||
} else {
|
||||
this.style = {
|
||||
|
|
|
|||
|
|
@ -153,3 +153,13 @@ export const incognito = {
|
|||
name: 'incognito',
|
||||
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24.51 19.525"><g id="Group_13376" data-name="Group 13376" transform="translate(-428.81 -3863.018)"><path id="Path_104500" data-name="Path 104500" d="M44.68,105.185H43.024a23.507,23.507,0,0,0-9.194-.158V106a3.909,3.909,0,0,1,1.264,1.668c.455,1.119.2,3.05,4.148,3.289s4-4.041,4.034-4.438.577-.372.577-.372.541-.021.579.372.09,4.673,4.034,4.438,3.693-2.17,4.146-3.289A3.9,3.9,0,0,1,53.879,106v-.969A23.686,23.686,0,0,0,44.68,105.185Z" transform="translate(397.218 3771.582)" fill="#2c2c2c"/><path id="Path_104501" data-name="Path 104501" d="M41.867,35.784H40.326s-1.95-6.217-2.207-6.735a2.8,2.8,0,0,0-2.591-2.061c-1.92-.266-2.138,1.225-3.544,1.268-1.406-.049-1.617-1.546-3.542-1.268a2.817,2.817,0,0,0-2.592,2.061c-.246.518-2.205,6.735-2.205,6.735H22.1a2.31,2.31,0,0,0-2.371,2.245H44.24A2.311,2.311,0,0,0,41.867,35.784Z" transform="translate(409.08 3836.064)" fill="#2c2c2c"/></g></svg>'
|
||||
}
|
||||
|
||||
export const restricted = {
|
||||
name: 'restricted',
|
||||
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g id="noun-remove-file-3557544" transform="translate(-176.397 -106.4)"><path id="Path_104600" data-name="Path 104600" d="M181.881,274.166A5.485,5.485,0,1,0,178,272.559,5.484,5.484,0,0,0,181.881,274.166Zm-3.548-5.484a3.531,3.531,0,0,1,.452-1.729l4.839,4.839a3.548,3.548,0,0,1-5.29-3.11Zm7.1,0a3.527,3.527,0,0,1-.452,1.729l-4.839-4.839a3.548,3.548,0,0,1,5.29,3.11Z" transform="translate(0 -147.766)" fill="#4b4b4b"/><path id="Path_104601" data-name="Path 104601" d="M245.859,106.4a2.258,2.258,0,0,0-2.258,2.258v4.516h1.936v-4.516a.323.323,0,0,1,.323-.323h8.064v3.871h3.871v11.935a.323.323,0,0,1-.323.323h-5.484V126.4h5.484a2.259,2.259,0,0,0,2.258-2.258v-13.3l-4.439-4.439Z" transform="translate(-63.333)" fill="#4b4b4b"/></g></svg>'
|
||||
}
|
||||
|
||||
export const graph = {
|
||||
name: 'graph',
|
||||
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 21.744"><g transform="translate(0)"><g transform="translate(0 0)"><path d="M18.772,15.578a2.718,2.718,0,0,0-.427-.368,3.629,3.629,0,0,0-3.291-.5,3.445,3.445,0,0,0-.962.5c-.07.051-.139.1-.2.161a2.335,2.335,0,0,0-.23.207.3.3,0,0,0-.047.051c-.011.013-.027.028-.036.042a1.611,1.611,0,0,0-.163.19L7.039,12.133a8.04,8.04,0,0,1,8.352-5.007h0a3.681,3.681,0,0,0,.93.133h.046a3.633,3.633,0,0,0,2.008-.605,3.57,3.57,0,0,0,.926-.9A3.63,3.63,0,1,0,13.368,1.57a3.491,3.491,0,0,0-.38.71,3.589,3.589,0,0,0-.26,1.35c0,.065,0,.125,0,.19a4.146,4.146,0,0,0,.051.459,3.721,3.721,0,0,0,.125.486L6.369,8.542a3.546,3.546,0,0,0-.649-.59,3.629,3.629,0,0,0-4.2,0,3.675,3.675,0,0,0-.894.9,3.483,3.483,0,0,0-.38.71,3.35,3.35,0,0,0-.137.41,3.563,3.563,0,0,0-.123.949v.19a3.57,3.57,0,0,0,.038.38.635.635,0,0,0,.013.08,3.641,3.641,0,0,0,.634,1.469h0a3.7,3.7,0,0,0,.934.894,3.606,3.606,0,0,0,2.008.607,3.732,3.732,0,0,0,.55-.038l-.044.036a8.037,8.037,0,0,1,8.6,4.556v-.021a3.606,3.606,0,0,0,2.836,2.61,3.472,3.472,0,0,0,1.26,0,3.629,3.629,0,0,0,2.879-2.58.228.228,0,0,0,0-.038,3.606,3.606,0,0,0-.6-3.111,2.769,2.769,0,0,0-.344-.393M14.129,3.515a2.19,2.19,0,0,1,.254-.928,2.323,2.323,0,0,1,.885-.907A2.24,2.24,0,0,1,16.359,1.4a2.206,2.206,0,0,1,1.1.285,2.234,2.234,0,0,1,.886.909,2.179,2.179,0,0,1,.252,1.038,2.213,2.213,0,0,1-.306,1.116,2.181,2.181,0,0,1-.949.888,2.255,2.255,0,0,1-.983.23h-.04a2.158,2.158,0,0,1-.949-.228,2.278,2.278,0,0,1-.569-.406,1.912,1.912,0,0,1-.156-.171,2.314,2.314,0,0,1-.224-.313.078.078,0,0,1-.015-.027,2.226,2.226,0,0,1-.287-1.091.76.76,0,0,1,0-.114M2.638,12.921a2.24,2.24,0,0,1-.731-.569,2.327,2.327,0,0,1-.22-.307,2.24,2.24,0,0,1-.3-1.118,1.122,1.122,0,0,1,0-.114,2.183,2.183,0,0,1,.258-.941,2.316,2.316,0,0,1,.885-.909,2.278,2.278,0,0,1,1.09-.283,2.232,2.232,0,0,1,1.5.59,2.19,2.19,0,0,1,.437.55.313.313,0,0,1,.038.059,2.1,2.1,0,0,1,.207.562,2.149,2.149,0,0,1,.053.484,2.056,2.056,0,0,1-.057.488,2.105,2.105,0,0,1-.226.6.277.277,0,0,1-.017.028,2.183,2.183,0,0,1-.435.535,2.158,2.158,0,0,1-.514.349,2.265,2.265,0,0,1-.985.23,2.23,2.23,0,0,1-.983-.23m15.8,5.44a2.219,2.219,0,0,1-.642,1.346,2.169,2.169,0,0,1-.22.19,2.261,2.261,0,0,1-.746.38,2.175,2.175,0,0,1-1.26-.019,2.12,2.12,0,0,1-.917-.549A2.185,2.185,0,0,1,14,18.1h0a.9.9,0,0,1,.015-.2c.015-.066,0-.076.015-.116a1.575,1.575,0,0,1,.055-.241,1.993,1.993,0,0,1,.2-.48c.011-.025.027-.049.04-.074a2.291,2.291,0,0,1,.321-.4h0c.034-.034.066-.063.1-.093a1.627,1.627,0,0,1,.142-.114,1.693,1.693,0,0,1,.2-.139,2.253,2.253,0,0,1,2.245,0,2.446,2.446,0,0,1,.45.345,2.371,2.371,0,0,1,.323.412,2.266,2.266,0,0,1,.319,1.388" transform="translate(0.01 0)"/><path d="M78.35,12.262a.338.338,0,0,0,.319.222h.8v.845a.2.2,0,0,0,.013.085.325.325,0,0,0,.173.216.268.268,0,0,0,.156.046.294.294,0,0,0,.1-.019.34.34,0,0,0,.245-.328v-.845h.9a.345.345,0,0,0,.347-.344.355.355,0,0,0-.156-.287.349.349,0,0,0-.19-.057h-.9v-.848a.325.325,0,0,0-.082-.216.305.305,0,0,0-.044-.042l-.038-.023-.068-.036a.237.237,0,0,0-.112-.023.3.3,0,0,0-.156.038.19.19,0,0,0-.055.036.323.323,0,0,0-.129.268V11.8h-.8a.363.363,0,0,0-.19.057.38.38,0,0,0-.123.167.247.247,0,0,0-.027.12.3.3,0,0,0,.011.084.315.315,0,0,0,.015.038" transform="translate(-63.459 -8.595)"/></g></g></svg>'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,7 @@ declare var UIkit: any;
|
|||
[ngClass]="classBody">
|
||||
<div [ngClass]="classTitle" class="uk-modal-title" [hidden]=!alertHeader>
|
||||
<button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button>
|
||||
<h4 *ngIf="!isDashboard" class="modal-title">{{alertTitle}}</h4>
|
||||
<h6 *ngIf="isDashboard" class="uk-text-bold">{{alertTitle}}</h6>
|
||||
<h4 class="modal-title">{{alertTitle}}</h4>
|
||||
</div>
|
||||
<div class="uk-margin">
|
||||
<div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div>
|
||||
|
|
@ -26,8 +25,7 @@ declare var UIkit: any;
|
|||
<div [ngClass]="(choice)?'uk-width-1-2':'uk-width-1-1'">
|
||||
<div *ngIf="alertFooter" class="uk-flex-right uk-grid uk-grid-small" uk-grid>
|
||||
<span *ngIf="okButton" [class.uk-flex-last]="!okButtonLeft">
|
||||
<button class="uk-button" [class.uk-button-primary]="!isDashboard"
|
||||
[class.uk-button-secondary]="isDashboard" [class.outlined]="isDashboard" [disabled]="okDisabled"
|
||||
<button class="uk-button uk-button-primary" [disabled]="okDisabled"
|
||||
[class.uk-disabled]="okDisabled" (click)="ok()">{{okButtonText}}</button>
|
||||
</span>
|
||||
<span *ngIf="cancelButton">
|
||||
|
|
@ -50,7 +48,6 @@ export class AlertModal {
|
|||
@Input() classTitle: string = "";
|
||||
@Input() classBody: string = "";
|
||||
@Input() large: boolean = false;
|
||||
isDashboard: boolean = properties.isDashboard;
|
||||
/**
|
||||
* Caption for the title.
|
||||
*/
|
||||
|
|
@ -118,7 +115,7 @@ export class AlertModal {
|
|||
/**
|
||||
* Value will be emitted if @choice is true
|
||||
*/
|
||||
public select: boolean = false;
|
||||
public select: boolean = true;
|
||||
/**
|
||||
* Emitted when a ok button was clicked
|
||||
* or when Ok method is called.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
declare var UIkit;
|
||||
|
||||
export type Status = 'danger' | 'success' | 'warning';
|
||||
export type Position = 'bottom-right' | 'bottom-left' | 'bottom-center';
|
||||
|
||||
export class NotificationHandler {
|
||||
private static DEFAULT_TIMEOUT: number = 60000;
|
||||
private static DEFAULT_STATUS: Status = 'success';
|
||||
private static DEFAULT_POSITION: Position = 'bottom-right';
|
||||
|
||||
public static rise(message: string, status: Status = this.DEFAULT_STATUS, position: Position = this.DEFAULT_POSITION) {
|
||||
UIkit.notification(message, {
|
||||
status: status,
|
||||
timeout: this.DEFAULT_TIMEOUT,
|
||||
pos: position
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<span><span>Visit repository to deposit</span><span uk-icon="arrow-right"></span></span>
|
||||
</a>
|
||||
</span>
|
||||
<div class="uk-text-small">
|
||||
<div class="uk-text-small uk-margin-small-bottom">
|
||||
<span *ngIf="type" class="uk-text-capitalize type">{{type}}</span>
|
||||
<span *ngIf="type && beforeTitle.length > 0"> . </span>
|
||||
<span *ngIf="beforeTitle.length > 0" class="uk-text-capitalize">
|
||||
|
|
@ -165,8 +165,8 @@
|
|||
</div>
|
||||
<!-- Authors -->
|
||||
<div *ngIf="result.authors" class="uk-flex uk-margin-small-bottom">
|
||||
<div class="uk-text-muted">Authors:</div>
|
||||
<showAuthors class="space" [authors]="result.authors" [authorsLimit]=10 [modal]="modal"
|
||||
<span class="uk-text-muted">Authors: </span>
|
||||
<showAuthors [authors]="result.authors" [authorsLimit]=10 [modal]="modal"
|
||||
[showAll]=false [small]="false"></showAuthors>
|
||||
</div>
|
||||
<!-- Identifiers -->
|
||||
|
|
|
|||
|
|
@ -1,26 +1,8 @@
|
|||
/*.section {*/
|
||||
/*position: relative;*/
|
||||
/*height: auto;*/
|
||||
/*display: flex;*/
|
||||
/*}*/
|
||||
|
||||
/*.section [top] {*/
|
||||
/* !*height: 80vh;*!*/
|
||||
/* !*border: 1px solid rebeccapurple;*!*/
|
||||
/*}*/
|
||||
|
||||
/*.section [top] {*/
|
||||
/* top: 0;*/
|
||||
/* height: auto;*/
|
||||
/* !*border: 1px solid deeppink;*!*/
|
||||
/*}*/
|
||||
|
||||
[left] {
|
||||
position: -webkit-sticky; /* Safari */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
/*border: 1px solid red;*/
|
||||
}
|
||||
|
||||
[left] .imgContainer {
|
||||
|
|
@ -29,22 +11,6 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
/*border: 1px solid greenyellow;*/
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
[left] .imgContainer {
|
||||
top: 5%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
[left] > * {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
[scroll] > * {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
[left] img {
|
||||
|
|
@ -61,5 +27,23 @@
|
|||
|
||||
[scroll] > * {
|
||||
height: 60vh;
|
||||
/* border: 1px solid darkorange;*/
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
[left] {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
[left] .imgContainer {
|
||||
top: 5%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
[left] > * {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
[scroll] > * {
|
||||
height: 50vh;
|
||||
}
|
||||
}
|
||||
|
|
@ -42,7 +42,6 @@ export class SectionScrollComponent implements AfterViewInit {
|
|||
private map: Map<string, string> = null;
|
||||
private left: Map<string, HTMLElement> = new Map<string, HTMLElement>();
|
||||
private scroll: Map<string, HTMLElement> = new Map<string, HTMLElement>();
|
||||
private lastElementId: string = null;
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
|
@ -67,8 +66,9 @@ export class SectionScrollComponent implements AfterViewInit {
|
|||
threshold: this.buildThresholdList()
|
||||
};
|
||||
Array.from(this.map.values()).forEach(value => {
|
||||
this.left.set(value, document.getElementById(value));
|
||||
this.left.get(value).style.display = 'none';
|
||||
let element = document.getElementById(value);
|
||||
element.style.display = 'none';
|
||||
this.left.set(value, element);
|
||||
})
|
||||
Array.from(this.map.keys()).forEach(key => {
|
||||
this.scroll.set(key, document.getElementById(key));
|
||||
|
|
@ -77,9 +77,7 @@ export class SectionScrollComponent implements AfterViewInit {
|
|||
entries.forEach((entry) => {
|
||||
entry.target['style'].opacity = String(entry.intersectionRatio);
|
||||
let id = this.map.get(entry.target.id);
|
||||
if (this.left.has(id) && this.lastElementId !== id) {
|
||||
if(entry.isIntersecting) {
|
||||
this.lastElementId = id;
|
||||
Array.from(this.left.keys()).forEach(element => {
|
||||
if (element !== id) {
|
||||
this.left.get(element).style.display = 'none';
|
||||
|
|
@ -88,8 +86,6 @@ export class SectionScrollComponent implements AfterViewInit {
|
|||
}
|
||||
});
|
||||
}
|
||||
// this.left.get(id).parentElement.style.opacity = String(entry.intersectionRatio);
|
||||
}
|
||||
});
|
||||
}, options);
|
||||
Array.from(this.scroll.values()).forEach(target => {
|
||||
|
|
|
|||
|
|
@ -315,6 +315,15 @@ export class StringUtils {
|
|||
return Validators.pattern(StringUtils.urlRegex);
|
||||
}
|
||||
|
||||
public static validatorType(options: string[]): ValidatorFn {
|
||||
return (control: AbstractControl): { [key: string]: boolean } | null => {
|
||||
if (options.filter(type => type === control.value).length === 0) {
|
||||
return {'type': false};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
public static validRoute(pages: any[], field: string, initial: string = null): ValidatorFn {
|
||||
return (control: AbstractControl): ValidationErrors | null => {
|
||||
if(control.value) {
|
||||
|
|
|
|||
|
|
@ -14,23 +14,10 @@ export interface TabIcon {
|
|||
|
||||
@Component({
|
||||
selector: 'my-tab',
|
||||
// styles: [
|
||||
// `
|
||||
// .pane{
|
||||
// padding: 1em;
|
||||
// }
|
||||
// `
|
||||
// ],
|
||||
template: `
|
||||
<!-- [class]="active ? 'uk-active' : ''" [hidden]="!active"-->
|
||||
<!-- <div [class]="active ? 'uk-active' : ''" [hidden]="!active">-->
|
||||
<div class="pane">
|
||||
<div>
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
|
||||
<!-- <div [hidden]="!active" class="pane">-->
|
||||
<!-- <ng-content></ng-content>-->
|
||||
<!-- </div>-->
|
||||
`
|
||||
})
|
||||
export class TabComponent {
|
||||
|
|
|
|||
|
|
@ -2,44 +2,29 @@
|
|||
* The main component that renders single TabComponent
|
||||
* instances.
|
||||
*/
|
||||
|
||||
import {
|
||||
Component,
|
||||
ContentChildren,
|
||||
QueryList,
|
||||
AfterContentInit, Output, EventEmitter,
|
||||
} from '@angular/core';
|
||||
|
||||
import { TabComponent } from './tab.component';
|
||||
import {Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core';
|
||||
import {TabComponent} from './tab.component';
|
||||
|
||||
@Component({
|
||||
selector: 'my-tabs',
|
||||
template: `
|
||||
<ul [class]="(tabs.toArray().length > 2 ? 'uk-visible@m' : '') + ' uk-tab main-tabs uk-margin-remove uk-child-width-expand'"
|
||||
uk-tab uk-switcher="connect: .tabs-content" uk-height-match="target: .tab-header">
|
||||
<li *ngFor="let tab of tabs.toArray(); let i=index"
|
||||
[class]="'uk-padding-remove '+ tab.customClass + (i == 0?' uk-active':'')"
|
||||
(click)="selectTab(tab)">
|
||||
<a class="uk-width-1-1 uk-height-1-1" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
|
||||
<ul class="uk-tab" [ngClass]="customClass" uk-tab="connect: .tabs-content">
|
||||
<li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="i === 0" (click)="selectTab(tab)">
|
||||
<a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
|
||||
<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon" [fill]="tab.tabIcon" class="uk-margin-small-bottom"></icon>
|
||||
<div class="tab-header">{{tab.title}}</div>
|
||||
<div>{{tab.title}}</div>
|
||||
<div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
|
||||
<div *ngIf="tab.customClass == 'statistics'" class="number">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
|
||||
<path d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div [class]="(tabs.toArray().length > 2 ? 'uk-visible@m' : '') + ' uk-switcher tabs-content main-tabs-content'">
|
||||
<div class="uk-switcher tabs-content">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class TabsComponent {
|
||||
|
||||
@Input()
|
||||
public customClass: string;
|
||||
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
|
||||
@Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue