[Trunk | Library]:

1. tabs.component.ts: Remove unnecessary logs.
2. alert.ts: Input field 'classTitle' added - applied on 'uk-modal-title' (background in landing pages' modals).
3. project.component: 
	a. comment 'test' right column in tabs
	b. apply 'ModalSelectDirective' in <mat-select> inside modals
	c. In modals pass in classTitle: landing-modal-header & in classBody: landing-modal & fix paddings and margins.
	d. [Bug fix] Show 'View all' button in search results (inside tabs) by comparing totalResults with 'searchNumber'.
	e. In 'Share results', dynamic content is NOT hidden by default and there is no toggle button anymore. 


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58733 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2020-05-20 16:45:50 +00:00
parent 32c2758b66
commit c8f71a4093
5 changed files with 54 additions and 44 deletions

View File

@ -3,19 +3,22 @@
<ul class="uk-list uk-margin-remove-bottom">
<!-- class="uk-margin-top"-->
<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-margin-small-top">
<!-- <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>-->
<!-- hidden class="uk-margin-small-top"-->
<div id="dynamic_content_id">
<pre class="box-content uk-padding-remove-bottom uk-margin-remove-bottom"><code
id="clipboard">{{dynamic_content}}</code></pre>
<div class="uk-grid">
<a
class="clipboard_btn uk-padding-remove-left uk-margin-small-left uk-text-right uk-width-1-1"
data-clipboard-target="#clipboard" title="Copy to clipboard">
<button class="uk-button uk-button-small uk-button-default uk-icon">
<button class="uk-button uk-button-small uk-button-secondary square-button 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>
@ -24,9 +27,6 @@
</button>
</a>
</div>
<pre class="box-content uk-padding-remove-bottom uk-margin-remove-bottom"><code
id="clipboard">{{dynamic_content}}</code></pre>
<div class="uk-text-small uk-margin-small-top">
For further information contact us at
<u><a [href]="'mailto:'+properties.helpdeskEmail" class="uk-link-text">{{properties.helpdeskEmail}}</a></u>
@ -98,11 +98,11 @@
<div *ngIf="fetch.searchUtils.status == errorCodes.DONE">
<div class="uk-inline uk-flex uk-flex-right">
<span class="uk-text-uppercase uk-position-left uk-text-middle uk-flex-middle uk-flex">
<span>Top {{searchNuumber}}</span><span class="space uk-text-muted">{{getEntityName(type, true, true)}}</span>
<span>Top {{searchNumber}}</span><span class="space uk-text-muted">{{getEntityName(type, true, true)}}</span>
</span>
<a [queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'type', 'qf'], ['relprojectid', projectId, getEntityName(type, true, false), 'false'])"
[routerLink]="properties.searchLinkToAdvancedResults" target="_blank">
<button *ngIf="fetch.searchUtils.totalResults > 10"
<button *ngIf="fetch.searchUtils.totalResults > searchNumber"
class="uk-button uk-button-small portal-button">
<span uk-icon="search"></span>
View all
@ -606,10 +606,15 @@
<li *ngIf="isRouteAvailable('participate/direct-claim')">
<a class="uk-link-text uk-text-bold uk-text-uppercase" (click)="openLinkProjectModal()">
<span class="uk-icon-button portal-button" uk-icon="link"></span>
<span class="uk-margin-small-left">Link this project to...</span>
<span class="uk-margin-small-left">Link this project to research results</span>
</a>
<modal-alert #linkProjectModal>
<div class="uk-grid uk-child-width-1-3 uk-width-large ">
<modal-alert #linkProjectModal
[classTitle]="'landing-modal-header uk-padding-small'" [classBody]="'uk-padding-remove landing-modal'">
<!-- <div class="uk-modal-title landing-modal-header">-->
<!-- <button class="uk-modal-close-default uk-float-right" (click)='linkProjectModal.cancel()' uk-close></button>-->
<!-- <h4 class="modal-title" id="myModalLabel">{{linkProjectModal.alertTitle}}</h4>-->
<!-- </div>-->
<div class="uk-padding uk-padding-remove-vertical uk-margin-mdeium-bottom uk-text-center ">
<div>
<a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[projectId,
'project','result'])"
@ -650,12 +655,14 @@
</span>
<span class="uk-margin-small-left">Share results</span>
</a>
<modal-alert #shareResultsModal>
<div class="app-box uk-padding-small uk-margin-small-left uk-margin-small-right">
<modal-alert #shareResultsModal
[classTitle]="'landing-modal-header'" [classBody]="'uk-padding-remove landing-modal'">
<div class="uk-padding-small uk-margin-small-left uk-margin-small-right">
<div class="uk-padding-small uk-padding-remove-vertical">
<mat-form-field class="matSelectionFormField uk-width-1-1">
<mat-label>Select content type to share</mat-label>
<mat-select [(value)]="share_research_results_type"
<mat-select #matSelect modal-select [matSelect]="matSelect"
[(value)]="share_research_results_type"
[disableOptionCentering]="true"
panelClass="entitiesSelectionPanel"
class="matSelection">
@ -687,8 +694,9 @@
</span>
<span class="uk-margin-small-left">Download report</span>
</a>
<modal-alert #downloadReportModal>
<div class="app-box uk-padding-small uk-margin-small-left uk-margin-small-right">
<modal-alert #downloadReportModal
[classTitle]="'landing-modal-header uk-padding-small'" [classBody]="'uk-padding-remove landing-modal'">
<div class="uk-padding-small uk-margin-small-left uk-margin-small-right">
<div class="uk-padding-small uk-padding-remove-vertical">
<mat-form-field class="matSelectionFormField uk-width-1-1">
<mat-label>Select content type report to download</mat-label>
@ -697,6 +705,7 @@
fetchDatasets.searchUtils.totalResults > 0 ||
fetchSoftware.searchUtils.totalResults > 0 ||
fetchOrps.searchUtils.totalResults > 0)"
#matSelect modal-select [matSelect]="matSelect"
[(value)]="download_research_results_type"
[disableOptionCentering]="true"
panelClass="entitiesSelectionPanel"
@ -873,9 +882,9 @@
</ng-container>
</div>
<div class="uk-width-1-3 uk-padding right-column">
<div>test publications</div>
</div>
<!-- <div class="uk-width-1-3 uk-padding right-column">-->
<!-- <div>test publications</div>-->
<!-- </div>-->
</div>
<!-- <ng-container *ngTemplateOutlet="tab_content; context: {-->
@ -893,9 +902,9 @@
</ng-container>
</div>
<div class="uk-width-1-3 uk-padding right-column">
<div>test research data</div>
</div>
<!-- <div class="uk-width-1-3 uk-padding right-column">-->
<!-- <div>test research data</div>-->
<!-- </div>-->
</div>
</my-tab>
<my-tab *ngIf="fetchSoftware.searchUtils.totalResults > 0"
@ -908,9 +917,9 @@
</ng-container>
</div>
<div class="uk-width-1-3 uk-padding right-column">
<div>test software</div>
</div>
<!-- <div class="uk-width-1-3 uk-padding right-column">-->
<!-- <div>test software</div>-->
<!-- </div>-->
</div>
</my-tab>
<my-tab *ngIf="fetchOrps.searchUtils.totalResults > 0"
@ -923,9 +932,9 @@
</ng-container>
</div>
<div class="uk-width-1-3 uk-padding right-column">
<div>test other research products</div>
</div>
<!-- <div class="uk-width-1-3 uk-padding right-column">-->
<!-- <div>test other research products</div>-->
<!-- </div>-->
</div>
</my-tab>
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0

