Change description overlay. Fix a bug in case of more than one sections has no indicators. Make numbers with fixed width
This commit is contained in:
parent
10c756c091
commit
9ee588df82
|
@ -91,11 +91,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div *ngIf="!privateStakeholder && stakeholder">
|
||||
<div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 ||
|
||||
(activeSubCategory.charts.length == 1 && countIndicatorsToShow(activeSubCategory.charts[0].indicators) == 0)))
|
||||
&& ((activeSubCategory &&
|
||||
activeSubCategory.description &&
|
||||
activeSubCategory.description.length > 0) ||
|
||||
<div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
|
||||
&& ((activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0) ||
|
||||
(activeCategory && activeCategory.description && activeCategory.description.length > 0) ||
|
||||
(activeTopic && activeTopic.description && activeTopic.description.length > 0))"
|
||||
class="uk-text-center">
|
||||
|
@ -104,15 +101,12 @@
|
|||
: (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description :
|
||||
(activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<ng-template [ngIf]="!loading && !privateStakeholder &&
|
||||
(!activeSubCategory ||
|
||||
(
|
||||
(activeSubCategory.numbers.length == 0 || (activeSubCategory.numbers.length == 1 && countIndicatorsToShow(activeSubCategory.numbers[0].indicators) == 0))
|
||||
&&
|
||||
(activeSubCategory.charts.length == 0 || (activeSubCategory.charts.length == 1 && countIndicatorsToShow(activeSubCategory.charts[0].indicators) == 0))
|
||||
) || !activeTopic || !activeCategory || !activeSubCategory)" [ngIfElse]="content">
|
||||
((activeSubCategory.numbers.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.numbers) == 0) &&
|
||||
(activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
|
||||
|| !activeTopic || !activeCategory || !activeSubCategory)" [ngIfElse]="content">
|
||||
<div class="message uk-text-center">
|
||||
<h3>
|
||||
No indicators available yet. Stay tuned!
|
||||
|
@ -126,9 +120,8 @@
|
|||
<h5 *ngIf="countIndicatorsToShow(number.indicators)> 0 "
|
||||
class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
|
||||
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
|
||||
<div *ngIf="isPublicOrIsMember(indicator.visibility)"
|
||||
[ngClass]="getNumberClassBySize(indicator.width)" class=" uk-margin-bottom">
|
||||
<div class="uk-card uk-card-default"
|
||||
<div *ngIf="isPublicOrIsMember(indicator.visibility)" class="uk-width-medium uk-margin-bottom">
|
||||
<div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center"
|
||||
[class.uk-disabled]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"
|
||||
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
|
||||
<div class="uk-card-body uk-text-center">
|
||||
|
@ -202,7 +195,7 @@
|
|||
</div>
|
||||
<div *ngIf="indicator.description || indicator.additionalDescription"
|
||||
class="uk-overlay uk-position-bottom">
|
||||
<div class="uk-padding-small multi-line-ellipsis lines-3">
|
||||
<div class="uk-padding multi-line-ellipsis lines-3">
|
||||
<p class="uk-margin-remove">
|
||||
<span *ngIf="indicator.description">
|
||||
{{indicator.description}}
|
||||
|
@ -231,8 +224,7 @@
|
|||
</div>
|
||||
<!--Feedback-->
|
||||
<div class="uk-width-expand uk-text-right">
|
||||
<span class="uk-text-muted">Send us your <a [href]="mailText" target="_self"
|
||||
(click)="mailMe()">feedback</a>.</span>
|
||||
<span class="uk-text-muted">Send us your <a [href]="feedback" target="_self">feedback</a>.</span>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
|
|
@ -12,7 +12,7 @@ import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
|
|||
import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
|
||||
import {
|
||||
Category, Indicator,
|
||||
IndicatorPath, IndicatorSize,
|
||||
IndicatorPath, IndicatorSize, Section,
|
||||
Stakeholder,
|
||||
SubCategory,
|
||||
Topic,
|
||||
|
@ -77,6 +77,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
privateStakeholder = false;
|
||||
public keyword: FormControl;
|
||||
public statsUpdateDate: Date;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private _router: Router,
|
||||
|
@ -534,37 +535,32 @@ export class MonitorComponent implements OnInit, OnDestroy {
|
|||
return counter;
|
||||
}
|
||||
|
||||
public countIndicatorsToShow(indicators: Indicator[]): number {
|
||||
public countSectionsWithIndicatorsToShow(sections: Section[]):number {
|
||||
let counter = 0;
|
||||
for (let i of indicators) {
|
||||
if (this.isPublicOrIsMember(i.visibility)) {
|
||||
sections.forEach(section => {
|
||||
section.indicators.forEach(indicator => {
|
||||
if (this.isPublicOrIsMember(indicator.visibility)) {
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
return counter;
|
||||
}
|
||||
|
||||
/*
|
||||
Feedback mail
|
||||
*/
|
||||
public get mailText() {
|
||||
public countIndicatorsToShow(indicators: Indicator[]): number {
|
||||
let counter = 0;
|
||||
indicators.forEach(indicator => {
|
||||
if (this.isPublicOrIsMember(indicator.visibility)) {
|
||||
counter++;
|
||||
}
|
||||
});
|
||||
return counter;
|
||||
}
|
||||
|
||||
public get feedback() {
|
||||
return "mailto:" + this.properties.feedbackmail + "?subject=%5BOpenAIRE%20Monitor%5D%20" + (this.stakeholder ? this.stakeholder.name : "") + "%20dashboard%20feedback"
|
||||
}
|
||||
|
||||
mailMe() {
|
||||
window.location.href = this.mailText;
|
||||
}
|
||||
|
||||
public getNumberClassBySize(size: IndicatorSize) {
|
||||
if(size === 'small') {
|
||||
return 'uk-width-1-4@xl uk-width-1-3@l uk-width-1-2@m uk-width-1-1';
|
||||
} else if(size === 'medium') {
|
||||
return 'uk-width-1-3@l uk-width-1-2@m uk-width-1-1';
|
||||
} else {
|
||||
return 'uk-width-1-2@l uk-width-1-1@m uk-width-1-1';
|
||||
}
|
||||
}
|
||||
|
||||
public getChartClassBySize(size: IndicatorSize) {
|
||||
if (size === 'small') {
|
||||
return 'uk-width-1-3@xl uk-width-1-2@m uk-width-1-1';
|
||||
|
|
|
@ -1 +1 @@
|
|||
Subproject commit 64051887ce031b36d74349496912e5c337801c15
|
||||
Subproject commit 5c7430ae7cde032c1b6b4d9bd990f761cd6b73e3
|
|
@ -43,15 +43,18 @@
|
|||
</div>
|
||||
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
|
||||
<div *ngIf="indicator" [id]="indicator._id"
|
||||
[ngClass]="getNumberClassBySize(indicator.width)"
|
||||
class="uk-width-medium"
|
||||
[class.disable-sortable]="!canReorder"
|
||||
[class.uk-sortable-nodrag]="!canReorder">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder">
|
||||
<div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center uk-position-relative" [class.uk-card-hover]="canReorder">
|
||||
<div class="uk-card-body">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="visibilityOptions; context:{indicator: indicator, sectionId: number._id}"></ng-container>
|
||||
<div [attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'"
|
||||
<div
|
||||
[attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'"
|
||||
class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable">
|
||||
<i [class]="exportLoading ? 'uk-disabled ' : ' '" uk-icon="more-vertical" (click)="$event.stopPropagation();$event.preventDefault()"></i>
|
||||
<i [class]="exportLoading ? 'uk-disabled ' : ' '" uk-icon="more-vertical"
|
||||
(click)="$event.stopPropagation();$event.preventDefault()"></i>
|
||||
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<li *ngIf="!editing"><a
|
||||
|
@ -83,7 +86,9 @@
|
|||
</h3>
|
||||
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
|
||||
</div>
|
||||
<div *ngIf="indicator.description || indicator.additionalDescription" class="uk-overlay uk-position-bottom">
|
||||
<div *ngIf="indicator.description || indicator.additionalDescription"
|
||||
class="uk-overlay uk-position-bottom">
|
||||
<div class="uk-padding multi-line-ellipsis lines-3">
|
||||
<p class="uk-margin-remove">
|
||||
<span *ngIf="indicator.description">
|
||||
{{indicator.description}}
|
||||
|
@ -96,16 +101,18 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<div class="disable-sortable uk-sortable-nodrag uk-width-1-1">
|
||||
<div class="uk-grid uk-grid-small" uk-grid>
|
||||
<div class="uk-width-1-4@xl uk-width-1-3@l uk-width-1-2@m uk-width-1-1">
|
||||
<div class="uk-width-medium">
|
||||
<div class="uk-card uk-card-default uk-card-body clickable" (click)="editNumberIndicatorOpen(number)">
|
||||
<h5 class="uk-text-bold">
|
||||
<h6 class="uk-text-bold uk-text-center">
|
||||
Create a new number Indicator
|
||||
</h5>
|
||||
</h6>
|
||||
<div class="uk-flex uk-flex-center uk-text-secondary uk-margin-large-top">
|
||||
<icon name="add" ratio="5"></icon>
|
||||
<icon name="add" ratio="4"></icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -165,9 +172,11 @@
|
|||
<div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="visibilityOptions; context:{indicator: indicator, sectionId: chart._id}"></ng-container>
|
||||
<div [attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'"
|
||||
<div
|
||||
[attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'"
|
||||
class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable">
|
||||
<i [class]="exportLoading ? 'uk-disabled ' : ' '" uk-icon="more-vertical" (click)="$event.stopPropagation();$event.preventDefault()"></i>
|
||||
<i [class]="exportLoading ? 'uk-disabled ' : ' '" uk-icon="more-vertical"
|
||||
(click)="$event.stopPropagation();$event.preventDefault()"></i>
|
||||
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
|
||||
<ul class="uk-nav uk-dropdown-nav">
|
||||
<li *ngIf="!editing"><a
|
||||
|
@ -212,8 +221,9 @@
|
|||
</div>
|
||||
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
|
||||
</div>
|
||||
<div *ngIf="indicator.description || indicator.additionalDescription" class="uk-overlay uk-position-bottom">
|
||||
<div class="uk-padding-small multi-line-ellipsis lines-3">
|
||||
<div *ngIf="indicator.description || indicator.additionalDescription"
|
||||
class="uk-overlay uk-position-bottom">
|
||||
<div class="uk-padding multi-line-ellipsis lines-3">
|
||||
<p class="uk-margin-remove">
|
||||
<span *ngIf="indicator.description">
|
||||
{{indicator.description}}
|
||||
|
@ -251,7 +261,6 @@
|
|||
<ng-container *ngTemplateOutlet="new_section; context:{type: 'chart'}"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<modal-alert #editNumberModal
|
||||
[large]="true"
|
||||
(alertOutput)="saveIndicator()"
|
||||
|
@ -275,10 +284,10 @@
|
|||
placeholder="Select a status"
|
||||
label="Visibility" [options]="stakeholderUtils.visibility" type="select">
|
||||
</div>
|
||||
<div dashboard-input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('width')"
|
||||
<!--<div dashboard-input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('width')"
|
||||
type="select" [options]="indicatorUtils.indicatorSizes"
|
||||
placeholder="Select a size" label="Number Size">
|
||||
</div>
|
||||
</div>-->
|
||||
<div *ngIf="numberIndicatorPaths" formArrayName="indicatorPaths">
|
||||
<div *ngFor="let indicatorPath of numberIndicatorPaths.controls; let i=index"
|
||||
[formGroup]="indicatorPath">
|
||||
|
@ -293,7 +302,7 @@
|
|||
</div>
|
||||
<div *ngIf="showCheckForSchemaEnhancements" class=" uk-width-1-1 ">
|
||||
<div class="uk-alert uk-alert-warning">
|
||||
There are schema enchancements that can be applied in this query. <a
|
||||
There are schema enhancements that can be applied in this query. <a
|
||||
(click)="indicatorPath.get('url').setValue(indicatorUtils.applySchemaEnhancements(indicatorPath.get('url').value)); indicatorPath.get('url').markAsDirty()">Apply
|
||||
now</a>
|
||||
</div>
|
||||
|
@ -555,8 +564,10 @@
|
|||
Are you sure you want to proceed?
|
||||
</modal-alert>-->
|
||||
<ng-template #visibilityOptions let-indicator="indicator" let-sectionId="sectionId">
|
||||
<span [attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'"
|
||||
class="uk-position-top-left uk-margin-small-left uk-margin-small-top visibility" [class]="exportLoading ? '' : ' clickable '">
|
||||
<span
|
||||
[attr.uk-tooltip]="exportLoading ? 'title:Edit is disabled, while exporting indicators; cls:uk-active' : 'cls: uk-invisible'"
|
||||
class="uk-position-top-left uk-margin-small-left uk-margin-small-top visibility"
|
||||
[class]="exportLoading ? '' : ' clickable '">
|
||||
<span [class]="exportLoading ? 'uk-disabled ' : ' '" class="clickable color">
|
||||
<icon [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"></icon>
|
||||
</span>
|
||||
|
|
|
@ -436,16 +436,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
|||
return this.chartIndicatorFb.get('indicatorPaths') as FormArray;
|
||||
}
|
||||
|
||||
public getNumberClassBySize(size: IndicatorSize) {
|
||||
if (size === 'small') {
|
||||
return 'uk-width-1-4@xl uk-width-1-3@l uk-width-1-2@m uk-width-1-1';
|
||||
} else if (size === 'medium') {
|
||||
return 'uk-width-1-3@l uk-width-1-2@m uk-width-1-1';
|
||||
} else {
|
||||
return 'uk-width-1-2@l uk-width-1-1@m uk-width-1-1';
|
||||
}
|
||||
}
|
||||
|
||||
public getChartClassBySize(size: IndicatorSize) {
|
||||
if (size === 'small') {
|
||||
return 'uk-width-1-3@xl uk-width-1-2@m uk-width-1-1';
|
||||
|
|
|
@ -1 +1 @@
|
|||
Subproject commit 363790356aeb20339fab6d36516864ab44931dd7
|
||||
Subproject commit 443ef4d544d370c698ed0856481b71e489a044d8
|
|
@ -1 +1 @@
|
|||
Subproject commit 72f3272e41d93e82042a293e8e85493fe8cfe6c2
|
||||
Subproject commit 8f656664973f82d9f6f0228968a77643964da805
|
Loading…
Reference in New Issue