[Library | Trunk]: Some changes on result landing base on mocks.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58731 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2020-05-20 12:56:21 +00:00
parent 5a261719c5
commit 32c2758b66
5 changed files with 139 additions and 124 deletions

View File

@ -8,10 +8,9 @@ declare var Sys:any;
@Component({ @Component({
selector: 'citeThis', selector: 'citeThis',
template: ` template: `
<div class="uk-padding-small"> <div class="uk-padding-small">
<mat-select class="matSelection" id="citations" name="citeselect" [(ngModel)]="selectedStyle" (ngModelChange)="styleChanged()" <mat-select #matSelect class="matSelection" id="citations" name="citeselect" [(ngModel)]="selectedStyle" (ngModelChange)="styleChanged()"
[disableOptionCentering]="true" [disableOptionCentering]="true" modal-select [matSelect]="matSelect"
panelClass="matSelectionPanel"> panelClass="matSelectionPanel">
<mat-option value="0">select a citation style</mat-option> <mat-option value="0">select a citation style</mat-option>
<mat-option *ngFor=" let style of this.citation.templates let i = index" [value]="style">{{style}}</mat-option> <mat-option *ngFor=" let style of this.citation.templates let i = index" [value]="style">{{style}}</mat-option>
@ -45,6 +44,12 @@ export class CiteThisComponent {
this.updateCitation(); this.updateCitation();
} }
} }
public opened() {
let divElement: HTMLDivElement = <HTMLDivElement>document.getElementsByClassName('cdk-overlay-container')[0];
divElement.classList.add('modal-select');
}
parseData(){ parseData(){
var citationData:CitationData = new CitationData(); var citationData:CitationData = new CitationData();

View File

@ -4,11 +4,12 @@ import { FormsModule } from '@angular/forms';
import {CiteThisComponent} from './citeThis.component'; import {CiteThisComponent} from './citeThis.component';
import {MatSelectModule} from "@angular/material"; import {MatSelectModule} from "@angular/material";
import {ModalSelectModule} from "../../../utils/modal-select/modal-select.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, MatSelectModule CommonModule, FormsModule, MatSelectModule, ModalSelectModule
], ],
declarations: [ declarations: [
CiteThisComponent CiteThisComponent

View File

@ -750,9 +750,9 @@
</modal-alert> </modal-alert>
</li> </li>
<!-- Metrics --> <!-- Metrics -->
<li *ngIf="hasMetrics" class="uk-margin-top"> <li *ngIf="hasMetrics" class="uk-margin-medium-top">
<div uk-grid class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle"> <div uk-grid class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle">
<div></div><!-- Open Citations--> <div></div>
<div> <div>
<metrics [pageViews]="pageViews" <metrics [pageViews]="pageViews"
[id]="projectId" [entityType]="'projects'" [entity]="'project'" [id]="projectId" [entityType]="'projects'" [entity]="'project'"

View File

@ -12,7 +12,8 @@
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper> [texts]="pageContents['top']"></helper>
<div *ngIf="resultLandingInfo != null" class="uk-grid uk-margin-remove"> <div *ngIf="resultLandingInfo != null" class="uk-grid uk-margin-remove">
<div class="uk-width-2-3@m uk-width-1-1@s uk-padding uk-padding-remove-left uk-padding-remove-vertical uk-margin-bottom"> <div
class="uk-width-2-3@m uk-width-1-1@s uk-padding uk-padding-remove-left uk-padding-remove-vertical uk-margin-bottom">
<!-- schema.org--> <!-- schema.org-->
<schema2jsonld *ngIf="resultLandingInfo.record" [data]=resultLandingInfo.record <schema2jsonld *ngIf="resultLandingInfo.record" [data]=resultLandingInfo.record
[URL]="properties.baseLink+linkToLandingPage+id"></schema2jsonld> [URL]="properties.baseLink+linkToLandingPage+id"></schema2jsonld>
@ -72,7 +73,6 @@
[properties]="properties"></showIdentifiers> [properties]="properties"></showIdentifiers>
</li> </li>
</ul> </ul>
<!-- Tabs -->
<!-- Description --> <!-- Description -->
<div *ngIf="resultLandingInfo.description" class="uk-margin-bottom"> <div *ngIf="resultLandingInfo.description" class="uk-margin-bottom">
<div class="uk-text-justify uk-text-small uk-height-max-medium uk-overflow-auto"> <div class="uk-text-justify uk-text-small uk-height-max-medium uk-overflow-auto">
@ -204,99 +204,50 @@
</ul>--> </ul>-->
</div> </div>
<div class="uk-width-1-3@m uk-width-1-1@s uk-padding-remove"> <div class="uk-width-1-3@m uk-width-1-1@s uk-padding-remove">
<div class="uk-card uk-card-default uk-padding-small"> <ul class="user-actions uk-list uk-card uk-card-default uk-padding">
<div *ngIf="isRouteAvailable('participate/direct-claim')">
<div class="uk-margin-auto uk-width-3-4">
<button class="uk-button uk-width-1-1 portal-button">
<span uk-icon="link"></span>
Link this <span *ngIf="type != 'orp'">{{title.toLowerCase()}}</span><span
*ngIf="type == 'orp'">product</span> to...
</button>
</div>
<div class="uk-text-center uk-margin-expand uk-padding-small uk-margin-auto default-dropdown "
uk-dropdown="mode:click">
<div class="uk-grid uk-child-width-1-3 uk-width-large ">
<div>
<a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
<button class="uk-icon-button portal-button">
<span class="uk-icon">
<svg height="20" icon="album" ratio="1" viewBox="0 0 20 20" width="20"
xmlns="http://www.w3.org/2000/svg"><rect height="1" width="10" x="5" y="2"></rect><rect
height="1" width="14" x="3" y="4"></rect><rect fill="none" height="11" stroke="#000"
width="17" x="1.5"
y="6.5"></rect></svg>
</span>
</button>
<div>Projects</div>
</a></div>
<div><a
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'result'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
<button class="uk-icon-button portal-button">
<span class="uk-icon">
<svg height="20" icon="copy" ratio="1" viewBox="0 0 20 20" width="20"
xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="16" stroke="#000"
width="12" x="3.5" y="2.5"></rect><polyline
fill="none" points="5 0.5 17.5 0.5 17.5 17" stroke="#000"></polyline></svg></span>
</button>
<div>Research results</div>
</a></div>
<div><a
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'context'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
<button class="uk-icon-button portal-button">
<span class="uk-icon">
<svg height="20" icon="users" ratio="1" viewBox="0 0 20 20" width="20"
xmlns="http://www.w3.org/2000/svg"><circle cx="7.7" cy="8.6" fill="none" r="3.5"
stroke="#000" stroke-width="1.1"></circle><path
d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3" fill="none"
stroke="#000" stroke-width="1.1"></path><path
d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"
fill="none" stroke="#000" stroke-width="1.1"></path></svg></span>
</button>
<div>Communities</div>
</a></div>
</div>
</div>
</div>
<!-- Share --> <!-- Share -->
<div *ngIf="properties.showAddThis" [class.uk-hidden]="!addThis" class="uk-margin-top"> <li>
<div class="sideInfoTitle uk-margin-small-bottom">Share - Bookmark</div> <addThis></addThis>
<addThis (event)="hideAddThis($event)"></addThis> </li>
</div> <!-- Link to -->
<!-- Download From --> <li *ngIf="isRouteAvailable('participate/direct-claim')">
<div <a class="uk-link-text uk-text-bold uk-text-uppercase" (click)="openLinkModal()">
*ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0" <span class="uk-icon-button portal-button" uk-icon="link"></span>
class="uk-margin-top"> <span class="uk-margin-small-left">Link this {{getTypeName()}} to...</span>
<availableOn [properties]="properties" </a>
[availableOn]="resultLandingInfo.hostedBy_collectedFrom"></availableOn> </li>
</div> <!-- Cite this -->
<li *ngIf="isRouteAvailable('participate/direct-claim')">
<a class="uk-link-text uk-text-bold uk-text-uppercase" (click)="openCiteModal()">
<span class="uk-icon-button uk-button-primary" uk-icon="quote-right"></span>
<span class="uk-margin-small-left">Cite this {{getTypeName()}}</span>
</a>
</li>
<!-- &lt;!&ndash; Download From &ndash;&gt;-->
<!-- <div-->
<!-- *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0"-->
<!-- class="uk-margin-top">-->
<!-- <availableOn [properties]="properties"-->
<!-- [availableOn]="resultLandingInfo.hostedBy_collectedFrom"></availableOn>-->
<!-- </div>-->
<!-- Metrics --> <!-- Metrics -->
<div *ngIf="hasAltMetrics || hasMetrics" class="uk-margin-top"> <li *ngIf="hasAltMetrics || hasMetrics" class="uk-margin-medium-top">
<div class="sideInfoTitle uk-margin-small-bottom">Metrics</div>
<div uk-grid class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle"> <div uk-grid class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle">
<div></div><!-- Open Citations--> <div>
<div *ngIf="hasAltMetrics"> <metrics [pageViews]="pageViews" *ngIf="hasMetrics"
<altmetrics *ngIf="hasAltMetrics" id="{{resultLandingInfo.identifiers.get('doi')[0]}}" type="doi">
</altmetrics>
</div>
<div *ngIf="hasMetrics">
<metrics [pageViews]="pageViews"
[id]="id" [entityType]="'results'" [entity]="title" [id]="id" [entityType]="'results'" [entity]="title"
[viewsFrameUrl]="viewsFrameUrl" [downloadsFrameUrl]="downloadsFrameUrl" [viewsFrameUrl]="viewsFrameUrl" [downloadsFrameUrl]="downloadsFrameUrl"
(metricsResults)="metricsResults($event)" [properties]=properties> (metricsResults)="metricsResults($event)" [properties]=properties>
</metrics> </metrics>
</div> </div>
<div>
<altmetrics *ngIf="hasAltMetrics" id="{{resultLandingInfo.identifiers.get('doi')[0]}}" type="doi">
</altmetrics>
</div> </div>
<div></div><!-- Open Citations-->
</div> </div>
<div class="uk-margin-top"> </li>
<div class="sideInfoTitle uk-margin-small-bottom"> </ul>
Cite this {{getTypeName()}}
</div>
<citeThis [result]="resultLandingInfo" [id]="id" [type]="title.toLowerCase()"></citeThis>
</div>
</div>
<div class="uk-margin-small-top uk-text-muted uk-text-small uk-text-right"> <div class="uk-margin-small-top uk-text-muted uk-text-small uk-text-right">
Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</div> </div>
@ -470,5 +421,55 @@
</div> </div>
</modal-alert> </modal-alert>
</div> </div>
<modal-alert #linkModal>
<div class="uk-grid uk-child-width-1-3 uk-flex uk-flex-middle">
<div class="uk-text-center">
<a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
<button class="uk-icon-button portal-button">
<span class="uk-icon">
<svg height="20" icon="album" ratio="1" viewBox="0 0 20 20" width="20"
xmlns="http://www.w3.org/2000/svg"><rect height="1" width="10" x="5" y="2"></rect><rect
height="1" width="14" x="3" y="4"></rect><rect fill="none" height="11" stroke="#000"
width="17" x="1.5"
y="6.5"></rect></svg>
</span>
</button>
<div>Projects</div>
</a>
</div>
<div class="uk-text-center">
<a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'result'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
<button class="uk-icon-button portal-button">
<span class="uk-icon">
<svg height="20" icon="copy" ratio="1" viewBox="0 0 20 20" width="20"
xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="16" stroke="#000"
width="12" x="3.5" y="2.5"></rect><polyline
fill="none" points="5 0.5 17.5 0.5 17.5 17" stroke="#000"></polyline></svg>
</span>
</button>
<div>Research results</div>
</a></div>
<div class="uk-text-center">
<a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'context'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
<button class="uk-icon-button portal-button">
<span class="uk-icon">
<svg height="20" icon="users" ratio="1" viewBox="0 0 20 20" width="20"
xmlns="http://www.w3.org/2000/svg"><circle cx="7.7" cy="8.6" fill="none" r="3.5"
stroke="#000" stroke-width="1.1"></circle><path
d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3" fill="none"
stroke="#000" stroke-width="1.1"></path><path
d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"
fill="none" stroke="#000" stroke-width="1.1"></path></svg>
</span>
</button>
<div>Communities</div>
</a></div>
</div>
</modal-alert>
<modal-alert #citeModal>
<citeThis *ngIf="resultLandingInfo" [result]="resultLandingInfo" [id]="id" [type]="title.toLowerCase()"></citeThis>
</modal-alert>

View File

@ -28,7 +28,8 @@ export class ResultLandingComponent {
// Active tab variable for responsiveness // Active tab variable for responsiveness
@Input() activeTab: string = "References"; @Input() activeTab: string = "References";
@ViewChild('linkModal') linkModal;
@ViewChild('citeModal') citeModal;
@ViewChild('AlertModalDeletedByInference') alertModalDeletedByInference; @ViewChild('AlertModalDeletedByInference') alertModalDeletedByInference;
@ViewChild('referencesModal') referencesModal; @ViewChild('referencesModal') referencesModal;
@ViewChild('bioentitiesModal') bioentitiesModal; @ViewChild('bioentitiesModal') bioentitiesModal;
@ -86,8 +87,6 @@ export class ResultLandingComponent {
public indexUpdateDate: Date; public indexUpdateDate: Date;
public pageContents = null; public pageContents = null;
public divContents = null; public divContents = null;
public addThis: boolean = true;
public showFeedback: boolean = false; public showFeedback: boolean = false;
public feedbackFields: string [] = [ public feedbackFields: string [] = [
'Title', 'Authors', 'Access rights', 'Title', 'Authors', 'Access rights',
@ -507,11 +506,6 @@ export class ResultLandingComponent {
return ResultPreview.organizationConvert(result, this.relation); return ResultPreview.organizationConvert(result, this.relation);
} }
public hideAddThis(value: boolean) {
this.addThis = value;
this.cdr.detectChanges();
}
updateUrlWithType(){ updateUrlWithType(){
this.type = this.resultLandingInfo.resultType; this.type = this.resultLandingInfo.resultType;
if(this.type == "publication") { if(this.type == "publication") {
@ -559,4 +553,18 @@ export class ResultLandingComponent {
return null; return null;
} }
} }
public openLinkModal() {
this.linkModal.cancelButton = false;
this.linkModal.okButton = false;
this.linkModal.alertTitle = "Link this " + this.getTypeName() + " to";
this.linkModal.open();
}
public openCiteModal() {
this.citeModal.cancelButton = false;
this.citeModal.okButton = false;
this.citeModal.alertTitle = "Cite this " + this.getTypeName() + " to";
this.citeModal.open();
}
} }