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

Add logoUrl in header of monitor page and hide it if header is sticky

This commit is contained in:
Konstantinos Triantafyllou 2022-03-11 01:09:23 +02:00
parent 885a57f47c
commit 586b28aeb3
10 changed files with 84 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/app-routing.module.ts
View File

@ -60,8 +60,7 @@ const routes: Routes = [
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes, { imports: [RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules, preloadingStrategy: PreloadAllModules
onSameUrlNavigation: "reload"
})], })],
exports: [RouterModule] exports: [RouterModule]
}) })

2
src/app/app.component.ts
View File

@ -342,7 +342,7 @@ export class AppComponent implements OnInit, OnDestroy {
} }
} }
this.specialSideBarMenuItem = new MenuItem("back", "Manage profiles", "", "/admin", false, [], null, {}); this.specialSideBarMenuItem = new MenuItem("back", "Manage profiles", "", "/admin", false, [], null, {});
this.specialSideBarMenuItem.icon = '<span class="uk-icon-button small uk-icon uk-button-secondary">' + arrow_left.data + '</span>'; // '<span class="uk-icon-button uk-icon portal-button " uk-icon="chevron-left"></span>'; this.specialSideBarMenuItem.icon = '<span class="uk-icon-button uk-icon uk-button-secondary uk-flex uk-flex-center">' + arrow_left.data + '</span>'; // '<span class="uk-icon-button uk-icon portal-button " uk-icon="chevron-left"></span>';
this.specialSideBarMenuItem.customClass = 'uk-text-uppercase uk-text-bold uk-text-secondary'; this.specialSideBarMenuItem.customClass = 'uk-text-uppercase uk-text-bold uk-text-secondary';
} }
} else { } else {

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

@ -37,12 +37,20 @@
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-template> </ng-template>
<div page-content> <div page-content (stickyEmitter)="stickyPageHeader = $event">
<div *ngIf="activeTopic && activeTopic.categories.length > 0" header> <div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-margin-medium"> <div [class.uk-hidden]="stickyPageHeader" class="uk-grid uk-flex-middle uk-margin-medium-top" uk-grid>
<img [src]="stakeholder | logoUrl" class="uk-width-small">
<div class="uk-width-expand">
<h2 class="uk-h6 uk-margin-remove uk-text-primary-gradient">Dashboard</h2>
<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
</div>
</div>
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-margin">
<ul class="uk-tab"> <ul class="uk-tab">
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category> <ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
<li *ngIf="isPublicOrIsMember(category.visibility)" [class.uk-active]="category.alias === activeCategory.alias"> <li *ngIf="isPublicOrIsMember(category.visibility)"
[class.uk-active]="category.alias === activeCategory.alias">
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)"> <a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)">
<span class="title">{{category.name}}</span> <span class="title">{{category.name}}</span>
</a> </a>
@ -113,10 +121,12 @@
</ng-template> </ng-template>
<ng-template #content> <ng-template #content>
<ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;"> <ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
<div *ngIf="countIndicatorsToShow(number.indicators) > 0" class="uk-grid uk-margin-large-bottom" uk-grid uk-height-match="target: .uk-card"> <div *ngIf="countIndicatorsToShow(number.indicators) > 0" class="uk-grid uk-margin-large-bottom" uk-grid
uk-height-match="target: .uk-card">
<h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5> <h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> <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 *ngIf="isPublicOrIsMember(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)"
class="uk-margin-bottom">
<div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center" <div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"> [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div class="uk-text-center"> <div class="uk-text-center">
@ -129,7 +139,8 @@
</div> </div>
<div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</div> <div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</div>
</div> </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-small"> <div class="uk-padding-small">
<div *ngIf="indicator.description"> <div *ngIf="indicator.description">
{{indicator.description}} {{indicator.description}}
@ -146,12 +157,14 @@
</ng-container> </ng-container>
<div [class.uk-margin-large-top]="activeSubCategory.numbers.length > 0"> <div [class.uk-margin-large-top]="activeSubCategory.numbers.length > 0">
<ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;"> <ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
<div *ngIf="countIndicatorsToShow(chart.indicators) > 0" class="uk-grid uk-margin-medium-bottom uk-flex uk-flex-middle" uk-height-match="target: .uk-card"> <div *ngIf="countIndicatorsToShow(chart.indicators) > 0"
class="uk-grid uk-margin-medium-bottom uk-flex uk-flex-middle" uk-height-match="target: .uk-card">
<h5 *ngIf="chart.title" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5> <h5 *ngIf="chart.title" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index"> <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)" <div *ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
[ngClass]="getChartClassBySize(indicator.width)" class="uk-margin-bottom"> [ngClass]="getChartClassBySize(indicator.width)" class="uk-margin-bottom">
<div class="uk-card uk-card-default" [class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"> <div class="uk-card uk-card-default"
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
<div class="uk-card-body uk-text-center"> <div class="uk-card-body uk-text-center">
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom "> <h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
<div>{{indicator.name + " "}}</div> <div>{{indicator.name + " "}}</div>
@ -173,7 +186,8 @@
[class]="' uk-width-1-1 uk-height-' + [class]="' uk-width-1-1 uk-height-' +
(indicator.height?indicator.height.toLowerCase():'medium')"></iframe> (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== <div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !==
'image'" class="uk-alert uk-alert-danger uk-text-center">I frames preview is disabled</div> 'image'" class="uk-alert uk-alert-danger uk-text-center">I frames preview is disabled
</div>
<!-- {{chartsActiveType.get(i).safeResourceUrl}}--> <!-- {{chartsActiveType.get(i).safeResourceUrl}}-->
<!-- <a [href]="chartsActiveType.get(i).safeResourceUrl" target="_blank" > ChartuURL</a>--> <!-- <a [href]="chartsActiveType.get(i).safeResourceUrl" target="_blank" > ChartuURL</a>-->
<img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'" <img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
@ -259,7 +273,8 @@
selection cannot be selection cannot be
applied to a chart, that chart will appear grayed-out.</i></div> applied to a chart, that chart will appear grayed-out.</i></div>
<div <div
*ngIf="!user" class="uk-margin-top uk-alert uk-alert-warning"> Sign in to apply filters</div> *ngIf="!user" class="uk-margin-top uk-alert uk-alert-warning"> Sign in to apply filters
</div>
<ul *ngIf="user" class="uk-list uk-list-divider uk-margin-medium"> <ul *ngIf="user" class="uk-list uk-list-divider uk-margin-medium">
<li> <li>
<range-filter [filter]="periodFilter" yearMin="2000" [yearMax]="currentYear" [mandatoryRange]="true" <range-filter [filter]="periodFilter" yearMin="2000" [yearMax]="currentYear" [mandatoryRange]="true"

1
src/app/monitor/monitor.component.ts
View File

@ -76,6 +76,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
privateStakeholder = false; privateStakeholder = false;
public keyword: FormControl; public keyword: FormControl;
public statsUpdateDate: Date; public statsUpdateDate: Date;
public stickyPageHeader: boolean = false;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,

4
src/app/monitor/monitor.module.ts
View File

@ -24,12 +24,14 @@ import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/p
import {IconsService} from '../openaireLibrary/utils/icons/icons.service'; import {IconsService} from '../openaireLibrary/utils/icons/icons.service';
import {IconsModule} from '../openaireLibrary/utils/icons/icons.module'; import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
import {incognito, print} from "../openaireLibrary/utils/icons/icons"; import {incognito, print} from "../openaireLibrary/utils/icons/icons";
import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, RouterModule, ErrorMessagesModule, CommonModule, FormsModule, RouterModule, ErrorMessagesModule,
HelperModule, Schema2jsonldModule, SEOServiceModule, MonitorRoutingModule, SideBarModule, InputModule, HelperModule, Schema2jsonldModule, SEOServiceModule, MonitorRoutingModule, SideBarModule, InputModule,
UserMiniModule, ClickModule, BottomModule, RangeFilterModule, SearchFilterModule, PageContentModule, IconsModule UserMiniModule, ClickModule, BottomModule, RangeFilterModule, SearchFilterModule, PageContentModule, IconsModule,
LogoUrlPipeModule
], ],
declarations: [ declarations: [
MonitorComponent MonitorComponent

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 53a0cd733b074f967aa0b39749273762c6074e59 Subproject commit c49a79c79835449f752a0a7ffea13eb7b41cd3e5

45
src/app/topic/topic.component.html
View File

@ -25,9 +25,9 @@
</span> </span>
<span [class.uk-text-center]="open" <span [class.uk-text-center]="open"
[class.uk-text-truncate]="!open" [class.uk-width-3-5]="!open">{{topic.name}}</span> [class.uk-text-truncate]="!open" [class.uk-width-3-5]="!open">{{topic.name}}</span>
<span class="uk-invisible-hover color" <span class="uk-invisible-hover"
(click)="$event.stopPropagation();$event.preventDefault()"> (click)="$event.stopPropagation();$event.preventDefault()">
<span class="uk-icon more" uk-icon="more-vertical"></span> <a class="uk-link-reset"><icon [flex]="true" name="more_vert" ratio="1.2"></icon></a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false"> <div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editTopicOpen(i); hide(element)">Edit</a></li> <li><a (click)="editTopicOpen(i); hide(element)">Edit</a></li>
@ -51,23 +51,20 @@
</a> </a>
</li> </li>
</ng-template> </ng-template>
<li class="uk-margin-top" [class.uk-visible-toggle]="open"> <li [class.uk-visible-toggle]="open">
<span (click)="editTopicOpen(-1); $event.preventDefault()" <a (click)="editTopicOpen(-1); $event.preventDefault()"
class="clickable uk-flex uk-flex-middle uk-flex-center"> class="uk-link-reset uk-flex uk-flex-middle uk-flex-center uk-width-1-1">
<span class="uk-icon-button small portal-icon-button"> <span class="uk-icon-button">
<icon name="add"></icon> <icon name="add"></icon>
</span> </span>
<span [class.uk-hidden-hover]="stakeholder.topics.length > 0" class="space" [class.uk-hidden]="!open"> Create new topic</span> <span [class.uk-hidden-hover]="stakeholder.topics.length > 0" class="uk-margin-small-left" [class.uk-hidden]="!open"> Create new topic</span>
</span> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div *ngIf="stakeholder && stakeholder.topics.length > 0" class="uk-position-bottom uk-margin-bottom"> <div *ngIf="stakeholder && stakeholder.topics.length > 0" class="uk-position-bottom uk-margin-bottom">
<div class="uk-flex uk-flex-center"> <div class="uk-flex uk-flex-center">
<!--<a class="portal-icon-button uk-icon-button icon-button-small uk-margin-right" uk-tooltip="Help"> <a class="uk-icon-button" uk-tooltip="Preview">
<i uk-icon="icon:question;ratio:0.7" class="uk-icon"></i>
</a>-->
<a class="portal-icon-button uk-icon-button small" uk-tooltip="Preview">
<icon name="preview" [ratio]="0.7"></icon> <icon name="preview" [ratio]="0.7"></icon>
</a> </a>
<div #element uk-dropdown="mode: click; pos: top-left; offset: 5; delay-hide: 0; flip: false" <div #element uk-dropdown="mode: click; pos: top-left; offset: 5; delay-hide: 0; flip: false"
@ -112,8 +109,8 @@
<span class="title"> {{category.name}}</span> <span class="title"> {{category.name}}</span>
</a> </a>
<span class="uk-invisible-hover" (click)="$event.stopPropagation();$event.preventDefault()"> <span class="uk-invisible-hover" (click)="$event.stopPropagation();$event.preventDefault()">
<span class="uk-icon clickable" uk-icon="more-vertical"></span> <a class="uk-link-reset"><icon [flex]="true" name="more_vert" ratio="1.2"></icon></a>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"> <div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editCategoryOpen(i); hide(element)">Edit</a></li> <li><a (click)="editCategoryOpen(i); hide(element)">Edit</a></li>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v> <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
@ -132,12 +129,12 @@
</li> </li>
</ng-template> </ng-template>
<li class="uk-visible-toggle"> <li class="uk-visible-toggle">
<span (click)="editCategoryOpen(); $event.preventDefault()" class="clickable"> <a (click)="editCategoryOpen(); $event.preventDefault()" class="uk-link-reset">
<span class="uk-icon-button small portal-icon-button"> <span class="uk-icon-button">
<icon name="add"></icon> <icon name="add"></icon>
</span> </span>
<span [class.uk-hidden-hover]="stakeholder.topics[topicIndex].categories.length > 0" class="space">Create new category</span> <span [class.uk-hidden-hover]="stakeholder.topics[topicIndex].categories.length > 0" class="space">Create new category</span>
</span> </a>
</li> </li>
</ul> </ul>
</div> </div>
@ -160,10 +157,10 @@
class="uk-margin-small-left"> class="uk-margin-small-left">
<span>{{subCategory.name}}</span> <span>{{subCategory.name}}</span>
</a> </a>
<span class="uk-invisible-hover uk-position-center-right color" <span class="uk-invisible-hover uk-position-center-right"
(click)="$event.stopPropagation();$event.preventDefault()"> (click)="$event.stopPropagation();$event.preventDefault()">
<a uk-icon="more-vertical"></a> <a class="uk-link-reset"><icon [flex]="true" name="more_vert" ratio="1.2"></icon></a>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 10; delay-hide: 0; flip: false"> <div #element uk-dropdown="mode: click; pos: bottom-left; offset: 10; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editSubCategoryOpen(i); hide(element)">Edit</a></li> <li><a (click)="editSubCategoryOpen(i); hide(element)">Edit</a></li>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v> <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
@ -189,12 +186,12 @@
</li> </li>
</ng-template> </ng-template>
<li class="uk-visible-toggle"> <li class="uk-visible-toggle">
<span (click)="editSubCategoryOpen(); $event.preventDefault()" class="clickable"> <a (click)="editSubCategoryOpen(); $event.preventDefault()" class="uk-link-reset">
<span class="uk-icon-button small portal-icon-button"> <span class="uk-icon-button">
<icon name="add"></icon> <icon name="add"></icon>
</span> </span>
<span [class.uk-hidden-hover]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories.length > 0" class="space">Create new subcategory</span> <span [class.uk-hidden-hover]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories.length > 0" class="space">Create new subcategory</span>
</span> </a>
</li> </li>
</ul> </ul>
<!--<div class="uk-grid uk-margin-medium" uk-grid> <!--<div class="uk-grid uk-margin-medium" uk-grid>
@ -250,7 +247,7 @@
</modal-alert> </modal-alert>
<ng-template #visibilityOptions let-type="type" let-i="i" let-visibility="visibility"> <ng-template #visibilityOptions let-type="type" let-i="i" let-visibility="visibility">
<span class="uk-invisible-hover" (click)="$event.stopPropagation();$event.preventDefault()"> <span class="uk-invisible-hover" (click)="$event.stopPropagation();$event.preventDefault()">
<icon [name]="stakeholderUtils.visibilityIcon.get(visibility)"></icon> <a class="uk-link-reset"><icon [name]="stakeholderUtils.visibilityIcon.get(visibility)"></icon></a>
<div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false"> <div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let v of stakeholderUtils.visibility" [class.uk-active]="visibility == v.value"> <li *ngFor="let v of stakeholderUtils.visibility" [class.uk-active]="visibility == v.value">

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit c63acdeb5aae5d89d83c4300d8a4059ac6812afd Subproject commit b7ebcb75131a4bd5fc956f540c19f3ed4bedba1b

2
src/assets/dashboard-theme

@ -1 +1 @@
Subproject commit c02b70a5a2548f1fb5f87e90e565356af3541271 Subproject commit 6f63344329bd6561ddc15f44c31c98e604e8da77

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit a6fbd5fdba27493d9b5bd59d92b632f08c7dbb96 Subproject commit d9750df104e9054241493465257cb6dfe7a0e774