From 586b28aeb34ce7cb7596bfb044411a6a190b0dd5 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Fri, 11 Mar 2022 01:09:23 +0200
Subject: [PATCH] Add logoUrl in header of monitor page and hide it if header
 is sticky

---
 src/app/app-routing.module.ts          |  3 +-
 src/app/app.component.ts               |  2 +-
 src/app/monitor/monitor.component.html | 87 +++++++++++++++-----------
 src/app/monitor/monitor.component.ts   |  1 +
 src/app/monitor/monitor.module.ts      |  4 +-
 src/app/openaireLibrary                |  2 +-
 src/app/topic/topic.component.html     | 49 +++++++--------
 src/assets/common-assets               |  2 +-
 src/assets/dashboard-theme             |  2 +-
 src/assets/openaire-theme              |  2 +-
 10 files changed, 84 insertions(+), 70 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 508c36c..c1a2c1d 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -60,8 +60,7 @@ const routes: Routes = [
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, {
-    preloadingStrategy: PreloadAllModules,
-    onSameUrlNavigation: "reload"
+    preloadingStrategy: PreloadAllModules
   })],
   exports: [RouterModule]
 })
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 6cdfeb1..eb35cf8 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -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 {
diff --git a/src/app/monitor/monitor.component.html b/src/app/monitor/monitor.component.html
index 91e1ddd..7f702f6 100644
--- a/src/app/monitor/monitor.component.html
+++ b/src/app/monitor/monitor.component.html
@@ -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"
diff --git a/src/app/monitor/monitor.component.ts b/src/app/monitor/monitor.component.ts
index 0879655..efc8252 100644
--- a/src/app/monitor/monitor.component.ts
+++ b/src/app/monitor/monitor.component.ts
@@ -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,
diff --git a/src/app/monitor/monitor.module.ts b/src/app/monitor/monitor.module.ts
index b34af8d..62c0e6e 100644
--- a/src/app/monitor/monitor.module.ts
+++ b/src/app/monitor/monitor.module.ts
@@ -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
diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary
index 53a0cd7..c49a79c 160000
--- a/src/app/openaireLibrary
+++ b/src/app/openaireLibrary
@@ -1 +1 @@
-Subproject commit 53a0cd733b074f967aa0b39749273762c6074e59
+Subproject commit c49a79c79835449f752a0a7ffea13eb7b41cd3e5
diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html
index 7c34f4b..4022c2f 100644
--- a/src/app/topic/topic.component.html
+++ b/src/app/topic/topic.component.html
@@ -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">
diff --git a/src/assets/common-assets b/src/assets/common-assets
index c63acde..b7ebcb7 160000
--- a/src/assets/common-assets
+++ b/src/assets/common-assets
@@ -1 +1 @@
-Subproject commit c63acdeb5aae5d89d83c4300d8a4059ac6812afd
+Subproject commit b7ebcb75131a4bd5fc956f540c19f3ed4bedba1b
diff --git a/src/assets/dashboard-theme b/src/assets/dashboard-theme
index c02b70a..6f63344 160000
--- a/src/assets/dashboard-theme
+++ b/src/assets/dashboard-theme
@@ -1 +1 @@
-Subproject commit c02b70a5a2548f1fb5f87e90e565356af3541271
+Subproject commit 6f63344329bd6561ddc15f44c31c98e604e8da77
diff --git a/src/assets/openaire-theme b/src/assets/openaire-theme
index a6fbd5f..d9750df 160000
--- a/src/assets/openaire-theme
+++ b/src/assets/openaire-theme
@@ -1 +1 @@
-Subproject commit a6fbd5fdba27493d9b5bd59d92b632f08c7dbb96
+Subproject commit d9750df104e9054241493465257cb6dfe7a0e774