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

[develop | DONE | ADDED]: Added compact view functionality on search pages. 

1. newSearchPage.component.html: Increase left margin of download button | Added button for compact view | In <search-result> added parameter "compactView".
2. newSearchPage.component.html: Added class fields "@Input() hasCompactView: boolean = false;", to show compact button or not and "public compactView: boolean = false;" to show compact or expanded view of each result.
3. searchDownload.component.ts: Changed download <button> to <a> with class "custom-view-button" | Set visuallyHidden to icon.
4. searchResult.component.ts: Added class field "@Input() compactView: boolean = false;".
5. searchResult.component.html: In <result-preview added parameter "compactView".
6. entity-actions.component.ts: Added class field "@Input() compactView: boolean = false;" | When compactView is true, hide action labels - show only icons.
7. result-preview.component.ts: Added class field "@Input() compactView: boolean = false;".
8. result-preview.component.html: When compactView is true, make margins smaller, show 1 line in title, hide funder budget, identifiers, website url, oai-pmh url, description, action oa routes and metrics labels, and added "compactView" parameter in <entity-actions>.
This commit is contained in:
Konstantina Galouni 2024-07-09 17:11:55 +03:00
parent 1f00fae364
commit 403fe375e7
8 changed files with 61 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -369,7 +369,7 @@
</div>
<!-- Download results -->
<div *ngIf="showDownload && (searchUtils.status !== errorCodes.LOADING || !loadPaging)"
class="uk-margin-small-left uk-flex uk-flex-middle" [class.uk-flex-center]="mobile" [class.uk-margin-medium-top]="mobile">
class="uk-margin-left uk-flex uk-flex-middle" [class.uk-flex-center]="mobile" [class.uk-margin-medium-top]="mobile">
<search-download
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[isDisabled]="disabled"
@ -381,6 +381,14 @@
</a>
</ng-container>
</div>
<!-- Compact results -->
<a *ngIf="hasCompactView && (searchUtils.status !== errorCodes.LOADING || !loadPaging)"
class="uk-link-reset custom-view-button active uk-margin-left">
<icon *ngIf="!compactView" uk-tooltip="Compact results" (click)="toggleView(true)"
name="unfold_less" [flex]="true" visuallyHidden="Compact results"></icon>
<icon *ngIf="compactView" uk-tooltip="Expand results" (click)="toggleView(false)"
name="unfold_more" [flex]="true" visuallyHidden="Expand results"></icon>
</a>
</div>
</div>
@ -400,7 +408,8 @@
[results]="results"
[status]=searchUtils.status
[type]="entityType"
[showLoading]="true" [properties]=properties>
[showLoading]="true" [properties]=properties
[compactView]="compactView">
</search-result>
<deposit-result *ngIf="usedBy == 'deposit'"
[results]="results"

9
searchPages/searchUtils/newSearchPage.component.ts
View File

