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

This commit is contained in:
Konstantinos Triantafyllou 2022-02-16 18:21:33 +02:00
commit 1d541ba121
15 changed files with 177 additions and 98 deletions

View File

@ -1,5 +1,6 @@
import {SafeResourceUrl} from "@angular/platform-browser";
import {properties} from "../../../../environments/environment";
import {Session, User} from "../../login/utils/helper.class";
export const ChartHelper = {
prefix: "((__",
@ -49,6 +50,14 @@ export class Stakeholder {
export class StakeholderInfo extends Stakeholder {
isManager: boolean = false;
isMember: boolean = false;
public static toStakeholderInfo(stakeholders: (Stakeholder & StakeholderInfo)[], user: User): StakeholderInfo[] {
return stakeholders.map(stakeholder => {
stakeholder.isManager = Session.isPortalAdministrator(user) || Session.isMonitorCurator(user) || Session.isManager(stakeholder.type, stakeholder.alias, user);
stakeholder.isMember = Session.isMember(stakeholder.type, stakeholder.alias, user);
return stakeholder;
})
}
}
export class Topic {

View File

@ -3,22 +3,22 @@ import {Component} from "@angular/core";
@Component({
selector: 'how',
template: `
<div class="how uk-h6">
<div class="how">
<div class="uk-flex uk-flex-wrap">
<div class="uk-width-1-3@s first uk-text-muted">
<div class="uk-width-1-3@s first">
<div>
<img src="assets/common-assets/monitor-assets/how/1.png" loading="lazy">
</div>
<div class="uk-text-center">
<span class="uk-text-bold uk-text-uppercase">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 class="uk-width-1-3@s second uk-text-muted">
<div class="uk-width-1-3@s second">
<div>
<img src="assets/common-assets/monitor-assets/how/2.png" loading="lazy">
</div>
</div>
<div class="uk-width-1-3@s third uk-text-muted">
<div class="uk-width-1-3@s third">
<div>
<img src="assets/common-assets/monitor-assets/how/3.png" loading="lazy">
</div>
@ -28,37 +28,37 @@ import {Component} from "@angular/core";
</div>
</div>
<div class="uk-flex uk-flex-wrap">
<div class="uk-width-1-3@s fourth uk-flex-last@s uk-text-muted">
<div class="uk-width-1-3@s fourth uk-flex-last@s">
<div>
<img src="assets/common-assets/monitor-assets/how/4.png" loading="lazy">
</div>
<div class="uk-text-center">
we perform <span class="uk-text-bold uk-text-uppercase">Statistical Analysis</span> and produce
<span class="portal-color">Open Science Indicators</span>
we perform <span class="uk-text-uppercase uk-text-bold">Statistical <br> Analysis</span> and produce <br>
<span class="uk-text-primary">Open Science Indicators</span>
</div>
</div>
<div class="uk-width-1-3@s fifth uk-text-muted">
<div class="uk-width-1-3@s fifth">
<div>
<img src="assets/common-assets/monitor-assets/how/5.png" loading="lazy">
</div>
<div class="uk-text-center">
furthermore <span class="uk-text-bold uk-text-uppercase">Network<br>Analysis</span> producing
<span class="portal-color">Collaboration Indicators</span>
furthermore <span class="uk-text-uppercase uk-text-bold">Network<br>Analysis</span> producing <br>
<span class="uk-text-primary">Collaboration Indicators</span>
</div>
</div>
<div class="uk-width-1-3@s sixth uk-flex-first@s uk-text-muted">
<div class="uk-width-1-3@s sixth uk-flex-first@s">
<div>
<img src="assets/common-assets/monitor-assets/how/6.png" loading="lazy">
</div>
<div class="uk-text-center">
Often combine with external data
Often combine with external data <br>
(patents, social, company) and
perform <span class="uk-text-bold uk-text-uppercase">Impact Analysis</span> to
produce <span class="portal-color">Innovation Indicators</span>
perform <br><span class="uk-text-uppercase uk-text-bold">Impact Analysis</span> to
produce <br><span class="uk-text-primary">Innovation Indicators</span>
</div>
</div>
</div>
<div class="final uk-text-muted">
<div class="final">
<div>
<img src="assets/common-assets/monitor-assets/how/7.png" loading="lazy">
</div>

View File

@ -79,7 +79,7 @@ export class StakeholderService {
}));
}
getMyStakeholders(url: string, type: string = null): Observable<Stakeholder[]> {
getMyStakeholders(url: string, type: string = null): Observable<(Stakeholder & StakeholderInfo)[]> {
return this.http.get<Stakeholder[]>(url + '/my-stakeholder' + ((type) ? ('?type=' + type) : ''), CustomOptions.registryOptions()).pipe(map(stakeholders => {
return this.formalize(this.checkIsUpload(stakeholders));
}));

View File

@ -140,11 +140,8 @@
(selectionChange)=" simpleEntityChanged($event)"
[onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
</div>
<div *ngIf="selectedFields[0]" class="uk-inline">
<!--<a *ngIf="selectedFields[0].value.length > 0" class="uk-form-icon uk-form-icon-flip"
(click)="selectedFields[0].value = ''"
uk-icon="icon: close"></a>-->
<a class="uk-form-icon uk-form-icon-flip"
<div *ngIf="selectedFields[0]" class="uk-inline uk-link">
<a class="uk-form-icon uk-form-icon-flip uk-link-reset"
(click)="simpleKeywordChanged(null)" type="submit">
<icon name="search" flex="true"></icon>
</a>

View File

@ -4,7 +4,7 @@
refineFields.indexOf(customFilter.queryFieldName) ==
-1) ||customFilter.isHiddenFilter)">
<span class="uk-width-auto">
<span class="uk-label uk-flex uk-flex-middle">
<span class="filter-tag uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{customFilter.valueName}}</span>
</span>
</span>
@ -14,9 +14,9 @@
<ng-container *ngIf="type.selected">
<span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)" [class.uk-disabled]="disabled">
<span class="uk-label 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>
<icon name="close" ratio="0.5" flex="true"></icon>
<icon name="close" flex="true" ratio="0.7"></icon>
</span>
</a>
</span>
@ -29,9 +29,9 @@
<span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
[class.uk-disabled]="disabled">
<span class="uk-label uk-flex uk-flex-middle">
<span class="filter-tag uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
<icon name="close" ratio="0.5" flex="true"></icon>
<icon name="close" flex="true" ratio="0.7"></icon>
</span>
</a>
</span>
@ -43,9 +43,9 @@
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
<span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)" class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)" [class.uk-disabled]="disabled">
<span class="uk-label 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>
<icon name="close" ratio="0.5" flex="true"></icon>
<icon name="close" flex="true" ratio="0.7"></icon>
</span>
</a>
</span>
@ -73,7 +73,7 @@
<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>
</div>
<ul *ngIf="!showUnknownFilters" class="uk-list uk-list-large">
<ul *ngIf="!showUnknownFilters" class="uk-list uk-list-xlarge">
<li *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'">
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
[isDisabled]="disabled"
@ -110,19 +110,18 @@
[attr.uk-sticky]="(stickyForm?'{animation:false;offset:100;top:90;cls-active:uk-active uk-sticky-below;cls-inactive:uk-sticky '+
(usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
' uk-position-relative ' :(' uk-section ' ))+'}':null)">
<div style="box-sizing: border-box; "
[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 ?
' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section' : '')
+(simpleView?'':' advancedSearchFormBackground ')">
<!-- TODO - Kostis until here-->
<div class="uk-width-1-1">
<div class="uk-container uk-container-large">
<div class="uk-padding-small">
<div class="uk-padding-small uk-padding-remove-bottom">
<breadcrumbs *ngIf="showBreadcrumb" [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-position-relative uk-margin-medium-bottom">
<div class="uk-position-relative">
<div class="uk-container uk-container-large uk-section" id="searchForm">
<advanced-search-form
[entityType]="entityType"
@ -147,7 +146,7 @@
</div>
<schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
[searchAction]=false [description]="metaDescription" ></schema2jsonld>
<div id="tm-main" class=" tm-middle" [class.uk-margin-top]="stickyForm">
<div id="tm-main" class="uk-margin-medium-top" [class.uk-margin-top]="stickyForm">
<div uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-container-large">
@ -235,7 +234,7 @@
target="_blank"> OpenAIRE - Explore</a>.
</div>
<!-- Total results, number of pages -->
<h5 class="uk-margin-bottom">
<h6 class="uk-margin-bottom">
<ng-container *ngIf="results && searchUtils.totalResults > 0">
<span>{{searchUtils.totalResults|number}}</span>
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
@ -248,7 +247,7 @@
<span>{{searchUtils.page | number}}</span>
<span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span>
</ng-container>
</h5>
</h6>
<!-- TODO Download results position-->
<div *ngIf="showDownload" class="uk-width-auto@m uk-margin-small-bottom">
<search-download
@ -309,7 +308,7 @@
[results]="results"
[status]="searchUtils.status"
[type]="entityType"
[showType]="false"
[showType]="entityType == 'stakeholder'"
[showLoading]="true" [properties]=properties>
</portal-search-result>
</div>

View File

@ -58,7 +58,7 @@ export class NewSearchPageComponent {
@Input() customFilter: SearchCustomFilter;
@Input() sort: boolean = true;
@Input() sortedByChanged: string = "";
@Input() searchFormClass: string = "searchForm";
@Input() searchFormClass: string = "uk-background-muted";
//From simple:
@Input() rangeFilters: RangeFilter[] = [];
@Input() rangeFields: string[][] = [];

View File

@ -1,30 +1,33 @@
<ul class="uk-list uk-list-large" [class]="'uk-list uk-margin ' + custom_class" uk-height-match="target: .uk-card-default; row: false">
<ul class="uk-list uk-list-xlarge" [class]="'uk-list uk-margin ' + custom_class"
uk-height-match="target: .uk-card-default; row: false">
<errorMessages [status]="[status]" [type]="'results'"></errorMessages>
<li *ngFor="let result of results" class="uk-animation-fade">
<div class="uk-card uk-card-default uk-card-body uk-card-hover uk-position-relative uk-flex uk-flex-column uk-flex-center" [class.uk-disabled]="!hasPermission(result)">
<div class="uk-card uk-card-default uk-card-body uk-card-hover uk-position-relative uk-flex uk-flex-column uk-flex-center"
[class.uk-disabled]="!hasPermission(result)">
<div>
<div *ngIf="type === 'community' && result.isSubscribed"
class="uk-alert-primary uk-padding-small uk-position-top-left uk-text-center">
<span>Subscribed</span>
</div>
<div *ngIf="type === 'community' && result.status === 'manager'"
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
<icon [name]="visibilityIcon.get('RESTRICTED')"></icon>
<span class="space uk-text-small uk-text-capitalize">restricted</span>
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle">
<icon [name]="visibilityIcon.get('RESTRICTED')" ratio="1.5" [flex]="true"></icon>
<span class="uk-text-small uk-text-capitalize">restricted</span>
</div>
<div *ngIf="type === 'community' && result.status === 'hidden'"
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
<icon [name]="visibilityIcon.get('PRIVATE')"></icon>
<span class="space uk-text-small uk-text-capitalize">private</span>
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle">
<icon [name]="visibilityIcon.get('PRIVATE')" ratio="1.5" [flex]="true"></icon>
<span class="uk-text-small uk-text-capitalize">private</span>
</div>
<div *ngIf="result.visibility && result.visibility !== 'PUBLIC'"
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
<icon [name]="visibilityIcon.get(result.visibility)"></icon>
<span class="space uk-text-small uk-text-capitalize">{{result.visibility.toLowerCase()}}</span>
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle">
<icon [name]="visibilityIcon.get(result.visibility)" ratio="1.5" [flex]="true"></icon>
<span class="uk-text-small uk-text-capitalize">{{result.visibility.toLowerCase()}}</span>
</div>
</div>
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<a *ngIf="directLink && hasPermission(result)" [href]="(type === 'community')?getCommunityPageUrl(result):getStakeholderPageUrl(result)"
<a *ngIf="directLink && hasPermission(result)"
[href]="(type === 'community')?getCommunityPageUrl(result):getStakeholderPageUrl(result)"
target="_blank" class="uk-width-1-5@s">
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</a>
@ -38,10 +41,12 @@
</div>
<div class="uk-width-expand">
<div *ngIf="type === 'community'" [title]="result.shortTitle" class="uk-margin-bottom">
<a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)" class="uk-h5 uk-link-heading" target="_blank">
<a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)"
class="uk-h5 uk-link-heading" target="_blank">
{{(result.title) ? result.title : result.shortTitle}}
</a>
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-h5 uk-link-heading">
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)"
class="uk-h5 uk-link-heading">
{{(result.title) ? result.title : result.shortTitle}}
</a>
<h5 *ngIf="!hasPermission(result)">
@ -49,10 +54,12 @@
</h5>
</div>
<div *ngIf="type === 'stakeholder'" [title]="result.index_shortName" class="uk-margin-bottom">
<a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)" class="uk-h5 uk-link-heading" target="_blank">
<a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)"
class="uk-h5 uk-link-heading" target="_blank">
{{(result.name) ? result.name : result.index_shortName}}
</a>
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-h5 uk-link-heading">
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)"
class="uk-h5 uk-link-heading">
{{(result.name) ? result.name : result.index_shortName}}
</a>
<h5 *ngIf="!hasPermission(result)">
@ -64,18 +71,17 @@
{{result.description}}
</p>
</div>
<div class="uk-text-small uk-flex uk-flex-middle">
<span class="uk-text-muted" *ngIf="result.date || result.creationDate">Creation Date: </span>
<div class="uk-text-small">
<div *ngIf="result.date || result.creationDate" class="uk-flex uk-flex-middle uk-margin-small-bottom">
<span class="uk-text-muted">Creation Date: </span>
<span class="uk-margin-small-left" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
<span class="uk-margin-small-left" *ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
<span *ngIf="type === 'community' && showType && result.type" class="uk-margin-left">
<span class="uk-margin-small-left"
*ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
</div>
<div *ngIf="showType && result.type" class="uk-flex uk-flex-middle">
<span class="uk-text-muted">Type:</span>
<span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
</span>
<span *ngIf="type === 'stakeholder' && result.type" class="uk-margin-left">
<span class="uk-text-muted">Type:</span>
<span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
</span>
</div>
</div>
</div>
</div>
@ -92,6 +98,7 @@
</modal-alert>
<ng-template #resultPreview let-result="result">
<div class="uk-flex uk-flex-center">
<img *ngIf="result.logoUrl" [src]="result | logoUrl" [alt]="((result.title)?result.title:result.shortTitle) + ' logo'" loading="lazy">
<img *ngIf="result.logoUrl" [src]="result | logoUrl"
[alt]="((result.title)?result.title:result.shortTitle) + ' logo'" loading="lazy">
</div>
</ng-template>

View File

@ -22,7 +22,7 @@ export class PortalSearchResultComponent implements OnInit{
@Input() properties: EnvProperties;
@ViewChild('AlertModal') modal;
visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
["PRIVATE", 'lock'],
["PRIVATE", 'incognito'],
["RESTRICTED", 'group']
]);
public urlParam: string;
@ -64,7 +64,7 @@ export class PortalSearchResultComponent implements OnInit{
return result.status === "all" || (result.status === "manager" && result.isManager);
} else if(this.type === "stakeholder") {
return result.visibility === "PUBLIC" || (result.visibility === "RESTRICTED" && (result.isManager || result.isMember)) ||
(result.visibility === "PRIVATE" || result.isManager);
(result.visibility === "PRIVATE" && result.isManager);
}
}

View File

@ -1,7 +1,7 @@
import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {ErrorMessagesModule} from '../../utils/errorMessages.module';
import {PortalSearchResultComponent} from "./portal-search-result.component";
import {AlertModalModule} from "../../utils/modal/alertModal.module";
@ -9,10 +9,8 @@ import {ManageModule} from "../../utils/manage/manage.module";
import {IconsModule} from "../../utils/icons/icons.module";
import {UrlPrefixModule} from "../../utils/pipes/url-prefix.module";
import {IconsService} from "../../utils/icons/icons.service";
import {group, lock} from "../../utils/icons/icons";
import {incognito} from "../../utils/icons/icons";
import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
// import {IconsService} from "../../utils/icons/icons.service";
// import {group, lock} from "../../utils/icons/icons";
@NgModule({
imports: [
@ -31,6 +29,6 @@ import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
})
export class PortalSearchResultModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([group, lock])
this.iconsService.registerIcons([incognito])
}
}

View File

@ -86,7 +86,7 @@
</ng-template>
<ng-template #input_label_wrapper let-filter="filter" let-value="value">
<a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(filter,value)" class="uk-link-muted"
[queryParams]="getParams(filter,value)" class="uk-link-muted uk-display-inline-block"
[class.uk-disabled]="disabled(value.number)" [class.uk-link-text]="!disabled(value.number)">
<ng-container *ngTemplateOutlet="input_label; context: {filter: filter, value: value}"></ng-container>
</a>

View File

@ -11,12 +11,9 @@ export class HelperFunctions {
public static scrollToId(elementId:string) {
if (typeof document !== 'undefined' && document.getElementById(elementId)) {
document.getElementById(elementId).scrollIntoView();
document.getElementById(elementId).scrollIntoView({behavior: "smooth"});
}
}
public static isTiny(url: string) {
return (url.indexOf('tinyurl.com') !== -1);
}
public static copy(obj: any): any {
let copy;

View File

@ -8,7 +8,7 @@ export interface Breadcrumb {
@Component({
selector: 'breadcrumbs',
template: `
<ul class="uk-breadcrumb" [ngClass]="addClass" [class.uk-light]="light">
<ul class="uk-breadcrumb uk-margin-remove-bottom" [ngClass]="addClass" [class.uk-light]="light">
<li *ngFor="let breadcrumb of breadcrumbs">
<a class="uk-text-capitalize" *ngIf="breadcrumb.route" [routerLink]="breadcrumb.route">{{breadcrumb.name}}</a>
<span class="uk-text-capitalize" *ngIf="!breadcrumb.route">{{breadcrumb.name}}</span>

View File

@ -1,6 +1,11 @@
import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild} from "@angular/core";
import {IconsService} from "./icons.service";
export interface StopRule {
class: string,
offset: number
}
/**
* By default this component uses Material Icons Library to render an icon with
* a specific @name. For custom icons you should:
@ -17,12 +22,23 @@ import {IconsService} from "./icons.service";
*
* - Custom SVG Icon. Define a variable in your component with an SVG and give it as Input @svg.
*
* In case of SVGs, there is an opportunity to add gradient color by define at least a start and end stop-color rules
* and an id to support them. This option is enabled by giving id as input in @gradient (Optional @degrees for gradient direction)
*
* e.g #gradient .start {
* stop-color: red;
* }
*
* e.g #gradient .end {
* stop-color: orange;
* }
*
* */
@Component({
selector: 'icon',
template: `
<span #icon *ngIf="svg" class="uk-icon" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
<span [class.uk-flex]="flex" [ngClass]="customClass">
<span #icon *ngIf="svg" class="uk-icon" [class.uk-preserve]="gradient" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
<span [class.uk-flex]="flex" [ngClass]="customClass" [class.uk-display-inline-block]="!flex">
<span *ngIf="!svg && iconName" class="material-icons" [ngClass]="type" [ngStyle]="style">{{iconName}}</span>
</span>
<span *ngIf="visuallyHidden" class="visually-hidden">{{visuallyHidden}}</span>
@ -37,6 +53,8 @@ export class IconsComponent implements AfterViewInit {
*/
@Input()
public svg;
@Input()
public defaultSize = false;
/**
* True if this icon should have display flex (Optional, Default: false)
*
@ -61,6 +79,8 @@ export class IconsComponent implements AfterViewInit {
public stroke;
/**
* Size of icon (Default: 1)
*
* Disabled if defaultSize = true
* */
@Input()
public ratio = 1;
@ -78,10 +98,22 @@ export class IconsComponent implements AfterViewInit {
this.svg = this.iconsService.getIcon(iconName);
}
/**
*
* Set visually hidden name for accessibility
* */
@Input()
public visuallyHidden: string = null;
/**
* Gradient rules
* Available only for SVG!
*
* Define your css rules for stop-colors
* */
@Input()
public gradient: string = null;
@Input()
public degrees: number = 0;
@Input()
public stopRules: StopRule[]= [{class: 'start', offset: 0}, {class: 'end', offset: 100}];
@ViewChild("icon")
public icon: ElementRef;
@ -90,13 +122,19 @@ export class IconsComponent implements AfterViewInit {
ngAfterViewInit() {
if(this.svg) {
let svg = this.icon.nativeElement.getElementsByTagName('svg').item(0);
svg.setAttribute("width", (this.ratio*IconsComponent.DEFAULT_ICON_SIZE).toString());
svg.setAttribute("height", (this.ratio*IconsComponent.DEFAULT_ICON_SIZE).toString());
let svg: Element = this.icon.nativeElement.getElementsByTagName('svg').item(0);
if(!this.defaultSize) {
svg.setAttribute("width", (this.ratio * IconsComponent.DEFAULT_ICON_SIZE).toString());
svg.setAttribute("height", (this.ratio * IconsComponent.DEFAULT_ICON_SIZE).toString());
}
if(this.gradient) {
this.addGradient(svg);
} else {
this.style = {
fill: this.fill,
stroke: this.stroke
};
}
} else {
this.style = {
"font-size.px": this.ratio*IconsComponent.DEFAULT_ICON_SIZE
@ -104,4 +142,33 @@ export class IconsComponent implements AfterViewInit {
}
this.cdr.detectChanges();
}
addGradient(svg: Element) {
if(svg.children.length > 0 && typeof document !== "undefined") {
let gradientDefinition = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
gradientDefinition.setAttribute('id', this.gradient);
if(this.degrees !== 0) {
let angle = (this.degrees) * (Math.PI / 180);
gradientDefinition.setAttribute('x1', Math.round(50 + Math.sin(angle + Math.PI) * 50) + '%');
gradientDefinition.setAttribute('y1', Math.round(50 + Math.cos(angle + Math.PI) * 50) + '%');
gradientDefinition.setAttribute('x2', Math.round(50 + Math.sin(angle) * 50) + '%');
gradientDefinition.setAttribute('y2', Math.round(50 + Math.cos(angle) * 50) + '%');
}
for(let rule of this.stopRules) {
let item = document.createElementNS('http://www.w3.org/2000/svg','stop');
item.setAttribute('class', rule.class);
item.setAttribute('offset', rule.offset + '%');
gradientDefinition.appendChild(item);
}
let defs = document.createElementNS('http://www.w3.org/2000/svg','defs');
defs.appendChild(gradientDefinition);
for(let i = 0; i < svg.children.length; i++) {
let item = svg.children.item(i);
if(!item.hasAttribute('fill')) {
item.setAttribute('fill', "url('#" + this.gradient + "')");
}
}
svg.insertBefore(defs, svg.childNodes[0]);
}
}
}

View File

@ -148,3 +148,8 @@ export const print = {
}
/** Add new icon under this line to be sure that it will be added on preview */
export const incognito = {
name: 'incognito',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24.51 19.525"><g id="Group_13376" data-name="Group 13376" transform="translate(-428.81 -3863.018)"><path id="Path_104500" data-name="Path 104500" d="M44.68,105.185H43.024a23.507,23.507,0,0,0-9.194-.158V106a3.909,3.909,0,0,1,1.264,1.668c.455,1.119.2,3.05,4.148,3.289s4-4.041,4.034-4.438.577-.372.577-.372.541-.021.579.372.09,4.673,4.034,4.438,3.693-2.17,4.146-3.289A3.9,3.9,0,0,1,53.879,106v-.969A23.686,23.686,0,0,0,44.68,105.185Z" transform="translate(397.218 3771.582)" fill="#2c2c2c"/><path id="Path_104501" data-name="Path 104501" d="M41.867,35.784H40.326s-1.95-6.217-2.207-6.735a2.8,2.8,0,0,0-2.591-2.061c-1.92-.266-2.138,1.225-3.544,1.268-1.406-.049-1.617-1.546-3.542-1.268a2.817,2.817,0,0,0-2.592,2.061c-.246.518-2.205,6.735-2.205,6.735H22.1a2.31,2.31,0,0,0-2.371,2.245H44.24A2.311,2.311,0,0,0,41.867,35.784Z" transform="translate(409.08 3836.064)" fill="#2c2c2c"/></g></svg>'
}

View File

@ -13,10 +13,10 @@ import {Component, HostListener, Input, OnInit, ViewEncapsulation} from "@angula
@Component({
selector: 'section-scroll',
template: `
<div class="section" [ngClass]="customClass">
<div [ngClass]="customClass">
<ng-content select="[top]"></ng-content>
<div class="content" [ngClass]="childrenCustomClass">
<div class="uk-grid">
<div [ngClass]="childrenCustomClass">
<div class="uk-grid" uk-grid>
<ng-content select="[left]"></ng-content>
<ng-content select="[scroll]"></ng-content>
</div>