Add graph icon instead of file. Update all libraries

src/app/app.component.html

@@ -6,9 +6,13 @@
        [class.sidebar_mini]="!open && hasSidebar" [class.stakeholderPage]="isFrontPage">
     <navbar *ngIf="properties && hasHeader" [properties]="properties" portal="monitor_dashboard" [header]="menuHeader"
               [userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
-    <dashboard-sidebar *ngIf="stakeholder && isFrontPage && hasSidebar" [items]="sideBarItems" [activeItem]="activeTopic?activeTopic.alias:null"></dashboard-sidebar>
+    <div class="uk-background-default">
-    <dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" [specialMenuItem]="specialSideBarMenuItem"></dashboard-sidebar>
+      <dashboard-sidebar *ngIf="stakeholder && isFrontPage && hasSidebar" [items]="sideBarItems" [activeItem]="activeTopic?activeTopic.alias:null"></dashboard-sidebar>
-    <router-outlet></router-outlet>
+      <dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" [specialMenuItem]="specialSideBarMenuItem"></dashboard-sidebar>
+      <main>
+        <router-outlet></router-outlet>
+      </main>
+    </div>
     <bottom *ngIf="isFrontPage" [darkBackground]="false"
             [centered]="true" [properties]="properties" [showMenuItems]="true"></bottom>
     <role-verification *ngIf="stakeholder"

src/app/develop/develop.component.ts

@@ -19,11 +19,11 @@ import {StakeholderUtils} from "../utils/indicator-utils";
 				<div class="uk-section uk-container uk-container-large">
 					<div class="uk-grid uk-grid-large uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
 						<div class="uk-text-center uk-margin-large-top">
-							<div class="uk-icon-bg-shadow uk-margin-auto">
+							<div class="uk-icon-bg-shadow uk-icon-bg-shadow-large uk-margin-auto uk-text-primary-gradient">
-								<icon name="description" [flex]="true" ratio="2" visuallyHidden="For research outcomes"></icon>
+								<icon name="description" [flex]="true" ratio="2.5" type="outlined" visuallyHidden="For research outcomes"></icon>
 							</div>
 							<h3>For research outcomes</h3>
-							<div class="uk-margin-small-bottom">
+							<div class="uk-margin-bottom">
 								For research outcomes (publications, datasets, software and other research data) you can use the Selective Access APIs by adding the funder parameter.
 							</div>
 							<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
@@ -37,15 +37,15 @@ import {StakeholderUtils} from "../utils/indicator-utils";
 							<img src="assets/apis.svg" alt="">
 						</div>
 						<div class="uk-text-center uk-margin-large-top">
-							<div class="uk-icon-bg-shadow uk-margin-auto">
+							<div class="uk-icon-bg-shadow uk-icon-bg-shadow-large uk-margin-auto uk-text-primary-gradient">
-								<icon name="content_paste" [flex]="true" ratio="2" visuallyHidden="For projects"></icon>
+								<icon name="content_paste" [flex]="true" ratio="2.5" type="outlined" visuallyHidden="For projects"></icon>
 							</div>
 							<h3>For projects</h3>
-							<div class="uk-margin-small-bottom">
+							<div class="uk-margin-bottom">
 								For projects you can use the Selective Access APIs and the Bulk Access APIs.
 							</div>
 							<div class="uk-flex uk-flex-column uk-flex-center uk-flex-middle">\
-								<a class="uk-display-inline-block uk-text-uppercase uk-button-text uk-margin-small-bottom"
+								<a class="uk-display-inline-block uk-text-uppercase uk-button-text uk-margin-bottom"
 									href="https://graph.openaire.eu/develop/api.html" target="_blank">
 									<span class="uk-flex uk-flex-middle">
 										<span>Selective Access APIs</span>
@@ -65,7 +65,7 @@ import {StakeholderUtils} from "../utils/indicator-utils";
 					<div class="uk-grid uk-grid-large uk-child-width-1-2@m uk-child-width-1-1" uk-grid>
 						<div>
 							<div>Request examples for research outcomes:</div>
-							<ul class="uk-list uk-list-disc">
+							<ul class="uk-list uk-list-large uk-list-disc">
 								<li>
 									<span class="uk-text-bold">Access “Publications”</span><br>
 									<span class="uk-text-bold uk-margin-small-right">GET</span>
@@ -95,7 +95,7 @@ import {StakeholderUtils} from "../utils/indicator-utils";
 						</div>
 						<div>
 							<div>Request examples for projects:</div>
-							<ul class="uk-list uk-list-disc">
+							<ul class="uk-list uk-list-large uk-list-disc">
 							<li>
 								<span class="uk-text-bold">For the “Selective Access”</span><br>
 								<span class="uk-text-break">https://api.openaire.eu/search/projects?funder={{stakeholder.index_shortName}}</span>

src/app/methodology/methodology.component.ts

@@ -206,10 +206,10 @@ import {ActivatedRoute, Router} from "@angular/router";
               </ng-container>
             </my-tab>
           </my-tabs>
-          <div class="uk-margin-medium-top">
+          <div class="uk-margin-medium-top graph">
-            <img src="assets/common-assets/graph.svg">
+            <icon name="graph" customClass="uk-text-primary"></icon>
             <span class="uk-margin-small-left uk-text-baseline uk-text-muted">More information for <a
-                href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a>.</span>
+                href="https://graph.openaire.eu" class="uk-link">OpenAIRE Research Graph</a>.</span>
           </div>
 				</div>
 				<div id="how" class="uk-container uk-container-large uk-section uk-section-small uk-margin-large-top">

src/app/methodology/methodology.module.ts

@@ -6,6 +6,9 @@ import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRout
 import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
 import {HowModule} from "../openaireLibrary/monitor/how/how.module";
 import {TabsModule} from "../openaireLibrary/utils/tabs/tabs.module";
+import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
+import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
+import {graph} from "../openaireLibrary/utils/icons/icons";
 
 @NgModule({
   declarations: [MethodologyComponent],
@@ -15,9 +18,11 @@ import {TabsModule} from "../openaireLibrary/utils/tabs/tabs.module";
       component: MethodologyComponent,
       canDeactivate: [PreviousRouteRecorder]
     },
-  ]), PageContentModule, HowModule, TabsModule],
+  ]), PageContentModule, HowModule, TabsModule, IconsModule],
   exports: [MethodologyComponent]
 })
 export class MethodologyModule {
-
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([graph]);
+  }
 }

