[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

View File

@ -2,6 +2,7 @@ import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@an
import {HostedByCollectedFrom} from "../../utils/result-preview/result-preview";
import {properties} from "../../../../environments/environment";
import {StringUtils} from '../../utils/string-utils.class';
import {FullScreenModalComponent} from "../../utils/modal/full-screen-modal/full-screen-modal.component";
declare var UIkit;
@ -15,66 +16,89 @@ declare var UIkit;
uk-tooltip [title]="availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available'">
<icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="0.8"></icon>
</span>
<a uk-tooltip="Source" target="_blank"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
<span>
<icon [flex]="true" [name]="'expand_' + (isOpen?'less':'more')"></icon>
</span>
</a>
<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">
<div *ngFor="let instance of availableOn let i=index" class="download-drop-item uk-flex uk-flex-top">
<span
[class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'">
<icon [name]="instance.accessRightIcon" [flex]="true"></icon>
</span>
<div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">
<span class="uk-text-emphasis">
<a *ngIf="instance.downloadUrl" [href]="instance.downloadUrl" target="_blank"
class="title uk-link-text uk-text-bold custom-external uk-display-inline-block">
{{instance.downloadNames.join("; ")}}
</a>
</span>
<div *ngIf="instance.types?.length > 0 || instance.years?.length > 0" class="uk-text-meta">
<span *ngIf="instance.types?.length > 0"
class="uk-text-capitalize">{{instance.types.join(" . ")}}</span>
<span *ngIf="instance.types?.length > 0 && instance.years?.length > 0"> . </span>
<span *ngIf="instance.years?.length > 0">{{instance.years.join(" . ")}}</span>
</div>
<div *ngIf="instance.license" class="uk-text-meta uk-text-truncate" uk-tooltip [title]="instance.license">
License:
<a *ngIf="isUrl(instance.license); else elseBlock"
[href]="instance.license" target="_blank" class="custom-external uk-link-text">
{{instance.license}}
</a>
<ng-template #elseBlock> {{instance.license}}</ng-template>
</div>
<div *ngIf="instance.collectedNamesAndIds?.size > 0" class="uk-text-meta">
<span>Providers: </span>
<a *ngFor="let collectedName of getKeys(instance.collectedNamesAndIds); let i=index"
[routerLink]="dataProviderUrl"
[queryParams]="{datasourceId: instance.collectedNamesAndIds.get(collectedName)}"
class="uk-link-text">
{{collectedName}}
<ng-container *ngIf="(i !== (instance.collectedNamesAndIds.size - 1))">;</ng-container>
</a>
</div>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="!(isMobile && usedBy == 'landing')">
<a uk-tooltip="Source" target="_blank"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
<span>
<!-- <icon [flex]="true" [name]="'expand_' + (isOpen?'less':'more')"></icon>-->
<icon [flex]="true" [name]="(isOpen?'arrow_drop_up':'arrow_drop_down')"></icon>
</span>
</a>
<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">
<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">
<span
[class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'">
<icon [name]="instance.accessRightIcon" [flex]="true"></icon>
</span>
<div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">
<span class="uk-text-emphasis">
<a *ngIf="instance.downloadUrl" [href]="instance.downloadUrl" target="_blank"
class="title uk-link-text uk-text-bold custom-external uk-display-inline-block">
{{instance.downloadNames.join("; ")}}
</a>
</span>
<div *ngIf="instance.types?.length > 0 || instance.years?.length > 0" class="uk-text-meta">
<span *ngIf="instance.types?.length > 0" class="uk-text-capitalize">{{instance.types.join(" . ")}}</span>
<span *ngIf="instance.types?.length > 0 && instance.years?.length > 0"> . </span>
<span *ngIf="instance.years?.length > 0">{{instance.years.join(" . ")}}</span>
</div>
<div *ngIf="instance.license" class="uk-text-meta uk-text-truncate" uk-tooltip [title]="instance.license">
License:
<a *ngIf="isUrl(instance.license); else elseBlock"
[href]="instance.license" target="_blank" class="custom-external uk-link-text">
{{instance.license}}
</a>
<ng-template #elseBlock> {{instance.license}}</ng-template>
</div>
<div *ngIf="instance.collectedNamesAndIds?.size > 0" class="uk-text-meta">
<span>Providers: </span>
<a *ngFor="let collectedName of getKeys(instance.collectedNamesAndIds); let i=index"
[routerLink]="dataProviderUrl"
[queryParams]="{datasourceId: instance.collectedNamesAndIds.get(collectedName)}"
class="uk-link-text">
{{collectedName}}
<ng-container *ngIf="(i !== (instance.collectedNamesAndIds.size - 1))">;</ng-container>
</a>
</div>
</div>
</div>
</ng-template>
`
})
export class AvailableOnComponent {
@Input() isMobile: boolean = false;
@Input() usedBy: "search" | "landing" = "search";
@Input() availableOn: HostedByCollectedFrom[];
/** @deprecated */
@Output() viewAllClicked = new EventEmitter();
@ViewChild("dropElement") dropElement: ElementRef;
@ViewChild("availableListFsModal") availableListFsModal: FullScreenModalComponent;
public threshold: number = 1;
public dataProviderUrl = properties.searchLinkToDataProvider.split('?')[0];
public title: string = "Download from";
@ -100,4 +124,10 @@ export class AvailableOnComponent {
public sliceString(str: string, size: number) {
return StringUtils.sliceString(str, size)
}
public openAvailableListFsModal() {
this.availableListFsModal.title = "Sources";
this.availableListFsModal.okButton = false;
this.availableListFsModal.open();
}
}

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-width-1-4 uk-text-meta">
<div class="uk-text-xsmall" style="color: #EEB204">Beta</div>
Fields of Science (FoS)
{{title}}
</div>
<div class="uk-width-expand">
<div *ngFor="let subject of subjects.slice(0, viewAll?subjects.length:threshold); let i=index" class="uk-text-truncate">

View File

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

View File

@ -24,7 +24,7 @@ import {HelperFunctions} from "../../../utils/HelperFunctions.class";
[page]="page" [pageSize]="pageSize"
[totalResults]="results.length">
</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)">
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false" [isCard]="false"></result-preview>
</li>

View File

@ -324,241 +324,8 @@
</div>
</ng-container>
<ng-container *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)">
<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-container>
<ng-container *ngTemplateOutlet="metricsContent"></ng-container>
</ng-container>
</div>
<div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
@ -691,7 +458,7 @@
<!-- Mobile view -->
<div *ngIf="isMobile" class="uk-hidden@m uk-position-relative landing">
<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"
class="uk-margin-small-bottom uk-flex uk-flex-middle"
[ngClass]="(resultLandingInfo.hostedBy_collectedFrom[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')">
@ -783,10 +550,82 @@
</ng-container>
</div>
</div>
<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 *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="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>
<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() == '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>
@ -794,61 +633,62 @@
<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() == 'organization'" name="corporate_fare" type="outlined" [flex]="true" [ratio]="2"></icon>
</span>
<span>{{getTypeName()}}</span>
</a>
</div>
<div *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)">
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset">
<icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2"></icon>
<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" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon>
<span>Metrics</span>
</a>
</div>
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset">
<icon name="pending" type="outlined" [flex]="true" [ratio]="2"></icon>
<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" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<span>Actions</span>
</a>
</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>
</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">
<ng-container *ngTemplateOutlet="references_content"></ng-container>
</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">
<div class="landing-section uk-padding uk-padding-remove-horizontal">
<ng-container *ngTemplateOutlet="relation_in_tab; context: { researchResults: filteredRelatedResults, header: ''}"></ng-container>
</div>
</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">
<div class="landing-section uk-padding uk-padding-remove-horizontal">
<ng-container *ngTemplateOutlet="bioentities_content"></ng-container>
</div>
</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 *ngTemplateOutlet="compatibleEOSC_content"></ng-container>
</ng-container>
</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')">
<fundedBy [fundedByProjects]="resultLandingInfo.fundedByProjects" [provenanceActionVocabulary]="provenanceActionVocabulary" (viewAllClicked)="viewAll=$event"
[isMobile]="true" [viewAll]="true"></fundedBy>
</ng-container>
</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')">
<relatedTo [contexts]="resultLandingInfo.contexts" [viewAll]="viewAll=='relatedTo'"
(viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"
@ -856,20 +696,20 @@
</ng-container>
</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">
<ng-container *ngTemplateOutlet="enermapsTool_content"></ng-container>
</div>
</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">
<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>
</ng-container>
</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">
<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>
@ -908,8 +748,7 @@
[type]="title.toLowerCase()" [piwikSiteId]="piwikSiteId"></citeThis>
</modal-alert>
<modal-alert *ngIf="resultLandingInfo"
#addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
<modal-alert *ngIf="resultLandingInfo" #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
<addThis></addThis>
</modal-alert>
@ -1149,4 +988,269 @@
</li>
</ng-container>
</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>

View File

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

View File

@ -11,6 +11,7 @@ import {ExternalIDV3_0, WorkV3_0} from "./orcidWork";
import {EnvProperties} from "../utils/properties/env-properties";
import {UserManagementService} from "../services/user-management.service";
import {OpenaireEntities} from "../utils/properties/searchFields";
import {FullScreenModalComponent} from "../utils/modal/full-screen-modal/full-screen-modal.component";
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'"
[title]="(!pids || !isLoggedIn) ? (!pids ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipAdd">
<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-text-muted]="showLoading || !isLoggedIn || !pids"
(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'"
[title]="(!pids || !isLoggedIn) ? (!pids ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipDelete">
<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-text-muted]="showLoading || !isLoggedIn || !pids"
(mouseover)="hoverEvent($event, 'delete')" (mouseout)="hoverEvent($event, 'delete')">
@ -68,7 +71,7 @@ declare var UIkit: any;
</span> -->
</ng-container>
<modal-alert #grantModal [overflowBody]=false (alertOutput)="openGrantWindow()">
<modal-alert *ngIf="!isMobile" #grantModal [overflowBody]=false (alertOutput)="openGrantWindow()">
<div>
<div>{{requestGrantMessage}}</div>
@ -91,6 +94,13 @@ declare var UIkit: any;
<!-- </div>-->
</div>
</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'">
@ -279,10 +289,32 @@ declare var UIkit: any;
<!-- </button>-->
<!-- </div>-->
</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 {
@Input() isMobile: boolean = false;
@Input() resultId: string = "";
@Input() resultTitle: string = "";
@Input() resultLandingInfo: ResultLandingInfo;
@ -299,9 +331,11 @@ export class OrcidWorkComponent {
@ViewChild('workModal') workModal;
// @ViewChild('saveWorkModal') saveWorkModal;
@ViewChild('grantModal') grantModal;
@ViewChild('grantFsModal') grantFsModal: FullScreenModalComponent;
// @ViewChild('messageModal') messageModal;
@ViewChild('propagationModal') propagationModal;
@ViewChild('propagationFsModal') propagationFsModal;
public requestGrant: boolean = false;
public requestGrantMessage: string = "Please grant OpenAIRE to access and update your ORCID works.";
private tokenUrl: string;
@ -720,12 +754,18 @@ export class OrcidWorkComponent {
}
openGrantModal(title: string) {
this.grantModal.cancelButton = true;
this.grantModal.okButton = true;
this.grantModal.okButtonText = "Grant OpenAIRE";
this.grantModal.okButtonLeft = false;
this.grantModal.alertTitle = title;
this.grantModal.open();
if(this.isMobile) {
this.grantFsModal.okButton = false;
this.grantFsModal.title = title;
this.grantFsModal.open();
} else {
this.grantModal.cancelButton = true;
this.grantModal.okButton = true;
this.grantModal.okButtonText = "Grant OpenAIRE";
this.grantModal.okButtonLeft = false;
this.grantModal.alertTitle = title;
this.grantModal.open();
}
}
closeGrantModal() {
@ -755,12 +795,18 @@ export class OrcidWorkComponent {
// }
openPropagationModal(title: string) {
this.propagationModal.cancelButton = true;
this.propagationModal.okButton = true;
this.propagationModal.okButtonText = "Continue";
this.propagationModal.okButtonLeft = false;
this.propagationModal.alertTitle = title;
this.propagationModal.open();
if(this.isMobile) {
this.propagationFsModal.okButton = false;
this.propagationFsModal.title = title;
this.propagationFsModal.open();
} else {
this.propagationModal.cancelButton = true;
this.propagationModal.okButton = true;
this.propagationModal.okButtonText = "Continue";
this.propagationModal.okButtonLeft = false;
this.propagationModal.alertTitle = title;
this.propagationModal.open();
}
}
closePropagationModal() {

View File

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