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" <landing-header [properties]="properties" [title]="dataProviderInfo.title.name"
[subTitle]="(dataProviderInfo.officialName [subTitle]="(dataProviderInfo.officialName
&& dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null" && dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null"
[types]="dataProviderInfo.type ? [dataProviderInfo.type] : null"> [types]="dataProviderInfo.type ? [dataProviderInfo.type] : null"
[entityType]="getTypeName()">
</landing-header> </landing-header>
<!-- Labels --> <!-- Labels -->

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

@ -5,7 +5,19 @@ import {properties} from "../../../../environments/environment";
@Component({ @Component({
selector: 'availableOn', selector: 'availableOn',
template: ` 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()"> <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> <icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon>
{{title}} {{title}}
@ -55,7 +67,9 @@ import {properties} from "../../../../environments/environment";
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<!-- <div *ngIf="showNum > threshold" class="uk-margin-bottom">--> <!-- <div *ngIf="showNum > threshold" class="uk-margin-bottom">-->
<!-- <a (click)="showNum = threshold;" class="uk-flex uk-flex-middle uk-flex-center">--> <!-- <a (click)="showNum = threshold;" class="uk-flex uk-flex-middle uk-flex-center">-->
<!-- <span>View less</span>--> <!-- <span>View less</span>-->
@ -91,7 +105,9 @@ export class AvailableOnComponent {
constructor() { constructor() {
} }
ngOnInit() {} ngOnInit() {
console.log(this.availableOn);
}
public removeUnknown(value: string): string { public removeUnknown(value: string): string {
if (value.toLowerCase() === 'unknown') { 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({ @Component({
selector: 'landing-header', selector: 'landing-header',
template: ` template: `
<div class="title-section" [class.uk-margin-bottom]="!isSticky" [ngClass]="titleClass"> <div class="title-section" [class.uk-margin-small-bottom]="!isSticky" [ngClass]="titleClass">
<div class="uk-margin-xsmall-bottom"> <div class="uk-margin-small-bottom">
<showTitle [titleName]="title" classNames="uk-margin-remove-bottom"></showTitle> <showTitle [titleName]="title" classNames="uk-margin-remove-bottom"></showTitle>
<div *ngIf="subTitle"> <div *ngIf="subTitle">
<span class="uk-text-meta uk-text-small" [innerHTML]="subTitle"></span> <span class="uk-text-meta uk-text-small" [innerHTML]="subTitle"></span>
</div> </div>
</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;"> <span *ngIf="entityType" class="uk-text-capitalize uk-text-bolder" style="text-decoration: underline;">
{{entityType}} {{entityType}}
</span> </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"> <span *ngIf="types && removeUnknown(types, true).length > 0" class="uk-text-italic">
{{(entityType?' >> ':'') + removeUnknown(types, true).join(' . ')}} {{removeUnknown(types, true).join(' , ')}}
</span> </span>
<span> <span>
<span *ngIf="startDate || endDate"> <span *ngIf="startDate || endDate">
@ -54,6 +66,23 @@ import {AlertModal} from "../../../utils/modal/alert";
uk-tooltip="pos:bottom-right; delay:10;" uk-tooltip="pos:bottom-right; delay:10;"
class="uk-text-primary">Under curation</span> class="uk-text-primary">Under curation</span>
</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>
<div *ngIf="authors"> <div *ngIf="authors">
<showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors" [isSticky]="isSticky"></showAuthors> <showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors" [isSticky]="isSticky"></showAuthors>
@ -79,6 +108,12 @@ export class LandingHeaderComponent {
@Input() titleClass: string = null; @Input() titleClass: string = null;
@Input() isTitleH1:boolean =true; @Input() isTitleH1:boolean =true;
@Input() isSticky: boolean = false; @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[] { public removeUnknown(array: string[], type: boolean = false): string[] {
if (type) { if (type) {
return this.removeDuplicates(array).filter(value => value.toLowerCase() !== 'unknown'); 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 {CommonModule} from "@angular/common";
import {LandingModule} from "../landing.module"; import {LandingModule} from "../landing.module";
import {ShowAuthorsModule} from "../../../utils/authors/showAuthors.module"; import {ShowAuthorsModule} from "../../../utils/authors/showAuthors.module";
import {IconsModule} from "src/app/openaireLibrary/utils/icons/icons.module";
import {ShowPublisherModule} from "../showPublisher.module";
@NgModule({ @NgModule({
imports: [CommonModule, LandingModule, ShowAuthorsModule], imports: [CommonModule, LandingModule, ShowAuthorsModule, IconsModule, ShowPublisherModule],
declarations: [LandingHeaderComponent], declarations: [LandingHeaderComponent],
exports: [LandingHeaderComponent] exports: [LandingHeaderComponent]
}) })

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

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

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

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

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

@ -105,36 +105,58 @@
<!-- new action bar --> <!-- new action bar -->
<div class="uk-margin-top uk-margin-bottom"> <div class="uk-margin-top uk-margin-bottom">
<div class="uk-flex uk-flex-middle uk-flex-center"> <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;"> <div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;">
<!-- TODO --> <!-- Download from -->
<!-- Dropdown --> <availableOn [availableOn]="resultLandingInfo.hostedBy_collectedFrom" (viewAllClicked)="viewAll=$event"></availableOn>
<!-- Versions --> <!-- Versions -->
<a *ngIf="resultLandingInfo.deletedByInferenceIds" (click)="openDeletedByInference()" <a *ngIf="resultLandingInfo.deletedByInferenceIds" (click)="openDeletedByInference()"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"> 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"> <span class="uk-margin-xsmall-left">
View all {{resultLandingInfo.deletedByInferenceIds.length}} versions View all {{resultLandingInfo.deletedByInferenceIds.length}} versions
</span> </span>
</a> </a>
<!-- Divider --> <!-- Divider -->
<span style="background: #B3B3B3; width: 1px;"></span> <span *ngIf="resultLandingInfo.deletedByInferenceIds" class="landing-action-bar-divider"></span>
<!-- Actions --> <!-- Actions -->
<a href="" class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"> <a *ngIf="isRouteAvailable('participate/direct-claim')"
<icon flex="true" ratio="1" name="link" visuallyHidden="link"></icon> [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> <span class="uk-margin-xsmall-left">Link to</span>
</a> </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> <icon flex="true" ratio="0.8" name="share" visuallyHidden="share"></icon>
<span class="uk-margin-xsmall-left">Share</span> <span class="uk-margin-xsmall-left">Share</span>
</a> </a>
<a href="" class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"> <a (click)="openCiteModal()"
<icon flex="true" ratio="0.8" name="quotes" visuallyHidden="cite"></icon> [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> <span class="uk-margin-xsmall-left">Cite</span>
</a> </a>
<a href="" class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"> <!-- TODO: Add orcid component for icon - will need changes inside the component -->
<icon flex="true" ratio="0.8" name="orcid_add" visuallyHidden="orcid_add"></icon> <a *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community' || properties.adminToolsPortalType == 'aggregator'"
<span class="uk-margin-xsmall-left">Claim</span> 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> </a>
</div> </div>
</div> </div>
@ -206,10 +228,14 @@
[authors]="resultLandingInfo.authors" [authors]="resultLandingInfo.authors"
[underCuration]="resultLandingInfo.underCurationMessage" [underCuration]="resultLandingInfo.underCurationMessage"
[entityType]="getTypeName()" [types]="resultLandingInfo.types" [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> </landing-header>
<!-- Labels --> <!-- 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'"> <ng-container *ngIf="resultLandingInfo.accessMode && resultLandingInfo.accessMode.toLowerCase() !== 'not available'">
<div> <div>
<span [class]="'uk-label uk-text-truncate '+ (accessClass(resultLandingInfo.accessMode) == 'open' ? 'uk-label-success' : '')" <span [class]="'uk-label uk-text-truncate '+ (accessClass(resultLandingInfo.accessMode) == 'open' ? 'uk-label-success' : '')"
@ -233,16 +259,17 @@
</div> </div>
</ng-container> </ng-container>
</ng-container> </ng-container>
</div> </div> -->
<div class="uk-text-small"> <div class="uk-text-small">
<!-- Identifiers --> <!-- Identifiers -->
<div *ngIf="resultLandingInfo.identifiers && resultLandingInfo.identifiers.size > 0" class="uk-margin-small-top"> <div *ngIf="resultLandingInfo.identifiers && resultLandingInfo.identifiers.size > 0" class="uk-margin-small-top">
<showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers> <showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers>
</div> </div>
<!--Published Date, Journal and Publisher--> <!--Published Date, Journal and Publisher-->
<div showPublisher [publisher]="resultLandingInfo.publisher" <!-- Moved inside landing-header component -->
<!-- <div showPublisher [publisher]="resultLandingInfo.publisher"
[publishDate]="resultLandingInfo.dateofacceptance" [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>
</div> </div>
@ -522,9 +549,9 @@
(viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"></relatedTo> (viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"></relatedTo>
</div> </div>
<!-- Download From --> <!-- 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> <availableOn [availableOn]="resultLandingInfo.hostedBy_collectedFrom" (viewAllClicked)="viewAll=$event"></availableOn>
</div> </div> -->
</div> </div>
</ng-template> </ng-template>
</div> </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 {MatSelectModule} from "@angular/material/select";
import {IconsModule} from "../../utils/icons/icons.module"; import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service"; 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 {InputModule} from "../../sharedComponents/input/input.module";
import {EGIDataTransferModule} from "../../utils/dataTransfer/transferData.module"; import {EGIDataTransferModule} from "../../utils/dataTransfer/transferData.module";
@ -58,6 +58,6 @@ import {EGIDataTransferModule} from "../../utils/dataTransfer/transferData.modul
}) })
export class ResultLandingModule { export class ResultLandingModule {
constructor(private iconsService: IconsService) { 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'"> <ng-container *ngIf="pageType == 'landing'">
<span *ngIf="!putCodes || putCodes.length == 0" <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"> [title]="(!pids || !isLoggedIn) ? (!pids ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipAdd">
<a *ngIf="!showLoading" (click)="currentAction='add'; saveWorkPreparation();" <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" [class.uk-disabled]="showLoading || !isLoggedIn || !pids"
(mouseover)="hoverEvent($event)" (mouseout)="hoverEvent($event)"> (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> <icon *ngIf="hoverAdd" name="add" visuallyHidden="add"></icon>
<span class="uk-margin-xsmall-left">Claim</span>
</a> </a>
<span *ngIf="showLoading" class="uk-icon icon-button uk-icon-button-small"><loading <span *ngIf="showLoading" class="uk-icon icon-button uk-icon-button-small"><loading
[top_margin]="false" [size]="'small'"></loading></span> [top_margin]="false" [size]="'small'"></loading></span>
</span> </span>
<span *ngIf="putCodes && putCodes.length > 0" <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"> [title]="(!pids || !isLoggedIn) ? (!pids ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipDelete">
<a *ngIf="!showLoading" (click)="currentAction='delete'; deleteWorks();" <a *ngIf="!showLoading" (click)="currentAction='delete'; deleteWorks();"
class="uk-icon-button uk-icon landing-action-button landing-action-button-orcid" 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', 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>' 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 */ /** Add new icon under this line to be sure that it will be added on preview */