src/app/monitor/monitor.component.html

@@ -1,5 +1,4 @@
 <ng-template #selected_filters_pills let-margin="margin">
-  <!--  <div class="uk-grid uk-grid-small uk-text-small" uk-grid>-->
   <span *ngIf="periodFilter.selectedFromAndToValues.length > 0" class="uk-grid-margin">
         <a (click)="clearPeriodFilter()" [class]="((loading)?'  uk-disabled':'  ')+' uk-link-text '"> <span
             class="filter-tag" [class.uk-margin-small-left]="margin"
@@ -13,7 +12,6 @@
       <ng-container *ngFor="let value of filter.values; let i = index;  let end = last; ">
         <ng-container *ngIf="value.selected">
              <span class="uk-grid-margin">
-                          <!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
               <span class="filter-tag" [class.uk-margin-small-left]="margin" [title]="'Remove '+value.name"
                     (click)="value.selected = false; filter.radioValue=''; filter.countSelectedValues=
                     filter.countSelectedValues -1;
@@ -38,7 +36,6 @@
       </ng-container>
     </ng-container>
   </ng-container>
-  <!--  </div>-->
 </ng-template>
 <div page-content>
   <div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
@@ -76,10 +73,11 @@
         </ng-template>
       </ul>
     </div>
-    <div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small uk-margin-bottom uk-text-small">
+    <!-- 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>
   <div inner>
     <div [class.uk-padding]="!isSmallScreen" class="uk-padding-remove-vertical">
