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

update tooltips for metrics and action-bar items

This commit is contained in:
Alex Martzios 2023-02-21 19:13:15 +02:00
parent 44e521cc8e
commit be1a0ac7fa
6 changed files with 77 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
landingPages/dataProvider/dataProvider.component.html
View File

@ -192,11 +192,11 @@
</div>
<div>
<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getDownloadsTooltip">Downloads</div>
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('downloads')">Downloads</div>
<div *ngIf="totalViews" class="cell"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getViewsTooltip">Views</div>
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('views')">Views</div>
</div>
<div class="uk-text-uppercase uk-text-bolder">
<div *ngIf="totalDownloads" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"

13
landingPages/dataProvider/dataProvider.component.ts
View File

@ -678,7 +678,6 @@ export class DataProviderComponent {
obs = zip(this.metricsService.getMetricsNumber(this.datasourceId, "usagestats.views.repository.local", this.properties),
this.metricsService.getMetricsNumber(this.datasourceId, "usagestats.downloads.repository.local", this.properties));
this.sub = obs.subscribe(data => {
console.log(data);
this.totalViews = data[0];
this.totalDownloads = data[1];
this.cdr.detectChanges();
@ -856,11 +855,11 @@ export class DataProviderComponent {
return formatted.number + formatted.size;
}
get getDownloadsTooltip() {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div";
}
get getViewsTooltip() {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Views provided by <strong>UsageCounts</strong></div";
public getMetricsTooltip(value: string) {
if (value == 'downloads') {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div>";
} else if (value == 'views') {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Views provided by <strong>UsageCounts</strong></div>";
}
}
}

14
landingPages/project/project.component.html
View File

@ -118,8 +118,8 @@
<a *ngIf="isRouteAvailable('participate/direct-claim')"
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[projectId, 'project','result'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim"
[title]="'<span class=\'uk-flex uk-flex-middle\'>Link this project to '+openaireEntities.RESULTS+'<span class=\'material-icons uk-margin-small-left\'>east</span></span>'"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[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. Via linking, users can add '+openaireEntities.RESULTS+' in OpenAIRE not previously available in the OpenAIRE Information Space.'"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.7" name="link_to" visuallyHidden="link"></icon>
<span class="uk-margin-xsmall-left">Link to</span>
@ -131,6 +131,8 @@
</a>
<a *ngIf="isRouteAvailable('participate/deposit/learn-how')"
routerLinkActive="router-link-active" routerLink="/participate/deposit/learn-how"
[title]="'Find a repository to deposit or publish your research in Open Access'"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.7" name="upload" visuallyHidden="upload"></icon>
<span class="uk-margin-xsmall-left">Deposit</span>
@ -343,11 +345,11 @@
</div>
<div>
<div *ngIf="totalDownloads" class="cell uk-margin-xsmall-bottom"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getDownloadsTooltip">Downloads</div>
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('downloads')">Downloads</div>
<div *ngIf="totalViews" class="cell"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getViewsTooltip">Views</div>
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('views')">Views</div>
</div>
<div class="uk-text-uppercase uk-text-bolder">
<div *ngIf="totalDownloads" [attr.uk-tooltip]="totalDownloads >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"

12
landingPages/project/project.component.ts
View File

@ -990,11 +990,11 @@ export class ProjectComponent {
return formatted.number + formatted.size;
}
get getDownloadsTooltip() {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div";
}
get getViewsTooltip() {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Views provided by <strong>UsageCounts</strong></div";
public getMetricsTooltip(value: string) {
if (value == 'downloads') {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div>";
} else if (value == 'views') {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Views provided by <strong>UsageCounts</strong></div>";
}
}
}

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

@ -126,8 +126,8 @@
<a *ngIf="isRouteAvailable('participate/direct-claim')"
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim"
[title]="'<span class=\'uk-flex uk-flex-middle\'>Link this '+getTypeName()+' to ...<span class=\'material-icons uk-margin-small-left\'>east</span></span>'"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[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. Via linking, users can add '+openaireEntities.RESULTS+' in OpenAIRE not previously available in the OpenAIRE Information Space.'"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon [flex]="true" [ratio]="0.7" name="link_to" visuallyHidden="link"></icon>
<span class="uk-margin-xsmall-left">Link to</span>
@ -386,20 +386,20 @@
</div>
<div>
<div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getCitationsTooltip">Citations</div>
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('citations', false)">Citations</div>
<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getPopularityTooltip">Popularity</div>
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('popularity', false)">Popularity</div>
<div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getInfluenceTooltip">Influence</div>
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('influence', false)">Influence</div>
<div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getDownloadsTooltip">Downloads</div>
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('downloads', false)">Downloads</div>
<div *ngIf="resultLandingInfo.measure.views" class="cell"
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
[title]="getViewsTooltip">Views</div>
[attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('views', false)">Views</div>
</div>
<div class="uk-text-uppercase uk-text-bolder">
<div *ngIf="resultLandingInfo.measure.citations" [attr.uk-tooltip]="resultLandingInfo.measure.citations >= 1000 ? 'cls: uk-active' : 'cls: uk-invisible'"
@ -984,7 +984,7 @@
<ng-template #metricsContent>
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal">
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li>
<li class="uk-padding-remove">
<a href="#">Overview</a>
</li>
<li *ngIf="resultLandingInfo.measure && (resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse)">
@ -1018,7 +1018,8 @@
<td class="uk-padding-remove-top">
<icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-top">
<td class="uk-padding-remove-top" [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('citations', true)">
Citations
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
@ -1029,7 +1030,8 @@
<td>
<icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
<td [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('popularity', true)">
Popularity
</td>
<td class="uk-text-uppercase uk-text-bolder">
@ -1040,7 +1042,8 @@
<td>
<icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
<td [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('influence', true)">
Influence
</td>
<td class="uk-text-uppercase uk-text-bolder">
@ -1051,7 +1054,8 @@
<td class="uk-padding-remove-bottom">
<icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-bottom">
<td class="uk-padding-remove-bottom" [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('impulse', true)">
Impulse
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
@ -1121,7 +1125,8 @@
<td class="uk-padding-remove-top">
<icon name="cite" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-top">
<td class="uk-padding-remove-top" [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('citations', true)">
Citations
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
@ -1132,7 +1137,8 @@
<td>
<icon name="fire" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
<td [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('popularity', true)">
Popularity
</td>
<td class="uk-text-uppercase uk-text-bolder">
@ -1143,7 +1149,8 @@
<td>
<icon name="landmark" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td>
<td [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('influence', true)">
Influence
</td>
<td class="uk-text-uppercase uk-text-bolder">
@ -1154,7 +1161,8 @@
<td class="uk-padding-remove-bottom">
<icon name="rocket" [flex]="true" [customClass]="'bip-icon'"></icon>
</td>
<td class="uk-padding-remove-bottom">
<td class="uk-padding-remove-bottom" [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium'"
[title]="getMetricsTooltip('impulse', true)">
Impulse
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">

42
landingPages/result/resultLanding.component.ts
View File

@ -1056,23 +1056,29 @@ export class ResultLandingComponent {
fsModal.cancel();
}
get getCitationsTooltip() {
return "<div>This is an alternative to the \"Influence\" indicator, which also reflects the overall/total impact of an article in the research community at large, based on the underlying citation network (diachronically).</div><div class='uk-flex uk-margin-top'><img class='uk-margin-small-right' src='assets/common-assets/bip-minimal.svg' loading='lazy' alt='BIP!' style='width: 40px;'><span class='uk-text-uppercase'>Citations provided by <strong>BIP!</strong></div";
}
get getPopularityTooltip() {
return "<div>This indicator reflects the \"current\" impact/attention (the \"hype\") of an article in the research community at large, based on the underlying citation network.</div><div class='uk-flex uk-margin-top'><img class='uk-margin-small-right' src='assets/common-assets/bip-minimal.svg' loading='lazy' alt='BIP!' style='width: 40px;'><span class='uk-text-uppercase'>Popularity provided by <strong>BIP!</strong></div";
}
get getInfluenceTooltip() {
return "<div>This indicator reflects the overall/total impact of an article in the research community at large, based on the underlying citation network (diachronically).</div><div class='uk-flex uk-margin-top'><img class='uk-margin-small-right' src='assets/common-assets/bip-minimal.svg' loading='lazy' alt='BIP!' style='width: 40px;'><span class='uk-text-uppercase'>Influence provided by <strong>BIP!</strong></div";
}
get getDownloadsTooltip() {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div";
}
get getViewsTooltip() {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Views provided by <strong>UsageCounts</strong></div";
public getMetricsTooltip(value: string, compact: boolean) {
if (compact) {
if (value == 'citations') {
return "<div>This is an alternative to the \"Influence\" indicator, which also reflects the overall/total impact of an article in the research community at large, based on the underlying citation network (diachronically).</div>";
} else if (value == 'popularity') {
return "<div>This indicator reflects the \"current\" impact/attention (the \"hype\") of an article in the research community at large, based on the underlying citation network.</div>";
} else if (value == 'influence') {
return "<div>This indicator reflects the overall/total impact of an article in the research community at large, based on the underlying citation network (diachronically).</div>";
} else if (value == 'impulse') {
return "<div>This indicator reflects the initial momentum of an article directly after its publication, based on the underlying citation network.</div>";
}
} else {
if (value == 'citations') {
return "<div>This is an alternative to the \"Influence\" indicator, which also reflects the overall/total impact of an article in the research community at large, based on the underlying citation network (diachronically).</div><div class='uk-flex uk-margin-top'><img class='uk-margin-small-right' src='assets/common-assets/bip-minimal.svg' loading='lazy' alt='BIP!' style='width: 40px;'><span class='uk-text-uppercase'>Citations provided by <strong>BIP!</strong></div>";
} else if (value == 'popularity') {
return "<div>This indicator reflects the \"current\" impact/attention (the \"hype\") of an article in the research community at large, based on the underlying citation network.</div><div class='uk-flex uk-margin-top'><img class='uk-margin-small-right' src='assets/common-assets/bip-minimal.svg' loading='lazy' alt='BIP!' style='width: 40px;'><span class='uk-text-uppercase'>Popularity provided by <strong>BIP!</strong></div>";
} else if (value == 'influence') {
return "<div>This indicator reflects the overall/total impact of an article in the research community at large, based on the underlying citation network (diachronically).</div><div class='uk-flex uk-margin-top'><img class='uk-margin-small-right' src='assets/common-assets/bip-minimal.svg' loading='lazy' alt='BIP!' style='width: 40px;'><span class='uk-text-uppercase'>Influence provided by <strong>BIP!</strong></div>";
} else if (value == 'downloads') {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Downloads provided by <strong>UsageCounts</strong></div>";
} else if (value == 'views') {
return "<div class='uk-flex uk-flex-middle'><img class='uk-margin-small-right' src='assets/common-assets/logo-small-usage-counts.png' loading='lazy' alt='OpenAIRE UsageCounts' style='width: 40px; height: 40px;'><span class='uk-text-uppercase'>Views provided by <strong>UsageCounts</strong></div>";
}
}
}
}