[Library | explore-redesign]: Updated icon for "not available" access of sources on research products.

1. icons.ts: Added custom icon "unknown_access", when access is not available (locker with questionmark inside).
2. parsingFunctions.class.ts: Set "accessRightIcon" of each source to "unknown_access" icon, when access is not available.
3. resultLandingUtils.module.ts: Added "unknown_access" icon in iconsService.registerIcons.
4. resultLanding.component.html: Mobile view: Updated tooltip of access - added "access" word in the end.
5. availableOn.component.ts: Updated tooltip of access - added "access" word in the end.
6. result-preview.component.html: In mobile view, show access on the top right, next to the title.
7. searchResearchResults.service.ts: [Bug fix] Call parsingFunctions.addPublisherToHostedBy_collectedFrom after parsing journal, publisher and identifiers.
This commit is contained in:
Konstantina Galouni 2023-05-08 10:53:38 +03:00
parent e4ca050d80
commit e8d57386f3
7 changed files with 80 additions and 63 deletions

View File

@ -13,7 +13,7 @@ declare var UIkit;
<div class="uk-flex uk-flex-middle">
<ng-container *ngIf="availableOn[0].downloadUrl">
<span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
uk-tooltip [title]="availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available'">
uk-tooltip [title]="(availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available') + ' access'">
<icon [name]="availableOn[0].accessRightIcon" [flex]="true" [ratio]="(isMobile && usedBy == 'landing') ? 1 : 0.8"></icon>
</span>
<ng-container *ngIf="!(isMobile && usedBy == 'landing')">
@ -52,7 +52,7 @@ declare var UIkit;
<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'">
uk-tooltip [title]="(instance.accessRight ? instance.accessRight : 'Not available') + ' access'">
<icon [name]="instance.accessRightIcon" [flex]="true"></icon>
</span>
<div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">

View File