@@ -206,17 +204,17 @@
           </div>
           <div class="uk-margin-medium-top uk-flex hideInfo">
             <!-- Last Stats Date-->
-            <div class="uk-width-2-3@m uk-width-1-2">
+            <div class="uk-width-2-3@m uk-width-1-2 graph">
-              <img src="assets/common-assets/graph.svg" style="opacity: 0.4">
+              <icon name="graph" customClass="uk-text-primary"></icon>
-              <span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by <a
+              <span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by
-                  href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a></span>
+                <a href="https://graph.openaire.eu" class="uk-link">OpenAIRE Research Graph</a></span>
               <span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-muted">
                 . Last update of statistics in OpenAIRE: {{statsUpdateDate | date: 'MMM dd, yyyy'}}
               </span>
             </div>
             <!--Feedback-->
             <div class="uk-width-expand uk-text-right">
-              <span class="uk-text-muted">Send us your <a [href]="feedback" target="_self">feedback</a>.</span>
+              <span class="uk-text-muted">Send us your <a class="uk-link" [href]="feedback" target="_self">feedback</a>.</span>
             </div>
           </div>
         </ng-template>
@@ -240,9 +238,8 @@
     </svg>
   </i>
 </div>
-<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class=" uk-offcanvas filters_switcher"
+<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class="uk-offcanvas filters_switcher"
-     uk-offcanvas="flip:true" mode="slide" overlay="" style="z-index:982;">
+     uk-offcanvas="flip:true; overlay: true">
-
   <div class="uk-offcanvas-bar offcanvas-white">
     <div class="uk-float-right">
       <button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button>
@@ -279,15 +276,3 @@
     </div>
   </div>
 </div>
-
-<ng-template #description let-indicator="indicator">
-<span class="descriptionIcon"
-      *ngIf="(indicator.description && indicator.description.length > 0)
-                       || (indicator.additionalDescription && indicator.additionalDescription.length > 0)"
-      uk-icon="info"
-      [attr.uk-tooltip]="'title:<div class=\'uk-padding-small\'>'+
-  (indicator.description&& indicator.description.length > 0?indicator.description:'') +'<br>'+
-(indicator.additionalDescription && indicator.additionalDescription.length?indicator.additionalDescription:'')
-  +'</div>'">
-  </span>
-</ng-template>

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 52f1abfdbf8f6ba3a0467302eeec1c88842617cf
+Subproject commit 6fb5cf54ba1f0739ff956650d52adb0c1e5242be

src/assets/common-assets

@@ -1 +1 @@
-Subproject commit 4e99b0887c758579682eb1d9848d227e18f97799
+Subproject commit b5dcabf2668bb9230d6b0d77498e582834edbbab

src/assets/dashboard-theme

@@ -1 +1 @@
-Subproject commit d2e5d945cb51f6079f496445ba8fdaadc15d3ea6
+Subproject commit bf9be01a6c9e54a8c07353f32d8799696fdc24b3

src/assets/monitor-dashboard-custom.css

@@ -26,7 +26,7 @@
 
   /* Backgrounds */
   --primary-background: #2C2C2C;
-  --primary-background-image:none;
+  --primary-background-image: none;
   --secondary-background: var(--monitor-color);
   --secondary-background-image:none;
 

src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit e5410728a16312eca7bd11ebb6b8dc8777c072a3
+Subproject commit f4123f0969a438df43c953b07b5db7d471c6be91

src/styles.css

@@ -1,7 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 @import "assets/openaire-theme/css/import.css";
 @import "assets/common-assets/library.css";
-@import "assets/common-assets/common/custom.css";
+/*@import "assets/common-assets/common/custom.css";*/
 @import "assets/dashboard-theme/main.css";
 @import "assets/monitor-dashboard-custom.css";
 @import "assets/print.css";