[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:
parent
e4ca050d80
commit
e8d57386f3
|
@ -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">
|
||||
|
|
|
@ -38,7 +38,7 @@ export class ParsingFunctions {
|
|||
|
||||
public open = 'open_access';
|
||||
public closed = 'closed_access';
|
||||
// public unknown = 'question_mark';
|
||||
public unknown = 'unknown_access';
|
||||
|
||||
private instanceWithDoiExists: boolean = false;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -356,16 +356,15 @@ export class ParsingFunctions {
|
|||
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'];
|
||||
|
|
|
@ -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]);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
|
@ -416,6 +412,10 @@ export class SearchResearchResultsService {
|
|||
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);
|
||||
}
|
||||
return results;
|
||||
|
|
|
@ -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>'
|
||||
}
|
|
@ -19,7 +19,8 @@
|
|||
<!-- 1st section (title, metadata) -->
|
||||
<div class="uk-margin-small-bottom">
|
||||
<!-- Title -->
|
||||
<div class="multi-line-ellipsis lines-3">
|
||||
<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">
|
||||
|
@ -65,6 +66,14 @@
|
|||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Metadata -->
|
||||
<div class="uk-margin-xsmall-top">
|
||||
<entity-metadata [entityType]="type" [types]="result.types" [startYear]="result.startYear?.toString()"
|
||||
|
|
Loading…
Reference in New Issue