[Trunk | Library]:

1. Project Landing Page: Add all types of research results (publication, dataset, software, other) in the box, in the right column of page and redesign it (UI/UX).
2. common-assets/library.css: Add classes 'researchResultTypeSelected' and 'researchResultTypeNotSelected'. Used by Project Landing Page.


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57853 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2019-12-10 14:45:13 +00:00
parent e3722b648d
commit 7157e358a2
3 changed files with 216 additions and 152 deletions

View File

@ -19,7 +19,7 @@ export class HtmlProjectReportService {
} else if(type == "software") {
resultTypeId = 'software';
requestType = 'software'
} else if(type == 'other research products') {
} else if(type == 'other research product') {
resultTypeId = 'other';
requestType = 'other';
}

View File

@ -1,3 +1,67 @@
<ng-template #share_research_results_box
let-fetch="fetch" let-clipboardName="clipboardName" let-dynamic_content="dynamic_content"
let-type="type" let-fileName_type="fileName_type" let-csvParams="csvParams">
<ul class="uk-list uk-margin-remove-bottom">
<li>
<a class="clickable"
uk-toggle="target: #dynamic_content_id; animation:uk-animation-fade"><span
class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" icon="code" ratio="1"><polyline
fill="none" stroke="#000" stroke-width="1.01" points="13,4 19,10 13,16"></polyline><polyline
fill="none" stroke="#000" stroke-width="1.01"
points="7,4 1,10 7,16"></polyline></svg></span> Include in your site (HTML)</a>
<div hidden id="dynamic_content_id" class="uk-padding-small">
<div class="uk-grid">
<a
[class]="clipboardName+'_btn uk-padding-remove-left uk-margin-small-left uk-text-right uk-width-1-1'"
[attr.data-clipboard-target]="'#'+clipboardName" title="Copy to clipboard">
<button class="uk-button uk-button-small uk-button-primary uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" icon="copy" ratio="1"><rect
fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect><polyline
fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline></svg>
<span class="uk-margin-small-left">COPY</span>
</button>
</a>
</div>
<pre class="box-content uk-padding-remove-bottom uk-margin-remove-bottom"><code
[id]="clipboardName">{{dynamic_content}}</code></pre>
<div class="uk-text-small uk-margin-small-top">
For further information contact us at
<u><a href="mailto:helpdesk@openaire.eu">helpdesk@openaire.eu</a></u>
</div>
</div>
</li>
<li>
<a target="_blank"
href="/project-report?projectId={{projectId}}&size={{fetch.searchUtils.totalResults}}&type={{type}}">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" icon="code" ratio="1"><polyline
fill="none" stroke="#000" stroke-width="1.01" points="13,4 19,10 13,16"></polyline><polyline
fill="none" stroke="#000" stroke-width="1.01"
points="7,4 1,10 7,16"></polyline></svg>
</span>
Get {{projectInfo.funder}} report (HTML)
</a>
</li>
<li>
<a class="clickable"
(click)="downloadfile(downloadURLAPI+csvParams, 'funder-'+fileName_type+'-report')">
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" icon="download" ratio="1"><polyline
fill="none" stroke="#000" points="14,10 9.5,14.5 5,10"></polyline><rect x="3" y="17"
width="13"
height="1"></rect><line
fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3"></line></svg></span>
Get {{projectInfo.funder}} report (CSV)
</a>
</li>
</ul>
</ng-template>
<div id="tm-main" class=" uk-section uk-padding-remove-top uk-margin-small-top tm-middle">
<div uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
@ -463,156 +527,140 @@
<div class="sideInfoTitle uk-margin-small-bottom uk-margin-small-top">Share - Bookmark</div>
<addThis></addThis>
</div>
<div class="uk-margin-medium-top uk-margin-medium-bottom uk-margin-medium-top">
<div class="uk-text-center uk-text-large">
Application Box
<div class="uk-margin-top">
<div class="sideInfoTitle uk-margin-small-bottom">Share project's research results</div>
<div>
<!-- <ul class="uk-padding-remove" uk-switcher>-->
<!-- <ul class="uk-tab" uk-tab="connect: #tab-app-box-project">-->
<!-- <ul class="">-->
<div [class]="'uk-margin-small-bottom uk-margin-small-right uk-button uk-button-small'
+ (share_research_results_type == 'publications' ? ' researchResultTypeSelected' : ' researchResultTypeNotSelected')"
(click)="((share_research_results_type == 'publications') ? share_research_results_type='' : share_research_results_type='publications')">
Publications
</div>
<div class="app-box">
<ul class="uk-tab" uk-tab="connect: #tab-app-box-project">
<li>
<a>Publications</a>
</li>
<li>
<a>Research Data</a>
</li>
</ul>
<ul id="tab-app-box-project" class="uk-switcher uk-margin uk-padding-small">
<li class="uk-animation-fade">
<div [class]="'uk-margin-small-bottom uk-margin-small-right uk-button uk-button-small'
+ (share_research_results_type == 'datasets' ? ' researchResultTypeSelected' : ' researchResultTypeNotSelected')"
(click)="((share_research_results_type == 'datasets') ? share_research_results_type='' : share_research_results_type='datasets')">
Research data
</div>
<div [class]="'uk-margin-small-bottom uk-margin-small-right uk-button uk-button-small'
+ (share_research_results_type == 'software' ? ' researchResultTypeSelected' : ' researchResultTypeNotSelected')"
(click)="((share_research_results_type == 'software') ? share_research_results_type='' : share_research_results_type='software')">
Software
</div>
<div [class]="'uk-margin-small-bottom uk-margin-small-right uk-button uk-button-small'
+ (share_research_results_type == 'other' ? ' researchResultTypeSelected' : ' researchResultTypeNotSelected')"
(click)="((share_research_results_type == 'other') ? share_research_results_type='' : share_research_results_type='other')">
Other
</div>
<!-- </ul>-->
<!-- <ul id="tab-app-box-project" class="uk-switcher uk-margin uk-padding-small">-->
<div *ngIf="share_research_results_type" class="uk-padding-small app-box">
<div *ngIf="share_research_results_type=='publications'" class="uk-animation-slide-top-small">
<!-- Publication box-->
<ul class="uk-list">
<li>
<a class="clickable"
uk-toggle="target: #publications_dynamic; animation:uk-animation-fade"><span
class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" icon="code" ratio="1"><polyline
fill="none" stroke="#000" stroke-width="1.01" points="13,4 19,10 13,16"></polyline><polyline
fill="none" stroke="#000" stroke-width="1.01"
points="7,4 1,10 7,16"></polyline></svg></span> Include in your site (HTML)</a>
<div hidden id="publications_dynamic"
class="widget-box uk-padding-small uk-card uk-card-default ">
<div
class=" uk-alert uk-alert-primary uk-padding-small uk-margin-remove-bottom uk-margin-right">
For further information please contact us <a
href="mailto:helpdesk@openaire.eu">helpdesk@openaire.eu</a>
<!-- <ng-container *ngIf="share_research_results_type=='publications'">-->
<ng-container *ngTemplateOutlet="share_research_results_box;
context: { fetch: fetchPublications, clipboardName: 'publications_clipboard',
dynamic_content: publications_dynamic, type: 'publication',
fileName_type: 'publications', csvParams: csvParams}">
</ng-container>
<!-- </ng-container>-->
</div>
<div class="uk-grid">
<a
class=" publ_clipboard_btn uk-padding-remove-left uk-margin-small-left uk-text-right uk-width-1-1 "
data-clipboard-target="#publ_clipboard" title="Copy to clipboard">
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" icon="copy" ratio="1"><rect
fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect><polyline
fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline></svg></span>
</a>
<div *ngIf="share_research_results_type=='datasets'" class="uk-animation-slide-top-small">
<!-- <ng-container *ngIf="share_research_results_type=='datasets'">-->
<ng-container *ngTemplateOutlet="share_research_results_box;
context: { fetch: fetchDatasets, clipboardName: 'datasets_clipboard',
dynamic_content: datasets_dynamic, type: 'dataset',
fileName_type: 'research-data', csvParams: csvParamsDatasets}">
</ng-container>
<!-- </ng-container>-->
</div>
<div *ngIf="share_research_results_type=='software'" class="uk-animation-slide-top-small">
<!-- <ng-container *ngIf="share_research_results_type=='software'">-->
<ng-container *ngTemplateOutlet="share_research_results_box;
context: { fetch: fetchSoftware, clipboardName: 'software_clipboard',
dynamic_content: software_dynamic, type: 'software',
fileName_type: 'software', csvParams: csvParamsSoftware}">
</ng-container>
<!-- </ng-container>-->
</div>
<div *ngIf="share_research_results_type=='other'" class="uk-animation-slide-top-small">
<!-- <ng-container *ngIf="share_research_results_type=='other'">-->
<ng-container *ngTemplateOutlet="share_research_results_box;
context: { fetch: fetchOrps, clipboardName: 'other_clipboard',
dynamic_content: orps_dynamic, type: 'other',
fileName_type: 'other-research-products', csvParams: csvParamsOrps}">
</ng-container>
<!-- </ng-container>-->
<pre class="box-content uk-padding-remove-bottom uk-margin-remove-bottom"><code
id="publ_clipboard">{{publications_dynamic}}</code></pre>
</div>
</li>
<li>
<a target="_blank"
href="/project-report?projectId={{projectId}}&size={{fetchPublications.searchUtils.totalResults}}&type=publication">
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect
x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect
x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
Get {{projectInfo.funder}} report (HTML)
</a>
</li>
<li>
<a class="clickable"
(click)="downloadfile(downloadURLAPI+csvParams, 'funder-publications-report')">
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" icon="download" ratio="1"><polyline
fill="none" stroke="#000" points="14,10 9.5,14.5 5,10"></polyline><rect x="3" y="17"
width="13"
height="1"></rect><line
fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3"></line></svg></span>
Get {{projectInfo.funder}} report (CSV)
</a>
</li>
<li *ngIf="isRouteAvailable('participate/deposit-publications') ">
<a routerLinkActive="router-link-active" routerLink="/participate/deposit-publications">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><polyline fill="none"
stroke="#000"
points="5 8 9.5 3.5 14 8 "></polyline><rect
x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5"
y2="4"></line></svg>
</span> Deposit
</a>
</li>
</ul>
</li>
<li class="uk-animation-fade">
<!-- Dataset box-->
<ul class="uk-list">
<li>
<a class="clickable" uk-toggle="target: #datasets_dynamic; animation:uk-animation-fade"><span
class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" icon="code" ratio="1"><polyline
fill="none" stroke="#000" stroke-width="1.01" points="13,4 19,10 13,16"></polyline><polyline
fill="none" stroke="#000" stroke-width="1.01"
points="7,4 1,10 7,16"></polyline></svg></span> Include in your site (HTML) </a>
<div hidden id="datasets_dynamic"
class="widget-box uk-padding-small uk-card uk-card-default ">
<div
class=" uk-alert uk-alert-primary uk-padding-small uk-margin-remove-bottom uk-margin-right">
For further information please contact us <a
href="mailto:helpdesk@openaire.eu">helpdesk@openaire.eu</a>
<!-- <li class="uk-animation-fade">-->
<!-- &lt;!&ndash; Dataset box&ndash;&gt;-->
<!-- <ul class="uk-list">-->
<!-- <li>-->
<!-- <a class="clickable" uk-toggle="target: #datasets_dynamic; animation:uk-animation-fade"><span-->
<!-- class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"-->
<!-- xmlns="http://www.w3.org/2000/svg" icon="code" ratio="1"><polyline-->
<!-- fill="none" stroke="#000" stroke-width="1.01" points="13,4 19,10 13,16"></polyline><polyline-->
<!-- fill="none" stroke="#000" stroke-width="1.01"-->
<!-- points="7,4 1,10 7,16"></polyline></svg></span> Include in your site (HTML) </a>-->
<!-- <div hidden id="datasets_dynamic"-->
<!-- class="widget-box uk-padding-small uk-card uk-card-default ">-->
<!-- <div-->
<!-- class=" uk-alert uk-alert-primary uk-padding-small uk-margin-remove-bottom uk-margin-right">-->
<!-- For further information please contact us <a-->
<!-- href="mailto:helpdesk@openaire.eu">helpdesk@openaire.eu</a>-->
<!-- </div>-->
<!-- <div class="uk-grid">-->
<!-- <a-->
<!-- class=" datasets_clipboard_btn uk-padding-remove-left uk-margin-small-left uk-text-right uk-width-1-1 "-->
<!-- data-clipboard-target="#datasets_clipboard" title="Copy to clipboard">-->
<!-- <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"-->
<!-- xmlns="http://www.w3.org/2000/svg" icon="copy" ratio="1"><rect-->
<!-- fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect><polyline-->
<!-- fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline></svg></span>-->
<!-- </a>-->
<!-- </div>-->
<!-- <pre class="box-content uk-padding-remove-bottom uk-margin-remove-bottom"><code-->
<!-- id="datasets_clipboard">{{datasets_dynamic}}</code></pre>-->
<!-- </div>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a target="_blank"-->
<!-- href="/project-report?projectId={{projectId}}&size={{fetchDatasets.searchUtils.totalResults}}&type=dataset">-->
<!-- <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"-->
<!-- xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect-->
<!-- x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect-->
<!-- x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>-->
<!-- Get {{projectInfo.funder}} report (HTML)-->
<!-- </a>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a class="clickable"-->
<!-- (click)="downloadfile(downloadURLAPI+csvParamsDatasets, 'funder-research-data-report')">-->
<!-- <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"-->
<!-- xmlns="http://www.w3.org/2000/svg" icon="download" ratio="1"><polyline-->
<!-- fill="none" stroke="#000" points="14,10 9.5,14.5 5,10"></polyline><rect x="3" y="17"-->
<!-- width="13"-->
<!-- height="1"></rect><line-->
<!-- fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3"></line></svg></span>-->
<!-- Get {{projectInfo.funder}} report (CSV)-->
<!-- </a>-->
<!-- </li>-->
<!-- <li *ngIf="isRouteAvailable('participate/deposit-datasets') ">-->
<!-- <a routerLinkActive="router-link-active" routerLink="/participate/deposit-datasets">-->
<!-- <span class="uk-icon">-->
<!-- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"-->
<!-- ratio="1"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline><rect-->
<!-- x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5"-->
<!-- y1="15" x2="9.5" y2="4"></line></svg>-->
<!-- </span> Deposit-->
<!-- </a>-->
<!-- </li>-->
<!-- </ul>-->
<!-- </li>-->
</div>
<div class="uk-grid">
<a
class=" datasets_clipboard_btn uk-padding-remove-left uk-margin-small-left uk-text-right uk-width-1-1 "
data-clipboard-target="#datasets_clipboard" title="Copy to clipboard">
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" icon="copy" ratio="1"><rect
fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect><polyline
fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline></svg></span>
</a>
</div>
<pre class="box-content uk-padding-remove-bottom uk-margin-remove-bottom"><code
id="datasets_clipboard">{{datasets_dynamic}}</code></pre>
</div>
</li>
<li>
<a target="_blank"
href="/project-report?projectId={{projectId}}&size={{fetchDatasets.searchUtils.totalResults}}&type=dataset">
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect
x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect
x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
Get {{projectInfo.funder}} report (HTML)
</a>
</li>
<li>
<a class="clickable"
(click)="downloadfile(downloadURLAPI+csvParamsDatasets, 'funder-research-data-report')">
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" icon="download" ratio="1"><polyline
fill="none" stroke="#000" points="14,10 9.5,14.5 5,10"></polyline><rect x="3" y="17"
width="13"
height="1"></rect><line
fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3"></line></svg></span>
Get {{projectInfo.funder}} report (CSV)
</a>
</li>
<li *ngIf="isRouteAvailable('participate/deposit-datasets') ">
<a routerLinkActive="router-link-active" routerLink="/participate/deposit-datasets">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
ratio="1"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline><rect
x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5"
y1="15" x2="9.5" y2="4"></line></svg>
</span> Deposit
</a>
</li>
</ul>
</li>
</ul>
</div>
<!--metrics [pageViews]="pageViews" shortView=true
[id]="projectId" [entityType]="'projects'" [entity]="'Project'"
@ -621,6 +669,20 @@
</div>
<div class="uk-margin-top uk-margin-bottom"
*ngIf="isRouteAvailable('participate/deposit/learn-how') ">
<a routerLinkActive="router-link-active" routerLink="/participate/deposit/learn-how"
class="uk-button uk-button-primary uk-width-1-1">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1">
<polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline>
<rect x="3" y="17" width="13" height="1"></rect>
<line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4"></line>
</svg>
</span>
Deposit
</a>
</div>
</div>
</div>

View File

@ -91,6 +91,8 @@ export class ProjectComponent {
public pageContents = null;
public divContents = null;
public share_research_results_type: string = "";
@ViewChild(ModalLoading) loading: ModalLoading;
// Alert box when something is wrong with CSV requests
@ViewChild('AlertModalCsvError') alertCsvError;
@ -245,13 +247,13 @@ export class ProjectComponent {
private createClipboard() {
if (typeof window !== 'undefined') {
let publ_clipboard, datasets_clipboard, software_clipboard, orps_clipboard;
let publications_clipboard, datasets_clipboard, software_clipboard, other_clipboard;
let Clipboard;
Clipboard = require('clipboard');
publ_clipboard = new Clipboard('.publ_clipboard_btn');
publications_clipboard = new Clipboard('.publications_clipboard_btn');
datasets_clipboard = new Clipboard('.datasets_clipboard_btn');
software_clipboard = new Clipboard('.software_clipboard_btn');
orps_clipboard = new Clipboard('.orps_clipboard_btn');
other_clipboard = new Clipboard('.other_clipboard_btn');
}
}