Add new uikit version. Change sticky in monitor page

2022-03-14 18:36:50 +02:00 · 2022-03-14 18:36:50 +02:00 · 1f653c10d5
parent 586b28aeb3
commit 1f653c10d5
8 changed files with 36 additions and 71 deletions
--- a/angular.json
+++ b/angular.json
@ -50,9 +50,8 @@
              "src/material.scss"
            ],
            "scripts": [
-              "src/assets/common-assets/common/jquery.js",
-              "src/assets/common-assets/common/uikit.min.js",
-              "src/assets/common-assets/common/uikit-icons.min.js",
+              "src/assets/openaire-theme/js/uikit.min.js",
+              "src/assets/openaire-theme/js/uikit-icons.min.js",
              "node_modules/jquery/dist/jquery.js"
            ]
          },
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -273,12 +273,12 @@ export class AppComponent implements OnInit, OnDestroy {
      this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {}));
    }
    if (this.stakeholder) {
-      if (!this.hasAdminMenu) {
+      if (!this.hasAdminMenu && this.isFrontPage) {
        this.menuHeader = {
          route: "/" + this.stakeholder.alias,
          url: null,
          title: this.stakeholder.name,
-          logoUrl: 'assets/common-assets/logo-services/monitor/small-inverted.svg',
+          logoUrl: 'assets/common-assets/logo-services/monitor/inverted.svg',
          logoSmallUrl: "assets/common-assets/logo-services/monitor/small-inverted.svg",
          position: 'center',
          badge: true,
@ -351,8 +351,8 @@ export class AppComponent implements OnInit, OnDestroy {
          route: null,
          url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu',
          title: "Monitor",
-          logoUrl: 'assets/common-assets/logo-large-monitor.png',
-          logoSmallUrl: "assets/common-assets/logo-small-monitor.png",
+          logoUrl: 'assets/common-assets/logo-services/monitor/main.svg',
+          logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg",
          position: 'left',
          badge: true,
          stickyAnimation: true,
--- a/src/app/monitor/monitor.component.html
+++ b/src/app/monitor/monitor.component.html
@ -39,11 +39,12 @@
 </ng-template>
 <div page-content (stickyEmitter)="stickyPageHeader = $event">
  <div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
-      <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-grid uk-flex-middle uk-margin-top" [class.uk-margin-medium-top]="!stickyPageHeader" uk-grid>
+        <img [class.uk-hidden]="!stickyPageHeader" [src]="stakeholder | logoUrl" class="uk-width-xsmall">
+        <img [class.uk-hidden]="stickyPageHeader" [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 class="uk-margin-remove uk-text-primary-gradient uk-text-bold" [class.uk-text-large]="!stickyPageHeader">Dashboard</div>
+          <h1 class="uk-h4 uk-margin-remove" [class.uk-h6]="stickyPageHeader">{{stakeholder.name}}</h1>
        </div>
      </div>
      <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-margin">
@ -51,7 +52,8 @@
          <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)">
+              <a [routerLink]="['/', stakeholder.alias, activeTopic.alias, category.alias]"
+                 [queryParams]="queryParams">
                <span class="title">{{category.name}}</span>
              </a>
            </li>
@ -70,11 +72,12 @@
        </div>-->
      </div>
      <div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right">
-        <ul class="uk-subnav uk-subnav-pill">
+        <ul class="uk-subnav uk-subnav-pill-alt">
          <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)"
+              <a [routerLink]="['/', stakeholder.alias, activeTopic.alias, activeCategory.alias, subCategory.alias]"
+                 [queryParams]="queryParams"
                 class="uk-margin-remove-bottom"
              ><span>{{subCategory.name}}</span></a>
            </li>
@ -180,22 +183,18 @@
                        <div *ngIf="properties.environment === 'development'">
                          Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}}  out of
                          {{countSelectedFilters()}}</div>
-                        <iframe *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !==
-                      'image'"
+                        <iframe *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
                                [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
-                                [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
+                                class="uk-width-1-1 uk-blend-multiply" [ngClass]="'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>
-                        <!--                                        {{chartsActiveType.get(i).safeResourceUrl}}-->
-                        <!--                    <a [href]="chartsActiveType.get(i).safeResourceUrl" target="_blank" > ChartuURL</a>-->
                        <img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
                             [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
-                             [class]="' uk-width-1-1 uk-height-' +
-                        (indicator.height?indicator.height.toLowerCase():'medium')">
-                        <!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
+                             class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
                      </div>
+                      <!-- TODO Check description-->
                      <div *ngIf="indicator.description || indicator.additionalDescription"
                           class="uk-overlay uk-position-bottom">
                        <div class="uk-padding multi-line-ellipsis lines-3">
--- a/src/app/monitor/monitor.component.ts
+++ b/src/app/monitor/monitor.component.ts
@ -158,7 +158,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
              }
              if (this.stakeholder.type == "funder") {
                // this.filters.push({title: "Co-funded research outcomes",filterId: "co-funded",originalFilterId: "co-funded", countSelectedValues: 0,
-                //   values:[{name: "true", id: "co-funded", selected:  false, number: 0}, {name: "false", id: "no-co-funded", selected:  false, number: 0}]
+                //   values:[{fname: "true", id: "co-funded", selected:  false, number: 0}, {name: "false", id: "no-co-funded", selected:  false, number: 0}]
                //   ,filterOperator: "or", valueIsExact: true, filterType: "radio", radioValue:""});
                this.filters.push({
                  title: "Co-funded", filterId: "co-funded", originalFilterId: "co-funded", countSelectedValues: 0,
@ -209,7 +209,6 @@ export class MonitorComponent implements OnInit, OnDestroy {
        } else {
          if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
            if (this.piwikSiteId) {
-              console.debug(this.piwikSiteId)
              this.subscriptions.push(this._piwikService.trackView(this.properties, this.title, this.piwikSiteId).subscribe());
            }
          }
@ -499,12 +498,6 @@ export class MonitorComponent implements OnInit, OnDestroy {
    this._router.navigate(['/error'], {queryParams: {'page': this._router.url}});
  }
  
-  public navigateTo(stakeholder: string, topic: string, category: string = null, subcategory: string = null) {
-    let url = stakeholder + '/' + topic + ((category) ? ('/'
-      + category) : '') + ((subcategory) ? ('/' + subcategory) : '');
-    return this._router.navigate([url], {queryParams: this.queryParams});
-  }
-  
  public quote(param: string): string {
    return StringUtils.quote(param);
  }
@ -518,42 +511,19 @@ export class MonitorComponent implements OnInit, OnDestroy {
  }
  
  public isPublicOrIsMember(visibility: Visibility): boolean {
-    if (visibility == "PRIVATE" || (this.isViewPublic && visibility != "PUBLIC")) {
-      return false;
-    }
-    return true;
+    return !(visibility == "PRIVATE" || (this.isViewPublic && visibility != "PUBLIC"));
  }
  
  public countSubCategoriesToShow(category: Category): number {
-    let counter = 0;
-    for (let sub of category.subCategories) {
-      if (this.isPublicOrIsMember(sub.visibility)) {
-        counter++;
-      }
-    }
-    return counter;
+    return category.subCategories.filter(subCategory => this.isPublicOrIsMember(subCategory.visibility)).length;
  }
  
  public countSectionsWithIndicatorsToShow(sections: Section[]):number {
-    let counter = 0;
-    sections.forEach(section => {
-      section.indicators.forEach(indicator => {
-        if (this.isPublicOrIsMember(indicator.visibility)) {
-          counter++;
-        }
-      });
-    });
-    return counter;
+    return sections.map(section => this.countIndicatorsToShow(section.indicators)).reduce((sum, current) => sum + current, 0);
  }
  
  public countIndicatorsToShow(indicators: Indicator[]): number {
-    let counter = 0;
-    indicators.forEach(indicator => {
-      if (this.isPublicOrIsMember(indicator.visibility)) {
-        counter++;
-      }
-    });
-    return counter;
+    return indicators.filter(indicator => this.isPublicOrIsMember(indicator.visibility)).length;
  }
  
  public get feedback() {
--- a/src/app/openaireLibrary
+++ b/src/app/openaireLibrary
@ -1 +1 @@
-Subproject commit c49a79c79835449f752a0a7ffea13eb7b41cd3e5
+Subproject commit 4ccabced6dd8624a0c7cde617891cca4d10e0751
--- a/src/assets/dashboard-theme
+++ b/src/assets/dashboard-theme
@ -1 +1 @@
-Subproject commit 6f63344329bd6561ddc15f44c31c98e604e8da77
+Subproject commit 1984b52dd48a7454c72a5d6ec840eef153a7c167
--- a/src/assets/monitor-dashboard-custom.css
+++ b/src/assets/monitor-dashboard-custom.css
@ -35,18 +35,15 @@
  --button-secondary-color-hover: var(--light-color);
  --button-secondary-border-color-hover: transparent;

-  /* Backgrounds */
-  --primary-background: #2C2C2C;
-  --primary-background-image: none;
-  --secondary-background: var(--monitor-color);
-  --secondary-background-image:none;
-
  /* Fonts */
-  --font-primary-color: var(--monitor-color);
-  --font-gradient-color: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
+  --text-primary-color: var(--monitor-color);
+  --text-gradient-color: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);

  /* List */
  --list-disc-color: var(--monitor-color);
+
+  /* Pills */
+  --pill-alt-background-active-image: linear-gradient(122deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);;
 }

 /*}*/
--- a/src/assets/openaire-theme
+++ b/src/assets/openaire-theme
@ -1 +1 @@
-Subproject commit d9750df104e9054241493465257cb6dfe7a0e774
+Subproject commit de51fea2dd3c8a64fc3c68ed29a9aa8f71034a54