[develop | DONE | FIXED]: availableOn.component.ts: Added field "@Input() inModal: boolean = false;" and display download sources when in modal - e.g. versions. | result-preview.component.html: Display download sources (<availableOn>) in versions (isDeletedByInferenceModal).
This commit is contained in:
parent
92f43c280e
commit
09960fda9e
|
|
@ -14,68 +14,79 @@ import {RouterHelper} from "../../utils/routerHelper.class";
|
|||
<div class="uk-flex uk-flex-middle"
|
||||
[ngClass]="isMobile ? ('uk-flex-column ' + (!(usedBy == 'landing') ? 'uk-margin-left uk-margin-xsmall-bottom' : '')) : 'uk-grid uk-grid-small uk-child-width-auto'"
|
||||
[attr.uk-grid]="!isMobile ? '' : null">
|
||||
<div *ngIf="properties.environment != 'production' && availableOn[0].fulltext" class="uk-flex uk-flex-middle"
|
||||
[ngClass]="isMobile ? 'uk-width-1-1' : 'uk-text-bolder'">
|
||||
<a [href]="availableOn[0].fulltext" target="_blank"
|
||||
class="uk-flex uk-flex-middle uk-button-link"
|
||||
[ngClass]="isMobile ? ((usedBy == 'landing') ? 'uk-width-1-1 uk-padding-small uk-padding-remove-horizontal' : '') : 'uk-flex-center'">
|
||||
<!-- <icon [flex]="true" [ratio]="0.7" name="download" visuallyHidden="download"></icon>-->
|
||||
<icon name="download" visuallyHidden="donwload" [flex]="true" [ratio]="(isMobile && usedBy == 'landing') ? 1 : 0.8"></icon>
|
||||
<span class="uk-margin-xsmall-left">Full-Text</span>
|
||||
</a>
|
||||
</div>
|
||||
<div *ngIf="properties.environment != 'production' && isMobile && (usedBy == 'landing') && availableOn[0].fulltext" class="uk-width-1-1"><hr></div>
|
||||
<div *ngIf="availableOn[0].downloadUrl" [ngClass]="isMobile ? 'uk-width-1-1' : ''">
|
||||
<div class="uk-flex uk-flex-middle" [ngClass]="isMobile ? ((usedBy == 'landing') ? 'uk-padding-small uk-padding-remove-horizontal' : '') : ''">
|
||||
<span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
|
||||
uk-tooltip [title]="getAccessLabel(availableOn[0].accessRight)">
|
||||
<icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="(isMobile && usedBy == 'landing') ? 1 : 0.8"></icon>
|
||||
</span>
|
||||
<ng-container *ngIf="!isMobile">
|
||||
<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; flip: false; shift: false" class="uk-drop download-drop">
|
||||
<div class="uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small uk-height-max-large uk-overflow-auto">
|
||||
<ng-container *ngTemplateOutlet="availableOnList"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="isMobile">
|
||||
<a #toggle class="uk-flex uk-flex-between uk-flex-middle uk-flex-center uk-width-expand uk-button-link">
|
||||
<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
|
||||
<span>
|
||||
<icon [flex]="true" ratio="1.5" name="arrow_right"></icon>
|
||||
</span>
|
||||
</a>
|
||||
<mobile-dropdown [toggle]="toggle">
|
||||
<div class="uk-text-emphasis uk-text-bolder uk-text-center uk-padding-small uk-padding-remove-vertical uk-text-uppercase">
|
||||
Sources
|
||||
</div>
|
||||
<div class="uk-text-small download-drop uk-padding uk-padding-remove-horizontal">
|
||||
<ng-container *ngTemplateOutlet="availableOnList"></ng-container>
|
||||
</div>
|
||||
</mobile-dropdown>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="inModal">
|
||||
<div class="uk-text-small uk-height-max-small uk-overflow-auto">
|
||||
<ng-container *ngTemplateOutlet="availableOnList"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!inModal">
|
||||
<div *ngIf="properties.environment != 'production' && availableOn[0].fulltext" class="uk-flex uk-flex-middle"
|
||||
[ngClass]="isMobile ? 'uk-width-1-1' : 'uk-text-bolder'">
|
||||
<a [href]="availableOn[0].fulltext" target="_blank"
|
||||
class="uk-flex uk-flex-middle uk-button-link"
|
||||
[ngClass]="isMobile ? ((usedBy == 'landing') ? 'uk-width-1-1 uk-padding-small uk-padding-remove-horizontal' : '') : 'uk-flex-center'">
|
||||
<!-- <icon [flex]="true" [ratio]="0.7" name="download" visuallyHidden="download"></icon>-->
|
||||
<icon name="download" visuallyHidden="donwload" [flex]="true" [ratio]="(isMobile && usedBy == 'landing') ? 1 : 0.8"></icon>
|
||||
<span class="uk-margin-xsmall-left">Full-Text</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div *ngIf="properties.environment != 'production' && isMobile && (usedBy == 'landing') && availableOn[0].fulltext" class="uk-width-1-1"><hr></div><div *ngIf="availableOn[0].downloadUrl" [ngClass]="isMobile ? 'uk-width-1-1' : ''">
|
||||
<div class="uk-flex uk-flex-middle" [ngClass]="isMobile ? ((usedBy == 'landing') ? 'uk-padding-small uk-padding-remove-horizontal' : '') : ''">
|
||||
<span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
|
||||
uk-tooltip [title]="getAccessLabel(availableOn[0].accessRight)">
|
||||
<icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="(isMobile && usedBy == 'landing') ? 1 : 0.8"></icon>
|
||||
</span>
|
||||
<ng-container *ngIf="!isMobile">
|
||||
<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; flip: false; shift: false" class="uk-drop download-drop">
|
||||
<div class="uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small uk-height-max-large uk-overflow-auto">
|
||||
<ng-container *ngTemplateOutlet="availableOnList"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="isMobile">
|
||||
<a #toggle class="uk-flex uk-flex-between uk-flex-middle uk-flex-center uk-width-expand uk-button-link">
|
||||
<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
|
||||
<span>
|
||||
<icon [flex]="true" ratio="1.5" name="arrow_right"></icon>
|
||||
</span>
|
||||
</a>
|
||||
<mobile-dropdown [toggle]="toggle">
|
||||
<div class="uk-text-emphasis uk-text-bolder uk-text-center uk-padding-small uk-padding-remove-vertical uk-text-uppercase">
|
||||
Sources
|
||||
</div>
|
||||
<div class="uk-text-small download-drop uk-padding uk-padding-remove-horizontal">
|
||||
<ng-container *ngTemplateOutlet="availableOnList"></ng-container>
|
||||
</div>
|
||||
</mobile-dropdown>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</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"
|
||||
[ngClass]="inModal ? 'uk-margin-small-bottom' : ''">
|
||||
<span
|
||||
[class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
|
||||
uk-tooltip [title]="getAccessLabel(instance.accessRight)">
|
||||
<icon [name]="instance.accessRightIcon" [flex]="true"></icon>
|
||||
<icon [name]="instance.accessRightIcon" [flex]="true" [ratio]="inModal ? 0.8 : 1"></icon>
|
||||
</span>
|
||||
<div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">
|
||||
<div class="uk-padding-small uk-padding-remove-left uk-padding-remove-vertical"
|
||||
[ngClass]="inModal ? 'uk-grid' : 'uk-width-expand'">
|
||||
<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">
|
||||
|
|
@ -118,6 +129,7 @@ import {RouterHelper} from "../../utils/routerHelper.class";
|
|||
|
||||
export class AvailableOnComponent {
|
||||
@Input() isMobile: boolean = false;
|
||||
@Input() inModal: boolean = false;
|
||||
@Input() usedBy: "search" | "landing" = "search";
|
||||
@Input() prevPath: string = "";
|
||||
@Input() availableOn: HostedByCollectedFrom[];
|
||||
|
|
|
|||
|
|
@ -185,16 +185,16 @@
|
|||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="(result.hostedBy_collectedFrom || hasActions || result.measure?.bip.length || result.measure?.counts.length) && !isDeletedByInferenceModal"
|
||||
<div *ngIf="(result.hostedBy_collectedFrom || ((hasActions || result.measure?.bip.length || result.measure?.counts.length) && !isDeletedByInferenceModal))"
|
||||
class="uk-text-small uk-margin-top" [class.uk-border-bottom]="!isMobile">
|
||||
<div uk-grid class="uk-grid uk-grid-small uk-text-xsmall uk-flex-middle uk-margin-xsmall-bottom"
|
||||
[class.uk-flex-between]="(result.measure?.bip.length || result.measure?.counts.length) && (result.hostedBy_collectedFrom?.length || hasActions)"
|
||||
[class.uk-flex-right]="!(result.measure?.bip.length || result.measure?.counts.length) && (result.hostedBy_collectedFrom?.length || hasActions)"
|
||||
[class.uk-flex-between]="!isDeletedByInferenceModal && (result.measure?.bip.length || result.measure?.counts.length) && (result.hostedBy_collectedFrom?.length || hasActions)"
|
||||
[class.uk-flex-right]="!isDeletedByInferenceModal && !(result.measure?.bip.length || result.measure?.counts.length) && (result.hostedBy_collectedFrom?.length || hasActions)"
|
||||
[class.uk-grid-divider]="!isMobile">
|
||||
<div *ngIf="result.hostedBy_collectedFrom?.length" class="uk-width-auto uk-visible@m">
|
||||
<availableOn [availableOn]="result.hostedBy_collectedFrom"></availableOn>
|
||||
<availableOn [availableOn]="result.hostedBy_collectedFrom" [inModal]="isDeletedByInferenceModal"></availableOn>
|
||||
</div>
|
||||
<div *ngIf="hasActions && result.id" class="uk-width-expand uk-visible@m">
|
||||
<div *ngIf="!isDeletedByInferenceModal && hasActions && result.id" class="uk-width-expand uk-visible@m">
|
||||
<entity-actions [cite]="cite" [share]="share" [linking]="linking"
|
||||
[deposit]="deposit" [embed]="embed"
|
||||
[type]="result.resultType"
|
||||
|
|
@ -222,7 +222,7 @@
|
|||
</span>
|
||||
</entity-actions>
|
||||
</div>
|
||||
<div *ngIf="result.measure?.bip.length || result.measure?.counts.length"
|
||||
<div *ngIf="!isDeletedByInferenceModal && (result.measure?.bip.length || result.measure?.counts.length)"
|
||||
class="uk-text-xsmall uk-width-auto metrics uk-flex uk-flex-middle uk-flex-right uk-text-meta">
|
||||
<ng-container *ngIf="result.measure?.bip.length">
|
||||
<a class="uk-flex uk-flex-middle uk-link-reset">
|
||||
|
|
@ -275,48 +275,55 @@
|
|||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="result.hostedBy_collectedFrom?.length || hasActions" class="uk-hidden@m">
|
||||
<a class="uk-link-reset uk-flex uk-flex-middle">
|
||||
<icon [flex]="true" name="more_vert"></icon>
|
||||
</a>
|
||||
<div class="uk-dropdown" uk-dropdown="mode: click; pos: top-left; offset: 5; delay-hide: 0"> <!-- #element -->
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<ng-container *ngIf="result.hostedBy_collectedFrom?.length">
|
||||
<availableOn [availableOn]="result.hostedBy_collectedFrom" [isMobile]="isMobile"></availableOn>
|
||||
<div class="uk-nav-divider"></div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="hasActions">
|
||||
<entity-actions [cite]="cite" [share]="share" [linking]="linking"
|
||||
[deposit]="deposit" [embed]="embed"
|
||||
[type]="result.resultType"
|
||||
[result]="result" [id]="result.objId?result.objId:result.id"
|
||||
[url]="properties.domain + properties.baseLink + url + '?' + urlParam + '=' + result.id"
|
||||
[isMobile]="isMobile">
|
||||
<span *ngIf="orcid">
|
||||
<orcid-work *ngIf="showOrcid && result.identifiers && result.identifiers.size > 0"
|
||||
[resultId]="result.relcanId" [resultTitle]="result.title"
|
||||
[type]="result.resultType" [pageType]="'search'"
|
||||
[putCodes]="result.orcidPutCodes" [givenPutCode]="true" [identifiers]="result.identifiers"
|
||||
[isMobile]="isMobile">
|
||||
</orcid-work>
|
||||
</span>
|
||||
<span *ngIf="orcid" class="uk-width-expand uk-text-right">
|
||||
<span *ngIf="result.orcidCreationDates?.length > 0" class="uk-display-inline-block">
|
||||
<span class="uk-text-meta">
|
||||
Added in ORCID:
|
||||
<div *ngIf="result.hostedBy_collectedFrom?.length || (hasActions && !isDeletedByInferenceModal)" class="uk-hidden@m">
|
||||
<ng-container *ngIf="isDeletedByInferenceModal && result.hostedBy_collectedFrom?.length">
|
||||
<availableOn [availableOn]="result.hostedBy_collectedFrom" [inModal]="isDeletedByInferenceModal"></availableOn>
|
||||
<div class="uk-nav-divider"></div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!isDeletedByInferenceModal">
|
||||
<a class="uk-link-reset uk-flex uk-flex-middle">
|
||||
<icon [flex]="true" name="more_vert"></icon>
|
||||
</a>
|
||||
<div class="uk-dropdown" uk-dropdown="mode: click; pos: top-left; offset: 5; delay-hide: 0"> <!-- #element -->
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<ng-container *ngIf="result.hostedBy_collectedFrom?.length">
|
||||
<availableOn [availableOn]="result.hostedBy_collectedFrom" [isMobile]="isMobile"></availableOn>
|
||||
<div class="uk-nav-divider"></div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="hasActions">
|
||||
<entity-actions [cite]="cite" [share]="share" [linking]="linking"
|
||||
[deposit]="deposit" [embed]="embed"
|
||||
[type]="result.resultType"
|
||||
[result]="result" [id]="result.objId?result.objId:result.id"
|
||||
[url]="properties.domain + properties.baseLink + url + '?' + urlParam + '=' + result.id"
|
||||
[isMobile]="isMobile">
|
||||
<span *ngIf="orcid">
|
||||
<orcid-work *ngIf="showOrcid && result.identifiers && result.identifiers.size > 0"
|
||||
[resultId]="result.relcanId" [resultTitle]="result.title"
|
||||
[type]="result.resultType" [pageType]="'search'"
|
||||
[putCodes]="result.orcidPutCodes" [givenPutCode]="true" [identifiers]="result.identifiers"
|
||||
[isMobile]="isMobile">
|
||||
</orcid-work>
|
||||
</span>
|
||||
<span *ngFor="let date of result.orcidCreationDates; let i=index">
|
||||
{{date | date: 'dd MMM yyyy'}}
|
||||
<span *ngIf="i < (result.orcidCreationDates.length - 1)">
|
||||
&
|
||||
<span *ngIf="orcid" class="uk-width-expand uk-text-right">
|
||||
<span *ngIf="result.orcidCreationDates?.length > 0" class="uk-display-inline-block">
|
||||
<span class="uk-text-meta">
|
||||
Added in ORCID:
|
||||
</span>
|
||||
<span *ngFor="let date of result.orcidCreationDates; let i=index">
|
||||
{{date | date: 'dd MMM yyyy'}}
|
||||
<span *ngIf="i < (result.orcidCreationDates.length - 1)">
|
||||
&
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</entity-actions>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
</entity-actions>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue