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

progress on result-landing page and used components within it

This commit is contained in:
Alex Martzios 2023-01-09 18:35:28 +02:00
parent 9ead7fee7d
commit 871c45c480
10 changed files with 204 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -98,7 +98,8 @@
<landing-header [properties]="properties" [title]="dataProviderInfo.title.name"
[subTitle]="(dataProviderInfo.officialName
&& dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null"
[types]="dataProviderInfo.type ? [dataProviderInfo.type] : null">
[types]="dataProviderInfo.type ? [dataProviderInfo.type] : null"
[entityType]="getTypeName()">
</landing-header>
<!-- Labels -->

22
landingPages/landing-utils/availableOn.component.ts
View File

@ -5,7 +5,19 @@ import {properties} from "../../../../environments/environment";
@Component({
selector: 'availableOn',
template: `
<div class="uk-margin-small-bottom uk-flex uk-flex-between">
<!-- new template for downloads dropdown -->
<ng-container *ngIf="availableOn">
<a class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder custom-external">
<span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'lock_open' ? 'uk-text-success' : 'uk-text-meta')"
uk-tooltip [title]="availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available'">
<icon [name]="availableOn[0].accessRightIcon" flex="true" type="outlined"></icon>
</span>
{{availableOn[0].downloadNames.join("; ")}}
</a>
<!-- TODO: Dropdown for download options -->
</ng-container>
<!-- <div class="uk-margin-small-bottom uk-flex uk-flex-between">
<span *ngIf="viewAll && !lessBtn" class="clickable uk-h6 uk-flex uk-flex-middle" (click)="viewLessClick()">
<icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon>
{{title}}
@ -55,7 +67,9 @@ import {properties} from "../../../../environments/environment";
</div>
</div>
</div>
</div>
</div> -->
<!-- <div *ngIf="showNum > threshold" class="uk-margin-bottom">-->
<!-- <a (click)="showNum = threshold;" class="uk-flex uk-flex-middle uk-flex-center">-->
<!-- <span>View less</span>-->
@ -91,7 +105,9 @@ export class AvailableOnComponent {
constructor() {
}
ngOnInit() {}
ngOnInit() {
console.log(this.availableOn);
}
public removeUnknown(value: string): string {
if (value.toLowerCase() === 'unknown') {

43
landingPages/landing-utils/landing-header/landing-header.component.ts
View File

@ -6,19 +6,31 @@ import {AlertModal} from "../../../utils/modal/alert";
@Component({
selector: 'landing-header',
template: `
<div class="title-section" [class.uk-margin-bottom]="!isSticky" [ngClass]="titleClass">
<div class="uk-margin-xsmall-bottom">
<div class="title-section" [class.uk-margin-small-bottom]="!isSticky" [ngClass]="titleClass">
<div class="uk-margin-small-bottom">
<showTitle [titleName]="title" classNames="uk-margin-remove-bottom"></showTitle>
<div *ngIf="subTitle">
<span class="uk-text-meta uk-text-small" [innerHTML]="subTitle"></span>
</div>
</div>
<div class="uk-margin-small-bottom uk-text-xsmall">
<div class="uk-margin-bottom uk-text-xsmall uk-text-emphasis uk-flex uk-flex-middle">
<span *ngIf="entityType" class="uk-margin-xsmall-right">
<icon *ngIf="entityType.toLowerCase() == 'publication'" name="description" type="outlined" [flex]="true" ratio="0.8"></icon>
<icon *ngIf="entityType.toLowerCase() == 'research data'" name="database" type="outlined" [flex]="true" ratio="0.8"></icon>
<icon *ngIf="entityType.toLowerCase() == 'research software'" name="integration_instructions" type="outlined" [flex]="true" ratio="0.8"></icon>
<icon *ngIf="entityType.toLowerCase() == 'other research product'" name="apps" type="outlined" [flex]="true" ratio="0.8"></icon>
<icon *ngIf="entityType.toLowerCase() == 'project'" name="assignment_turned_in" type="outlined" [flex]="true" ratio="0.8"></icon>
<icon *ngIf="entityType.toLowerCase() == 'data source'" name="note_add" type="outlined" [flex]="true" ratio="0.8"></icon>
<icon *ngIf="entityType.toLowerCase() == 'organization'" name="corporate_fare" type="outlined" [flex]="true" ratio="0.8"></icon>
</span>
<span *ngIf="entityType" class="uk-text-capitalize uk-text-bolder" style="text-decoration: underline;">
{{entityType}}
</span>
<span *ngIf="entityType && types && removeUnknown(types, true).length > 0">
<icon name="keyboard_double_arrow_right" [flex]="true" ratio="0.8"></icon>
</span>
<span *ngIf="types && removeUnknown(types, true).length > 0" class="uk-text-italic">
{{(entityType?' >> ':'') + removeUnknown(types, true).join(' . ')}}
{{removeUnknown(types, true).join(' , ')}}
</span>
<span>
<span *ngIf="startDate || endDate">
@ -54,6 +66,23 @@ import {AlertModal} from "../../../utils/modal/alert";
uk-tooltip="pos:bottom-right; delay:10;"
class="uk-text-primary">Under curation</span>
</span>
<!-- languages -->
<ng-container *ngIf="languages && removeUnknown(languages).length > 0">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<ng-container *ngFor="let language of removeUnknown(languages)">
<span>{{language}}</span>
</ng-container>
</ng-container>
<!-- programming languages -->
<ng-container *ngIf="programmingLanguages && programmingLanguages.length > 0">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<ng-container *ngFor="let programmingLanguage of programmingLanguages">
<span>{{programmingLanguage}}</span>
</ng-container>
</ng-container>
<!-- published info -->
<showPublisher [publisher]="publisher" [publishDate]="publishDate"
[journal]="journal" [properties]="properties"></showPublisher>
</div>
<div *ngIf="authors">
<showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors" [isSticky]="isSticky"></showAuthors>
@ -79,6 +108,12 @@ export class LandingHeaderComponent {
@Input() titleClass: string = null;
@Input() isTitleH1:boolean =true;
@Input() isSticky: boolean = false;
@Input() publisher; // showPublisher component
@Input() publishDate: Date; // showPublisher component
@Input() journal; // showPublisher component
@Input() languages;
@Input() programmingLanguages;
public removeUnknown(array: string[], type: boolean = false): string[] {
if (type) {
return this.removeDuplicates(array).filter(value => value.toLowerCase() !== 'unknown');

4
landingPages/landing-utils/landing-header/landing-header.module.ts
View File

@ -3,9 +3,11 @@ import {LandingHeaderComponent} from "./landing-header.component";
import {CommonModule} from "@angular/common";
import {LandingModule} from "../landing.module";
import {ShowAuthorsModule} from "../../../utils/authors/showAuthors.module";
import {IconsModule} from "src/app/openaireLibrary/utils/icons/icons.module";
import {ShowPublisherModule} from "../showPublisher.module";
@NgModule({
imports: [CommonModule, LandingModule, ShowAuthorsModule],
imports: [CommonModule, LandingModule, ShowAuthorsModule, IconsModule, ShowPublisherModule],
declarations: [LandingHeaderComponent],
exports: [LandingHeaderComponent]
})

137
landingPages/landing-utils/showPublisher.component.ts
View File

@ -4,73 +4,76 @@ import {EnvProperties} from "../../utils/properties/env-properties";
@Component({
selector: 'showPublisher, [showPublisher]',
template: `
<div *ngIf="publishDate || journal && (journal['journal'] || journal['issn'] || journal['lissn']
|| journal['volume'] || journal['eissn'] || journal['issue'])" class="uk-text-small">
<span *ngIf="publishDate" class="uk-margin-right">
<span class="uk-text-meta">Published: </span>
{{publishDate | date: 'dd MMM yyyy' : 'UTC'}}
</span>
<span *ngIf="journal && (journal['journal'] || journal['issn'] || journal['lissn']
|| journal['volume'] || journal['eissn'] || journal['issue'])">
<span class="uk-text-meta">Journal: </span>
<span *ngIf="journal['journal']">{{journal['journal']}}</span>
<span *ngIf="journal['journal'] && (journal['volume'] || journal['issue'])">, </span>
<ng-container *ngIf="journal['volume']">
<span class="uk-display-inline-block">
volume
<span *ngIf="journal['volume'] > 0">{{journal['volume'] | number}}</span>
<span *ngIf="!(journal['volume'] > 0)">{{journal['volume']}}</span>
</span>
<span *ngIf="journal['issue'] || journal['start_page'] || journal['end_page']">, </span>
</ng-container>
<ng-container *ngIf="journal['issue']">
<span class="uk-display-inline-block">
issue
<span *ngIf="journal['issue'] > 0">{{journal['issue'] | number}}</span>
<span *ngIf="!(journal['issue'] > 0)">{{journal['issue']}}</span>
</span>
<span *ngIf="journal['start_page'] || journal['end_page']">, </span>
</ng-container>
<span *ngIf="(journal['volume'] || journal['issue']) && (journal['start_page'] || journal['end_page'])"
class="uk-display-inline-block">
{{(journal['start_page'] && journal['end_page']) ? 'pages' : 'page'}}
<span *ngIf="journal['start_page']">
<span *ngIf="journal['start_page'] > 0">{{journal['start_page'] | number}}</span>
<span *ngIf="!(journal['start_page'] > 0)">{{journal['start_page']}}</span>
</span>
<span *ngIf="journal['start_page'] && journal['end_page']">-</span>
<span *ngIf="journal['end_page']">
<span *ngIf="journal['end_page'] > 0">{{journal['end_page'] | number}}</span>
<span *ngIf="!(journal['end_page'] > 0)">{{journal['end_page']}}</span>
</span>
</span>
<span *ngIf=" journal['journal'] && (journal['issn'] || journal['eissn'] || journal['lissn'])"> (</span>
<ng-container *ngIf="journal['issn']">
<span class="uk-display-inline-block">issn: {{journal['issn']}}</span>
<span>, </span>
</ng-container>
<ng-container *ngIf="journal['eissn']">
<span class="uk-display-inline-block">eissn: {{journal['eissn']}}</span>
<span>, </span>
</ng-container>
<span *ngIf="journal['lissn']" class="uk-display-inline-block">
<span class="uk-display-inline-block">lissn: {{journal['lissn']}}</span>
<span>, </span>
</span>
<span *ngIf="journal && (journal['issn'] ||journal['lissn'] || journal['eissn'] )">
<a target="_blank" class="uk-display-inline-block custom-external"
[href]="properties.sherpaURL+(journal['issn']?journal['issn']:(journal['eissn']?journal['eissn']:journal['lissn'] ))+properties.sherpaURLSuffix"
uk-tooltip="title: View information on Sherpa/RoMEO ">
<img src="assets/common-assets/common/SHERPA-RoMEO-short-logo.gif" width=16 height=16 alt="" loading="lazy">
Copyright policy
</a>
</span>
<span *ngIf=" journal['journal'] && (journal['issn'] || journal['eissn'] || journal['lissn'])">)</span>
</span>
</div>
<div *ngIf="publisher" class="uk-text-small uk-margin-small-top">
<span class="uk-text-meta">Publisher: </span> {{publisher}}
</div>
<ng-container *ngIf="publishDate || journal && (journal['journal'] || journal['issn'] || journal['lissn']
|| journal['volume'] || journal['eissn'] || journal['issue'])">
<ng-container *ngIf="publishDate">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>{{publishDate | date: 'dd MMM yyyy' : 'UTC'}}</span>
</ng-container>
<ng-container *ngIf="journal && (journal['journal'] || journal['issn'] || journal['lissn']
|| journal['volume'] || journal['eissn'] || journal['issue'])">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>
<span *ngIf="journal['journal']">{{journal['journal']}}</span>
<span *ngIf="journal['journal'] && (journal['volume'] || journal['issue'])">, </span>
<ng-container *ngIf="journal['volume']">
<span class="uk-display-inline-block">
volume
<span *ngIf="journal['volume'] > 0">{{journal['volume'] | number}}</span>
<span *ngIf="!(journal['volume'] > 0)">{{journal['volume']}}</span>
</span>
<span *ngIf="journal['issue'] || journal['start_page'] || journal['end_page']">, </span>
</ng-container>
<ng-container *ngIf="journal['issue']">
<span class="uk-display-inline-block">
issue
<span *ngIf="journal['issue'] > 0">{{journal['issue'] | number}}</span>
<span *ngIf="!(journal['issue'] > 0)">{{journal['issue']}}</span>
</span>
<span *ngIf="journal['start_page'] || journal['end_page']">, </span>
</ng-container>
<span *ngIf="(journal['volume'] || journal['issue']) && (journal['start_page'] || journal['end_page'])"
class="uk-display-inline-block">
{{(journal['start_page'] && journal['end_page']) ? 'pages' : 'page'}}
<span *ngIf="journal['start_page']">
<span *ngIf="journal['start_page'] > 0">{{journal['start_page'] | number}}</span>
<span *ngIf="!(journal['start_page'] > 0)">{{journal['start_page']}}</span>
</span>
<span *ngIf="journal['start_page'] && journal['end_page']">-</span>
<span *ngIf="journal['end_page']">
<span *ngIf="journal['end_page'] > 0">{{journal['end_page'] | number}}</span>
<span *ngIf="!(journal['end_page'] > 0)">{{journal['end_page']}}</span>
</span>
</span>
<span *ngIf=" journal['journal'] && (journal['issn'] || journal['eissn'] || journal['lissn'])"> (</span>
<ng-container *ngIf="journal['issn']">
<span class="uk-display-inline-block">issn: {{journal['issn']}}</span>
<span>, </span>
</ng-container>
<ng-container *ngIf="journal['eissn']">
<span class="uk-display-inline-block">eissn: {{journal['eissn']}}</span>
<span>, </span>
</ng-container>
<span *ngIf="journal['lissn']" class="uk-display-inline-block">
<span class="uk-display-inline-block">lissn: {{journal['lissn']}}</span>
<span>, </span>
</span>
<span *ngIf="journal && (journal['issn'] ||journal['lissn'] || journal['eissn'] )">
<a target="_blank" class="uk-display-inline-block custom-external"
[href]="properties.sherpaURL+(journal['issn']?journal['issn']:(journal['eissn']?journal['eissn']:journal['lissn'] ))+properties.sherpaURLSuffix"
uk-tooltip="title: View information on Sherpa/RoMEO ">
<img src="assets/common-assets/common/SHERPA-RoMEO-short-logo.gif" width=16 height=16 alt="" loading="lazy">
Copyright policy
</a>
</span>
<span *ngIf=" journal['journal'] && (journal['issn'] || journal['eissn'] || journal['lissn'])">)</span>
</span>
</ng-container>
</ng-container>
<ng-container *ngIf="publisher">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>{{publisher}}</span>
</ng-container>
`
})
export class ShowPublisherComponent {

3
landingPages/landing-utils/showPublisher.module.ts
View File

@ -1,10 +1,11 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ShowPublisherComponent} from "./showPublisher.component";
import {IconsModule} from '../../utils/icons/icons.module';
@NgModule({
imports: [
CommonModule
CommonModule, IconsModule
],
declarations: [
ShowPublisherComponent

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

@ -105,36 +105,58 @@
<!-- new action bar -->
<div class="uk-margin-top uk-margin-bottom">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div style="padding: 10px 30px; border-radius: 4px; border: #E96439 solid 1px; box-shadow: 3px 3px 15px #0000001A;">
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
<div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;">
<!-- TODO -->
<!-- Dropdown -->
<!-- Download from -->
<availableOn [availableOn]="resultLandingInfo.hostedBy_collectedFrom" (viewAllClicked)="viewAll=$event"></availableOn>
<!-- Versions -->
<a *ngIf="resultLandingInfo.deletedByInferenceIds" (click)="openDeletedByInference()"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="auto_awesome_motion" visuallyHidden="versions"></icon>
<icon flex="true" ratio="0.8" name="versions" visuallyHidden="versions"></icon>
<span class="uk-margin-xsmall-left">
View all {{resultLandingInfo.deletedByInferenceIds.length}} versions
</span>
</a>
<!-- Divider -->
<span style="background: #B3B3B3; width: 1px;"></span>
<span *ngIf="resultLandingInfo.deletedByInferenceIds" class="landing-action-bar-divider"></span>
<!-- Actions -->
<a href="" class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="1" name="link" visuallyHidden="link"></icon>
<a *ngIf="isRouteAvailable('participate/direct-claim')"
[title]="'<span class=\'uk-flex uk-flex-middle\'>Link this '+getTypeName()+' to ...<span class=\'material-icons uk-margin-small-left\'>east</span></span>'"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.7" name="link_to" visuallyHidden="link"></icon>
<span class="uk-margin-xsmall-left">Link to</span>
</a>
<a href="" class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<a (click)="openAddThisModal()"
[title]="'Share this '+getTypeName() + ' in your social networks'"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="share" visuallyHidden="share"></icon>
<span class="uk-margin-xsmall-left">Share</span>
</a>
<a href="" class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="quotes" visuallyHidden="cite"></icon>
<a (click)="openCiteModal()"
[title]="'Cite this '+getTypeName()"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.7" name="cite" visuallyHidden="cite"></icon>
<span class="uk-margin-xsmall-left">Cite</span>
</a>
<a href="" class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="orcid_add" visuallyHidden="orcid_add"></icon>
<span class="uk-margin-xsmall-left">Claim</span>
<!-- TODO: Add orcid component for icon - will need changes inside the component -->
<a *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community' || properties.adminToolsPortalType == 'aggregator'"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<!-- <icon flex="true" ratio="0.8" name="orcid_add" visuallyHidden="orcid_add"></icon>
<span class="uk-margin-xsmall-left">Claim</span> -->
<orcid-work [resultId]="id" [resultTitle]="resultLandingInfo.title" [resultLandingInfo]="resultLandingInfo"
[pids]="pidsArrayString" [pageType]="'landing'">
</orcid-work>
</a>
<!-- TODO: EGI transfer data action -->
<a *ngIf=" properties.enableEoscDataTransfer && resultLandingInfo.resultType == 'dataset' &&
resultLandingInfo.identifiers && resultLandingInfo.identifiers.get('doi') &&
resultLandingInfo.identifiers.get('doi').join('').indexOf('zenodo.')!=-1">
<egi-transfer-data [dois]="resultLandingInfo.identifiers.get('doi')" [isOpen]="egiTransferModalOpen"></egi-transfer-data>
</a>
</div>
</div>
@ -206,10 +228,14 @@
[authors]="resultLandingInfo.authors"
[underCuration]="resultLandingInfo.underCurationMessage"
[entityType]="getTypeName()" [types]="resultLandingInfo.types"
[year]="resultLandingInfo.date" [embargoEndDate]="resultLandingInfo.embargoEndDate">
[year]="resultLandingInfo.date" [embargoEndDate]="resultLandingInfo.embargoEndDate"
[publisher]="resultLandingInfo.publisher" [publishDate]="resultLandingInfo.dateofacceptance"
[journal]="resultLandingInfo.journal" [languages]="resultLandingInfo.languages"
[programmingLanguages]="resultLandingInfo.programmingLanguages">
</landing-header>
<!-- Labels -->
<div class="uk-margin-bottom uk-grid uk-grid-small uk-flex-middle" uk-grid>
<!-- Not used anymore - access labels will be in action bars, languages in the landing-header component -->
<!-- <div class="uk-margin-bottom uk-grid uk-grid-small uk-flex-middle" uk-grid>
<ng-container *ngIf="resultLandingInfo.accessMode && resultLandingInfo.accessMode.toLowerCase() !== 'not available'">
<div>
<span [class]="'uk-label uk-text-truncate '+ (accessClass(resultLandingInfo.accessMode) == 'open' ? 'uk-label-success' : '')"
@ -233,16 +259,17 @@
</div>
</ng-container>
</ng-container>
</div>
</div> -->
<div class="uk-text-small">
<!-- Identifiers -->
<div *ngIf="resultLandingInfo.identifiers && resultLandingInfo.identifiers.size > 0" class="uk-margin-small-top">
<showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers>
</div>
<!--Published Date, Journal and Publisher-->
<div showPublisher [publisher]="resultLandingInfo.publisher"
<!-- Moved inside landing-header component -->
<!-- <div showPublisher [publisher]="resultLandingInfo.publisher"
[publishDate]="resultLandingInfo.dateofacceptance"
[journal]="resultLandingInfo.journal" [properties]="properties" class="uk-margin-small-top"></div>
[journal]="resultLandingInfo.journal" [properties]="properties" class="uk-margin-small-top"></div> -->
</div>
</div>
@ -522,9 +549,9 @@
(viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"></relatedTo>
</div>
<!-- Download From -->
<div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0 && (!viewAll || viewAll=='availableOn')">
<!-- <div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0 && (!viewAll || viewAll=='availableOn')">
<availableOn [availableOn]="resultLandingInfo.hostedBy_collectedFrom" (viewAllClicked)="viewAll=$event"></availableOn>
</div>
</div> -->
</div>
</ng-template>
</div>

4
landingPages/result/resultLanding.module.ts
View File

@ -33,7 +33,7 @@ import {MatFormFieldModule} from "@angular/material/form-field";
import {MatSelectModule} from "@angular/material/select";
import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service";
import {graph, link, quotes} from "../../utils/icons/icons";
import {graph, link, quotes, cite, link_to, versions} from "../../utils/icons/icons";
import {InputModule} from "../../sharedComponents/input/input.module";
import {EGIDataTransferModule} from "../../utils/dataTransfer/transferData.module";
@ -58,6 +58,6 @@ import {EGIDataTransferModule} from "../../utils/dataTransfer/transferData.modul
})
export class ResultLandingModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([link, graph, quotes])
this.iconsService.registerIcons([link, graph, quotes, cite, link_to, versions])
}
}

9
orcid/orcid-work.component.ts
View File

@ -54,21 +54,22 @@ declare var UIkit: any;
<ng-container *ngIf="pageType == 'landing'">
<span *ngIf="!putCodes || putCodes.length == 0"
[attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="(!pids || !isLoggedIn) ? (!pids ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipAdd">
<a *ngIf="!showLoading" (click)="currentAction='add'; saveWorkPreparation();"
class="uk-icon-button uk-icon landing-action-button landing-action-button-orcid"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"
[class.uk-disabled]="showLoading || !isLoggedIn || !pids"
(mouseover)="hoverEvent($event)" (mouseout)="hoverEvent($event)">
<icon *ngIf="!hoverAdd" name="orcid_add" ratio="1.1" visuallyHidden="add"></icon>
<icon *ngIf="!hoverAdd" name="orcid_add" ratio="0.8" visuallyHidden="add"></icon>
<icon *ngIf="hoverAdd" name="add" visuallyHidden="add"></icon>
<span class="uk-margin-xsmall-left">Claim</span>
</a>
<span *ngIf="showLoading" class="uk-icon icon-button uk-icon-button-small"><loading
[top_margin]="false" [size]="'small'"></loading></span>
</span>
<span *ngIf="putCodes && putCodes.length > 0"
[attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="(!pids || !isLoggedIn) ? (!pids ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipDelete">
<a *ngIf="!showLoading" (click)="currentAction='delete'; deleteWorks();"
class="uk-icon-button uk-icon landing-action-button landing-action-button-orcid"

15
utils/icons/icons.ts
View File

@ -112,4 +112,19 @@ export const login = {
name: 'login',
data: '<svg width="20px" height="20px" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg"><g><path d="m151.67 536.67c0-109.47 88.863-198.34 198.33-198.34s198.33 88.867 198.33 198.34c0 6.4375 5.2266 11.664 11.668 11.664s11.668-5.2266 11.668-11.664c0-122.34-99.332-221.67-221.67-221.67s-221.67 99.328-221.67 221.67c0 6.4375 5.2266 11.664 11.668 11.664s11.668-5.2266 11.668-11.664z" fill-rule="evenodd"/><path d="m349.8 11.668c-77.164 0-139.8 62.637-139.8 139.8s62.637 139.8 139.8 139.8c77.164 0 139.8-62.637 139.8-139.8s-62.637-139.8-139.8-139.8zm0 23.332c64.285 0 116.47 52.184 116.47 116.47 0 64.281-52.184 116.47-116.47 116.47-64.281 0-116.47-52.188-116.47-116.47 0-64.285 52.188-116.47 116.47-116.47z" fill-rule="evenodd"/></g></svg>'
}
export const cite = {
name: 'cite',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9.6" viewBox="0 0 12 9.6"> <path id="Icon_metro-quote" data-name="Icon metro-quote" d="M8.355,14.44v4.8h4.8v-4.8h-2.4a2.351,2.351,0,0,1,2.4-2.4V9.64S8.355,9.64,8.355,14.44Zm12-2.4V9.64s-4.8,0-4.8,4.8v4.8h4.8v-4.8h-2.4A2.351,2.351,0,0,1,20.355,12.04Z" transform="translate(-8.355 -9.64)" fill="#211f7e"/> </svg>'
}
export const link_to = {
name: 'link_to',
data: '<svg width="13" height="13.369" viewBox="0 0 13 13.369" xmlns="http://www.w3.org/2000/svg"> <path id="Path_104455" data-name="Path 104455" d="M31.828,5.475,29.7,8.018a3.32,3.32,0,0,1-1.48,1,3.582,3.582,0,0,1-.5.128,3.318,3.318,0,0,1-2.993-1,.7.7,0,0,1,1.026-.958,1.919,1.919,0,0,0,2.409.323,1.865,1.865,0,0,0,.434-.369l2.156-2.572a1.949,1.949,0,0,0-.165-2.7l-.04-.036a1.917,1.917,0,0,0-2.7.239L26.825,3.3A.7.7,0,1,1,25.751,2.4l1.024-1.225A3.312,3.312,0,0,1,31.4.725a3.272,3.272,0,0,1,1.2,2.238A3.443,3.443,0,0,1,31.828,5.475Z" transform="translate(-19.621 0.015)" fill="#211f7e"/> <path id="Path_104456" data-name="Path 104456" d="M7.98,22.786a.691.691,0,0,1-.522.247.673.673,0,0,1-.532-.225,1.785,1.785,0,0,0-.2-.2,1.905,1.905,0,0,0-2.236-.159,1.869,1.869,0,0,0-.44.359l-2.19,2.61-.04.05a1.917,1.917,0,0,0,.323,2.692,1.955,1.955,0,0,0,2.688-.319l.915-1.1a.693.693,0,0,1,.476-.249.7.7,0,0,1,.6,1.148L5.91,28.735A3.427,3.427,0,0,1,3.884,29.9a2.708,2.708,0,0,1-.309.038,3.256,3.256,0,0,1-2.409-.779,3.312,3.312,0,0,1-.381-4.633l2.16-2.588A3.124,3.124,0,0,1,3.3,21.58a3.32,3.32,0,0,1,4.682.291A.7.7,0,0,1,7.98,22.786Z" transform="translate(-0.015 -16.582)"/></svg>'
}
export const versions = {
name: 'versions',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="17" height="12.143" viewBox="0 0 17 12.143"> <path id="Icon_metro-versions" data-name="Icon metro-versions" d="M4.5,17.426H6.927V16.212H5.713V11.355H6.927V10.141H4.5v7.286Zm7.286-9.714V19.855H21.5V7.712H11.784Zm7.286,9.714H14.213V10.141H19.07ZM8.142,18.641H10.57V17.426H9.356V10.141H10.57V8.926H8.142Z" transform="translate(-4.499 -7.712)" fill="#211f7e"/> </svg>'
}
/** Add new icon under this line to be sure that it will be added on preview */