@ -165,6 +165,9 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
searchTerm: string = null;
advancedSearchTerms: number = 0;
@Input() hasCompactView: boolean = false; // if true, show buttons for compact view
public compactView: boolean = false; // if true, show less info (e.g. hide description) on each result
@Output() filterRequestAll = new EventEmitter();
constructor(private route: ActivatedRoute,
@ -1943,4 +1946,10 @@ export class NewSearchPageComponent implements OnInit, OnDestroy, OnChanges {
detectChanges() {
this.cdr.detectChanges();
}
toggleView(compact) {
if(compact != this.compactView) {
this.compactView = compact;
}
}
}

9
searchPages/searchUtils/searchDownload.component.ts
View File

@ -14,13 +14,12 @@ import {properties} from "../../../../environments/environment";
@Component({
selector: 'search-download',
template: `
<button [attr.uk-tooltip]="'title: Download' + ((totalResults > csvLimit)?' the first 2000 ':' ') + 'results.' +
<a [attr.uk-tooltip]="'title: Download' + ((totalResults > csvLimit)?' the first 2000 ':' ') + 'results.' +
((totalResults > csvLimit && properties.zenodoDumpUrl)?' To get all results download the data dump. ':' ') "
class="uk-button uk-button-link uk-flex uk-flex-middle" [class.uk-disabled]="isDisabled"
[disabled]="isDisabled"
class="custom-view-button uk-flex uk-flex-middle" [class.uk-disabled]="isDisabled" [class.active]="!isDisabled"
(click)="downloadfile(downloadURLAPI+'?format=csv'+csvParams,type+'-report-'+((totalResults > csvLimit)?'2000 ':totalResults))">
<icon name="download" [flex]="true"></icon>
</button>
<icon name="download" [flex]="true" visuallyHidden="Download search results"></icon>
</a>
<modal-loading></modal-loading>
<modal-alert #AlertModalCsvError></modal-alert>
`

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

@ -3,7 +3,7 @@
<li *ngFor="let result of previewResults">
<result-preview [properties]="properties" [showOrganizations]="showOrganizations"
[showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps"
[isCard]="true" [isMobile]="isMobile" [prevPath]="prevPath">
[isCard]="true" [isMobile]="isMobile" [prevPath]="prevPath" [compactView]="compactView">
</result-preview>
</li>
</ul>

2
searchPages/searchUtils/searchResult.component.ts
View File

@ -24,6 +24,8 @@ export class SearchResultComponent implements OnInit, OnChanges {
@Input() custom_class: string = "";
@Input() properties: EnvProperties;
@Input() showEnermaps: boolean;
@Input() compactView: boolean = false; // if true, show less info (e.g. hide description) on each result
public isMobile: boolean = false;
private subscriptions: any[] = [];

17
utils/entity-actions/entity-actions.component.ts
View File

@ -10,14 +10,14 @@ import {EnvProperties} from "../properties/env-properties";
@Component({
selector: 'entity-actions',
template: `
<div class="" [ngClass]="isMobile ? 'uk-flex uk-flex-column' : 'uk-grid uk-grid-small uk-child-width-auto'" [attr.uk-grid]="!isMobile ? '' : null">
<div class="" [ngClass]="isMobile ? 'uk-flex uk-flex-column' : 'uk-grid uk-grid-small uk-flex-middle uk-child-width-auto'" [attr.uk-grid]="!isMobile ? '' : null">
<div *ngIf="linking && isRouteAvailable('participate/direct-claim')">
<a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'], [id,type,linkTo])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim"
[attr.uk-tooltip]="showTooltip ? 'title: Link '+openaireEntities.RESULTS+' with a '+openaireEntities.PROJECT+', a '+openaireEntities.COMMUNITY+' or other '+openaireEntities.RESULTS+' and make the new information available in OpenAIRE information space.; pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'"
class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
<icon [flex]="true" [ratio]="0.7" name="link_to" visuallyHidden="link"></icon>
<span class="uk-margin-xsmall-left">Link to</span>
<span *ngIf="!compactView" class="uk-margin-xsmall-left">Link to</span>
</a>
</div>
<div *ngIf="share">
@ -25,14 +25,14 @@ import {EnvProperties} from "../properties/env-properties";
[attr.uk-tooltip]="showTooltip ? 'title: Share this '+getTypeName()+' in your social networks; pos: bottom; cls: uk-active uk-text-small uk-padding-small' : 'cls: uk-invisible'"
class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
<icon class="uk-text-bolder" [flex]="true" [ratio]="0.8" name="share" visuallyHidden="share"></icon>
<span class="uk-margin-xsmall-left">Share</span>
<span *ngIf="!compactView" class="uk-margin-xsmall-left">Share</span>
</a>
</div>
<div *ngIf="cite">
<a (click)="openCiteModal()"
class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
<icon class="uk-text-bolder" [flex]="true" [ratio]="0.7" name="cite" visuallyHidden="cite"></icon>
<span class="uk-margin-xsmall-left">Cite</span>
<span *ngIf="!compactView" class="uk-margin-xsmall-left">Cite</span>
</a>
</div>
<div *ngIf="deposit && isRouteAvailable('participate/deposit/learn-how')">
@ -40,7 +40,7 @@ import {EnvProperties} from "../properties/env-properties";
[attr.uk-tooltip]="showTooltip ? 'title: Find a repository to deposit or publish your research in Open Access; pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'"
class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
<icon flex="true" ratio="0.7" name="upload" visuallyHidden="upload"></icon>
<span class="uk-margin-xsmall-left">Deposit</span>
<span *ngIf="!compactView" class="uk-margin-xsmall-left">Deposit</span>
</a>
</div>
<div *ngIf="embed" >
@ -48,7 +48,7 @@ import {EnvProperties} from "../properties/env-properties";
[attr.uk-tooltip]="showTooltip ? 'title: Embed the related '+openaireEntities.RESULTS+' of this '+getTypeName()+' in your website; pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'"
class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
<icon flex="true" ratio="0.8" name="code" visuallyHidden="code"></icon>
<span class="uk-margin-xsmall-left">Embed</span>
<span *ngIf="!compactView" class="uk-margin-xsmall-left">Embed</span>
</a>
</div>
<ng-content></ng-content>
@ -96,6 +96,7 @@ export class EntityActionsComponent implements OnInit {
@Input() url: string;
@Input() isMobile: boolean = false;
@Input() showTooltip: boolean = true;
@Input() compactView: boolean = false; // if true, do not show label for actions
public citeThisClicked: boolean;
public routerHelper: RouterHelper = new RouterHelper();
@ViewChild('citeModal') citeModal;
@ -103,8 +104,8 @@ export class EntityActionsComponent implements OnInit {
@ViewChild('addThisModal') addThisModal;
properties: EnvProperties = properties;
openaireEntities = OpenaireEntities;
/* Embed */
public embed_research_results_type: string = "result";
public clipboard;

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

@ -32,7 +32,7 @@
</div>
<div class="uk-width-expand">
<!-- 1st section (title, metadata) -->
<div class="uk-margin-small-bottom">
<div [class.uk-margin-small-bottom]="!compactView">
<!-- Title -->
<div class="uk-grid">
<div [ngClass]="result.websiteURL && promoteWebsiteURL && !isMobile ? 'uk-flex uk-flex-between uk-width-1-1' : 'uk-width-expand'">
@ -48,7 +48,7 @@
</a>
</span>
</div>
<div class="multi-line-ellipsis lines-3 uk-width-expand">
<div [class]="'uk-width-expand multi-line-ellipsis lines-'+(compactView ? '1' : '3')">
<h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
<a *ngIf="!externalUrl && result.id && !customUrl" (click)="onClick()" [queryParams]="addEoscPrevInParams(createParam())"
[routerLink]="url" class="uk-link uk-text-decoration-none uk-width-expand" [class.uk-disabled]="result.id == '-1'">
@ -78,7 +78,7 @@
</div>
</div>
<!-- Metadata -->
<div class="uk-margin-xsmall-top">
<div [class.uk-margin-xsmall-top]="!compactView">
<entity-metadata [resultTitle]="result?.title"
[entityType]="type" [types]="result.types" [startYear]="result.startYear?.toString()"
[endYear]="result.endYear?.toString()"
@ -96,7 +96,7 @@
</div>
</div>
<!-- 2nd section (funders, budget, authors, PIDs, publisher etc.) -->
<div class="uk-text-small uk-margin-small-bottom">
<div class="uk-text-small" [class.uk-margin-small-bottom]="!compactView">
<!-- Funder -->
<div *ngIf="(result.funderShortname || result.funderName) || result.code" class="uk-margin-xsmall-bottom">
<span *ngIf="result.funderShortname || result.funderName">
@ -114,17 +114,17 @@
<!-- </span>-->
</div>
<!-- Funder Budget -->
<div *ngIf="result.budget || result.contribution" class="uk-margin-xsmall-bottom">
<span *ngIf="result.budget">
<span class="uk-text-meta">Overall Budget: </span>
{{result.budget | number}}
<span *ngIf="result.currency">{{result.currency}}</span>
</span>
<span *ngIf="result.contribution" [class.uk-margin-left]="result.budget">
<span class="uk-text-meta">Funder Contribution: </span>
{{result.contribution | number}}
<span *ngIf="result.currency">{{result.currency}}</span>
</span>
<div *ngIf="!compactView && (result.budget || result.contribution)" class="uk-margin-xsmall-bottom">
<span *ngIf="result.budget">
<span class="uk-text-meta">Overall Budget: </span>
{{result.budget | number}}
<span *ngIf="result.currency">{{result.currency}}</span>
</span>
<span *ngIf="result.contribution" [class.uk-margin-left]="result.budget">
<span class="uk-text-meta">Funder Contribution: </span>
{{result.contribution | number}}
<span *ngIf="result.currency">{{result.currency}}</span>
</span>
</div>
<!-- Authors -->
<div *ngIf="result.authors" class="uk-margin-xsmall-bottom">
@ -132,11 +132,11 @@
[showAll]=true [showInline]="showInline"></showAuthors>
</div>
<!-- Identifiers -->
<div *ngIf="result.identifiers && result.identifiers.size > 0" class="uk-margin-xsmall-bottom">
<div *ngIf="!compactView && result.identifiers && result.identifiers.size > 0" class="uk-margin-xsmall-bottom">
<showIdentifiers [identifiers]="result.identifiers"></showIdentifiers>
</div>
<!-- Website URL -->
<div *ngIf="result.websiteURL && result.websiteURL != '' && !promoteWebsiteURL"
<div *ngIf="!compactView && result.websiteURL && result.websiteURL != '' && !promoteWebsiteURL"
class="uk-margin-xsmall-bottom">
<span class="uk-text-meta">Website URL: </span>
<span>
@ -146,7 +146,7 @@
</span>
</div>
<!-- OAI-PMH URL-->
<div *ngIf="result.OAIPMHURL && result.OAIPMHURL != ''" class="uk-margin-xsmall-bottom">
<div *ngIf="!compactView && result.OAIPMHURL && result.OAIPMHURL != ''" class="uk-margin-xsmall-bottom">
<span class="uk-text-meta">OAI-PMH URL: </span>
<span>
<a href="{{result.OAIPMHURL}}" target="_blank" class="custom-external">
@ -156,7 +156,7 @@
</div>
</div>
<!-- 3rd section (description) -->
<div class="uk-text-small uk-visible@m">
<div *ngIf="!compactView" class="uk-text-small uk-visible@m">
<!-- Description -->
<div *ngIf="result.description" class="multi-line-ellipsis lines-2">
<p class="uk-margin-remove" [innerHTML]="result.description"></p>
@ -177,7 +177,7 @@
</div>
</div>
<div *ngIf="(result.hostedBy_collectedFrom || ((hasActions || result.measure?.bip.length || result.measure?.counts.length) && (!isDeletedByInferenceModal && showEntityActions)))"
class="uk-text-small uk-margin-top" [class.uk-border-bottom]="!isMobile">
class="uk-text-small" [class.uk-margin-top]="!compactView" [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]="!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)"
@ -191,12 +191,13 @@
[type]="result.resultType"
[result]="result" [id]="result.objId?result.objId:result.id"
[url]="properties.domain + properties.baseLink + url + '?' + urlParam + '=' + result.id"
[showTooltip]="false">
[showTooltip]="false" [compactView]="compactView">
<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">
[putCodes]="result.orcidPutCodes" [givenPutCode]="true" [identifiers]="result.identifiers"
[compactView]="compactView">
</orcid-work>
</span>
<span *ngIf="orcid" class="uk-width-expand uk-text-right">
@ -226,7 +227,7 @@
<span *ngIf="result.oaRoutes.oaColor" class="dot" [ngClass]="result.oaRoutes.oaColor"></span>
<span *ngIf="result.oaRoutes.isInDiamondJournal" class="dot diamond"></span>
</span>
<span class="uk-margin-xsmall-left">Access Routes</span>
<span *ngIf="!compactView" class="uk-margin-xsmall-left">Access Routes</span>
</a>
<div uk-drop="pos: top-right; mode: click" class="uk-drop">
<div class="uk-card uk-card-default uk-border uk-box-no-shadow uk-padding-small">

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

@ -43,6 +43,7 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
@Input() showInline: boolean = false; // do not open modal for "view more" when this is true
@Input() isDeletedByInferenceModal: boolean = false; // do not show action bar in results when in "Other versions" modal section
@Input() showEntityActions: boolean = true; // we can use this instead of the above as it is more generic
@Input() compactView: boolean = false; // if true, show less info (e.g. hide description) on each result
/* Metadata */
public type: string;