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

redesign of result-preview component

This commit is contained in:
Alex Martzios 2022-03-15 13:13:28 +02:00
parent 35a8a098c3
commit e1a632e63f
14 changed files with 138 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
deposit/searchResultsInDeposit.component.html
View File

@ -18,10 +18,9 @@
</div>
<ul class="uk-margin-top uk-list uk-margin search-results ">
<li *ngFor="let result of results" class="uk-animation-fade">
<div class="uk-card uk-card-default uk-padding uk-card-hover">
<result-preview [properties]="properties" [showOrganizations]="true"
[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true">
[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"
[isCard]="true">
</result-preview>
</div>
</li>
</ul>

10
landingPages/landing-utils/showIdentifiers.component.ts
View File

@ -16,14 +16,16 @@ import {properties} from "../../../../environments/environment";
@Component({
selector: 'showIdentifiers',
template: `
<div class="uk-text-muted">Persistent Identifiers</div>
<!-- <div class="uk-text-muted">Persistent Identifiers</div> -->
<div class="uk-height-max-medium uk-overflow-auto uk-margin-small-top">
<ng-container *ngFor="let key of keys let i=index">
<div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1">
<p class="custom-break uk-margin-remove">
<!-- <div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1"> -->
<div *ngIf="!showAll" class="uk-flex-inline uk-flex-wrap uk-margin-medium-right">
<p class="uk-margin-remove">
<span #content [id]="key">
<span class="uk-text-bold uk-text-uppercase">{{key}}: </span>
<span class="uk-text-muted uk-text-uppercase">{{key}}: </span>
<ng-container *ngFor="let item of identifiers.get(key) let j=index">
<!-- TODO: custom external link icons -->
<a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank" class="uk-display-inline">
{{item}} <span class="custom-external custom-icon"></span>
</a>

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

@ -24,7 +24,7 @@ import {properties} from "../../../../../environments/environment";
</no-load-paging>
<ul class="uk-list uk-list-divider 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)"></result-preview>
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [isCard]="false"></result-preview>
</li>
</ul>
<no-load-paging *ngIf="results.length > pageSize" [type]="type"

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

@ -24,7 +24,7 @@ import {properties} from "../../../../../environments/environment";
</no-load-paging>
<ul class="uk-list uk-list-divider 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"></result-preview>
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false" [isCard]="false"></result-preview>
</li>
</ul>
<no-load-paging *ngIf="results.length > pageSize" [type]="type"

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

@ -369,7 +369,8 @@
<ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let item of researchResults.slice((relatedPage-1)*pageSize, relatedPage*pageSize)">
<result-preview [modal]="relationModal" [properties]="properties"
[result]="getResultPreview(item)"></result-preview>
[result]="getResultPreview(item)"
[isCard]="false"></result-preview>
</li>
</ul>
<no-load-paging *ngIf="researchResults.length > pageSize"

3
orcid/my-orcid-links/searchMyOrcidResults.component.html
View File

@ -13,7 +13,8 @@
<div class="uk-grid uk-grid-divider">
<div class="uk-width-expand@m uk-width-1-1 uk-first-column">
<result-preview [properties]="properties" [showOrcid]="false" [showOrganizations]="true"
[showSubjects]="true" [result]="result" [promoteWebsiteURL]="true">
[showSubjects]="true" [result]="result" [promoteWebsiteURL]="true"
[isCard]="false">
</result-preview>
</div>

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

@ -41,10 +41,10 @@ declare var UIkit: any;
[class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ ((showLoading || !isLoggedIn) ? 'uk-disabled ' : '') + (!isLoggedIn ? 'half-opacity' : '')">
<icon *ngIf="!showLoading" name="add" ratio="1"></icon>
<span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
<span class="uk-margin-small-left uk-flex uk-flex-middle">Add to
<span class="orcid-color space uk-flex uk-flex-middle">
<span>ORCID</span>
<img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid" style="width:16px; height:16px" loading="lazy">{{" "}}
<span class="uk-margin-small-left uk-flex uk-flex-middle">Add to&#160;
<span class="orcid-color uk-flex uk-flex-middle">
<span>ORCID&#160;</span>
<img class="" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid" style="width:16px; height:16px" loading="lazy">{{" "}}
</span>
</span>
</a>
@ -60,9 +60,9 @@ declare var UIkit: any;
[class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ (showLoading ? 'uk-disabled' : '')">
<icon *ngIf="!showLoading" name="remove" ratio="0.8"></icon>
<span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
<span class="uk-margin-small-left uk-flex uk-flex-middle">Delete from
<span class="uk-margin-small-left uk-flex uk-flex-middle">Delete from&#160;
<span class="orcid-color space uk-flex uk-flex-middle">
<span>ORCID</span>
<span>ORCID&#160;</span>
<img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">{{" "}}
</span>
</span>
@ -84,7 +84,7 @@ declare var UIkit: any;
</span>
<span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
[top_margin]="false"></loading></span>
<span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Add to
<span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Add to&#160;
<span class="orcid-color">
ORCID
</span>
@ -105,7 +105,7 @@ declare var UIkit: any;
</span>
<span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
[top_margin]="false"></loading></span>
<span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Delete from
<span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Delete from&#160;
<span class="orcid-color">
ORCID
</span>
@ -142,9 +142,9 @@ declare var UIkit: any;
<ng-container *ngIf="pageType == 'my_search'">
<span class="uk-margin-bottom uk-flex uk-flex-middle uk-flex-center">
<span>ORCID</span>
<span>ORCID&#160;</span>
<img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">
<span class="space">ACTIONS</span>
<span class="space">&#160;ACTIONS</span>
</span>
<span [attr.uk-tooltip]="(!putCodes || putCodes.length == 0)

5
orcid/recommend-orcid-links/searchResultsForOrcid.component.html
View File

@ -9,10 +9,9 @@
</div>
<ul class="uk-margin-top uk-list uk-margin search-results ">
<li *ngFor="let result of results" class="uk-animation-fade">
<div class="uk-card uk-card-default uk-padding uk-card-hover">
<result-preview [properties]="properties" [showOrganizations]="true"
[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true">
[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"
[isCard]="true">
</result-preview>
</div>
</li>
</ul>

3
searchPages/searchUtils/modal-result/modal-result.component.ts
View File

@ -21,7 +21,8 @@ import {EnvProperties} from "../../../utils/properties/env-properties";
<result-preview [modal]="modal" [properties]="properties"
[result]="getResultPreview(result)"
[showSubjects]="showSubjects"
[showOrganizations]="showOrganizations"></result-preview>
[showOrganizations]="showOrganizations"
[isCard]="false"></result-preview>
</li>
</ul>
<no-load-paging *ngIf="totalResults > pageSize" [type]="type"

8
searchPages/searchUtils/newSearchPage.component.html
View File

@ -231,8 +231,9 @@
[href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
target="_blank"> OpenAIRE - Explore</a>.
</div>
<div class="uk-flex uk-flex-between uk-flex-middle uk-flex-wrap uk-margin-medium-top uk-margin-bottom">
<!-- Total results, number of pages -->
<h6 class="uk-margin-bottom">
<h6 class="uk-margin-remove">
<ng-container *ngIf="results && searchUtils.totalResults > 0">
<span>{{searchUtils.totalResults|number}}</span>
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
@ -246,8 +247,8 @@
<span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span>
</ng-container>
</h6>
<!-- TODO Download results position-->
<div *ngIf="showDownload" class="uk-width-auto@m uk-margin-small-bottom">
<!-- Download results -->
<div *ngIf="showDownload" class="uk-margin-small-bottom uk-margin-small-top">
<search-download
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[isDisabled]="disabled"
@ -255,6 +256,7 @@
[piwikSiteId]="piwikSiteId">
</search-download>
</div>
</div>
<!-- No Dashboard Filters -->
<div
*ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))">

5
searchPages/searchUtils/searchResult.component.html
View File

@ -1,10 +1,9 @@
<ul class="uk-list uk-list-xlarge uk-margin" [ngClass]="custom_class">
<errorMessages [status]="[status]" [type]="'results'"></errorMessages>
<li *ngFor="let result of previewResults" class="uk-animation-fade">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
<result-preview [properties]="properties" [showOrganizations]="showOrganizations"
[showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps">
[showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps"
[isCard]="true">
</result-preview>
</div>
</li>
</ul>

17
utils/rangeFilter/rangeFilter.component.html
View File

@ -25,7 +25,8 @@
[placeholder]="'e.g. ' + yearMax "/>
<button type="submit" (click)="yearChanged()"
[ngStyle]="{'cursor': (rangeForm.valid && (yearFrom.dirty || yearTo.dirty)) ? 'pointer' : 'default'}"
class="uk-icon uk-icon-button uk-margin-small-left uk-text-right uk-button-default"
class="uk-icon uk-icon-button uk-button-default uk-margin-small-left"
[class.uk-disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)"
[disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
icon="chevron-right" ratio="1">
@ -55,20 +56,20 @@
<!-- Natalia's suggestion-->
<div class="uk-margin-small uk-margin-top uk-text-left">
<ul class="uk-subnav uk-subnav-divider recentyears">
<ul class="uk-text-small uk-grid uk-grid-small uk-grid-divider" uk-grid>
<!-- + (isDisabled ? ' uk-disabled uk-text-muted' : '')"-->
<li>
<a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(0,(stringToNum(filter.selectedToValue) ==
currentYear
&&stringToNum(filter.selectedFromValue) == currentYear))"
[class]="'portal-link uk-text-center '
[class]="'uk-text-center '
+ ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue) == currentYear) ? ' uk-text-bold' : '')
"
(click)="yearChanged(0)"
>This year</a>
<a *ngIf="!actionRoute"
[class]="'portal-link uk-text-center '
[class]="'uk-text-center '
+ ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue) == currentYear) ? ' uk-text-bold' : '')
"
(click)="yearChanged(0)"
@ -77,13 +78,13 @@
<li><a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(4,(stringToNum(filter.selectedToValue) == currentYear
&&stringToNum(filter.selectedFromValue) == currentYear-4))"
[class]="'portal-link uk-text-center '
[class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-4) ? ' uk-text-bold' : '')
"
(click)="yearChanged(4)"
>Last 5 years</a>
<a *ngIf="!actionRoute"
[class]="'portal-link uk-text-center '
[class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-4) ? ' uk-text-bold' : '')
"
(click)="yearChanged(4)"
@ -91,13 +92,13 @@
</li>
<li><a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(9,(stringToNum(filter.selectedToValue) == currentYear &&stringToNum(filter.selectedFromValue) == currentYear-9))"
[class]="'portal-link uk-text-center '
[class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-9) ? ' uk-text-bold' : '')
"
(click)="yearChanged(9)"
>Last 10 years</a>
<a *ngIf="!actionRoute"
[class]="'portal-link uk-text-center '
[class]="'uk-text-center '
+ ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue) == currentYear-9) ? ' uk-text-bold' : '')
"
(click)="yearChanged(9)"

46
utils/result-preview/result-preview.component.html
View File

@ -1,4 +1,5 @@
<div *ngIf="result">
<div *ngIf="result" [ngClass]="{'uk-card uk-card-default uk-card-hover': isCard}">
<div [ngClass]="{'uk-card-body': isCard}">
<!-- Before title -->
<div class="uk-grid uk-flex uk-flex-middle">
<div *ngIf="properties.enermapsURL && showEnermaps && result.enermapsId" class=" uk-inline uk-width-auto uk-text-center uk-visible-toggle">
@ -119,49 +120,55 @@
<div class="uk-margin-small-bottom">
<span
*ngIf="result.accessMode && result.accessMode.toLowerCase() !== 'not available'"
class="uk-label custom-label uk-text-truncate " [ngClass]="'label-' + accessClass(result.accessMode)"
class="uk-label uk-text-truncate " [ngClass]="'uk-label-' + accessClass(result.accessMode)"
title="Access Mode">
{{result.accessMode}}
</span>{{' '}}
<span *ngIf="result.openAccessMandatePublications && (!result.openAccessMandateDatasets)"
class="uk-label custom-label label-open uk-text-truncate"
<span
*ngIf="result.openAccessMandatePublications && (!result.openAccessMandateDatasets)"
class="uk-label uk-label-success uk-text-truncate"
title="Open Access mandate for Publications">
Open Access mandate for Publications
</span>{{' '}}
<span
*ngIf="result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets && (result.openAccessMandatePublications == undefined || !result.openAccessMandatePublications)"
class="uk-label custom-label label-open uk-text-truncate " title="Open Access mandate for Research Data">
class="uk-label uk-label-success uk-text-truncate " title="Open Access mandate for Research Data">
Open Access mandate for Research Data
</span>{{' '}}
<span
*ngIf="result.openAccessMandatePublications != undefined && result.openAccessMandatePublications && result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets"
class="uk-label custom-label label-open uk-text-truncate"
class="uk-label uk-label-success uk-text-truncate"
title="Open Access mandate for Publications and Research Data">
Open Access mandate for Publications and Research Data
</span>{{' '}}
<span *ngIf="result.languages && result.languages.length > 0">
<span *ngFor="let language of result.languages"
class="uk-label custom-label label-language " title="Language">
<span
*ngFor="let language of result.languages"
class="uk-label" title="Language">
{{language}}
</span>{{' '}}
</span>
<span *ngIf="result.programmingLanguages && result.programmingLanguages.length > 0">
<span *ngFor="let programmingLanguage of result.programmingLanguages"
class="uk-label custom-label label-language" title="Programming Language">
<span
*ngFor="let programmingLanguage of result.programmingLanguages"
class="uk-label" title="Programming Language">
{{programmingLanguage}}
</span>{{" "}}
</span>
<span *ngIf="result.sc39" class="uk-label custom-label label-sc39" title="Special Clause 39">
<span
*ngIf="result.sc39" class="uk-label" title="Special Clause 39">
Special Clause 39
</span>{{' '}}
<span *ngIf="result.compatibility && result.compatibility != '' && result.compatibility != 'not available'"
class="uk-label custom-label label-compatibility" title="Compatibility">
<span
*ngIf="result.compatibility && result.compatibility != '' && result.compatibility != 'not available'"
class="uk-label" title="Compatibility">
{{result.compatibility}}
</span>{{' '}}
<span *ngIf="result.compatibility != undefined && result.compatibility != '' && result.compatibility ==
'not available'"
class="uk-label custom-label label-danger" title="OpenAIRE Compatibility">Not yet registered</span>
{{' '}}
<span
*ngIf="result.compatibility != undefined && result.compatibility != '' && result.compatibility == 'not available'"
class="uk-label uk-label-danger" title="OpenAIRE Compatibility">
Not yet registered
</span>{{' '}}
</div>
<!-- Authors -->
<div *ngIf="result.authors" class="uk-flex uk-margin-small-bottom">
@ -281,13 +288,15 @@
</span>
</div>
</div>
</div>
</div>
</div>
<!--&& loggedIn -->
<div *ngIf="(result.pop_inf && result.DOI) ||
((properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community') &&
((showOrcid && result.identifiers && result.identifiers.size > 0) || result.orcidCreationDates?.length > 0))"
class="result-preview-bottom">
class="result-preview-bottom"
[ngClass]="{'uk-card-footer': isCard}">
<!-- Impact Factors-->
<span class="uk-flex uk-flex-top">
<ng-container *ngIf="result.pop_inf && result.DOI">
@ -362,6 +371,7 @@
</div>
</ng-container>
<!-- && loggedIn -->
<!-- TODO: change colors/opacity and disabled attr for ORCID buttons -->
<span *ngIf="(properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community')
&& showOrcid && result.identifiers && result.identifiers.size > 0"
class="uk-width-1-3 uk-width-expand@s">

7
utils/result-preview/result-preview.component.ts
View File

@ -19,6 +19,7 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
@Input() modal: AlertModal = null;
@Input() promoteWebsiteURL: boolean = false;
@Input() hasLink: boolean = true;
@Input() isCard: boolean = false;
public routerHelper: RouterHelper = new RouterHelper();
public urlParam: string;
public url: string;
@ -142,11 +143,11 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
public accessClass(accessMode: string): string {
if(accessMode.toLowerCase().indexOf('open') !== -1) {
return 'open';
return 'success';
} else if(accessMode.toLowerCase() === 'not available') {
return 'unknown';
return 'disabled'; // unknown
} else {
return 'closed';
return 'disabled'; // closed
}
}