MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'new-theme' of code-repo.d4science.org:MaDgIK/openaire-library into new-theme

This commit is contained in:
argirok 2022-03-09 10:52:29 +02:00
parent 9222deed7b 53a0cd733b
commit 7d5ac5eaf9
49 changed files with 778 additions and 959 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
contact-us/contact-us.component.html
View File

@ -1,62 +1,72 @@
<h1 *ngIf="formTitle" class="uk-margin-auto">{{formTitle}}</h1> <h1 *ngIf="formTitle" class="uk-margin-auto">{{formTitle}}</h1>
<ng-content select="[page-title]"></ng-content> <ng-content select="[page-title]"></ng-content>
<ng-content select="[page-description]"></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" <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"
role="alert">{{errorMessage}}</div> [class.uk-grid-column-small]="smallForm" [formGroup]="contactForm" uk-grid>
<div class="uk-margin-top" uk-grid [formGroup]="contactForm"> <div *ngIf="contactForm.get('name')">
<div *ngIf="contactForm.get('name')" class="uk-width-1-2@s uk-margin-medium-top">
<input class="uk-input" type="text" placeholder="Name *" formControlName="name" <input class="uk-input" type="text" placeholder="Name *" formControlName="name"
[class.uk-form-danger]="contactForm.get('name').invalid && contactForm.get('name').touched"> [class.uk-form-danger]="contactForm.get('name').invalid && contactForm.get('name').touched">
</div> </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" <input class="uk-input" type="text" placeholder="Surname *" formControlName="surname"
[class.uk-form-danger]="contactForm.get('surname').invalid && contactForm.get('surname').touched"> [class.uk-form-danger]="contactForm.get('surname').invalid && contactForm.get('surname').touched">
</div> </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" <input class="uk-input" type="text" placeholder="Email *" formControlName="email"
[class.uk-form-danger]="contactForm.get('email').invalid && contactForm.get('email').touched"> [class.uk-form-danger]="contactForm.get('email').invalid && contactForm.get('email').touched">
</div> </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" <input class="uk-input" type="text" placeholder="Job Title *" formControlName="job"
[class.uk-form-danger]="contactForm.get('job').invalid && contactForm.get('job').touched"> [class.uk-form-danger]="contactForm.get('job').invalid && contactForm.get('job').touched">
</div> </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" <input class="uk-input" type="text" placeholder="Affiliation *" formControlName="affiliation"
[class.uk-form-danger]="contactForm.get('affiliation').invalid && contactForm.get('affiliation').touched"> [class.uk-form-danger]="contactForm.get('affiliation').invalid && contactForm.get('affiliation').touched">
</div> </div>
<div *ngIf="contactForm.get('community')" class="uk-width-1-2@s uk-margin-medium-top"> <div *ngIf="contactForm.get('community')">
<input class="uk-input uk-width-1" type="text" placeholder="Research Community or Infrastructure *" formControlName="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"> [class.uk-form-danger]="contactForm.get('community').invalid && contactForm.get('community').touched">
</div> </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" <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"> [class.uk-form-danger]="contactForm.get('organization').invalid && contactForm.get('organization').touched">
</div> </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"> <select class="uk-select uk-width-1-1" formControlName="organizationType">
<option [value]="''" hidden selected>Organization Type *</option> <option [value]="''" hidden selected>Organization Type *</option>
<option *ngFor="let option of organizationTypes" [value]="option">{{option}}</option> <option *ngFor="let option of organizationTypes" [value]="option">{{option}}</option>
</select> </select>
</div> </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" <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"> [class.uk-form-danger]="contactForm.get('subject').invalid && contactForm.get('subject').touched">
</div> </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" <textarea rows="4" class="uk-textarea" placeholder="Comments *" formControlName="message"
[class.uk-form-danger]="contactForm.get('message').invalid && contactForm.get('message').touched"> [class.uk-form-danger]="contactForm.get('message').invalid && contactForm.get('message').touched">
</textarea> </textarea>
</div> </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" <textarea rows="4" class="uk-textarea" placeholder="Description *" formControlName="description"
[class.uk-form-danger]="contactForm.get('description').invalid && contactForm.get('description').touched"> [class.uk-form-danger]="contactForm.get('description').invalid && contactForm.get('description').touched">
</textarea> </textarea>
</div> </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 (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey">
</re-captcha> </re-captcha>
</div> </div>
<div class="uk-margin-medium-top uk-width-1-1"> <div class="uk-flex uk-flex-center" [class.uk-width-1-1]="smallForm" [class.uk-flex-column]="!smallForm">
<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-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>
</div> </div>

25
contact-us/contact-us.component.ts
View File

@ -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 {FormGroup} from '@angular/forms';
import {EnvProperties} from "../utils/properties/env-properties"; import {EnvProperties} from "../utils/properties/env-properties";
import {Observable} from "rxjs"; import {properties} from "../../../environments/environment";
import {map, startWith} from "rxjs/operators";
@Component({ @Component({
selector: 'contact-us', selector: 'contact-us',
@ -10,18 +9,16 @@ import {map, startWith} from "rxjs/operators";
}) })
export class ContactUsComponent { export class ContactUsComponent {
@Input() @Input() public contactForm: FormGroup;
public contactForm: FormGroup; @Input() public formTitle: string;
@Input() formTitle: string; @Input() public organizationTypes: string[];
@Input() properties: EnvProperties; @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>(); @Output() sendEmitter: EventEmitter<any> = new EventEmitter<any>();
@Input() errorMessage; public properties: EnvProperties = properties;
@Input()
public organizationTypes: string[];
@Input()
public right: boolean = true;
@Input()
public buttonClass: string;
public send() { public send() {
this.sendEmitter.emit({ this.sendEmitter.emit({

3
contact-us/contact-us.module.ts
View File

@ -7,11 +7,12 @@ import {ReactiveFormsModule} from "@angular/forms";
import {MatAutocompleteModule} from "@angular/material/autocomplete"; import {MatAutocompleteModule} from "@angular/material/autocomplete";
import {RecaptchaModule} from "ng-recaptcha"; import {RecaptchaModule} from "ng-recaptcha";
import {SafeHtmlPipeModule} from "../utils/pipes/safeHTMLPipe.module"; import {SafeHtmlPipeModule} from "../utils/pipes/safeHTMLPipe.module";
import {LoadingModule} from "../utils/loading/loading.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, CommonModule, RouterModule,
ReactiveFormsModule, MatAutocompleteModule, RecaptchaModule, SafeHtmlPipeModule], ReactiveFormsModule, MatAutocompleteModule, RecaptchaModule, SafeHtmlPipeModule, LoadingModule],
declarations: [ declarations: [
ContactUsComponent ContactUsComponent
], ],

16
dashboard/menu/menu.component.html
View File

@ -39,7 +39,7 @@
</ul> </ul>
</div> </div>
</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" 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> uk-grid>
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
@ -106,9 +106,13 @@
</div> </div>
</li> </li>
</ul> </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"> 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>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> </div>
</div> </div>
@ -118,8 +122,14 @@
<form *ngIf="menuItemForm" [formGroup]="menuItemForm" class="uk grid uk-child-width-1-1" uk-grid> <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" <div dashboard-input [formInput]="menuItemForm.get('title')" type="text" label="Name"
placeholder="Write a name"></div> 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" <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 --> <!-- Workflow for EXTERNAL -->
<div dashboard-input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')" <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> [validators]="menuItemForm.get('url').validator" type="URL" label="URL" placeholder="Write a URL"></div>

8
dashboard/menu/menu.component.ts
View File

@ -132,13 +132,17 @@ export class MenuComponent implements OnInit {
); );
} }
getTypeOptions() { getTypeOptions(isFeatured: boolean = false) {
if(this.isChild) { if(this.isChild) {
return this.typeOptions; return this.typeOptions;
} else {
if(isFeatured) {
return this.typeOptions;
} else { } else {
return this.typeOptions.concat(this.rootOnlyTypeOptions); return this.typeOptions.concat(this.rootOnlyTypeOptions);
} }
} }
}
getActiveRootItem(id: string): MenuItem { getActiveRootItem(id: string): MenuItem {
return this.rootMenuItems.find(element => element['_id'] == id); return this.rootMenuItems.find(element => element['_id'] == id);
@ -247,6 +251,7 @@ export class MenuComponent implements OnInit {
route: this._fb.control(""), route: this._fb.control(""),
url: this._fb.control(""), url: this._fb.control(""),
isEnabled: this._fb.control(""), isEnabled: this._fb.control(""),
isFeatured: this._fb.control(false),
parentItemId: this._fb.control(isChild ? this.activeRootMenuId : null) parentItemId: this._fb.control(isChild ? this.activeRootMenuId : null)
}); });
this.isChild = isChild; this.isChild = isChild;
@ -261,6 +266,7 @@ export class MenuComponent implements OnInit {
type: this._fb.control(menuItem['type'],Validators.required), type: this._fb.control(menuItem['type'],Validators.required),
route: this._fb.control(menuItem.route, (menuItem['type'] == "internal") ? [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()] : []), 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']) parentItemId: this._fb.control(menuItem['parentItemId'])
}); });
this.isChild = isChild; this.isChild = isChild;

76
dashboard/sharedComponents/page-content/page-content.component.ts
View File

@ -1,82 +1,24 @@
import { import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from "@angular/core";
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
HostListener,
OnDestroy,
ViewChild
} from "@angular/core";
import {Observable, Subscription} from "rxjs";
import {distinctUntilChanged} from "rxjs/operators";
@Component({ @Component({
selector: '[page-content]', selector: '[page-content]',
template: ` template: `
<div id="page_content"> <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> <ng-content select="[header]"></ng-content>
</div> </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> <ng-content select="[inner]"></ng-content>
</div> </div>
</div> </div>
` `
}) })
export class PageContentComponent implements OnDestroy, AfterViewInit{ export class PageContentComponent implements OnInit{
public height = 0; public offset: string;
private subscription: Subscription;
@ViewChild('header') header: ElementRef;
constructor(private cdr: ChangeDetectorRef) { ngOnInit() {
} this.offset = getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height');
@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();
}
} }
} }

45
dashboard/sharedComponents/sidebar/sideBar.component.html
View File

@ -1,15 +1,5 @@
<aside id="sidebar_main"> <aside id="sidebar_main">
<div id="sidebar_content"> <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"> <div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top">
<ul class="uk-list uk-nav-parent-icon" uk-nav> <ul class="uk-list uk-nav-parent-icon" uk-nav>
<ng-template ngFor [ngForOf]="items" let-item let-i="index"> <ng-template ngFor [ngForOf]="items" let-item let-i="index">
@ -17,32 +7,15 @@
[class.uk-open]="isTheActiveMenuItem(item)" [class.uk-open]="isTheActiveMenuItem(item)"
[class.uk-parent]="item.items.length > 1"> [class.uk-parent]="item.items.length > 1">
<a *ngIf="item.items.length <= 1" [routerLink]="(item.route)?item.route:null" <a *ngIf="item.items.length <= 1" [routerLink]="(item.route)?item.route:null"
[queryParams]=item.params [queryParamsHandling]="queryParamsHandling" class="uk-text-center"> [title]="item.title"
<div *ngIf="item.icon && !open" class="uk-margin-auto"> [queryParams]=item.params [queryParamsHandling]="queryParamsHandling">
<span [innerHTML]="satinizeHTML(item.icon)"></span> <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>
<!-- <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> </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> </li>
</ng-template> </ng-template>
</ul> </ul>
@ -63,9 +36,9 @@
</div> </div>
</ng-template> </ng-template>
</div> </div>
<div *ngIf="!isSmallScreen" id="sidebar_switcher_toggle" class="clickable " <!-- <div *ngIf="!isSmallScreen" id="sidebar_switcher_toggle" class="clickable"
(click)="toggleOpen($event)"> (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-right; ratio: 1.5"></span>
<span class="uk-position-center" *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span> <span class="uk-position-center" *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span>
</div> </div>-->
</aside> </aside>

7
dashboard/sharedComponents/sidebar/sideBar.component.ts
View File

@ -11,16 +11,9 @@ import {LayoutService} from "./layout.service";
}) })
export class SideBarComponent implements OnInit { export class SideBarComponent implements OnInit {
@Input() items: MenuItem[] = []; @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() activeItem: string = '';
@Input() activeSubItem: string = ''; @Input() activeSubItem: string = '';
@Input() specialMenuItem: MenuItem = null; @Input() specialMenuItem: MenuItem = null;
@Input() searchParams = {};
@Input() queryParamsHandling = ""; @Input() queryParamsHandling = "";
properties; properties;

4
dashboard/sharedComponents/sidebar/sideBar.module.ts
View File

@ -5,12 +5,14 @@ import {RouterModule} from "@angular/router";
import {SideBarComponent} from './sideBar.component'; import {SideBarComponent} from './sideBar.component';
import {UrlPrefixModule} from "../../../utils/pipes/url-prefix.module"; import {UrlPrefixModule} from "../../../utils/pipes/url-prefix.module";
import {IconsModule} from "../../../utils/icons/icons.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
RouterModule, RouterModule,
UrlPrefixModule UrlPrefixModule,
IconsModule
], ],
declarations: [ declarations: [
SideBarComponent SideBarComponent

2
landingPages/dataProvider/dataProvider.component.html
View File

@ -499,7 +499,7 @@
</div> </div>
</div> </div>
</div> </div>
<feedback *ngIf="dataProviderInfo" [dataProviderInfo]="dataProviderInfo" <feedback *ngIf="dataProviderInfo && properties.reCaptchaSiteKey" [dataProviderInfo]="dataProviderInfo"
[properties]="properties" [entityType]="'content provider'" [fields]="feedbackFields" [properties]="properties" [entityType]="'content provider'" [fields]="feedbackFields"
[showForm]="showFeedback" (show)="showFeedback = $event"></feedback> [showForm]="showFeedback" (show)="showFeedback = $event"></feedback>
</div> </div>

2
landingPages/organization/organization.component.html
View File

@ -271,7 +271,7 @@
[texts]="pageContents['bottom']"></helper> [texts]="pageContents['bottom']"></helper>
</div> </div>
</div> </div>
<feedback *ngIf="organizationInfo" [organizationInfo]="organizationInfo" <feedback *ngIf="organizationInfo && properties.reCaptchaSiteKey" [organizationInfo]="organizationInfo"
[properties]="properties" [entityType]="'organization'" [fields]="feedbackFields" [properties]="properties" [entityType]="'organization'" [fields]="feedbackFields"
[showForm]="showFeedback" (show)="showFeedback = $event"></feedback> [showForm]="showFeedback" (show)="showFeedback = $event"></feedback>
</div> </div>

2
landingPages/project/project.component.html
View File

@ -795,7 +795,7 @@
</modal-alert> </modal-alert>
</div> </div>
</div> </div>
<feedback *ngIf="projectInfo" [projectInfo]="projectInfo" <feedback *ngIf="projectInfo && properties.reCaptchaSiteKey" [projectInfo]="projectInfo"
[properties]="properties" [entityType]="'project'" [title]="projectName" [fields]="feedbackFields" [properties]="properties" [entityType]="'project'" [title]="projectName" [fields]="feedbackFields"
[showForm]="showFeedback" (show)="showFeedback = $event"></feedback> [showForm]="showFeedback" (show)="showFeedback = $event"></feedback>
</div> </div>

2
landingPages/result/resultLanding.component.html
View File

@ -658,7 +658,7 @@
</div> </div>
</div> </div>
<feedback *ngIf="resultLandingInfo" [resultLandingInfo]="resultLandingInfo" <feedback *ngIf="resultLandingInfo && properties.reCaptchaSiteKey" [resultLandingInfo]="resultLandingInfo"
[properties]="properties" [entityType]="getTypeName()" [fields]="feedbackFields" [properties]="properties" [entityType]="getTypeName()" [fields]="feedbackFields"
[showForm]="showFeedback" (show)="showFeedback = $event;"></feedback> [showForm]="showFeedback" (show)="showFeedback = $event;"></feedback>
</div> </div>

2
landingPages/result/resultLanding.component.ts
View File

@ -23,7 +23,6 @@ import {Session} from "../../login/utils/helper.class";
import {AnnotationComponent} from "../annotation/annotation.component"; import {AnnotationComponent} from "../annotation/annotation.component";
import {ParsingFunctions} from "../landing-utils/parsingFunctions.class"; import {ParsingFunctions} from "../landing-utils/parsingFunctions.class";
import {ConnectHelper} from "../../connect/connectHelper"; import {ConnectHelper} from "../../connect/connectHelper";
import {$e} from "codelyzer/angular/styles/chars";
@Component({ @Component({
@ -86,7 +85,6 @@ export class ResultLandingComponent {
public warningMessage = ""; public warningMessage = "";
public errorMessage = ""; public errorMessage = "";
public showLoading: boolean = true; public showLoading: boolean = true;
public dashboard = properties.isDashboard;
public routerHelper: RouterHelper = new RouterHelper(); public routerHelper: RouterHelper = new RouterHelper();
public activeTab: string = null; public activeTab: string = null;

156
login/userMini.component.ts
View File

@ -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 {ActivatedRoute, Router} from '@angular/router';
import {Session, User} from './utils/helper.class'; import {Session, User} from './utils/helper.class';
import {RouterHelper} from '../utils/routerHelper.class'; import {RouterHelper} from '../utils/routerHelper.class';
@ -6,156 +6,64 @@ import {Subscriber} from "rxjs";
import {MenuItem} from "../sharedComponents/menu"; import {MenuItem} from "../sharedComponents/menu";
import {UserManagementService} from "../services/user-management.service"; import {UserManagementService} from "../services/user-management.service";
// declare var logoutClicked;
@Component({ @Component({
selector: 'user-mini', selector: 'user-mini',
template: ` template: `
<ng-container *ngIf="!dashboard">
<ul *ngIf="!mobileView" class="uk-navbar-nav" [class.uk-dark]="dark"> <ul *ngIf="!mobileView" class="uk-navbar-nav" [class.uk-dark]="dark">
<li class="uk-parent"> <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"> <svg height="60" width="60">
<circle cx="30" cy="30" r="20" stroke-width="2"></circle> <circle cx="30" cy="30" r="20" stroke-width="2"></circle>
<text *ngIf="firstLetters" x="50%" y="50%" text-anchor="middle" dy=".4em" <text x="50%" y="50%" text-anchor="middle" dy=".4em" font-size="16">
font-size="16"> {{firstLetters ? firstLetters : 'AN'}}
{{firstLetters}}
</text> </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> </svg>
</a> </a>
<a *ngIf="!loggedIn" class="loginLink" id="userMenu-parent" (click)="logIn()">Sign in <span <div class="uk-navbar-dropdown" uk-drop="pos: bottom-right">
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">
<ul class="uk-nav uk-navbar-dropdown-nav"> <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 "> <ng-container *ngFor="let item of userMenuItems ">
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization" [class.uk-active]="isTheActiveSubMenu(item)"> <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization"
<a *ngIf="item.route.length > 0" routerLink="{{item.route}}" [class.uk-active]="isTheActiveSubMenu(item)">
[queryParams]=item.params>{{item.title}}</a> <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}}" <a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}"
target="_blank">{{item.title}}</a> target="_blank">{{item.title}}</a>
</li> </li>
</ng-container> </ng-container>
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li> <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> </ul>
</div> </div>
<div id="logout1"></div> </ng-container>
</div>
</div>
</li> </li>
</ul> </ul>
</ng-container> <ul *ngIf="mobileView" class="uk-nav uk-nav-default">
<li>
<ng-container *ngIf="!dashboard">
<li *ngIf="mobileView" class="uk-nav-header uk-parent ">
<span *ngIf="loggedIn" class="uk-flex uk-flex-middle"> <span *ngIf="loggedIn" class="uk-flex uk-flex-middle">
<span>{{user.fullname + " "}}</span> <span>{{user.fullname + " "}}</span>
<span class="uk-margin-small-right uk-icon"><svg width="20" height="20" <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">
viewBox="0 0 20 20" <circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle>
xmlns="http://www.w3.org/2000/svg" <path fill="none" stroke="#000" stroke-width="1.1"
ratio="1"><circle fill="none" 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>
stroke="#000" </svg>
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> </span>
<span *ngIf="!loggedIn"> <a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
<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>
<ul *ngIf="loggedIn" class="uk-nav-sub"> <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 "> <ng-container *ngFor="let item of userMenuItems ">
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization"> <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" routerLink="{{item.route}}" (click)="closeCanvas()">{{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 && item.url.length > 0" (click)="closeCanvas()"
href="{{item.url}}">{{item.title}}</a>
</li> </li>
</ng-container> </ng-container>
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li> <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> </ul>
</li> </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> </ul>
</div>
</ng-container>
` `
}) })
export class UserMiniComponent implements OnInit, OnChanges { export class UserMiniComponent implements OnInit, OnChanges {
@ -164,7 +72,6 @@ export class UserMiniComponent implements OnInit, OnChanges {
public isAuthorized: boolean = false; public isAuthorized: boolean = false;
@Input() public mobileView: boolean = false; @Input() public mobileView: boolean = false;
public firstLetters: string = ""; public firstLetters: string = "";
@Input() public dashboard: boolean = false;
public server: boolean = true; public server: boolean = true;
public routerHelper: RouterHelper = new RouterHelper(); public routerHelper: RouterHelper = new RouterHelper();
@Input() userMenuItems; @Input() userMenuItems;
@ -172,7 +79,8 @@ export class UserMiniComponent implements OnInit, OnChanges {
@Input() logOutUrl; @Input() logOutUrl;
@Input() cookieDomain; @Input() cookieDomain;
@Input() dark: boolean = false; @Input() dark: boolean = false;
subscriptions = []; @Output() closeCanvasEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
private subscriptions = [];
constructor(private router: Router, private route: ActivatedRoute, private userManagementService: UserManagementService) { 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() { initUser() {
if (this.user) { if (this.user) {
this.loggedIn = true; this.loggedIn = true;
@ -225,11 +137,9 @@ export class UserMiniComponent implements OnInit, OnChanges {
isTheActiveSubMenu(menuItem: MenuItem): boolean { isTheActiveSubMenu(menuItem: MenuItem): boolean {
let currentRoute = this.router.url.split('?')[0]; let currentRoute = this.router.url.split('?')[0];
if (menuItem.route == currentRoute || menuItem.route == (currentRoute + "/") ) { return menuItem.route == currentRoute || menuItem.route == (currentRoute + "/");
return true;
}
return false;
} }
parseName() { parseName() {
this.firstLetters = ""; this.firstLetters = "";
if (this.user && this.user.firstname) { if (this.user && this.user.firstname) {

84
monitor/how/how.component.css
View File

@ -5,6 +5,8 @@
.how .first > div:first-child:after { .how .first > div:first-child:after {
content: "we"; content: "we";
font-size: 20px;
font-weight: 600;
text-align: center; text-align: center;
padding-bottom: 5%; padding-bottom: 5%;
position: absolute; position: absolute;
@ -19,17 +21,19 @@
.how .second > div:first-child { .how .second > div:first-child {
position: relative; position: relative;
padding: 0 22% 0 22%; padding: 0 10% 0 20%;
} }
.how .second > div:first-child:after { .how .second > div:first-child:after {
content: "and"; content: "and";
font-size: 20px;
font-weight: 600;
text-align: center; text-align: center;
padding-bottom: 5%; padding-bottom: 5%;
position: absolute; position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/2.svg"); background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/2.svg");
right: -10%; right: -17%;
top: 31%; top: 33%;
width: 30%; width: 30%;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -41,20 +45,22 @@
} }
.how .third > div:first-child { .how .third > div:first-child {
padding: 0 12% 0 12%; padding: 0 14% 0 13%;
} }
.how .third:after { .how .third:after {
content: "on which"; content: "on which";
font-size: 20px;
font-weight: 600;
padding-right: 30%; padding-right: 30%;
padding-top: 5%; padding-top: 5%;
padding-bottom: 5%; padding-bottom: 5%;
position: absolute; position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
bottom: 6%; bottom: -6%;
left: 6%; left: 13%;
transform: translateY(100%); transform: translateY(100%);
width: 55%; width: 140px;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -66,17 +72,19 @@
.how .fourth > div:first-child { .how .fourth > div:first-child {
position: relative; position: relative;
padding: 0 15% 0 15%; padding: 0 16% 0 16%;
} }
.how .fourth> div:first-child:after { .how .fourth> div:first-child:after {
content: "and"; content: "and";
font-size: 20px;
font-weight: 600;
text-align: center; text-align: center;
padding-bottom: 5%; padding-bottom: 5%;
position: absolute; position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/4.svg"); background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/4.svg");
left: -18%; left: -18%;
top: 35%; top: 36%;
width: 30%; width: 30%;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -84,7 +92,7 @@
} }
.how .fifth { .how .fifth {
padding: 10% 2% 0 2%; padding: 11% 2% 0 2%;
} }
.how .fifth > div:first-child { .how .fifth > div:first-child {
@ -93,6 +101,8 @@
.how .fifth > div:first-child:after { .how .fifth > div:first-child:after {
content: "We"; content: "We";
font-size: 20px;
font-weight: 600;
text-align: center; text-align: center;
padding-bottom: 5%; padding-bottom: 5%;
position: absolute; position: absolute;
@ -125,7 +135,7 @@
content: ""; content: "";
position: absolute; position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg"); background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg");
left: -20%; left: -26%;
top: -20%; top: -20%;
height: 70%; height: 70%;
width: 30%; width: 30%;
@ -136,32 +146,17 @@
.how .final > div:first-child:after { .how .final > div:first-child:after {
content: "We make visualizations, graphs, reports and deliver all in a customisable tool"; content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
font-size: 20px;
position: absolute; position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/how/circle.png"); top: 30%;
right: -220px; width: 250px;
top: -20%; padding: 8% 0 5% 0;
width: 300px;
padding: 8% 0 5% 220px;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom center; 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) { @media only screen and (max-width: 639px) {
.how .first { .how .first {
position: relative; position: relative;
@ -171,11 +166,11 @@
.how .first:after { .how .first:after {
content: "we"; content: "we";
text-align: center; text-align: center;
padding: 25px 105px 25px 0; padding: 10% 34% 10% 0;
position: absolute; position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 26%; left: 26%;
top: 72%; top: 79%;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -183,17 +178,17 @@
.how .second { .how .second {
position: relative; position: relative;
padding: 0 15% 30% 15%; padding: 0 10% 30% 10%;
} }
.how .second:after { .how .second:after {
content: "and"; content: "and";
text-align: center; text-align: center;
padding: 25px 105px 25px 0; padding: 10% 34% 10% 0;
position: absolute; position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 25%; left: 25%;
top: 70%; top: 80%;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -206,12 +201,13 @@
.how .third:after { .how .third:after {
content: "on which"; content: "on which";
font-weight: bold;
text-align: center; text-align: center;
padding: 25px 105px 25px 0; padding: 10% 41% 10% 0;
position: absolute; position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 17%; left: 15%;
top: 75%; top: 83%;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -229,7 +225,7 @@
.how .fourth:after { .how .fourth:after {
content: "and"; content: "and";
text-align: center; text-align: center;
padding: 25px 105px 25px 0; padding: 10% 34% 10% 0;
position: absolute; position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 26%; left: 26%;
@ -247,7 +243,7 @@
.how .fifth:after { .how .fifth:after {
content: "We"; content: "We";
text-align: center; text-align: center;
padding: 25px 105px 25px 0; padding: 10% 34% 10% 0;
position: absolute; position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg");
left: 27%; left: 27%;
@ -277,8 +273,8 @@
content: ""; content: "";
position: absolute; position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg"); background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg");
left: 32%; left: 34%;
top: -80%; top: -70%;
height: 70%; height: 70%;
width: 30%; width: 30%;
background-size: contain; background-size: contain;
@ -288,12 +284,12 @@
.how .final > div:first-child:after { .how .final > div:first-child:after {
content: "We make visualizations, graphs, reports and deliver all in a customisable tool"; content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
text-align: center;
position: absolute; position: absolute;
background-image: url("~src/assets/common-assets/monitor-assets/how/circle.png");
left: -62%; left: -62%;
top: 85%; top: 85%;
width: 300px; width: 300px;
padding: 12% 0 0 70%; padding: 12% 0 0 54%;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;

20
monitor/how/how.component.ts
View File

@ -3,32 +3,32 @@ import {Component} from "@angular/core";
@Component({ @Component({
selector: 'how', selector: 'how',
template: ` 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-flex uk-flex-wrap">
<div class="uk-width-1-3@s first"> <div class="uk-width-1-3@s first" uk-scrollspy-class>
<div> <div>
<img src="assets/common-assets/monitor-assets/how/1.png" loading="lazy"> <img src="assets/common-assets/monitor-assets/how/1.png" loading="lazy">
</div> </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 <span class="uk-text-uppercase uk-text-bold">Starting</span> from existing<br>research-related data sources
</div> </div>
</div> </div>
<div class="uk-width-1-3@s second"> <div class="uk-width-1-3@s second" uk-scrollspy-class>
<div> <div>
<img src="assets/common-assets/monitor-assets/how/2.png" loading="lazy"> <img src="assets/common-assets/monitor-assets/how/2.png" loading="lazy">
</div> </div>
</div> </div>
<div class="uk-width-1-3@s third"> <div class="uk-width-1-3@s third" uk-scrollspy-class>
<div> <div>
<img src="assets/common-assets/monitor-assets/how/3.png" loading="lazy"> <img src="assets/common-assets/monitor-assets/how/3.png" loading="lazy">
</div> </div>
<div class="uk-text-center"> <div class="uk-text-center uk-text-large">
build an open, global<br>and trusted Research graph build an open, global<br>and trusted Research graph
</div> </div>
</div> </div>
</div> </div>
<div class="uk-flex uk-flex-wrap"> <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> <div>
<img src="assets/common-assets/monitor-assets/how/4.png" loading="lazy"> <img src="assets/common-assets/monitor-assets/how/4.png" loading="lazy">
</div> </div>
@ -37,7 +37,7 @@ import {Component} from "@angular/core";
<span class="uk-text-primary">Open Science Indicators</span> <span class="uk-text-primary">Open Science Indicators</span>
</div> </div>
</div> </div>
<div class="uk-width-1-3@s fifth"> <div class="uk-width-1-3@s fifth" uk-scrollspy-class>
<div> <div>
<img src="assets/common-assets/monitor-assets/how/5.png" loading="lazy"> <img src="assets/common-assets/monitor-assets/how/5.png" loading="lazy">
</div> </div>
@ -46,7 +46,7 @@ import {Component} from "@angular/core";
<span class="uk-text-primary">Collaboration Indicators</span> <span class="uk-text-primary">Collaboration Indicators</span>
</div> </div>
</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> <div>
<img src="assets/common-assets/monitor-assets/how/6.png" loading="lazy"> <img src="assets/common-assets/monitor-assets/how/6.png" loading="lazy">
</div> </div>
@ -58,7 +58,7 @@ import {Component} from "@angular/core";
</div> </div>
</div> </div>
</div> </div>
<div class="final"> <div class="final" uk-scrollspy-class>
<div> <div>
<img src="assets/common-assets/monitor-assets/how/7.png" loading="lazy"> <img src="assets/common-assets/monitor-assets/how/7.png" loading="lazy">
</div> </div>

10
searchPages/find/searchAll.component.html
View File

@ -1,12 +1,11 @@
<div uk-height-viewport="offset-top: true;offset-bottom: 60" style="box-sizing: border-box; " <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"> 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-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 <advanced-search-form
entityType="all" entityType="all"
@ -21,7 +20,6 @@
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>

91
searchPages/searchUtils/newSearchPage.component.html
View File

@ -13,7 +13,8 @@
<ng-container *ngFor="let type of resultTypes.values; let i = index; let end = last; "> <ng-container *ngFor="let type of resultTypes.values; let i = index; let end = last; ">
<ng-container *ngIf="type.selected"> <ng-container *ngIf="type.selected">
<span class="uk-width-auto"> <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="filter-tag uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{type.name}}</span> <span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
<icon name="close" flex="true" ratio="0.7"></icon> <icon name="close" flex="true" ratio="0.7"></icon>
@ -41,8 +42,10 @@
<ng-container *ngFor="let filter of filters "> <ng-container *ngFor="let filter of filters ">
<ng-container *ngIf="filter.countSelectedValues > 0"> <ng-container *ngIf="filter.countSelectedValues > 0">
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; "> <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"> <span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
<a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)" [class.uk-disabled]="disabled"> 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="filter-tag uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{value.name}}</span> <span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
<icon name="close" flex="true" ratio="0.7"></icon> <icon name="close" flex="true" ratio="0.7"></icon>
@ -68,7 +71,8 @@
class="uk-margin-top" role="alert"> class="uk-margin-top" role="alert">
<loading></loading> <loading></loading>
</div> </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"> class="uk-margin-top uk-text-meta">
<span *ngIf="searchUtils.refineStatus == errorCodes.NONE">No filters available</span> <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> <span *ngIf="searchUtils.refineStatus != errorCodes.NONE" class="uk-text-warning">Filters temporarily unavailable. Please try again later.</span>
@ -104,17 +108,17 @@
</ng-template> </ng-template>
<!-- TODO - Kostis Clean up --> <!-- TODO - Kostis Clean up -->
<div *ngIf="!includeOnlyResultsAndFilter" [class]="usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ? <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 ' + (+ (stickyForm?'':' uk-section') +' uk-padding-remove-bottom uk-padding-remove-top ' +
((usedBy == 'deposit' || usedBy == 'orcid') ? ' 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 '+ [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') ? (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
' uk-position-relative ' :(' uk-section ' ))+'}':null)"> ' 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 <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 ? + (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId')?
' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section' : '') ' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section uk-section-small' : '')
+(simpleView?'':' advancedSearchFormBackground ')"> +(simpleView?'':' advancedSearchFormBackground ')">
<!-- TODO - Kostis until here--> <!-- TODO - Kostis until here-->
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-bottom"> <div class="uk-padding-small uk-padding-remove-bottom">
@ -122,7 +126,9 @@
</div> </div>
</div> </div>
<div class="uk-position-relative"> <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 <advanced-search-form
[entityType]="entityType" [entityType]="entityType"
[fieldIds]="fieldIds" [fieldIds]="fieldIds"
@ -132,8 +138,7 @@
[isDisabled]="disabled" [isDisabled]="disabled"
[simpleSearchLink]="simpleSearchLink" [simpleSearchLink]="simpleSearchLink"
[advancedSearchLink]="advancedSearchLink" [advancedSearchLink]="advancedSearchLink"
[advancedSearchLinkParameters] [advancedSearchLinkParameters]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
[simpleView]="simpleView" [formPlaceholderText]="formPlaceholderText" [simpleView]="simpleView" [formPlaceholderText]="formPlaceholderText"
[resultTypes]="resultTypes" [quickFilter]="quickFilter" [entitiesSelection]="entitiesSelection" [resultTypes]="resultTypes" [quickFilter]="quickFilter" [entitiesSelection]="entitiesSelection"
[showSwitchSearchLink]="showSwitchSearchLink" [customFilter]="customFilter" [showSwitchSearchLink]="showSwitchSearchLink" [customFilter]="customFilter"
@ -143,9 +148,10 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters <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 id="tm-main" class="uk-margin-medium-top" [class.uk-margin-top]="stickyForm">
<div uk-grid> <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 "> <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> <div>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper> [texts]="pageContents['top']"></helper>
<div [class]="(showRefine && !properties.isDashboard)? 'uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s' :'uk-width-1-1'"> <div [class]="showRefine? '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 *ngIf="showRefine" class="uk-hidden@m uk-margin-top">
<a href="#mobile-filters" uk-toggle> <a href="#mobile-filters" uk-toggle>
<span class="uk-icon uk-margin-small-right uk-margin-small-left"> <span class="uk-icon uk-margin-small-right uk-margin-small-left">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
@ -171,7 +177,8 @@
</svg> </svg>
</span> </span>
<span>Filters <span <span>Filters <span
*ngIf="(selectedRangeFilters+selectedFilters) > 0">({{(selectedRangeFilters + selectedFilters)}})</span></span> *ngIf="(selectedRangeFilters+selectedFilters) > 0">({{(selectedRangeFilters + selectedFilters)}}
)</span></span>
</a> </a>
<div #mobileFilters id="mobile-filters" uk-offcanvas="overlay: true" style="z-index:10000;"> <div #mobileFilters id="mobile-filters" uk-offcanvas="overlay: true" style="z-index:10000;">
<!-- TODO - Kostis check offcanvas-white --> <!-- TODO - Kostis check offcanvas-white -->
@ -196,8 +203,7 @@
</a> </a>
</div> </div>
<div class="uk-grid uk-padding-small uk-padding-remove-vertical uk-margin-large-bottom"> <div class="uk-grid uk-padding-small uk-padding-remove-vertical uk-margin-large-bottom">
<div *ngIf="showRefine && !properties.isDashboard <div *ngIf="showRefine && (results.length > 0
&& (results.length > 0
|| (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING) || (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING)
|| (!hideFilters && || (!hideFilters &&
(existingFiltersWithValues > 0 || (selectedRangeFilters + selectedFilters + selectedTypesNum) > 0) (existingFiltersWithValues > 0 || (selectedRangeFilters + selectedFilters + selectedTypesNum) > 0)
@ -207,14 +213,6 @@
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container> <ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
</div> </div>
<div class="uk-width-expand@m uk-with-1-1@s"> <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? --> <!-- Results only for Custom Filter? -->
<div *ngIf="customFilter && !customFilter.isHiddenFilter && <div *ngIf="customFilter && !customFilter.isHiddenFilter &&
customFilter.selected == false && customFilter.promptToAddFilter" customFilter.selected == false && customFilter.promptToAddFilter"
@ -258,13 +256,16 @@
</search-download> </search-download>
</div> </div>
<!-- No Dashboard Filters --> <!-- 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> <ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container>
</div> </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 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"> <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)" (sizeChange)="sizeChanged($event)"
[isDisabled]="disabled"> [isDisabled]="disabled">
</search-results-per-page> </search-results-per-page>
@ -281,7 +282,9 @@
[isDisabled]="disabled"> [isDisabled]="disabled">
</search-paging> </search-paging>
</div> </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'" <search-result *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[results]="results" [results]="results"
[status]=searchUtils.status [status]=searchUtils.status
@ -329,7 +332,8 @@
<div class=""> <div class="">
<img src="assets/common-assets/graph.svg" style="opacity: 0.4; width:20px; height:22px" loading="lazy" <img src="assets/common-assets/graph.svg" style="opacity: 0.4; width:20px; height:22px" loading="lazy"
alt="graph"> 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>
<div class="uk-text-right"> <div class="uk-text-right">
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-muted"> <span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-muted">
@ -352,33 +356,6 @@
</div> </div>
</div> </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>
<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> </div>
<modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert> <modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert>

1
searchPages/searchUtils/newSearchPage.component.ts
View File

@ -95,7 +95,6 @@ export class NewSearchPageComponent {
@Input() showBreadcrumb: boolean = false; @Input() showBreadcrumb: boolean = false;
@Input() showDownload: boolean = true; @Input() showDownload: boolean = true;
@Input() breadcrumbs: Breadcrumb[] = []; @Input() breadcrumbs: Breadcrumb[] = [];
public dashboard: boolean = properties.isDashboard;
private subscriptions = []; private subscriptions = [];
public parameterNames: string[] = []; public parameterNames: string[] = [];
public parameterValues: string[] = []; public parameterValues: string[] = [];

2
searchPages/searchUtils/portal-search-result.component.html
View File

@ -98,7 +98,7 @@
</modal-alert> </modal-alert>
<ng-template #resultPreview let-result="result"> <ng-template #resultPreview let-result="result">
<div class="uk-flex uk-flex-center"> <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"> [alt]="((result.title)?result.title:result.shortTitle) + ' logo'" loading="lazy">
</div> </div>
</ng-template> </ng-template>

2
searchPages/searchUtils/portal-search-result.component.ts
View File

@ -23,7 +23,7 @@ export class PortalSearchResultComponent implements OnInit{
@ViewChild('AlertModal') modal; @ViewChild('AlertModal') modal;
visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([ visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
["PRIVATE", 'incognito'], ["PRIVATE", 'incognito'],
["RESTRICTED", 'group'] ["RESTRICTED", 'restricted']
]); ]);
public urlParam: string; public urlParam: string;
public errorCodes: ErrorCodes = new ErrorCodes(); public errorCodes: ErrorCodes = new ErrorCodes();

4
searchPages/searchUtils/portal-search-result.module.ts
View File

@ -9,7 +9,7 @@ import {ManageModule} from "../../utils/manage/manage.module";
import {IconsModule} from "../../utils/icons/icons.module"; import {IconsModule} from "../../utils/icons/icons.module";
import {UrlPrefixModule} from "../../utils/pipes/url-prefix.module"; import {UrlPrefixModule} from "../../utils/pipes/url-prefix.module";
import {IconsService} from "../../utils/icons/icons.service"; 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"; import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
@NgModule({ @NgModule({
@ -29,6 +29,6 @@ import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
}) })
export class PortalSearchResultModule { export class PortalSearchResultModule {
constructor(private iconsService: IconsService) { constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([incognito]) this.iconsService.registerIcons([incognito, restricted])
} }
} }

4
searchPages/searchUtils/searchResult.component.html
View File

@ -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> <errorMessages [status]="[status]" [type]="'results'"></errorMessages>
<li *ngFor="let result of previewResults" class="uk-animation-fade"> <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" <result-preview [properties]="properties" [showOrganizations]="showOrganizations"
[showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps"> [showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps">
</result-preview> </result-preview>

2
searchPages/searchUtils/searchResult.component.ts
View File

@ -19,7 +19,7 @@ export class SearchResultComponent implements OnInit, OnChanges {
@Input() showLoading: boolean = false; @Input() showLoading: boolean = false;
@Input() showSubjects: boolean = true; @Input() showSubjects: boolean = true;
@Input() showOrganizations: boolean = true; @Input() showOrganizations: boolean = true;
@Input() custom_class: string = "search-results"; @Input() custom_class: string = "";
@Input() properties: EnvProperties; @Input() properties: EnvProperties;
@Input() showImpactFactors: boolean = false; @Input() showImpactFactors: boolean = false;
@Input() showEnermaps: boolean; @Input() showEnermaps: boolean;

1
sharedComponents/menu.ts
View File

@ -15,6 +15,7 @@ export class MenuItem {
icon: string; icon: string;
open: boolean; open: boolean;
customClass: string = null; 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) { 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; this._id = id;

283
sharedComponents/navigationBar.component.html
View File

@ -1,22 +1,11 @@
<div *ngIf="showMenu"> <div *ngIf="showMenu">
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge" <div class="uk-hidden@m">
class="uk-visible@m"> <div [ngClass]="portal + '-menu'">
<a [routerLink]="header.route" [href]="header.url"><img class="large-beta-indication" <nav class="uk-navbar-container uk-navbar" uk-navbar="">
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')" <div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge">
alt="BETA" style="height: 104px; width: 104px "> <img class="uk-position-top-left" [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
</a> alt="BETA" style="height: 60px; width: 60px;">
</div> </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"> <div *ngIf="!onlyTop || userMenu" class="uk-navbar-left">
<a *ngIf="!offCanvasFlip" class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="" style="z-index:1000;"> <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> <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div>
@ -32,74 +21,51 @@
</a> </a>
</div> </div>
</nav> </nav>
</div> </div>
<div *ngIf="specialAnnouncementContent" class="uk-hidden@m" [innerHTML]="specialAnnouncementContent"> <div #canvas id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+(offCanvasFlip + ';'):'') + 'overlay: true'"
</div>
<div id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+offCanvasFlip:'')" mode="slide" overlay=""
class="uk-offcanvas uk-hidden@m" class="uk-offcanvas uk-hidden@m"
style="z-index:9999;"> style="z-index:9999;">
<div class="uk-offcanvas-bar"> <div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button> <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 class="uk-padding">
<div>
<div class="uk-panel" id="module-0">
<ul class="uk-nav uk-nav-default"> <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 *ngIf="!onlyTop">
<ng-container *ngFor="let menu of menuItems"> <ng-container *ngFor="let menu of menuItems">
<li class="uk-nav-header uk-parent " *ngIf="showHomeMenuItem && currentRoute.route !== '/'"> <li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
<a routerLinkActive="uk-link" routerLink="/">Home</a> <a routerLink="/" (click)="closeCanvas(canvas)">Home</a>
</li> </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)"> *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)" <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}}" (click)="closeCanvas(canvas)"
[routerLinkActiveOptions]="{exact: true}" [queryParams]="menu.rootItem.params" [fragment]="menu.rootItem.fragment">{{menu.rootItem.title}}</a>
[queryParams]="menu.rootItem.params" [fragment]="menu.rootItem.fragment"
class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" <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> href="{{menu.rootItem.url}}" (click)="closeCanvas(canvas)"
<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))" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}">{{menu.rootItem.title}}</a>
class="uk-offcanvas-close custom-offcanvas-close">{{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"> <ul class="uk-nav-sub">
<ng-container *ngFor="let submenu of menu.items"> <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"> [class.uk-parent]="submenu.items && submenu.items.length > 0">
<a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link" <a *ngIf="submenu.route.length > 0" (click)="closeCanvas(canvas)"
routerLink="{{submenu.route}}" [queryParams]=submenu.params [fragment]="submenu.fragment" routerLink="{{submenu.route}}" [queryParams]=submenu.params
class="uk-offcanvas-close custom-offcanvas-close">{{submenu.title}}</a> [fragment]="submenu.fragment">{{submenu.title}}</a>
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" routerLinkActive="uk-link" <a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
href="{{submenu.url}}" target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a> 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"> <ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
<ng-container *ngFor="let subsubmenu of submenu.items"> <ng-container *ngFor="let subsubmenu of submenu.items">
<li> <li>
<a *ngIf="subsubmenu.route.length > 0" routerLinkActive="uk-link" <a *ngIf="subsubmenu.route.length > 0"
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params" routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
[fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a> [fragment]="subsubmenu.fragment" (click)="closeCanvas(canvas)">{{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> href="{{subsubmenu.url}}" (click)="closeCanvas(canvas)"
target="_blank">{{subsubmenu.title}}</a>
</li> </li>
</ng-container> </ng-container>
</ul> </ul>
@ -107,110 +73,73 @@
<li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)" <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> class="uk-nav-header">{{submenu.title}}</li>
</ng-container> </ng-container>
</ul> </ul>
</li> </li>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ul>
<ng-container *ngIf="userMenu"> <ng-container *ngIf="userMenu">
<user-mini [user]="user" mobileView=true <user-mini [user]="user" mobileView=true (closeCanvasEmitter)="closeCanvas(canvas)"
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl
[logOutUrl]=properties.logoutUrl [cookieDomain]=properties.cookieDomain></user-mini> [logOutUrl]=properties.logoutUrl [cookieDomain]=properties.cookieDomain></user-mini>
<ng-content select="[extra-s]"></ng-content>
</ng-container> </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> </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>--> <nav class="uk-navbar uk-flex uk-navbar-container uk-padding-large uk-padding-remove-vertical" uk-navbar>
<div *ngIf="specialAnnouncementContent" class="uk-visible@m" [innerHTML]="specialAnnouncementContent"> <ng-container *ngIf="!onlyTop">
<div class="uk-navbar-left">
</div> <ng-container *ngIf="showLogo && isHeaderLeft">
<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*=&quot;uk-section&quot;]" 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="{&quot;align&quot;:&quot;center&quot;}">
<div *ngIf="showLogo && header.position== 'left'" class="uk-navbar-left uk-visible@l">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container> <ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
</ng-container>
</div> </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 *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>
<div *ngIf="showLogo && header.position == 'center' && header.menuPosition != 'center' " class="uk-margin-auto uk-visible@m"> <div class="uk-navbar-right">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container> <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>
<!-- <div *ngIf="!onlyTop" class="uk-navbar-center"> --> <ng-template #mainMenu>
<div *ngIf="!onlyTop" [class.uk-navbar-right]="header.menuPosition != 'center'" <ul class="uk-navbar-nav" [class.uk-margin-right]="!userMenu">
[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':'')">
<li class="uk-parent" *ngIf="showHomeMenuItem && currentRoute.route !== '/'"> <li class="uk-parent" *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
<a routerLinkActive="uk-link" routerLink="/">Home</a> <a routerLink="/">Home</a>
</li> </li>
<ng-container *ngFor="let menu of menuItems"> <ng-container *ngFor="let menu of menuItems">
<li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)" <li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)"
*ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)"> *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 )" <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" [queryParams]="menu.rootItem.params"
[fragment]="menu.rootItem.fragment"> {{menu.rootItem.title}}</a> [fragment]="menu.rootItem.fragment"> {{menu.rootItem.title}}</a>
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" routerLinkActive="uk-link" <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> 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)) " <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> 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" <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-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-first-column uk-height-max-medium uk-overflow-auto">
<ul class="uk-nav uk-navbar-dropdown-nav"> <ul class="uk-nav uk-navbar-dropdown-nav">
@ -219,18 +148,19 @@
isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 || isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 ||
submenu.url.length > 0)" [class.uk-active]="isTheActiveMenuItem(submenu)" submenu.url.length > 0)" [class.uk-active]="isTheActiveMenuItem(submenu)"
[class.uk-parent]="submenu.items && submenu.items.length > 0"> [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" routerLink="{{submenu.route}}" [queryParams]="submenu.params"
[fragment]="submenu.fragment">{{submenu.title}}</a> [fragment]="submenu.fragment">{{submenu.title}}</a>
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" routerLinkActive="uk-link" <a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
href="{{submenu.url}}" target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a> 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"> <ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
<ng-container *ngFor="let subsubmenu of submenu.items"> <ng-container *ngFor="let subsubmenu of submenu.items">
<li> <li>
<a *ngIf="subsubmenu.route.length > 0" routerLinkActive="uk-link" <a *ngIf="subsubmenu.route.length > 0"
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params" routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
[fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a> [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> href="{{subsubmenu.url}}" target="_blank">{{subsubmenu.title}}</a>
</li> </li>
</ng-container> </ng-container>
@ -247,11 +177,12 @@
</li> </li>
</ng-container> </ng-container>
<!-- Custom menu items --> <!-- Custom menu items -->
<ng-container *ngIf="customMenuItems?.length > 0 && properties.environment == 'development'"> <!-- TODO: Add to mobile menu as well! -->
<ng-container *ngFor="let menu of customMenuItems"> <ng-container *ngIf="additionalMenuItems?.length > 0 && properties.environment == 'development'">
<ng-container *ngFor="let menu of additionalMenuItems">
<li class="uk-parent"> <li class="uk-parent">
<!-- INTERNAL ROOT--> <!-- 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}}" routerLink="{{menu.route}}"
[queryParams]="menu.params" [queryParams]="menu.params"
[fragment]="menu.fragment"> [fragment]="menu.fragment">
@ -275,7 +206,7 @@
<ng-container *ngFor="let submenu of menu.items"> <ng-container *ngFor="let submenu of menu.items">
<li> <li>
<!-- INTERNAL CHILD --> <!-- 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}}" routerLink="{{submenu.route}}"
[queryParams]="submenu.params" [queryParams]="submenu.params"
[fragment]="submenu.fragment" [fragment]="submenu.fragment"
@ -283,7 +214,7 @@
{{submenu.title}} {{submenu.title}}
</a> </a>
<!-- EXTERNAL CHILD --> <!-- EXTERNAL CHILD -->
<a *ngIf="submenu.type == 'external' && submenu.url" routerLinkActive="uk-link" <a *ngIf="submenu.type == 'external' && submenu.url"
href="{{submenu.url}}" href="{{submenu.url}}"
target="_blank"> target="_blank">
{{submenu.title}} {{submenu.title}}
@ -297,47 +228,57 @@
</li> </li>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ul> </ul>
<!-- </div> --> </ng-template>
<!-- <div *ngIf="userMenu" class="uk-navbar-right"> --> </ng-container>
<!-- <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>
</nav> </nav>
</div> </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>
</ng-container>
</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>
</div> </div>
</div> </div>
<ng-template #header_template let-mobile="mobile"> <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"> class="uk-logo uk-navbar-item uk-text-center uk-text-bold">
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)" <img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
[src]="!mobile?header.logoUrl:header.logoSmallUrl" [src]="!mobile?header.logoUrl:header.logoSmallUrl"
[alt]="header.title" [alt]="header.title"
class="uk-responsive-height"> class="uk-width-1-1">
<ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)"> <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"> <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
<p class="uk-margin-remove">{{header.title}}</p> <p class="uk-margin-remove">{{header.title}}</p>
</div> </div>
</ng-container> </ng-container>
</a> </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"> class="uk-logo uk-navbar-item uk-text-center uk-text-bold">
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)" <img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
[src]="!mobile?header.logoUrl:header.logoSmallUrl" [src]="!mobile?header.logoUrl:header.logoSmallUrl"
[alt]="header.title" [alt]="header.title"
class="uk-responsive-height"> class="uk-width-1-1">
<ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)"> <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"> <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
<p class="uk-margin-remove">{{header.title}}</p> <p class="uk-margin-remove">{{header.title}}</p>

39
sharedComponents/navigationBar.component.ts
View File

@ -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 {ActivatedRoute, Router} from '@angular/router';
import {Session, User} from '../login/utils/helper.class'; import {Session, User} from '../login/utils/helper.class';
import {ConfigurationService} from '../utils/configuration/configuration.service'; import {ConfigurationService} from '../utils/configuration/configuration.service';
@ -6,6 +6,9 @@ import {MenuItem, RootMenuItem} from './menu';
import {EnvProperties} from '../utils/properties/env-properties'; import {EnvProperties} from '../utils/properties/env-properties';
import {Subscription} from 'rxjs'; import {Subscription} from 'rxjs';
import {HelpContentService} from '../services/help-content.service'; import {HelpContentService} from '../services/help-content.service';
import {properties} from "../../../environments/environment";
declare var UIkit;
export interface Header { export interface Header {
route?: string, route?: string,
@ -26,7 +29,7 @@ export interface Header {
export class NavigationBarComponent implements OnInit, OnDestroy { export class NavigationBarComponent implements OnInit, OnDestroy {
@Input() portal: string = 'connect'; @Input() portal: string = 'connect';
@Input() dark: boolean = false; @Input() dark: boolean = false;
@Input() onlyTop: boolean; @Input() onlyTop: boolean = false;
@Input() logoPath: string = 'assets/common-assets/'; @Input() logoPath: string = 'assets/common-assets/';
@Input() userMenu: boolean = true; @Input() userMenu: boolean = true;
@Input() showHomeMenuItem: boolean = false; @Input() showHomeMenuItem: boolean = false;
@ -37,7 +40,7 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
@Input() header: Header; @Input() header: Header;
@Input() showMenu: boolean = true; @Input() showMenu: boolean = true;
@Input() homeurl: boolean = true; @Input() homeurl: boolean = true;
@Input() properties: EnvProperties; @Input() properties: EnvProperties = properties;
@Input() user: User; @Input() user: User;
@Input() enableSearch: boolean = false; @Input() enableSearch: boolean = false;
@Input() searchRoute: string = '/search/find'; @Input() searchRoute: string = '/search/find';
@ -49,9 +52,9 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
subs: Subscription[] = []; subs: Subscription[] = [];
showEntity = {}; showEntity = {};
showPage = {}; showPage = {};
specialAnnouncementContent: string = null;
public customMenuItems: MenuItem[] = []; public additionalMenuItems: MenuItem[] = [];
public featuredMenuItems: MenuItem[] = [];
constructor(private router: Router, constructor(private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
@ -69,6 +72,10 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
} }
} }
closeCanvas(element) {
UIkit.offcanvas(element).hide();
}
initialize() { initialize() {
if ((['provide', 'develop']).indexOf(this.portal) != -1) { if ((['provide', 'develop']).indexOf(this.portal) != -1) {
this.header = { this.header = {
@ -88,13 +95,13 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
this.subs.push(this.config.communityInformationState.subscribe(data => { this.subs.push(this.config.communityInformationState.subscribe(data => {
if (data) { if (data) {
if (data['entities']) { 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']; this.showEntity['' + data['entities'][i]['pid'] + ''] = data['entities'][i]['isEnabled'];
} }
} }
if (data['pages']) { 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']; this.showPage[data['pages'][i]['route']] = data['pages'][i]['isEnabled'];
} }
@ -109,7 +116,16 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
this.subs.push( this.subs.push(
this._helpContentService.getMenuItems(this.portal).subscribe( this._helpContentService.getMenuItems(this.portal).subscribe(
data => { 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) error => this.handleError("Server error fetching custom menu items", error)
) )
@ -117,7 +133,6 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
} }
} }
isEnabled(required, enabled) { isEnabled(required, enabled) {
if (!required) { if (!required) {
return true; return true;
@ -143,13 +158,17 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
count--; count--;
} }
} }
return (count > 0) ? true : false; return (count > 0);
} }
private handleError(message: string, error) { private handleError(message: string, error) {
console.error('NavigationBar (component): ' + message, 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() { get currentRoute() {
return { return {
route: this.router.url.split('?')[0].split('#')[0], route: this.router.url.split('?')[0].split('#')[0],

27
sharedComponents/quick-contact/quick-contact.component.css Normal file
View File

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

31
sharedComponents/quick-contact/quick-contact.component.html Normal file
View File

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

57
sharedComponents/quick-contact/quick-contact.component.ts Normal file
View File

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

23
sharedComponents/quick-contact/quick-contact.module.ts Normal file
View File

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

17
sharedComponents/quick-contact/quick-contact.service.ts Normal file
View File

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

36
sharedComponents/sidebar/sideBar.component.html
View File

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

37
sharedComponents/sidebar/sideBar.component.ts
View File

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

22
sharedComponents/sidebar/sideBar.module.ts
View File

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

2
utils/email/composer.ts
View File

@ -62,7 +62,7 @@ export class Composer {
return email; return email;
} }
public static composeEmailForMonitor(contactForm: any, admins: any): Email { public static composeEmailForMonitor(contactForm: any, admins: string[]): Email {
let email: Email = new Email(); let email: Email = new Email();
email.subject = "OpenAIRE - Monitor"; email.subject = "OpenAIRE - Monitor";

4
utils/email/email.service.ts
View File

@ -7,7 +7,9 @@ import {Observable} from "rxjs";
import {EnvProperties} from "../properties/env-properties"; import {EnvProperties} from "../properties/env-properties";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
@Injectable() @Injectable({
providedIn: 'root'
})
export class EmailService { export class EmailService {
constructor(private http:HttpClient) { constructor(private http:HttpClient) {

4
utils/errorMessages.component.ts
View File

@ -7,8 +7,7 @@ import {properties} from "../../../environments/environment";
template: ` template: `
<div *ngIf="status.some(checkErrorCode(errorCodes.LOADING))" <div *ngIf="status.some(checkErrorCode(errorCodes.LOADING))"
[class]="(tab_error_class ? '' : 'uk-animation-fade') + ' uk-margin-top uk-width-1-1'" role="alert"> [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></loading>
<loading *ngIf="dashboard"></loading>
</div> </div>
<div *ngIf="status.every(checkErrorCode(errorCodes.NONE))" <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> [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() status: Array<number>;
@Input() type: string; @Input() type: string;
@Input() tab_error_class: boolean = false; @Input() tab_error_class: boolean = false;
dashboard = properties.isDashboard;
public errorCodes:ErrorCodes; public errorCodes:ErrorCodes;

4
utils/icons/icons.component.ts
View File

@ -123,11 +123,11 @@ export class IconsComponent implements AfterViewInit {
ngAfterViewInit() { ngAfterViewInit() {
if(this.svg) { if(this.svg) {
let svg: Element = this.icon.nativeElement.getElementsByTagName('svg').item(0); 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("width", (this.ratio * IconsComponent.DEFAULT_ICON_SIZE).toString());
svg.setAttribute("height", (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); this.addGradient(svg);
} else { } else {
this.style = { this.style = {

10
utils/icons/icons.ts
View File

@ -153,3 +153,13 @@ export const incognito = {
name: '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>' 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>'
}

9
utils/modal/alert.ts
View File

@ -11,8 +11,7 @@ declare var UIkit: any;
[ngClass]="classBody"> [ngClass]="classBody">
<div [ngClass]="classTitle" class="uk-modal-title" [hidden]=!alertHeader> <div [ngClass]="classTitle" class="uk-modal-title" [hidden]=!alertHeader>
<button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button> <button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button>
<h4 *ngIf="!isDashboard" class="modal-title">{{alertTitle}}</h4> <h4 class="modal-title">{{alertTitle}}</h4>
<h6 *ngIf="isDashboard" class="uk-text-bold">{{alertTitle}}</h6>
</div> </div>
<div class="uk-margin"> <div class="uk-margin">
<div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div> <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 [ngClass]="(choice)?'uk-width-1-2':'uk-width-1-1'">
<div *ngIf="alertFooter" class="uk-flex-right uk-grid uk-grid-small" uk-grid> <div *ngIf="alertFooter" class="uk-flex-right uk-grid uk-grid-small" uk-grid>
<span *ngIf="okButton" [class.uk-flex-last]="!okButtonLeft"> <span *ngIf="okButton" [class.uk-flex-last]="!okButtonLeft">
<button class="uk-button" [class.uk-button-primary]="!isDashboard" <button class="uk-button uk-button-primary" [disabled]="okDisabled"
[class.uk-button-secondary]="isDashboard" [class.outlined]="isDashboard" [disabled]="okDisabled"
[class.uk-disabled]="okDisabled" (click)="ok()">{{okButtonText}}</button> [class.uk-disabled]="okDisabled" (click)="ok()">{{okButtonText}}</button>
</span> </span>
<span *ngIf="cancelButton"> <span *ngIf="cancelButton">
@ -50,7 +48,6 @@ export class AlertModal {
@Input() classTitle: string = ""; @Input() classTitle: string = "";
@Input() classBody: string = ""; @Input() classBody: string = "";
@Input() large: boolean = false; @Input() large: boolean = false;
isDashboard: boolean = properties.isDashboard;
/** /**
* Caption for the title. * Caption for the title.
*/ */
@ -118,7 +115,7 @@ export class AlertModal {
/** /**
* Value will be emitted if @choice is true * Value will be emitted if @choice is true
*/ */
public select: boolean = false; public select: boolean = true;
/** /**
* Emitted when a ok button was clicked * Emitted when a ok button was clicked
* or when Ok method is called. * or when Ok method is called.

18
utils/notification-handler.ts Normal file
View File

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

6
utils/result-preview/result-preview.component.html
View File

@ -22,7 +22,7 @@
<span><span>Visit repository to deposit</span><span uk-icon="arrow-right"></span></span> <span><span>Visit repository to deposit</span><span uk-icon="arrow-right"></span></span>
</a> </a>
</span> </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" class="uk-text-capitalize type">{{type}}</span>
<span *ngIf="type && beforeTitle.length > 0"> . </span> <span *ngIf="type && beforeTitle.length > 0"> . </span>
<span *ngIf="beforeTitle.length > 0" class="uk-text-capitalize"> <span *ngIf="beforeTitle.length > 0" class="uk-text-capitalize">
@ -165,8 +165,8 @@
</div> </div>
<!-- Authors --> <!-- Authors -->
<div *ngIf="result.authors" class="uk-flex uk-margin-small-bottom"> <div *ngIf="result.authors" class="uk-flex uk-margin-small-bottom">
<div class="uk-text-muted">Authors:</div> <span class="uk-text-muted">Authors:&nbsp;</span>
<showAuthors class="space" [authors]="result.authors" [authorsLimit]=10 [modal]="modal" <showAuthors [authors]="result.authors" [authorsLimit]=10 [modal]="modal"
[showAll]=false [small]="false"></showAuthors> [showAll]=false [small]="false"></showAuthors>
</div> </div>
<!-- Identifiers --> <!-- Identifiers -->

54
utils/section-scroll/section-scroll.component.css
View File

@ -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] { [left] {
position: -webkit-sticky; /* Safari */ position: -webkit-sticky; /* Safari */
position: sticky; position: sticky;
top: 0; top: 0;
height: 100vh; height: 100vh;
/*border: 1px solid red;*/
} }
[left] .imgContainer { [left] .imgContainer {
@ -29,22 +11,6 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 70%; 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 { [left] img {
@ -61,5 +27,23 @@
[scroll] > * { [scroll] > * {
height: 60vh; 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;
}
} }

10
utils/section-scroll/section-scroll.component.ts
View File

@ -42,7 +42,6 @@ export class SectionScrollComponent implements AfterViewInit {
private map: Map<string, string> = null; private map: Map<string, string> = null;
private left: Map<string, HTMLElement> = new Map<string, HTMLElement>(); private left: Map<string, HTMLElement> = new Map<string, HTMLElement>();
private scroll: Map<string, HTMLElement> = new Map<string, HTMLElement>(); private scroll: Map<string, HTMLElement> = new Map<string, HTMLElement>();
private lastElementId: string = null;
constructor() { constructor() {
} }
@ -67,8 +66,9 @@ export class SectionScrollComponent implements AfterViewInit {
threshold: this.buildThresholdList() threshold: this.buildThresholdList()
}; };
Array.from(this.map.values()).forEach(value => { Array.from(this.map.values()).forEach(value => {
this.left.set(value, document.getElementById(value)); let element = document.getElementById(value);
this.left.get(value).style.display = 'none'; element.style.display = 'none';
this.left.set(value, element);
}) })
Array.from(this.map.keys()).forEach(key => { Array.from(this.map.keys()).forEach(key => {
this.scroll.set(key, document.getElementById(key)); this.scroll.set(key, document.getElementById(key));
@ -77,9 +77,7 @@ export class SectionScrollComponent implements AfterViewInit {
entries.forEach((entry) => { entries.forEach((entry) => {
entry.target['style'].opacity = String(entry.intersectionRatio); entry.target['style'].opacity = String(entry.intersectionRatio);
let id = this.map.get(entry.target.id); let id = this.map.get(entry.target.id);
if (this.left.has(id) && this.lastElementId !== id) {
if(entry.isIntersecting) { if(entry.isIntersecting) {
this.lastElementId = id;
Array.from(this.left.keys()).forEach(element => { Array.from(this.left.keys()).forEach(element => {
if (element !== id) { if (element !== id) {
this.left.get(element).style.display = 'none'; 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); }, options);
Array.from(this.scroll.values()).forEach(target => { Array.from(this.scroll.values()).forEach(target => {

9
utils/string-utils.class.ts
View File

@ -315,6 +315,15 @@ export class StringUtils {
return Validators.pattern(StringUtils.urlRegex); 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 { public static validRoute(pages: any[], field: string, initial: string = null): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => { return (control: AbstractControl): ValidationErrors | null => {
if(control.value) { if(control.value) {

15
utils/tabs/tab.component.ts
View File

@ -14,23 +14,10 @@ export interface TabIcon {
@Component({ @Component({
selector: 'my-tab', selector: 'my-tab',
// styles: [
// `
// .pane{
// padding: 1em;
// }
// `
// ],
template: ` template: `
<!-- [class]="active ? 'uk-active' : ''" [hidden]="!active"--> <div>
<!-- <div [class]="active ? 'uk-active' : ''" [hidden]="!active">-->
<div class="pane">
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
<!-- <div [hidden]="!active" class="pane">-->
<!-- <ng-content></ng-content>-->
<!-- </div>-->
` `
}) })
export class TabComponent { export class TabComponent {

33
utils/tabs/tabs.component.ts
View File

@ -2,44 +2,29 @@
* The main component that renders single TabComponent * The main component that renders single TabComponent
* instances. * instances.
*/ */
import {Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core';
import { import {TabComponent} from './tab.component';
Component,
ContentChildren,
QueryList,
AfterContentInit, Output, EventEmitter,
} from '@angular/core';
import { TabComponent } from './tab.component';
@Component({ @Component({
selector: 'my-tabs', selector: 'my-tabs',
template: ` template: `
<ul [class]="(tabs.toArray().length > 2 ? 'uk-visible@m' : '') + ' uk-tab main-tabs uk-margin-remove uk-child-width-expand'" <ul class="uk-tab" [ngClass]="customClass" uk-tab="connect: .tabs-content">
uk-tab uk-switcher="connect: .tabs-content" uk-height-match="target: .tab-header"> <li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="i === 0" (click)="selectTab(tab)">
<li *ngFor="let tab of tabs.toArray(); let i=index" <a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
[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' : ''">
<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon" [fill]="tab.tabIcon" class="uk-margin-small-bottom"></icon> <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.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> </a>
</li> </li>
</ul> </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> <ng-content></ng-content>
</div> </div>
` `
}) })
export class TabsComponent { export class TabsComponent {
@Input()
public customClass: string;
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>; @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
@Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter(); @Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();