View File

@ -96,7 +96,7 @@ export class ProjectComponent {
public fetchDatasets: FetchResearchResults;
public fetchSoftware: FetchResearchResults;
public fetchOrps: FetchResearchResults;
public searchNuumber: number = 5;
public searchNumber: number = 5;
public routerHelper: RouterHelper = new RouterHelper();
public errorCodes: ErrorCodes = new ErrorCodes();
@ -283,23 +283,23 @@ export class ProjectComponent {
}
private searchPublications() {
this.fetchPublications.getResultsForEntity("publication", "project", this.projectId, 1, this.searchNuumber, this.properties);
this.fetchPublications.getResultsForEntity("publication", "project", this.projectId, 1, this.searchNumber, this.properties);
this.reloadPublications = false;
}
private searchDatasets() {
this.fetchDatasets.getResultsForEntity("dataset", "project", this.projectId, 1, this.searchNuumber, this.properties);
this.fetchDatasets.getResultsForEntity("dataset", "project", this.projectId, 1, this.searchNumber, this.properties);
this.reloadDatasets = false;
//this.activeTab = "Research Data";
}
private searchSoftware() {
this.fetchSoftware.getResultsForEntity("software", "project", this.projectId, 1, this.searchNuumber, this.properties);
this.fetchSoftware.getResultsForEntity("software", "project", this.projectId, 1, this.searchNumber, this.properties);
this.reloadSoftware = false;
}
private searchOrps() {
this.fetchOrps.getResultsForEntity("other", "project", this.projectId, 1, this.searchNuumber, this.properties);
this.fetchOrps.getResultsForEntity("other", "project", this.projectId, 1, this.searchNumber, this.properties);
this.reloadOrps = false;
}
@ -481,6 +481,7 @@ export class ProjectComponent {
this.linkProjectModal.cancelButton = false;
this.linkProjectModal.okButton = false;
this.linkProjectModal.alertTitle = "Link this project to";
//this.linkProjectModal.alertHeader = false;
this.linkProjectModal.open();
}
@ -684,7 +685,6 @@ export class ProjectComponent {
this.statsClicked = true;
}
}
console.log(activeTabId);
}
private updateDescription(description: string) {

View File

@ -30,6 +30,7 @@ import {AltMetricsModule} from "../../utils/altmetrics.module";
import {TabsModule} from "../../utils/tabs/tabs.module";
import {SearchResultsModule} from "../../searchPages/searchUtils/searchResults.module";
import {ResultPreviewModule} from "../../utils/result-preview/result-preview.module";
import {ModalSelectModule} from "../../utils/modal-select/modal-select.module";
@NgModule({
imports: [
@ -39,7 +40,7 @@ import {ResultPreviewModule} from "../../utils/result-preview/result-preview.mod
SearchResearchResultsServiceModule, ProjectServiceModule,
Schema2jsonldModule, SEOServiceModule, HelperModule,
LandingHeaderModule, MatSelectModule, FeedbackModule, AltMetricsModule,
TabsModule, ResultPreviewModule
TabsModule, ResultPreviewModule, ModalSelectModule
],
declarations: [
ProjectComponent

View File

@ -9,7 +9,7 @@ declare var UIkit: any;
id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="uk-modal-dialog uk-modal-body uk-animation-slide-bottom-small uk-margin-medium-bottom uk-text-left"
[ngClass]="classBody" role="">
<div class="uk-modal-title" [hidden]=!alertHeader>
<div [ngClass]="classTitle" class="uk-modal-title" [hidden]=!alertHeader>
<button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button>
<h4 class="modal-title" id="myModalLabel">{{alertTitle}}</h4>
</div>
@ -61,6 +61,7 @@ declare var UIkit: any;
* API to an open alert window.
*/
export class AlertModal {
@Input() classTitle: string = "";
@Input() classBody: string = "";
/**
* Caption for the title.

View File

@ -60,7 +60,7 @@ export class TabsComponent implements AfterContentInit {
ngAfterContentInit() {
// get all active tabs
let activeTabs = this.tabs.filter((tab)=>tab.active);
console.log("ACTIVE TABS: "+activeTabs.length);
// if there is no active tab set, activate the first
if(activeTabs.length === 0) {
this.selectTab(this.tabs.first);
@ -73,7 +73,6 @@ console.log("ACTIVE TABS: "+activeTabs.length);
// activate the tab the user has clicked on.
tab.active = true;
console.log("ACTIVE TAB SET TO: "+tab.title);
this.selectedActiveTab.emit(tab.tabId);
}