[Monitor Dashaboard | Trunk]: 1. Add window resize method. 2. Some changes on stakeholder's page. 3. Make width of sidebar smaller.
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59976 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
46b8958de8
commit
cdc417b60c
|
|
@ -1,4 +1,3 @@
|
|||
<!--disable_transitions -->
|
||||
<div *ngIf="loading == true">
|
||||
<loading [full]="true"></loading>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
|
||||
import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from '@angular/core';
|
||||
import {ActivatedRoute, NavigationEnd, Params, Router} from '@angular/router';
|
||||
import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
|
||||
import {EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service';
|
||||
|
|
@ -72,6 +72,16 @@ export class AppComponent implements OnInit, OnDestroy {
|
|||
}));
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(event) {
|
||||
if(this.layoutService.isSmallScreen && event.target.innerWidth > 1219) {
|
||||
this.layoutService.setSmallScreen(false);
|
||||
} else if(!this.layoutService.isSmallScreen && event.target.innerWidth < 1219) {
|
||||
this.layoutService.setSmallScreen(true);
|
||||
this.layoutService.setOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (typeof document !== 'undefined' && window) {
|
||||
this.innerWidth = window.innerWidth;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
<!-- </div>-->
|
||||
</ng-template>
|
||||
<div page-content [class.greyOut]="filterToggle" (click)=" (filterToggle)?filterToggle = false:filterToggle">
|
||||
<div *ngIf="activeTopic && activeTopic.categories.length > 1" header>
|
||||
<div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
|
||||
<nav class=" ">
|
||||
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="">
|
||||
<ul
|
||||
|
|
@ -50,9 +50,9 @@
|
|||
<li *ngIf="isPublicOrIsMember(category.visibility)"
|
||||
[class.uk-active]="category.alias ===
|
||||
activeCategory.alias">
|
||||
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)"
|
||||
class="uk-margin-remove-bottom uk-h4"
|
||||
><span class="title">{{category.name}}</span></a>
|
||||
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)">
|
||||
<span class="title">{{category.name}}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
|
|
@ -64,21 +64,21 @@
|
|||
<li *ngIf="isPublicOrIsMember(subCategory.visibility)"
|
||||
[ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">
|
||||
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias,activeCategory.alias, subCategory.alias)"
|
||||
class="uk-margin-remove-bottom uk-h3"
|
||||
class="uk-margin-remove-bottom"
|
||||
><span>{{subCategory.name}}</span></a>
|
||||
</li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
<div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small uk-margin-bottom">
|
||||
<div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small uk-margin-bottom uk-text-small">
|
||||
<span class="uk-grid-margin">Filters: </span>
|
||||
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<div id="page_content_inner" inner>
|
||||
<div class=" indicators">
|
||||
<div inner>
|
||||
<div [class.uk-padding]="!isSmallScreen" class="uk-padding-remove-vertical">
|
||||
<div *ngIf="privateStakeholder">
|
||||
<div class="uk-text-center uk-height-medium">
|
||||
<div class="uk-h3 "><i>
|
||||
<h3><i>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
</svg>
|
||||
</i>
|
||||
Private data
|
||||
</div>
|
||||
</h3>
|
||||
<div class="uk-text-large "></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
(activeCategory && activeCategory.description && activeCategory.description.length > 0) ||
|
||||
(activeTopic && activeTopic.description && activeTopic.description.length > 0))"
|
||||
class="uk-text-center">
|
||||
<div class="uk-h5 uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left">
|
||||
<div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left">
|
||||
{{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description
|
||||
: (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description :
|
||||
(activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}}
|
||||
|
|
@ -115,9 +115,9 @@
|
|||
(activeSubCategory.charts.length == 0 || (activeSubCategory.charts.length == 1 && activeSubCategory.charts[0].indicators.length == 0))
|
||||
) || !activeTopic || !activeCategory || !activeSubCategory)">
|
||||
<div class=" uk-text-center">
|
||||
<div class="uk-h3">
|
||||
<h3>
|
||||
No indicators available yet. Stay tuned!
|
||||
</div>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="activeSubCategory" class="uk-grid uk-grid-medium uk-margin-bottom uk-margin-top"
|
||||
|
|
@ -233,9 +233,10 @@
|
|||
</div>
|
||||
<div class="uk-padding">
|
||||
<div class="uk-grid uk-flex uk-flex-middle">
|
||||
<div class="uk-h4 ">Filters</div>
|
||||
<h5>Filters</h5>
|
||||
<a *ngIf="countSelectedFilters() > 1"
|
||||
class=" portal-link uk-width-1-2" (click)="clearAll()"> Clear All </a></div>
|
||||
class=" portal-link uk-width-1-2" (click)="clearAll()"> Clear All </a>
|
||||
</div>
|
||||
<div class="uk-grid uk-grid-small uk-text-small" uk-grid>
|
||||
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -60,9 +60,18 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
public routerHelper: RouterHelper = new RouterHelper();
|
||||
filters: Filter[] = [];
|
||||
queryParams = {};
|
||||
periodFilter:RangeFilter = { title: "Time range", filterId: "year", originalFilterIdFrom: null, originalFilterIdTo: null, selectedFromValue: null, selectedToValue: null, selectedFromAndToValues: ""};
|
||||
periodFilter: RangeFilter = {
|
||||
title: "Time range",
|
||||
filterId: "year",
|
||||
originalFilterIdFrom: null,
|
||||
originalFilterIdTo: null,
|
||||
selectedFromValue: null,
|
||||
selectedToValue: null,
|
||||
selectedFromAndToValues: ""
|
||||
};
|
||||
privateStakeholder = false;
|
||||
public keyword: FormControl;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private _router: Router,
|
||||
|
|
@ -115,17 +124,33 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
this.stakeholder = stakeholder;
|
||||
// add fl0 filter only for EC
|
||||
if (this.stakeholder.index_id == "ec__________::EC") {
|
||||
this.filters.push({title: "Funding Stream",filterId: "relfundinglevel0_id",originalFilterId: "relfundinglevel0_id", countSelectedValues: 0,
|
||||
values:[{name: "EC|FP7", id: "ec__________::EC::FP7", selected: false, number: 0}, {name: "EC|H2020", id: "ec__________::EC::H2020", selected: false, number: 0}]
|
||||
,filterOperator: "or", valueIsExact: true, filterType: "radio", radioValue:""});
|
||||
this.filters.push({
|
||||
title: "Funding Stream",
|
||||
filterId: "relfundinglevel0_id",
|
||||
originalFilterId: "relfundinglevel0_id",
|
||||
countSelectedValues: 0,
|
||||
values: [{name: "EC|FP7", id: "ec__________::EC::FP7", selected: false, number: 0}, {
|
||||
name: "EC|H2020",
|
||||
id: "ec__________::EC::H2020",
|
||||
selected: false,
|
||||
number: 0
|
||||
}]
|
||||
,
|
||||
filterOperator: "or",
|
||||
valueIsExact: true,
|
||||
filterType: "radio",
|
||||
radioValue: ""
|
||||
});
|
||||
}
|
||||
if (this.stakeholder.type == "funder") {
|
||||
// this.filters.push({title: "Co-funded research outcomes",filterId: "co-funded",originalFilterId: "co-funded", countSelectedValues: 0,
|
||||
// values:[{name: "true", id: "co-funded", selected: false, number: 0}, {name: "false", id: "no-co-funded", selected: false, number: 0}]
|
||||
// ,filterOperator: "or", valueIsExact: true, filterType: "radio", radioValue:""});
|
||||
this.filters.push({title: "Co-funded",filterId: "co-funded",originalFilterId: "co-funded", countSelectedValues: 0,
|
||||
this.filters.push({
|
||||
title: "Co-funded", filterId: "co-funded", originalFilterId: "co-funded", countSelectedValues: 0,
|
||||
values: [{name: "Co-funded research output", id: "co-funded-results", selected: false, number: 0}]
|
||||
,filterOperator: "or", valueIsExact: true, filterType: "checkbox", radioValue:""});
|
||||
, filterOperator: "or", valueIsExact: true, filterType: "checkbox", radioValue: ""
|
||||
});
|
||||
}
|
||||
this.initializeFilters();
|
||||
this.seoService.createLinkForCanonicalURL(url, false);
|
||||
|
|
@ -162,6 +187,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
}));
|
||||
|
||||
}
|
||||
|
||||
private initializeFilters() {
|
||||
this.periodFilter.selectedFromValue = (this.queryParams['year'] && this.queryParams['year'].indexOf("range") == 0) ? this.queryParams['year'].split("range")[1].split(":")[0] : "";
|
||||
this.periodFilter.selectedToValue = (this.queryParams['year'] && this.queryParams['year'].indexOf("range") == 0) ? this.queryParams['year'].split("range")[1].split(":")[1] : "";
|
||||
|
|
@ -182,6 +208,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
private validateYearRange(navigateTo: boolean = false) {
|
||||
let validYears = true;
|
||||
|
||||
|
|
@ -208,6 +235,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
this.setIndicators();
|
||||
}
|
||||
}
|
||||
|
||||
clearAll() {
|
||||
for (let filter of this.filters) {
|
||||
this.clearfFilter(filter);
|
||||
|
|
@ -216,6 +244,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
this.periodFilter.selectedToValue = "";
|
||||
this.validateYearRange(true)
|
||||
}
|
||||
|
||||
clearfFilter(filter: Filter) {
|
||||
filter.countSelectedValues = 0;
|
||||
filter.radioValue = "";
|
||||
|
|
@ -228,6 +257,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
delete this.queryParams[filter.filterId];
|
||||
}
|
||||
}
|
||||
|
||||
countSelectedFilters(): number {
|
||||
let count = 0;
|
||||
if (this.periodFilter.selectedFromAndToValues.length > 0) {
|
||||
|
|
@ -238,6 +268,11 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
return count;
|
||||
}
|
||||
|
||||
public get isSmallScreen() {
|
||||
return this.layoutService.isSmallScreen;
|
||||
}
|
||||
|
||||
public get open() {
|
||||
return this.layoutService.open;
|
||||
}
|
||||
|
|
@ -319,6 +354,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
filter() {
|
||||
this.validateYearRange(true);
|
||||
}
|
||||
|
||||
filterChanged($event, navigate: boolean = true) {
|
||||
let selected = "";
|
||||
for (let value of $event.value.values) {
|
||||
|
|
@ -338,18 +374,21 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
private getfl0() {
|
||||
if (this.queryParams["relfundinglevel0_id"] && this.filters.length > 0) {
|
||||
return this.queryParams["relfundinglevel0_id"].split("::")[this.queryParams["relfundinglevel0_id"].split("::").length - 1];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
private getCoFunded() {
|
||||
if (this.queryParams["co-funded"] && this.filters.length > 0) {
|
||||
return this.queryParams["co-funded"] && this.queryParams["co-funded"] == "co-funded-results";
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
clearPeriodFilter() {
|
||||
if (this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue) {
|
||||
this.periodFilter.selectedFromValue = "";
|
||||
|
|
@ -358,6 +397,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
private setIndicators() {
|
||||
this.periodFilter.selectedFromAndToValues = (this.periodFilter.selectedFromValue || this.periodFilter.selectedToValue ? ((this.periodFilter.selectedFromValue && !this.periodFilter.selectedToValue ? "From " : "") + (!this.periodFilter.selectedFromValue && this.periodFilter.selectedToValue ? "Until " : "") + (this.periodFilter.selectedFromValue ? this.periodFilter.selectedFromValue : "") +
|
||||
(this.periodFilter.selectedFromValue && this.periodFilter.selectedToValue ? " - " : "") + (this.periodFilter.selectedToValue ? this.periodFilter.selectedToValue : "")) : "");
|
||||
|
|
@ -444,6 +484,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
public countSubCategoriesToShow(category: Category): number {
|
||||
let counter = 0;
|
||||
for (let sub of category.subCategories) {
|
||||
|
|
@ -453,6 +494,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
return counter;
|
||||
}
|
||||
|
||||
public countIndicatorsToShow(indicators: Indicator[]): number {
|
||||
let counter = 0;
|
||||
for (let i of indicators) {
|
||||
|
|
@ -462,12 +504,14 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
return counter;
|
||||
}
|
||||
|
||||
/*
|
||||
Feedback mail
|
||||
*/
|
||||
public get mailText() {
|
||||
return "mailto:" + this.properties.feedbackmail + "?subject=%5BOpenAIRE%20Monitor%5D%20" + (this.stakeholder ? this.stakeholder.name : "") + "%20dashboard%20feedback"
|
||||
}
|
||||
|
||||
mailMe() {
|
||||
window.location.href = this.mailText;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
{i:i, type: 'topic', visibility: stakeholder.topics[i].visibility}">
|
||||
</ng-container>
|
||||
</span>
|
||||
<span class="uk-text-truncate" [class.uk-width-3-5]="!open">{{topic.name}}</span>
|
||||
<span [class.uk-text-center]="open" [class.uk-text-truncate]="!open" [class.uk-width-3-5]="!open">{{topic.name}}</span>
|
||||
<span class="uk-invisible-hover color"
|
||||
(click)="$event.stopPropagation();$event.preventDefault()">
|
||||
<span class="uk-icon uk-position-center-right" uk-icon="more-vertical"></span>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
:root {
|
||||
--sidebar-width: 320px;
|
||||
--sidebar-width: 230px;
|
||||
--sidebar-mini-width: 130px;
|
||||
--sidebar-font-size: 14px;
|
||||
--header-height: 100px;
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
}
|
||||
|
||||
.sidebar_mini #page_content_header {
|
||||
width: calc(100vw - var(--sidebar-mini-width) - 200px);
|
||||
width: calc(100vw - var(--sidebar-mini-width) - 180px);
|
||||
}
|
||||
|
||||
#page_content_inner {
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
}
|
||||
|
||||
.sidebar_mini #page_content_header {
|
||||
width: calc(100vw - var(--sidebar-mini-width) - 50px);
|
||||
width: calc(100vw - var(--sidebar-mini-width) - 90px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,19 +16,11 @@
|
|||
background-image: none;
|
||||
}
|
||||
|
||||
.stakeholderPage #page_content > div, .stakeholderPage #page_content .uk-navbar-container {
|
||||
background-color: #F9FBFC !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*.stakeholderPage #header_main, .stakeholderPage .uk-sticky.uk-navbar-container {*/
|
||||
/* background: #F9FBFC !important;*/
|
||||
/*}*/
|
||||
.stakeholderPage #page_content_inner {
|
||||
background-image: url(/assets/monitor-shapes-bg.svg);
|
||||
background-size: cover;
|
||||
.stakeholderPage #page_content {
|
||||
background-image: url("/assets/monitor-shapes-bg.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
|
||||
}
|
||||
|
|
@ -83,6 +75,7 @@
|
|||
background-size: contain;
|
||||
margin-left: 35px;
|
||||
margin-top: 5px;
|
||||
margin-right: 10px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
|
|
@ -137,7 +130,6 @@
|
|||
|
||||
.stakeholderPage #sidebar_main #sidebar_content, .stakeholderPage #sidebar_switcher_toggle {
|
||||
border-color: var(--monitor-portal-color);
|
||||
color: var(--monitor-portal-color);
|
||||
}
|
||||
|
||||
/* Section Tools*/
|
||||
|
|
@ -245,3 +237,8 @@
|
|||
.uk-modal-container .uk-modal-dialog {
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
.stakeholderPage .selectedFilterLabel {
|
||||
background-color: #E6EEF2;
|
||||
border-color: #E6EEF2;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue