MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 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({
imports: [RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules,
onSameUrlNavigation: "reload"
preloadingStrategy: PreloadAllModules
})],
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.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';
}
} else {

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

@ -37,18 +37,26 @@
</ng-container>
</ng-container>
</ng-template>
<div page-content>
<div page-content (stickyEmitter)="stickyPageHeader = $event">
<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">
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
<li *ngIf="isPublicOrIsMember(category.visibility)" [class.uk-active]="category.alias === activeCategory.alias">
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)">
<span class="title">{{category.name}}</span>
</a>
</li>
</ng-template>
</ul>
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
<li *ngIf="isPublicOrIsMember(category.visibility)"
[class.uk-active]="category.alias === activeCategory.alias">
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)">
<span class="title">{{category.name}}</span>
</a>
</li>
</ng-template>
</ul>
<!-- TODO add Print on the right side -->
<!--<div class="uk-width-auto@m uk-width-1-1 uk-flex uk-flex-center">
<a class="uk-text-uppercase uk-flex uk-flex-middle uk-flex-center">
@ -60,24 +68,24 @@
</button>
</a>
</div>-->
</div>
<div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right">
<ul class="uk-subnav uk-subnav-pill">
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
<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"
><span>{{subCategory.name}}</span></a>
</li>
</ng-template>
</ul>
</div>
<!-- TODO reconsider filters-->
<!--<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 *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right">
<ul class="uk-subnav uk-subnav-pill">
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
<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"
><span>{{subCategory.name}}</span></a>
</li>
</ng-template>
</ul>
</div>
<!-- TODO reconsider filters-->
<!--<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 inner>
<div [class.uk-padding]="!isSmallScreen" class="uk-padding-remove-vertical">
@ -113,10 +121,12 @@
</ng-template>
<ng-template #content>
<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>
<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"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div class="uk-text-center">
@ -129,7 +139,8 @@
</div>
<div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</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 *ngIf="indicator.description">
{{indicator.description}}
@ -146,12 +157,14 @@
</ng-container>
<div [class.uk-margin-large-top]="activeSubCategory.numbers.length > 0">
<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>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
[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">
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
<div>{{indicator.name + " "}}</div>
@ -173,7 +186,8 @@
[class]="' uk-width-1-1 uk-height-' +
(indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<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}}-->
<!-- <a [href]="chartsActiveType.get(i).safeResourceUrl" target="_blank" > ChartuURL</a>-->
<img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
@ -255,11 +269,12 @@
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>
</div>
<div *ngIf="user || countSelectedFilters() > 0 " class="uk-margin-small-top"><i
class="uk-text-muted uk-text-small"> If your filter
class="uk-text-muted uk-text-small"> If your filter
selection cannot be
applied to a chart, that chart will appear grayed-out.</i></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">
<li>
<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;
public keyword: FormControl;
public statsUpdateDate: Date;
public stickyPageHeader: boolean = false;
constructor(
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 {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
import {incognito, print} from "../openaireLibrary/utils/icons/icons";
import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule, ErrorMessagesModule,
HelperModule, Schema2jsonldModule, SEOServiceModule, MonitorRoutingModule, SideBarModule, InputModule,
UserMiniModule, ClickModule, BottomModule, RangeFilterModule, SearchFilterModule, PageContentModule, IconsModule
UserMiniModule, ClickModule, BottomModule, RangeFilterModule, SearchFilterModule, PageContentModule, IconsModule,
LogoUrlPipeModule
],
declarations: [
MonitorComponent

2
src/app/openaireLibrary

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

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

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