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

[Library | explore-redesign]: Mobile redesign for the 3 buttons at the bottom (main info, metrics, actions) and their contents. 

1. availableOn.component.ts: Mobile redesign - open in full screen modal instead of drop | icons updated.
2. fos.component.ts: In mobile show {{title}} instead of hardcoded title.
3. resultLandingUtils.module.ts: Imported FullScreenModalModule.
4. deletedByInference.component.ts: Removed class "uk-list-divider" for <result-preview> - after redesign each result has its own bottom border.
5. orcid.module.ts: Imported FullScreenModalModule.
6. orcid-work.component.ts: Mobile redesign - Added full screen modals propagationFsModal and grantFsModal.
7. resultLanding.component.ts: Added citeFsModal, addThisFsModal, alertModalDeletedByInferenceFS and property public mobileContent: "info" | "metrics" | "actions" = "info".
8. resultLanding.component.html: Mobile redesign for the 3 buttons at the bottom (main info, metrics, actions).
This commit is contained in:
Konstantina Galouni 2023-02-21 16:10:21 +02:00
parent 256f8162e6
commit f9ff62f188
8 changed files with 512 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@ import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@an
import {HostedByCollectedFrom} from "../../utils/result-preview/result-preview"; import {HostedByCollectedFrom} from "../../utils/result-preview/result-preview";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
import {StringUtils} from '../../utils/string-utils.class'; import {StringUtils} from '../../utils/string-utils.class';
import {FullScreenModalComponent} from "../../utils/modal/full-screen-modal/full-screen-modal.component";
declare var UIkit; declare var UIkit;
@ -15,15 +16,39 @@ declare var UIkit;
uk-tooltip [title]="availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available'"> uk-tooltip [title]="availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available'">
<icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="0.8"></icon> <icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="0.8"></icon>
</span> </span>
<ng-container *ngIf="!(isMobile && usedBy == 'landing')">
<a uk-tooltip="Source" target="_blank" <a uk-tooltip="Source" target="_blank"
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">
<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span> <span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
<span> <span>
<icon [flex]="true" [name]="'expand_' + (isOpen?'less':'more')"></icon> <!-- <icon [flex]="true" [name]="'expand_' + (isOpen?'less':'more')"></icon>-->
<icon [flex]="true" [name]="(isOpen?'arrow_drop_up':'arrow_drop_down')"></icon>
</span> </span>
</a> </a>
<div #dropElement uk-drop="mode: click; pos: bottom-left;" <div #dropElement uk-drop="mode: click; pos: bottom-left;"
class="download-drop uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small"> class="download-drop uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small">
<ng-container *ngTemplateOutlet="availableOnList"></ng-container>
</div>
</ng-container>
<ng-container *ngIf="(isMobile && usedBy == 'landing')">
<a class="uk-flex uk-flex-between uk-flex-middle uk-flex-center uk-width-expand uk-button-link" (click)="openAvailableListFsModal()">
<span uk-tooltip="Source">{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
<span>
<icon [flex]="true" name="arrow_right"></icon>
</span>
</a>
<fs-modal #availableListFsModal classTitle="uk-tile-default uk-border-bottom">
<div class="uk-text-small download-drop">
<ng-container *ngTemplateOutlet="availableOnList"></ng-container>
</div>
</fs-modal>
</ng-container>
</ng-container>
</div>
</ng-container>
<ng-template #availableOnList>
<div *ngFor="let instance of availableOn let i=index" class="download-drop-item uk-flex uk-flex-top"> <div *ngFor="let instance of availableOn let i=index" class="download-drop-item uk-flex uk-flex-top">
<span <span
[class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')" [class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
@ -38,8 +63,7 @@ declare var UIkit;
</a> </a>
</span> </span>
<div *ngIf="instance.types?.length > 0 || instance.years?.length > 0" class="uk-text-meta"> <div *ngIf="instance.types?.length > 0 || instance.years?.length > 0" class="uk-text-meta">
<span *ngIf="instance.types?.length > 0" <span *ngIf="instance.types?.length > 0" class="uk-text-capitalize">{{instance.types.join(" . ")}}</span>
class="uk-text-capitalize">{{instance.types.join(" . ")}}</span>
<span *ngIf="instance.types?.length > 0 && instance.years?.length > 0"> . </span> <span *ngIf="instance.types?.length > 0 && instance.years?.length > 0"> . </span>
<span *ngIf="instance.years?.length > 0">{{instance.years.join(" . ")}}</span> <span *ngIf="instance.years?.length > 0">{{instance.years.join(" . ")}}</span>
</div> </div>
@ -63,18 +87,18 @@ declare var UIkit;
</div> </div>
</div> </div>
</div> </div>
</div> </ng-template>
</ng-container>
</div>
</ng-container>
` `
}) })
export class AvailableOnComponent { export class AvailableOnComponent {
@Input() isMobile: boolean = false;
@Input() usedBy: "search" | "landing" = "search";
@Input() availableOn: HostedByCollectedFrom[]; @Input() availableOn: HostedByCollectedFrom[];
/** @deprecated */ /** @deprecated */
@Output() viewAllClicked = new EventEmitter(); @Output() viewAllClicked = new EventEmitter();
@ViewChild("dropElement") dropElement: ElementRef; @ViewChild("dropElement") dropElement: ElementRef;
@ViewChild("availableListFsModal") availableListFsModal: FullScreenModalComponent;
public threshold: number = 1; public threshold: number = 1;
public dataProviderUrl = properties.searchLinkToDataProvider.split('?')[0]; public dataProviderUrl = properties.searchLinkToDataProvider.split('?')[0];
public title: string = "Download from"; public title: string = "Download from";
@ -100,4 +124,10 @@ export class AvailableOnComponent {
public sliceString(str: string, size: number) { public sliceString(str: string, size: number) {
return StringUtils.sliceString(str, size) return StringUtils.sliceString(str, size)
} }
public openAvailableListFsModal() {
this.availableListFsModal.title = "Sources";
this.availableListFsModal.okButton = false;
this.availableListFsModal.open();
}
} }

2
landingPages/landing-utils/fos.component.ts
View File

@ -38,7 +38,7 @@ import {StringUtils} from "../../utils/string-utils.class";
<div class="uk-grid uk-grid-small uk-grid-divider" uk-grid> <div class="uk-grid uk-grid-small uk-grid-divider" uk-grid>
<div class="uk-width-1-4 uk-text-meta"> <div class="uk-width-1-4 uk-text-meta">
<div class="uk-text-xsmall" style="color: #EEB204">Beta</div> <div class="uk-text-xsmall" style="color: #EEB204">Beta</div>
Fields of Science (FoS) {{title}}
</div> </div>
<div class="uk-width-expand"> <div class="uk-width-expand">
<div *ngFor="let subject of subjects.slice(0, viewAll?subjects.length:threshold); let i=index" class="uk-text-truncate"> <div *ngFor="let subject of subjects.slice(0, viewAll?subjects.length:threshold); let i=index" class="uk-text-truncate">

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

@ -20,12 +20,13 @@ import { SearchInputModule } from '../../sharedComponents/search-input/search-in
import {EntityMetadataComponent} from "./entity-metadata.component"; import {EntityMetadataComponent} from "./entity-metadata.component";
import {IconsService} from "../../utils/icons/icons.service"; import {IconsService} from "../../utils/icons/icons.service";
import {closed_access, open_access} from "../../utils/icons/icons"; import {closed_access, open_access} from "../../utils/icons/icons";
import {FullScreenModalModule} from "../../utils/modal/full-screen-modal/full-screen-modal.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, RouterModule, PagingModule, ShowPublisherModule, IconsModule, AlertModalModule, CommonModule, FormsModule, RouterModule, PagingModule, ShowPublisherModule, IconsModule, AlertModalModule,
SearchInputModule SearchInputModule, FullScreenModalModule
], ],
declarations: [ declarations: [
ShowIdentifiersComponent,ShowSubjectsComponent, ShowIdentifiersComponent,ShowSubjectsComponent,

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

@ -24,7 +24,7 @@ import {HelperFunctions} from "../../../utils/HelperFunctions.class";
[page]="page" [pageSize]="pageSize" [page]="page" [pageSize]="pageSize"
[totalResults]="results.length"> [totalResults]="results.length">
</no-load-paging> </no-load-paging>
<ul class="uk-list uk-list-divider uk-margin"> <ul class="uk-list uk-margin">
<li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)"> <li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false" [isCard]="false"></result-preview> <result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false" [isCard]="false"></result-preview>
</li> </li>

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

@ -324,240 +324,7 @@
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)"> <ng-container *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)">
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal"> <ng-container *ngTemplateOutlet="metricsContent"></ng-container>
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li>
<a href="#">Overview</a>
</li>
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
<a href="#">Impact</a>
</li>
<li *ngIf="hasAltMetrics">
<a href="#">Social</a>
</li>
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
<a href="#" (click)="clickedUsageMetrics()">Usage</a>
</li>
</ul>
<ul class="uk-switcher uk-margin-large-top">
<!-- overview -->
<li>
<div class="uk-flex uk-flex-wrap landing-metrics-overview">
<div *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
<div class="uk-grid-divider" uk-grid>
<div>
<div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/bip-minimal.svg" loading="lazy" alt="BIP!"
style="width: 61px; height: 43px;">
</div>
<span class="uk-text-uppercase uk-text-xsmall">Impact by</span>
<span class="uk-display-block uk-text-bolder">BIP!</span>
</div>
<div>
<table class="uk-table uk-table-small">
<tbody>
<tr>
<td class="uk-padding-remove-top">
<icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-top">
Citations
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.citations | number}}
</td>
</tr>
<tr>
<td>
<icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
Popularity
</td>
<td class="uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.popularity}}
</td>
</tr>
<tr>
<td>
<icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
Influence
</td>
<td class="uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.influence}}
</td>
</tr>
<tr>
<td class="uk-padding-remove-bottom">
<icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-bottom">
Impulse
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.impulse}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div *ngIf="hasAltMetrics">
<altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="donut"></altmetrics>
</div>
<div *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
<div class="uk-grid-divider" uk-grid>
<div>
<div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</div>
<span class="uk-text-uppercase uk-text-xsmall">Usage by</span>
<span class="uk-display-block uk-text-bolder">UsageCounts</span>
</div>
<div>
<table class="uk-table uk-table-small">
<tbody>
<tr *ngIf="resultLandingInfo.measure.downloads">
<td class="uk-padding-remove-top">
<icon name="download" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td>
<td class="uk-padding-remove-top">
Downloads
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"
[attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{resultLandingInfo.measure.downloads | number}}">
{{formatNumber(resultLandingInfo.measure.downloads)}}
</td>
</tr>
<tr *ngIf="resultLandingInfo.measure.views">
<td class="uk-padding-remove-bottom">
<icon name="visibility" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td>
<td class="uk-padding-remove-bottom">
Views
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
[attr.uk-tooltip]="resultLandingInfo.measure.views >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{resultLandingInfo.measure.views | number}}">
{{formatNumber(resultLandingInfo.measure.views)}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</li>
<!-- impact -->
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
<div class="uk-flex uk-flex-center uk-flex-middle">
<div class="uk-card uk-card-default uk-padding-small">
<table class="uk-table uk-table-small uk-margin-remove">
<tbody>
<tr>
<td class="uk-padding-remove-top">
<icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-top">
Citations
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.citations}}
</td>
</tr>
<tr>
<td>
<icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
Popularity
</td>
<td class="uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.popularity}}
</td>
</tr>
<tr>
<td>
<icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
Influence
</td>
<td class="uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.influence}}
</td>
</tr>
<tr>
<td class="uk-padding-remove-bottom">
<icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-bottom">
Impulse
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.impulse}}
</td>
</tr>
</tbody>
</table>
</div>
<div *ngIf="bipFrameUrl" class="uk-margin-large-left">
<i-frame [height]="300" [url]="bipFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame>
</div>
</div>
<div class="uk-text-center" [ngClass]="bipFrameUrl ? 'uk-margin-top' : 'uk-margin-large-top'">
<span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right" src="assets/common-assets/bip-minimal.svg" loading="lazy" alt="BIP!"
style="width: 61px; height: 43px;">
<span class="uk-text-bolder">BIP!</span>
</div>
</li>
<!-- social -->
<li *ngIf="hasAltMetrics">
<altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="medium-donut"></altmetrics>
</li>
<!-- usage -->
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
<div class="uk-flex uk-flex-center uk-flex-middle">
<div class="uk-margin-large-right">
<div *ngIf="resultLandingInfo.measure.downloads" class="uk-text-center uk-margin-medium-bottom">
<div class="uk-text-background uk-text-bold number metrics-number"
[attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{resultLandingInfo.measure.downloads | number}}">{{formatNumber(resultLandingInfo.measure.downloads)}}</div>
<div class="uk-text-bold">Downloads</div>
</div>
<div *ngIf="resultLandingInfo.measure.views" class="uk-text-center uk-margin-medium-bottom">
<div class="uk-text-background uk-text-bold number metrics-number"
[attr.uk-tooltip]="resultLandingInfo.measure.views >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{resultLandingInfo.measure.views | number}}">{{formatNumber(resultLandingInfo.measure.views)}}</div>
<div class="uk-text-bold">Views</div>
</div>
</div>
<ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
<div *ngIf="metricsClicked && downloadsFrameUrl && resultLandingInfo.measure.downloads" class="uk-margin-large-right">
<i-frame [height]="300" [url]="downloadsFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame>
</div>
<div *ngIf="metricsClicked && viewsFrameUrl && resultLandingInfo.measure.views" class="uk-margin-large-right">
<i-frame [height]="300" [url]="viewsFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1">
</i-frame>
</div>
</ng-container>
</div>
<div class="uk-text-center uk-margin-large-top">
<span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</div>
</li>
</ul>
</div>
</ng-container> </ng-container>
</div> </div>
<div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div> <div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
@ -691,7 +458,7 @@
<!-- Mobile view --> <!-- Mobile view -->
<div *ngIf="isMobile" class="uk-hidden@m uk-position-relative landing"> <div *ngIf="isMobile" class="uk-hidden@m uk-position-relative landing">
<ng-container *ngIf="resultLandingInfo"> <ng-container *ngIf="resultLandingInfo">
<div class="uk-container uk-section"> <div *ngIf="mobileContent == 'info'" class="uk-container uk-section">
<div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0" <div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0"
class="uk-margin-small-bottom uk-flex uk-flex-middle" class="uk-margin-small-bottom uk-flex uk-flex-middle"
[ngClass]="(resultLandingInfo.hostedBy_collectedFrom[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"> [ngClass]="(resultLandingInfo.hostedBy_collectedFrom[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')">
@ -783,10 +550,82 @@
</ng-container> </ng-container>
</div> </div>
</div> </div>
<div *ngIf="mobileContent == 'metrics'" class="uk-container uk-section">
<ng-container *ngTemplateOutlet="metricsContent"></ng-container>
</div>
<div *ngIf="mobileContent == 'actions'" class="uk-container uk-section">
<ng-container *ngIf="resultLandingInfo?.hostedBy_collectedFrom">
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
(click)=" onSelectActiveTab('availableOn')">
<availableOn [availableOn]="resultLandingInfo.hostedBy_collectedFrom" (viewAllClicked)="viewAll=$event"
[isMobile]="true" [usedBy]="'landing'" class="uk-width-1-1"></availableOn>
</div>
<hr class="uk-margin-remove">
</ng-container>
<ng-container *ngIf="resultLandingInfo?.deletedByInferenceIds">
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
(click)="deleteByInferenceOpened = true; openFsModal(alertModalDeletedByInferenceFS, 'Other versions')">
<icon [flex]="true" [ratio]="0.8" name="versions" visuallyHidden="versions"></icon>
<span class="uk-margin-small-left">
View all {{resultLandingInfo.deletedByInferenceIds.length}} versions
</span>
</div>
<hr class="uk-margin-remove">
</ng-container>
<ng-container>
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
(click)="openFsModal(addThisFsModal, 'Share this '+getTypeName()+' in your social networks')">
<icon [flex]="true" [ratio]="0.8" name="share" visuallyHidden="share"></icon>
<span class="uk-margin-small-left">Share</span>
</div>
<hr class="uk-margin-remove">
</ng-container>
<ng-container>
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
(click)="citeThisClicked=true; openFsModal(citeFsModal, 'Cite this '+getTypeName())">
<icon [flex]="true" [ratio]="0.7" name="cite" visuallyHidden="cite"></icon>
<span class="uk-margin-small-left">Cite</span>
</div>
<hr class="uk-margin-remove">
</ng-container>
<ng-container *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community' || properties.adminToolsPortalType == 'aggregator'" >
<div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal">
<orcid-work [resultId]="id" [resultTitle]="resultLandingInfo?.title" [resultLandingInfo]="resultLandingInfo"
[pids]="pidsArrayString" [pageType]="'landing'" [isMobile]="true">
</orcid-work>
</div>
<hr class="uk-margin-remove">
</ng-container>
<!-- <ng-container *ngIf="resultLandingInfo?.deletedByInferenceIds">-->
<!-- <div class="clickable uk-button-link uk-flex uk-flex-middle uk-h6" (click)="onSelectActiveTab('orcid')">-->
<!-- <icon [flex]="true" [ratio]="0.8" name="versions" visuallyHidden="versions"></icon>-->
<!-- <span class="uk-margin-small-left">-->
<!-- ORCID-->
<!-- </span>-->
<!-- </div>-->
<!-- <hr>-->
<!-- </ng-container>-->
<ng-container *ngIf="isRouteAvailable('participate/direct-claim')">
<a class="uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal"
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
<icon [flex]="true" [ratio]="0.7" name="link_to" visuallyHidden="link"></icon>
<span class="uk-margin-small-left"
[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-left; cls: uk-active uk-text-small uk-padding-small'">
Link to
</span>
</a>
<hr class="uk-margin-remove">
</ng-container>
</div>
<div class="landing-action-bar-mobile uk-background-default"> <div class="landing-action-bar-mobile uk-background-default">
<div class="uk-container uk-flex uk-flex-middle uk-flex-between uk-text-xsmall uk-text-meta"> <div class="uk-container uk-flex-middle uk-grid uk-text-xsmall uk-text-meta" [ngClass]="(resultLandingInfo.measure || hasAltMetrics) ? 'uk-child-width-1-3' : 'uk-child-width-1-2'">
<div> <div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'">
<span [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''">
<icon *ngIf="getTypeName().toLowerCase() == 'publication'" name="description" type="outlined" [flex]="true" [ratio]="2"></icon> <icon *ngIf="getTypeName().toLowerCase() == 'publication'" name="description" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'research data'" name="database" type="outlined" [flex]="true" [ratio]="2"></icon> <icon *ngIf="getTypeName().toLowerCase() == 'research data'" name="database" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'research software'" name="integration_instructions" type="outlined" [flex]="true" [ratio]="2"></icon> <icon *ngIf="getTypeName().toLowerCase() == 'research software'" name="integration_instructions" type="outlined" [flex]="true" [ratio]="2"></icon>
@ -794,61 +633,62 @@
<icon *ngIf="getTypeName().toLowerCase() == 'project'" name="assignment_turned_in" type="outlined" [flex]="true" [ratio]="2"></icon> <icon *ngIf="getTypeName().toLowerCase() == 'project'" name="assignment_turned_in" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'data source'" name="note_add" type="outlined" [flex]="true" [ratio]="2"></icon> <icon *ngIf="getTypeName().toLowerCase() == 'data source'" name="note_add" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'organization'" name="corporate_fare" type="outlined" [flex]="true" [ratio]="2"></icon> <icon *ngIf="getTypeName().toLowerCase() == 'organization'" name="corporate_fare" type="outlined" [flex]="true" [ratio]="2"></icon>
</span>
<span>{{getTypeName()}}</span> <span>{{getTypeName()}}</span>
</a> </a>
</div> </div>
<div *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)"> <div *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)">
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'metrics'">
<icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2"></icon> <icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon>
<span>Metrics</span> <span>Metrics</span>
</a> </a>
</div> </div>
<div> <div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'">
<icon name="pending" type="outlined" [flex]="true" [ratio]="2"></icon> <icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<span>Actions</span> <span>Actions</span>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<fs-modal #summaryFsModal [classTitle]="'uk-background-primary-opacity'" (cancelEmitter)="cancelSummaryClicked()"> <fs-modal #summaryFsModal classTitle="uk-tile-default uk-border-bottom" (cancelEmitter)="cancelSummaryClicked()">
<ng-container *ngTemplateOutlet="summary_content"></ng-container> <ng-container *ngTemplateOutlet="summary_content"></ng-container>
</fs-modal> </fs-modal>
<fs-modal #referencesFsModal [classTitle]="'uk-background-primary-opacity'" <fs-modal #referencesFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0"> *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
<ng-container *ngTemplateOutlet="references_content"></ng-container> <ng-container *ngTemplateOutlet="references_content"></ng-container>
</fs-modal> </fs-modal>
<fs-modal #relatedResearchFsModal [classTitle]="'uk-background-primary-opacity'" <fs-modal #relatedResearchFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="resultLandingInfo.relatedResults?.length > 0"> *ngIf="resultLandingInfo.relatedResults?.length > 0">
<div class="landing-section uk-padding uk-padding-remove-horizontal"> <div class="landing-section uk-padding uk-padding-remove-horizontal">
<ng-container *ngTemplateOutlet="relation_in_tab; context: { researchResults: filteredRelatedResults, header: ''}"></ng-container> <ng-container *ngTemplateOutlet="relation_in_tab; context: { researchResults: filteredRelatedResults, header: ''}"></ng-container>
</div> </div>
</fs-modal> </fs-modal>
<fs-modal #bioentitiesFsModal [classTitle]="'uk-background-primary-opacity'" <fs-modal #bioentitiesFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0"> *ngIf="resultLandingInfo.bioentities && bioentitiesNum> 0">
<div class="landing-section uk-padding uk-padding-remove-horizontal"> <div class="landing-section uk-padding uk-padding-remove-horizontal">
<ng-container *ngTemplateOutlet="bioentities_content"></ng-container> <ng-container *ngTemplateOutlet="bioentities_content"></ng-container>
</div> </div>
</fs-modal> </fs-modal>
<fs-modal #compatibleEOSCFsModal [classTitle]="'uk-background-primary-opacity'"> <fs-modal #compatibleEOSCFsModal classTitle="uk-tile-default uk-border-bottom">
<ng-container *ngIf="resultLandingInfo.eoscSubjects?.length > 0 && properties.adminToolsPortalType == 'eosc' && (!viewAll || viewAll=='egiNotebook')"> <ng-container *ngIf="resultLandingInfo.eoscSubjects?.length > 0 && properties.adminToolsPortalType == 'eosc' && (!viewAll || viewAll=='egiNotebook')">
<ng-container *ngTemplateOutlet="compatibleEOSC_content"></ng-container> <ng-container *ngTemplateOutlet="compatibleEOSC_content"></ng-container>
</ng-container> </ng-container>
</fs-modal> </fs-modal>
<fs-modal #fundedByFsModal [classTitle]="'uk-background-primary-opacity'"> <fs-modal #fundedByFsModal classTitle="uk-tile-default uk-border-bottom">
<ng-container *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')"> <ng-container *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
<fundedBy [fundedByProjects]="resultLandingInfo.fundedByProjects" [provenanceActionVocabulary]="provenanceActionVocabulary" (viewAllClicked)="viewAll=$event" <fundedBy [fundedByProjects]="resultLandingInfo.fundedByProjects" [provenanceActionVocabulary]="provenanceActionVocabulary" (viewAllClicked)="viewAll=$event"
[isMobile]="true" [viewAll]="true"></fundedBy> [isMobile]="true" [viewAll]="true"></fundedBy>
</ng-container> </ng-container>
</fs-modal> </fs-modal>
<fs-modal #relatedCommunitiesFsModal [classTitle]="'uk-background-primary-opacity'"> <fs-modal #relatedCommunitiesFsModal classTitle="uk-tile-default uk-border-bottom">
<ng-container *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')"> <ng-container *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')">
<relatedTo [contexts]="resultLandingInfo.contexts" [viewAll]="viewAll=='relatedTo'" <relatedTo [contexts]="resultLandingInfo.contexts" [viewAll]="viewAll=='relatedTo'"
(viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true" (viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"
@ -856,20 +696,20 @@
</ng-container> </ng-container>
</fs-modal> </fs-modal>
<fs-modal #enermapsToolFsModal [classTitle]="'uk-background-primary-opacity'"> <fs-modal #enermapsToolFsModal classTitle="uk-tile-default uk-border-bottom">
<div *ngIf="enermapsId && properties.enermapsURL" class="landing-section uk-padding uk-padding-remove-horizontal"> <div *ngIf="enermapsId && properties.enermapsURL" class="landing-section uk-padding uk-padding-remove-horizontal">
<ng-container *ngTemplateOutlet="enermapsTool_content"></ng-container> <ng-container *ngTemplateOutlet="enermapsTool_content"></ng-container>
</div> </div>
</fs-modal> </fs-modal>
<fs-modal #sdgsFsModal *ngIf="isMobile" [classTitle]="'uk-background-primary-opacity'" (cancelEmitter)="sdgsFsModalCancelled()"> <fs-modal #sdgsFsModal *ngIf="isMobile" classTitle="uk-tile-default uk-border-bottom" (cancelEmitter)="sdgsFsModalCancelled()">
<ng-container *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0"> <ng-container *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0">
<sdg *ngIf="viewAllMobile=='sdg'" [subjects]="resultLandingInfo.sdg" [viewAll]="true" (suggestClicked)="suggestMobileClicked($event)"></sdg> <sdg *ngIf="viewAllMobile=='sdg'" [subjects]="resultLandingInfo.sdg" [viewAll]="true" (suggestClicked)="suggestMobileClicked($event)"></sdg>
<sdg-fos-suggest *ngIf="viewAllMobile=='sdgSuggest'" #sdgFosSuggest [title]="resultLandingInfo.title" [entityType]="resultLandingInfo.resultType"></sdg-fos-suggest> <sdg-fos-suggest *ngIf="viewAllMobile=='sdgSuggest'" #sdgFosSuggest [title]="resultLandingInfo.title" [entityType]="resultLandingInfo.resultType"></sdg-fos-suggest>
</ng-container> </ng-container>
</fs-modal> </fs-modal>
<fs-modal #fosFsModal *ngIf="isMobile" [classTitle]="'uk-background-primary-opacity'" (cancelEmitter)="fosFsModalCancelled()"> <fs-modal #fosFsModal *ngIf="isMobile" classTitle="uk-tile-default uk-border-bottom" (cancelEmitter)="fosFsModalCancelled()">
<ng-container *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0"> <ng-container *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0">
<fos *ngIf="viewAllMobile=='fos'" [subjects]="resultLandingInfo.fos" [viewAll]="true" (suggestClicked)="suggestMobileClicked($event)"></fos> <fos *ngIf="viewAllMobile=='fos'" [subjects]="resultLandingInfo.fos" [viewAll]="true" (suggestClicked)="suggestMobileClicked($event)"></fos>
<sdg-fos-suggest *ngIf="viewAllMobile=='fosSuggest'" #sdgFosSuggest [title]="resultLandingInfo.title" [entityType]="resultLandingInfo.resultType"></sdg-fos-suggest> <sdg-fos-suggest *ngIf="viewAllMobile=='fosSuggest'" #sdgFosSuggest [title]="resultLandingInfo.title" [entityType]="resultLandingInfo.resultType"></sdg-fos-suggest>
@ -908,8 +748,7 @@
[type]="title.toLowerCase()" [piwikSiteId]="piwikSiteId"></citeThis> [type]="title.toLowerCase()" [piwikSiteId]="piwikSiteId"></citeThis>
</modal-alert> </modal-alert>
<modal-alert *ngIf="resultLandingInfo" <modal-alert *ngIf="resultLandingInfo" #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
#addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
<addThis></addThis> <addThis></addThis>
</modal-alert> </modal-alert>
@ -1150,3 +989,268 @@
</ng-container> </ng-container>
</ul> </ul>
</ng-template> </ng-template>
<ng-template #metricsContent>
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal">
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li>
<a href="#">Overview</a>
</li>
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
<a href="#">Impact</a>
</li>
<li *ngIf="hasAltMetrics">
<a href="#">Social</a>
</li>
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
<a href="#" (click)="clickedUsageMetrics()">Usage</a>
</li>
</ul>
<ul class="uk-switcher uk-margin-large-top">
<!-- overview -->
<li>
<div class="uk-flex uk-flex-wrap landing-metrics-overview">
<div *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
<div class="uk-grid-divider" uk-grid>
<div>
<div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/bip-minimal.svg" loading="lazy" alt="BIP!"
style="width: 61px; height: 43px;">
</div>
<span class="uk-text-uppercase uk-text-xsmall">Impact by</span>
<span class="uk-display-block uk-text-bolder">BIP!</span>
</div>
<div>
<table class="uk-table uk-table-small">
<tbody>
<tr>
<td class="uk-padding-remove-top">
<icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-top">
Citations
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.citations | number}}
</td>
</tr>
<tr>
<td>
<icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
Popularity
</td>
<td class="uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.popularity}}
</td>
</tr>
<tr>
<td>
<icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
Influence
</td>
<td class="uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.influence}}
</td>
</tr>
<tr>
<td class="uk-padding-remove-bottom">
<icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-bottom">
Impulse
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.impulse}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div *ngIf="hasAltMetrics">
<altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="donut"></altmetrics>
</div>
<div *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
<div class="uk-grid-divider" uk-grid>
<div>
<div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</div>
<span class="uk-text-uppercase uk-text-xsmall">Usage by</span>
<span class="uk-display-block uk-text-bolder">UsageCounts</span>
</div>
<div>
<table class="uk-table uk-table-small">
<tbody>
<tr *ngIf="resultLandingInfo.measure.downloads">
<td class="uk-padding-remove-top">
<icon name="download" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td>
<td class="uk-padding-remove-top">
Downloads
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder"
[attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{resultLandingInfo.measure.downloads | number}}">
{{formatNumber(resultLandingInfo.measure.downloads)}}
</td>
</tr>
<tr *ngIf="resultLandingInfo.measure.views">
<td class="uk-padding-remove-bottom">
<icon name="visibility" [flex]="true" [ratio]="1.2" customClass="uk-text-background text-usage-counts"></icon>
</td>
<td class="uk-padding-remove-bottom">
Views
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder"
[attr.uk-tooltip]="resultLandingInfo.measure.views >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{resultLandingInfo.measure.views | number}}">
{{formatNumber(resultLandingInfo.measure.views)}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</li>
<!-- impact -->
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
<div class="uk-flex uk-flex-center uk-flex-middle">
<div class="uk-card uk-card-default uk-padding-small">
<table class="uk-table uk-table-small uk-margin-remove">
<tbody>
<tr>
<td class="uk-padding-remove-top">
<icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-top">
Citations
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.citations}}
</td>
</tr>
<tr>
<td>
<icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
Popularity
</td>
<td class="uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.popularity}}
</td>
</tr>
<tr>
<td>
<icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
Influence
</td>
<td class="uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.influence}}
</td>
</tr>
<tr>
<td class="uk-padding-remove-bottom">
<icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-bottom">
Impulse
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.impulse}}
</td>
</tr>
</tbody>
</table>
</div>
<div *ngIf="bipFrameUrl" class="uk-margin-large-left">
<i-frame [height]="300" [url]="bipFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame>
</div>
</div>
<div class="uk-text-center" [ngClass]="bipFrameUrl ? 'uk-margin-top' : 'uk-margin-large-top'">
<span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right" src="assets/common-assets/bip-minimal.svg" loading="lazy" alt="BIP!"
style="width: 61px; height: 43px;">
<span class="uk-text-bolder">BIP!</span>
</div>
</li>
<!-- social -->
<li *ngIf="hasAltMetrics">
<altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="medium-donut"></altmetrics>
</li>
<!-- usage -->
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.downloads || resultLandingInfo.measure.views)">
<div class="uk-flex uk-flex-center uk-flex-middle">
<div class="uk-margin-large-right">
<div *ngIf="resultLandingInfo.measure.downloads" class="uk-text-center uk-margin-medium-bottom">
<div class="uk-text-background uk-text-bold number metrics-number"
[attr.uk-tooltip]="resultLandingInfo.measure.downloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{resultLandingInfo.measure.downloads | number}}">{{formatNumber(resultLandingInfo.measure.downloads)}}</div>
<div class="uk-text-bold">Downloads</div>
</div>
<div *ngIf="resultLandingInfo.measure.views" class="uk-text-center uk-margin-medium-bottom">
<div class="uk-text-background uk-text-bold number metrics-number"
[attr.uk-tooltip]="resultLandingInfo.measure.views >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
title="{{resultLandingInfo.measure.views | number}}">{{formatNumber(resultLandingInfo.measure.views)}}</div>
<div class="uk-text-bold">Views</div>
</div>
</div>
<ng-container *ngIf="viewsFrameUrl || downloadsFrameUrl">
<div *ngIf="metricsClicked && downloadsFrameUrl && resultLandingInfo.measure.downloads" class="uk-margin-large-right">
<i-frame [height]="300" [url]="downloadsFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1"></i-frame>
</div>
<div *ngIf="metricsClicked && viewsFrameUrl && resultLandingInfo.measure.views" class="uk-margin-large-right">
<i-frame [height]="300" [url]="viewsFrameUrl" [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply uk-height-1-1">
</i-frame>
</div>
</ng-container>
</div>
<div class="uk-text-center uk-margin-large-top">
<span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</div>
</li>
</ul>
</div>
</ng-template>
<fs-modal *ngIf="resultLandingInfo && resultLandingInfo.deletedByInferenceIds" #AlertModalDeletedByInferenceFS classTitle="uk-tile-default uk-border-bottom">
<deletedByInference *ngIf="type == 'publication' && deleteByInferenceOpened"
[id]="resultLandingInfo.record['result']['header']['dri:objIdentifier']"
[ids]="resultLandingInfo.deletedByInferenceIds"
[resultType]="type" [type]="openaireEntities.PUBLICATIONS"></deletedByInference>
<deletedByInference *ngIf="type == 'dataset' && deleteByInferenceOpened"
[id]="resultLandingInfo.record['result']['header']['dri:objIdentifier']"
[ids]="resultLandingInfo.deletedByInferenceIds"
[resultType]="'dataset'" [type]="openaireEntities.DATASETS"></deletedByInference>
<deletedByInference *ngIf="type == 'software' && deleteByInferenceOpened"
[id]="resultLandingInfo.record['result']['header']['dri:objIdentifier']"
[ids]="resultLandingInfo.deletedByInferenceIds"
[resultType]="type" [type]="openaireEntities.SOFTWARE"></deletedByInference>
<deletedByInference *ngIf="type == 'orp' && deleteByInferenceOpened"
[id]="resultLandingInfo.record['result']['header']['dri:objIdentifier']"
[ids]="resultLandingInfo.deletedByInferenceIds"
[resultType]="'other'" [type]="openaireEntities.OTHER"></deletedByInference>
</fs-modal>
<fs-modal *ngIf="resultLandingInfo" #citeFsModal classTitle="uk-tile-default uk-border-bottom">
<citeThis *ngIf="citeThisClicked" [result]="resultLandingInfo" [id]="id"
[type]="title.toLowerCase()" [piwikSiteId]="piwikSiteId"></citeThis>
</fs-modal>
<fs-modal *ngIf="resultLandingInfo" #addThisFsModal classTitle="uk-tile-default uk-border-bottom" classBody="uk-flex uk-flex-center uk-flex-middle">
<addThis></addThis>
</fs-modal>

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

@ -43,8 +43,11 @@ export class ResultLandingComponent {
enermapsId; enermapsId;
// @ViewChild('linkModal') linkModal; // @ViewChild('linkModal') linkModal;
@ViewChild('citeModal') citeModal; @ViewChild('citeModal') citeModal;
@ViewChild('citeFsModal') citeFsModal;
@ViewChild('addThisModal') addThisModal; @ViewChild('addThisModal') addThisModal;
@ViewChild('addThisFsModal') addThisFsModal;
@ViewChild('AlertModalDeletedByInference') alertModalDeletedByInference; @ViewChild('AlertModalDeletedByInference') alertModalDeletedByInference;
@ViewChild('AlertModalDeletedByInferenceFS') alertModalDeletedByInferenceFS;
// @ViewChild('relationModal') relationModal; // @ViewChild('relationModal') relationModal;
public deleteByInferenceOpened: boolean = false; public deleteByInferenceOpened: boolean = false;
@Input() public resultFromInput: boolean = false; @Input() public resultFromInput: boolean = false;
@ -144,6 +147,7 @@ export class ResultLandingComponent {
// public shouldSticky: boolean = true; // public shouldSticky: boolean = true;
public mobileContent: "info" | "metrics" | "actions" = "info";
public tabMobile: string = ""; public tabMobile: string = "";
public viewAllMobile: string = ""; public viewAllMobile: string = "";
public viewAll: string = ""; public viewAll: string = "";

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

@ -11,6 +11,7 @@ import {ExternalIDV3_0, WorkV3_0} from "./orcidWork";
import {EnvProperties} from "../utils/properties/env-properties"; import {EnvProperties} from "../utils/properties/env-properties";
import {UserManagementService} from "../services/user-management.service"; import {UserManagementService} from "../services/user-management.service";
import {OpenaireEntities} from "../utils/properties/searchFields"; import {OpenaireEntities} from "../utils/properties/searchFields";
import {FullScreenModalComponent} from "../utils/modal/full-screen-modal/full-screen-modal.component";
declare var UIkit: any; declare var UIkit: any;
@ -22,7 +23,8 @@ declare var UIkit: any;
[attr.uk-tooltip]="'pos: bottom; 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-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"
[class.uk-text-bolder]="!(isMobile && pageType == 'landing')"
[class.uk-disabled]="showLoading || !isLoggedIn || !pids" [class.uk-disabled]="showLoading || !isLoggedIn || !pids"
[class.uk-text-muted]="showLoading || !isLoggedIn || !pids" [class.uk-text-muted]="showLoading || !isLoggedIn || !pids"
(mouseover)="hoverEvent($event)" (mouseout)="hoverEvent($event)"> (mouseover)="hoverEvent($event)" (mouseout)="hoverEvent($event)">
@ -39,7 +41,8 @@ declare var UIkit: any;
[attr.uk-tooltip]="'pos: bottom; 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-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"
[class.uk-text-bolder]="!(isMobile && pageType == 'landing')"
[class.uk-disabled]="showLoading || !isLoggedIn || !pids" [class.uk-disabled]="showLoading || !isLoggedIn || !pids"
[class.uk-text-muted]="showLoading || !isLoggedIn || !pids" [class.uk-text-muted]="showLoading || !isLoggedIn || !pids"
(mouseover)="hoverEvent($event, 'delete')" (mouseout)="hoverEvent($event, 'delete')"> (mouseover)="hoverEvent($event, 'delete')" (mouseout)="hoverEvent($event, 'delete')">
@ -68,7 +71,7 @@ declare var UIkit: any;
</span> --> </span> -->
</ng-container> </ng-container>
<modal-alert #grantModal [overflowBody]=false (alertOutput)="openGrantWindow()"> <modal-alert *ngIf="!isMobile" #grantModal [overflowBody]=false (alertOutput)="openGrantWindow()">
<div> <div>
<div>{{requestGrantMessage}}</div> <div>{{requestGrantMessage}}</div>
@ -92,6 +95,13 @@ declare var UIkit: any;
</div> </div>
</modal-alert> </modal-alert>
<fs-modal *ngIf="isMobile" #grantFsModal classTitle="uk-tile-default uk-border-bottom">
<div>{{requestGrantMessage}}</div>
<button class="uk-margin-medium-top uk-button uk-button-primary uk-align-center" (click)="openGrantWindow()">
Grant OpenAIRE
</button>
</fs-modal>
<ng-container *ngIf="pageType == 'my_search'"> <ng-container *ngIf="pageType == 'my_search'">
<span class="uk-margin-bottom uk-flex uk-flex-middle uk-flex-center"> <span class="uk-margin-bottom uk-flex uk-flex-middle uk-flex-center">
@ -279,10 +289,32 @@ declare var UIkit: any;
<!-- </button>--> <!-- </button>-->
<!-- </div>--> <!-- </div>-->
</modal-alert> </modal-alert>
<fs-modal #propagationFsModal classTitle="uk-tile-default uk-border-bottom">
<div>
This {{openaireEntities.RESULT}} is the result of <span
class="uk-text-bold"> merged {{openaireEntities.RESULTS}} in OpenAIRE</span>.
<br><br>
You have already added <span class="uk-text-bold">{{this.putCodes?.length}} works</span> in your ORCID record
related to the merged {{openaireEntities.RESULT}}.
<div *ngIf="currentAction == 'delete'">
If you continue with delete action, <span class="uk-text-bold">all these works will be deleted</span>.
</div>
<div *ngIf="currentAction == 'update'">
If you continue with update action, <span class="uk-text-bold">all these works will be deleted and a new merged work will be added</span>
instead.
</div>
</div>
<button class="uk-margin-medium-top uk-button uk-button-primary uk-align-center" (click)="confirmedPropagation()">
Continue
</button>
</fs-modal>
` `
}) })
export class OrcidWorkComponent { export class OrcidWorkComponent {
@Input() isMobile: boolean = false;
@Input() resultId: string = ""; @Input() resultId: string = "";
@Input() resultTitle: string = ""; @Input() resultTitle: string = "";
@Input() resultLandingInfo: ResultLandingInfo; @Input() resultLandingInfo: ResultLandingInfo;
@ -299,8 +331,10 @@ export class OrcidWorkComponent {
@ViewChild('workModal') workModal; @ViewChild('workModal') workModal;
// @ViewChild('saveWorkModal') saveWorkModal; // @ViewChild('saveWorkModal') saveWorkModal;
@ViewChild('grantModal') grantModal; @ViewChild('grantModal') grantModal;
@ViewChild('grantFsModal') grantFsModal: FullScreenModalComponent;
// @ViewChild('messageModal') messageModal; // @ViewChild('messageModal') messageModal;
@ViewChild('propagationModal') propagationModal; @ViewChild('propagationModal') propagationModal;
@ViewChild('propagationFsModal') propagationFsModal;
public requestGrant: boolean = false; public requestGrant: boolean = false;
public requestGrantMessage: string = "Please grant OpenAIRE to access and update your ORCID works."; public requestGrantMessage: string = "Please grant OpenAIRE to access and update your ORCID works.";
@ -720,6 +754,11 @@ export class OrcidWorkComponent {
} }
openGrantModal(title: string) { openGrantModal(title: string) {
if(this.isMobile) {
this.grantFsModal.okButton = false;
this.grantFsModal.title = title;
this.grantFsModal.open();
} else {
this.grantModal.cancelButton = true; this.grantModal.cancelButton = true;
this.grantModal.okButton = true; this.grantModal.okButton = true;
this.grantModal.okButtonText = "Grant OpenAIRE"; this.grantModal.okButtonText = "Grant OpenAIRE";
@ -727,6 +766,7 @@ export class OrcidWorkComponent {
this.grantModal.alertTitle = title; this.grantModal.alertTitle = title;
this.grantModal.open(); this.grantModal.open();
} }
}
closeGrantModal() { closeGrantModal() {
this.grantModal.cancel(); this.grantModal.cancel();
@ -755,6 +795,11 @@ export class OrcidWorkComponent {
// } // }
openPropagationModal(title: string) { openPropagationModal(title: string) {
if(this.isMobile) {
this.propagationFsModal.okButton = false;
this.propagationFsModal.title = title;
this.propagationFsModal.open();
} else {
this.propagationModal.cancelButton = true; this.propagationModal.cancelButton = true;
this.propagationModal.okButton = true; this.propagationModal.okButton = true;
this.propagationModal.okButtonText = "Continue"; this.propagationModal.okButtonText = "Continue";
@ -762,6 +807,7 @@ export class OrcidWorkComponent {
this.propagationModal.alertTitle = title; this.propagationModal.alertTitle = title;
this.propagationModal.open(); this.propagationModal.open();
} }
}
closePropagationModal() { closePropagationModal() {
this.propagationModal.cancel(); this.propagationModal.cancel();

3
orcid/orcid.module.ts
View File

@ -15,11 +15,12 @@ import {ResultLandingUtilsModule} from '../landingPages/landing-utils/resultLand
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 {orcid_add, orcid_bin} from "../utils/icons/icons"; import {orcid_add, orcid_bin} from "../utils/icons/icons";
import {FullScreenModalModule} from "../utils/modal/full-screen-modal/full-screen-modal.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, AlertModalModule, LoadingModule, ResultLandingUtilsModule, CommonModule, RouterModule, AlertModalModule, LoadingModule, ResultLandingUtilsModule,
IconsModule IconsModule, FullScreenModalModule
], ],
declarations: [ declarations: [
OrcidComponent, OrcidComponent,