MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

[irish-monitor] change the overlay functionality of the indicators based on the new irish-monitors overlay, update submodules

This commit is contained in:
Alex Martzios 2023-12-18 13:52:18 +02:00
parent caa99db227
commit 0145245206
5 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/app/monitor/monitor.component.html
View File

@ -103,7 +103,7 @@
<div *ngIf="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)"> <div *ngIf="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative" <div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"> [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div *ngIf="!indicator.descriptionOverlay"> <div *ngIf="!indicator.overlay">
<div <div
class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div> class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
<div class="number uk-text-small uk-text-bold"> <div class="number uk-text-small uk-text-bold">
@ -114,7 +114,7 @@
<div *ngIf="indicator.description || indicator.additionalDescription" <div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right uk-visible@m"> class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right uk-visible@m">
<a class="uk-display-inline-block uk-button uk-button-link" uk-tooltip="Note" <a class="uk-display-inline-block uk-button uk-button-link" uk-tooltip="Note"
(click)="toggleDescriptionOverlay($event, indicator)"> (click)="toggleOverlay($event, indicator, 'desc')">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon> <icon name="analytics" type="outlined" [flex]="true"></icon>
</span> </span>
@ -122,12 +122,12 @@
</div> </div>
</div> </div>
<div <div
*ngIf="indicator.descriptionOverlay && (indicator.description || indicator.additionalDescription)" *ngIf="indicator.overlay && (indicator.description || indicator.additionalDescription)"
click-outside-or-esc class="uk-overflow-auto" click-outside-or-esc class="uk-overflow-auto"
(clickOutside)="closeDescriptionOverlay($event, indicator)"> (clickOutside)="closeOverlay($event, indicator, 'desc')">
<div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right"> <div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right">
<a class="uk-display-inline-block uk-button uk-button-link" <a class="uk-display-inline-block uk-button uk-button-link"
(click)="toggleDescriptionOverlay($event, indicator)"> (click)="toggleOverlay($event, indicator, 'desc')">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<icon name="close" type="outlined" [flex]="true"></icon> <icon name="close" type="outlined" [flex]="true"></icon>
</span> </span>
@ -154,7 +154,7 @@
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
<div *ngIf="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)"> <div *ngIf="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
<div [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"> <div [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div *ngIf="!indicator.descriptionOverlay"> <div *ngIf="!indicator.overlay">
<div <div
class="uk-text-xsmall uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div> class="uk-text-xsmall uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
<div class="number uk-text-small uk-text-bold"> <div class="number uk-text-small uk-text-bold">
@ -212,23 +212,22 @@
class="uk-width-1-1 uk-blend-multiply" class="uk-width-1-1 uk-blend-multiply"
[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"> [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
</div> </div>
<div *ngIf="indicator.description || indicator.additionalDescription" <div class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m">
class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m"> <a *ngIf="indicator.description || indicator.additionalDescription"
<a class="uk-display-inline-block uk-button uk-button-text" class="uk-display-inline-block uk-button uk-button-text"
(click)="toggleDescriptionOverlay($event, indicator)"> (click)="toggleOverlay($event, indicator, 'desc')">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon> <icon name="analytics" type="outlined" [flex]="true"></icon>
<span class="uk-margin-small-left">Note</span> <span class="uk-margin-small-left">Note</span>
</span> </span>
</a> </a>
</div> </div>
<div *ngIf="indicator.descriptionOverlay && (indicator.description || indicator.additionalDescription)" <div *ngIf="indicator.overlay" class="indicator-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center"> <div *ngIf="descriptionOverlay" class="inner" click-outside-or-esc
<div class="inner" click-outside-or-esc (clickOutside)="closeOverlay($event, indicator, 'desc')">
(clickOutside)="closeDescriptionOverlay($event, indicator)">
<div class="uk-padding-small"> <div class="uk-padding-small">
<div class="uk-flex uk-flex-right"> <div class="uk-flex uk-flex-right">
<button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, indicator)"> <button class="uk-close uk-icon" (click)="toggleOverlay($event, indicator, 'desc')">
<icon name="close" ratio="1"></icon> <icon name="close" ratio="1"></icon>
</button> </button>
</div> </div>

2
src/app/monitor/monitor.component.less
View File

@ -6,7 +6,7 @@
} }
} }
.indicator-description { .indicator-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit edda550b6374d3282471407f78db6a5f763bf80e Subproject commit 52d63ece254ac132f6b42f9fe6ac804a651cfa39

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit 6bb1e61b059bef1bff3bfb0611b0df46f7840426 Subproject commit afde9cf3fa4722e8559c5ce4da6800edde283546

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit 5e8c1addb1ebfa508aac8cb9540a755940c95b79 Subproject commit 821f1e658b1da0dbf7c3a8374398f7eef29cd1f1