@ -38,8 +38,8 @@ export class ParsingFunctions {
public open = 'open_access';
public closed = 'closed_access';
// public unknown = 'question_mark';
public unknown = 'unknown_access';
private instanceWithDoiExists: boolean = false;
constructor() {
@ -194,7 +194,7 @@ export class ParsingFunctions {
}
available.downloadUrl = properties.doiURL + identifiers.get("doi")[0];
// available.accessRightIcon = this.unknown;
available.accessRightIcon = this.unknown;
/*
if(title != undefined && title['url'] == "") {
title['url'] = url;
@ -282,7 +282,7 @@ export class ParsingFunctions {
"years": [],
"license": ""
};
if (instance.hasOwnProperty("hostedby")) {
let downloadNames: Set<string> = new Set();
let length = Array.isArray(instance['hostedby']) ? instance['hostedby'].length : 1;
@ -351,21 +351,20 @@ export class ParsingFunctions {
}
}
if (available.accessRight) {
if (available.accessRight.toLowerCase().indexOf('open') !== -1) {
available.accessRightIcon = this.open;
}
// else if (available.accessRight.toLowerCase().indexOf('not available') !== -1) {
// available.accessRightIcon = this.unknown;
// }
}
else if (available.accessRight.toLowerCase().indexOf('not available') !== -1) {
available.accessRightIcon = this.unknown;
}
else {
available.accessRightIcon = this.closed;
}
}
// else {
// available.accessRightIcon = this.unknown;
// }
} else {
available.accessRightIcon = this.unknown;
}
if (instance.hasOwnProperty("license")) {
available.license = Array.isArray(instance['license']) ? instance['license'][0] : instance['license'];

View File

@ -19,7 +19,7 @@ import {AlertModalModule} from "../../utils/modal/alertModal.module";
import { SearchInputModule } from '../../sharedComponents/search-input/search-input.module';
import {EntityMetadataComponent} from "./entity-metadata.component";
import {IconsService} from "../../utils/icons/icons.service";
import {closed_access, open_access} from "../../utils/icons/icons";
import {closed_access, open_access, unknown_access} from "../../utils/icons/icons";
import {FullScreenModalModule} from "../../utils/modal/full-screen-modal/full-screen-modal.module";
@ -44,6 +44,6 @@ import {FullScreenModalModule} from "../../utils/modal/full-screen-modal/full-sc
})
export class ResultLandingUtilsModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([open_access, closed_access]);
this.iconsService.registerIcons([open_access, closed_access, unknown_access]);
}
}

View File

@ -490,7 +490,7 @@
class="uk-margin-small-bottom uk-flex uk-flex-middle"
[ngClass]="(resultLandingInfo.hostedBy_collectedFrom[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')">
<icon [name]="resultLandingInfo.hostedBy_collectedFrom[0].accessRightIcon" [flex]="true" [ratio]="1"></icon>
<span class="uk-margin-xsmall-left uk-text-small uk-text-uppercase uk-text-bolder">{{resultLandingInfo.hostedBy_collectedFrom[0].accessRight}}</span>
<span class="uk-margin-xsmall-left uk-text-small uk-text-uppercase uk-text-bolder">{{(resultLandingInfo.hostedBy_collectedFrom[0].accessRight ? resultLandingInfo.hostedBy_collectedFrom[0].accessRight : 'Not available') + ' access'}}</span>
</div>
<landing-header [properties]="properties" [title]="resultLandingInfo.title"
[subTitle]="resultLandingInfo.subtitle"

View File

@ -236,10 +236,6 @@ export class SearchResearchResultsService {
}
}
}
let journal = resData['journal']?resData['journal'].content:null;
result.hostedBy_collectedFrom = this.parsingFunctions.addPublisherToHostedBy_collectedFrom(
result.hostedBy_collectedFrom, result.publisher,
journal, result.identifiers);
result.hostedBy_collectedFrom.sort(this.parsingFunctions.compareHostedByCollectedFrom);
// Measure
@ -415,6 +411,10 @@ export class SearchResearchResultsService {
result.journal['start_page'] = resData.journal.sp;
result.journal['end_page'] = resData.journal.ep;
}
result.hostedBy_collectedFrom = this.parsingFunctions.addPublisherToHostedBy_collectedFrom(
result.hostedBy_collectedFrom, result.publisher,
result['journal']?result['journal'].journal:null, result.identifiers);
results.push(result);
}

View File

@ -153,3 +153,12 @@ export const closed_access = {
data: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="640" height="1000" viewBox="0 0 640 1000"> <metadata> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <cc:Work xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:creator>Jakob Voss, based on art designer at PLoS, modified by Wikipedia users Nina and Beao</dc:creator> <dc:description>Closed Access logo, derived from PLoS Open Access logo. This version with transparent background.</dc:description> <dc:source>http://commons.wikimedia.org/wiki/File:Closed_Access_logo_transparent.svg</dc:source> <dc:license rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" /> <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" /> <cc:attributionName>Jakob Voss, based on art designer at PLoS, modified by Wikipedia users Nina and Beao</cc:attributionName> </cc:Work> </rdf:RDF> </metadata> <g transform="translate(-528.67833,-378.69073)"> <path d="m 587.6826,651.09852 -2.7e-4,258.42721 104.764,0 0,-258.42721 c 0,-86.48025 70.36161,-156.8333 156.82974,-156.8333 86.46813,0 156.82523,70.35304 156.82523,156.8333 l 0,258.42721 104.7642,-2.5e-4 0,-258.42696 c 0,-144.2401 -117.35336,-261.59346 -261.58943,-261.59346 -144.23204,0 -261.59374,117.35336 -261.59374,261.59346" style="fill:#848484;fill-opacity:1;fill-rule:nonzero;stroke:none" /> <path d="m 936.11577,1060.3489 c 0,47.7233 -38.69235,86.4157 -86.42773,86.4157 -47.73135,0 -86.42776,-38.6924 -86.42776,-86.4157 0,-47.7515 38.69641,-86.44787 86.42776,-86.44787 47.73538,0 86.42773,38.69637 86.42773,86.44787" style="fill:#848484;fill-opacity:1;fill-rule:nonzero;stroke:none" /> <path d="m 644.97395,1059.416 c 0,-112.32498 91.38747,-203.70437 203.7084,-203.70437 112.3169,0 203.69225,91.3794 203.69225,203.70437 0,112.3128 -91.37537,203.7084 -203.69224,203.7084 -112.32093,0 -203.7084,-91.3956 -203.7084,-203.7084 m -104.76018,0 c 0,170.0686 138.39184,308.4604 308.46858,308.4604 170.08084,0 308.46054,-138.3918 308.46054,-308.4604 0,-170.09295 -138.3797,-308.46857 -308.46056,-308.46857 -170.07674,0 -308.46858,138.37563 -308.46858,308.46857" style="fill:#848484;fill-opacity:1;fill-rule:nonzero;stroke:none" /> </g> </svg>'
}
/** Add new icon under this line to be sure that it will be added on preview */
export const unknown_access = {
name: 'unknown_access',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="373.336" height="490.004" viewBox="0 0 373.336 490.004">\n' +
' <g id="noun-lock-question-mark-250128" transform="translate(-163.328 -34.992)">\n' +
' <path id="Path_119172" data-name="Path 119172" d="M490,198.33H466.668V151.662a116.67,116.67,0,0,0-233.34,0V198.33H210A46.8,46.8,0,0,0,163.328,245v233.33A46.8,46.8,0,0,0,210,525H490a46.8,46.8,0,0,0,46.668-46.668V245A46.8,46.8,0,0,0,490,198.33ZM365.55,469.78H334.441V438.671H365.55ZM397.441,350l-14,14c-10.891,11.668-17.891,20.223-17.891,43.555H334.441v-7.777a61.712,61.712,0,0,1,17.891-43.555l19.445-19.445A30.98,30.98,0,1,0,318.891,315H287.782a62.223,62.223,0,0,1,124.446,0,49.983,49.983,0,0,1-14.785,35Zm24.887-151.67H277.668V151.662c0-39.668,32.668-72.332,72.332-72.332S422.332,112,422.332,151.662Z"/>\n' +
' </g>\n' +
'</svg>'
}

View File

@ -19,51 +19,60 @@
<!-- 1st section (title, metadata) -->
<div class="uk-margin-small-bottom">
<!-- Title -->
<div class="multi-line-ellipsis lines-3">
<h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
<a *ngIf="!externalUrl && result.id" (click)="onClick()" [queryParams]="createParam()"
[routerLink]="url" class="uk-link uk-text-decoration-none uk-width-expand">
<div *ngIf="(result.title) || result.acronym">
<span *ngIf="result.acronym">
{{result.acronym}}
<div class="uk-grid">
<div class="multi-line-ellipsis lines-3 uk-width-expand">
<h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
<a *ngIf="!externalUrl && result.id" (click)="onClick()" [queryParams]="createParam()"
[routerLink]="url" class="uk-link uk-text-decoration-none uk-width-expand">
<div *ngIf="(result.title) || result.acronym">
<span *ngIf="result.acronym">
{{result.acronym}}
</span>
<span *ngIf="result.acronym && (result.title)"> (</span>
<span *ngIf="result.title" [innerHTML]="result.title"></span>
<span *ngIf="result.acronym && result.title">)</span>
</div>
<div *ngIf="!result.title && !result.acronym">
[no title available]
</div>
</a>
<a *ngIf="externalUrl && result.id" (click)="onClick()"
target="_blank" [href]="externalUrl+result.id"
class="custom-external uk-link uk-text-decoration-none uk-width-expand">
<span *ngIf="(result.title) || result.acronym">
<span *ngIf="result.acronym">
{{result.acronym}}
</span>
<span *ngIf="result.acronym && (result.title)"> (</span>
<span *ngIf="result.title" [innerHTML]="result.title"></span>
<span *ngIf="result.acronym && result.title">)</span>
</span>
<span *ngIf="result.acronym && (result.title)"> (</span>
<span *ngIf="result.title" [innerHTML]="result.title"></span>
<span *ngIf="result.acronym && result.title">)</span>
</div>
<div *ngIf="!result.title && !result.acronym">
[no title available]
</div>
</a>
<a *ngIf="externalUrl && result.id" (click)="onClick()"
target="_blank" [href]="externalUrl+result.id"
class="custom-external uk-link uk-text-decoration-none uk-width-expand">
<span *ngIf="(result.title) || result.acronym">
<span *ngIf="result.acronym">
{{result.acronym}}
<span *ngIf="!result.title && !result.acronym">
[no title available]
</span>
<span *ngIf="result.acronym && (result.title)"> (</span>
<span *ngIf="result.title" [innerHTML]="result.title"></span>
<span *ngIf="result.acronym && result.title">)</span>
</span>
<span *ngIf="!result.title && !result.acronym">
[no title available]
</span>
</a>
<div *ngIf="!result.id" class="uk-width-expand">
<div *ngIf="(result.title) || result.acronym">
<span *ngIf="result.acronym">
{{result.acronym}}
</span>
<span *ngIf="result.acronym && (result.title)"> (</span>
<span *ngIf="result.title" [innerHTML]="result.title"></span>
<span *ngIf="result.acronym && result.title">)</span>
</div>
<div *ngIf="!result.title && !result.acronym">
[no title available]
</a>
<div *ngIf="!result.id" class="uk-width-expand">
<div *ngIf="(result.title) || result.acronym">
<span *ngIf="result.acronym">
{{result.acronym}}
</span>
<span *ngIf="result.acronym && (result.title)"> (</span>
<span *ngIf="result.title" [innerHTML]="result.title"></span>
<span *ngIf="result.acronym && result.title">)</span>
</div>
<div *ngIf="!result.title && !result.acronym">
[no title available]
</div>
</div>
</h2>
</div>
<div *ngIf="result.hostedBy_collectedFrom && result.hostedBy_collectedFrom.length > 0" class="uk-hidden@m uk-width-auto">
<div class="uk-margin-small-bottom uk-flex uk-flex-middle"
[ngClass]="(result.hostedBy_collectedFrom[0].accessRightIcon == 'open_access' ? 'open-access' : 'closed-access')"
uk-tooltip [title]="(result.hostedBy_collectedFrom[0].accessRight ? result.hostedBy_collectedFrom[0].accessRight : 'Not available') + ' access'">
<icon [name]="result.hostedBy_collectedFrom[0].accessRightIcon" [flex]="true" [ratio]="1.2"></icon>
</div>
</h2>
</div>
</div>
<!-- Metadata -->
<div class="uk-margin-xsmall-top">