[Monitor Dashboard|Trunk]

Merge branch to trunk (59477:59555 https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/branches/themeChange/monitor_dashboard)
Changes applied: remove theme css and classes, update with new admin UI



git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59556 d315682c-612b-4755-9ff5-7f18f6832af3

angular.json

@@ -27,6 +27,9 @@
               "node_modules/datatables.net-dt/css/jquery.dataTables.css"
             ],
             "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",
               "node_modules/jquery/dist/jquery.js",
               "node_modules/datatables.net/js/jquery.dataTables.js"
             ]
@@ -104,8 +107,10 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [
-              "node_modules/jquery/dist/jquery.js",
+              "src/assets/common-assets/common/jquery.js",
-              "node_modules/datatables.net/js/jquery.dataTables.js"
+              "src/assets/common-assets/common/uikit.min.js",
+              "src/assets/common-assets/common/uikit-icons.min.js",
+              "node_modules/jquery/dist/jquery.js"
             ],
             "styles": [
               "src/styles.css",

src/app/app-routing.module.ts

@@ -32,17 +32,29 @@ const routes: Routes = [
     data: {hasAdminMenu: true}
   },
   {
-    path: 'admin/:stakeholder/users',
+
-    loadChildren: './users/users.module#UsersModule',
+    path: 'admin/:stakeholder/general',
-    resolve: {envSpecific: EnvironmentSpecificResolver}
+    loadChildren: './manageStakeholder/manageStakeholder.module#ManageStakeholderModule',
+    resolve: {envSpecific: EnvironmentSpecificResolver},
+    data: {hasAdminMenu: true}
   },
   {
-    path: 'admin/:stakeholder',
+    path: 'admin/:stakeholder/users',
+    loadChildren: './users/users.module#UsersModule',
+    resolve: {envSpecific: EnvironmentSpecificResolver},
+    data: {hasAdminMenu: true}
+  },
+  {
+     path: 'admin/:stakeholder',
     loadChildren: './stakeholder/stakeholder.module#StakeholderModule',
     resolve: {envSpecific: EnvironmentSpecificResolver},
   },
   {
-    path: 'admin/:stakeholder/:topic',
+    path: 'admin/:stakeholder/indicators/:topic',
+    loadChildren: './topic/topic.module#TopicModule',
+    resolve: {envSpecific: EnvironmentSpecificResolver},
+  },
+  {  path: 'admin/:stakeholder/indicators',
     loadChildren: './topic/topic.module#TopicModule',
     resolve: {envSpecific: EnvironmentSpecificResolver},
   },

src/app/app.component.html

@@ -1,13 +1,14 @@
 <!--disable_transitions -->
 <div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar"
-     [class.sidebar_mini]="!open && hasMiniMenu && hasSidebar" [class.stakeholderPage]="isFrontPage">
+     [class.sidebar_mini]="!open && hasSidebar" [class.stakeholderPage]="isFrontPage">
-  <div *ngIf="hasHeader" id="header_main" [class.light_header]="isFrontPage" [class.header_full]="!hasSidebar">
+  <div *ngIf="hasHeader" id="header_main" [class.light_header]="isFrontPage" [class.header_full]="!hasSidebar"
-    <img
+       class=" " style="right: 0; top: 0; position: fixed; width: 100%; z-index:981;" >
+   <!-- <img
         *ngIf="((!open && !hasMiniMenu) || !hasSidebar) && (properties.environment === 'beta' || properties.environment === 'development')"
         class="badge"
         [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
-        [alt]="properties.environment">
+        [alt]="properties.environment">-->
-    <nav class="uk-navbar" [class.uk-light]="!isFrontPage">
+    <!--<nav class="uk-navbar" [class.uk-light]="!isFrontPage">
       <div *ngIf="stakeholder" class="uk-navbar-center">
         <schema2jsonld *ngIf="properties"  [URL]="properties.domain + properties.baseLink + '/' + stakeholder.alias"
                        [logoURL]="stakeholder.logoUrl" type="home"
@@ -16,12 +17,12 @@
                        [description]="stakeholder.name + ' monitoring dashboard'">
         </schema2jsonld>
         <ul class="uk-navbar-nav user_actions uk-padding uk-padding-remove-vertical  uk-padding-remove-right">
-          <!--<li>
+          &lt;!&ndash;<li>
             <a class="uk-logo uk-navbar-item uk-link uk-margin-left "
                [routerLink]="'/'+stakeholder.alias">
               <img *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl" class=" logo uk-responsive-height">
             </a>
-          </li>-->
+          </li>&ndash;&gt;
           <li>
             <a class="uk-logo uk-navbar-item uk-link   "
                [routerLink]="'/'+stakeholder.alias">
@@ -50,23 +51,23 @@
           </li>
         </ul>
       </div>
-    </nav>
+    </nav>-->
+<!--    <navbar *ngIf="properties && showMenu" portal="monitor" [onlyTop]=false [stakeholder]="stakeholder"-->
+<!--            [userMenuItems]=userMenuItems [menuItems]=menuItems [user]="user"-->
+<!--            [showMenu]=showMenu [properties]="properties"></navbar>-->
+    <navbar *ngIf="properties" [properties]="properties" portal="monitor_dashboard" [header]="menuHeader"
+
+            [userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
   </div>
   <dashboard-sidebar *ngIf="stakeholder && isFrontPage" [items]="sideBarItems"
                      [activeItem]="activeTopic?activeTopic.alias:null" [showHeader]=true
-                     [searchLink]="(properties.showContent)?properties.searchLinkToResults:null"
+                     [specialMenuItem]="specialSideBarMenuItem"
                      [searchParams]="createSearchParameters()"
                      [headerUrl]="properties.domain + properties.baseLink" queryParamsHandling="preserve"
   ></dashboard-sidebar>
-  <dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" headerName="Monitor"
+  <dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" headerName="Admin"
-                     headerDashboard="Administration Panel" [headerUrl]="properties.domain + properties.baseLink"
+                     headerDashboard="Administration Panel" [headerUrl]="properties.domain + properties.baseLink" [specialMenuItem]="specialSideBarMenuItem"
   ></dashboard-sidebar>
-  <div *ngIf="hasSidebar" id="hide_controls">
-    <div id="toggle" [class.sidebar_main_open]="open" (click)="toggleOpen($event)" class="uk-margin-auto">
-      <i class="material-icons">play_circle_filled</i>
-      <span *ngIf="open" class="uk-margin-small-left">Hide Controls</span>
-    </div>
-  </div>
   <router-outlet></router-outlet>
   <role-verification *ngIf="stakeholder && properties.environment === 'development'"
                      [id]="stakeholder.alias" [name]="stakeholder.name" [type]="stakeholder.type"></role-verification>

src/app/app.component.ts

@@ -7,7 +7,7 @@ import {UserManagementService} from "./openaireLibrary/services/user-management.
 import {StakeholderService} from "./openaireLibrary/monitor/services/stakeholder.service";
 import {BehaviorSubject, Subscriber} from "rxjs";
 import {LayoutService} from "./openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
-import {MenuItem} from "./openaireLibrary/sharedComponents/menu";
+import {MenuItem, RootMenuItem} from "./openaireLibrary/sharedComponents/menu";
 import {Stakeholder, Topic} from "./openaireLibrary/monitor/entities/stakeholder";
 import {LinksResolver} from "./search/links-resolver";
 
@@ -27,6 +27,9 @@ export class AppComponent implements OnInit, OnDestroy {
   isFrontPage: boolean = false;
   isViewPublic: boolean = false;
   sideBarItems: MenuItem[] = [];
+  specialSideBarMenuItem:MenuItem = null;
+  menuItems: RootMenuItem[] = [];
+  menuHeader =  { route: "/", url: null, title: "Default menu header", logoUrl: null, logoSmallUrl:null, position:'center', badge: false };
   userMenuItems: MenuItem[] = [new MenuItem("", "My profile", "", "", false, [], [], {})];
   adminMenuItems: MenuItem[] = [];
   stakeholder: Stakeholder = null;
@@ -95,8 +98,10 @@ export class AppComponent implements OnInit, OnDestroy {
               this.stakeholderService.getStakeholder(this.properties.monitorServiceAPIURL, params['stakeholder']).subscribe(stakeholder => {
                 if(stakeholder) {
                   this.stakeholder = stakeholder;
+                  this.buildMenu();
                   LinksResolver.setProperties(this.stakeholder.alias);
                   this.stakeholderService.setStakeholder(stakeholder);
+                  this.layoutService.setSmallScreen((this.innerWidth && this.innerWidth < 1219));
                   this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
                   if (isSearch) {
                     this.activeTopic = null;
@@ -110,13 +115,16 @@ export class AppComponent implements OnInit, OnDestroy {
                   this.stakeholderService.setStakeholder(null);
                   LinksResolver.resetProperties();
                   this.navigateToError();
+                  this.buildMenu();
                 }
               }, error => {
                 this.stakeholderService.setStakeholder(null);
                 LinksResolver.resetProperties();
                 this.navigateToError();
+                this.buildMenu();
               });
             } else {
+              this.buildMenu();
               if(isSearch) {
                 this.activeTopic = null;
               } else if (params && params['topic']) {
@@ -124,12 +132,14 @@ export class AppComponent implements OnInit, OnDestroy {
               } else {
                 this.activeTopic = this.stakeholder.topics.find(topic => this.isPublicOrIsMember(topic.isPublic) && topic.isActive);
               }
+
             }
           } else {
             LinksResolver.resetProperties();
             this.stakeholderService.setStakeholder(null);
             this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
             this.stakeholder = null;
+            this.buildMenu();
           }
         }));
         this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
@@ -181,36 +191,91 @@ export class AppComponent implements OnInit, OnDestroy {
   }
   
   buildMenu() {
+    this.menuItems = [];
+    this.adminMenuItems = [];
     this.userMenuItems = [];
-    /*    if (Session.isPortalAdministrator(this.user)) {
+    if(this.stakeholder) {
-          this.userMenuItems.push(new MenuItem("", "Manage helptexts",
+      if (this.isFrontPage) {
-            "", "/helptexts", true, [], [], {communityId:'openaire'}))
+        this.menuHeader = {
-    
+          route: "/" + this.stakeholder.alias,
-        }*/
+          url: null,
-    if (this.isAdmin()) {
+          title: this.stakeholder.name,
-      this.userMenuItems.push(new MenuItem("", "Manage profiles",
+          logoUrl: null,
-        "", "/admin", true, [], [], {}))
+          logoSmallUrl: null,
-      
+          position: 'center',
-    }
+          badge: false
-    if (this.user) {
+        };
-      this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {}));
+        // if(this.isAdmin()) {
-    }
+          this.menuItems.push({
-    if (this.adminMenuItems.length == 0) {
+            rootItem: new MenuItem("manage", "Manage",
-      //nstructor(id: string, name: string, route: string, items: Item[], icon, open: boolean) {
+              "",   "/admin", false, [], null, {}), items: []
-      this.adminMenuItems.push(new MenuItem("stakeholders", "Manage profiles", "", "/admin", false, [], [], {}, "<i class=\"material-icons md-24\">settings</i>"));
+          });
-      /*let adminOptions = new MenuItem("adminOptions", "Admin Options", "", "", false, [], [], {})
+
-      adminOptions.items.push(new MenuItem("pages", "Pages", "", "/pages", false, [], [], {}));
+        // }
-      adminOptions.items.push(new MenuItem("portals", "Portals", "", "/portals", false, [], [], {}));
+        this.specialSideBarMenuItem  = new MenuItem("search", "Search research outcomes", "",   this.properties.searchLinkToResults, false, [], null, {})
-      adminOptions.items.push(new MenuItem("entities", "Entities", "", "/entities", false, [], [], {}));
+        this.specialSideBarMenuItem.icon = '<span uk-icon="search"></span>';
-      adminOptions.items.push(new MenuItem("classes", "Class help texts", "", "/classes", false, [], [], {}));
+
-      this.adminMenuItems.push(adminOptions);
+      } else {
-      let monitorOptions = new MenuItem("monitorOptions", "Monitor Options", "", "", false, [], [], {})
+        this.menuHeader = {
-      monitorOptions.items.push(new MenuItem("pages", "Pages", "", "/pages", false, [], [], {communityId: 'openaire'}));
+          route: "/admin/" + this.stakeholder.alias,
-      monitorOptions.items.push(new MenuItem("entities", "Entities", "", "/entities", false, [], [], {communityId: 'openaire'}));
+          url: null,
-      monitorOptions.items.push(new MenuItem("classes", "Class help texts", "", "/classContents", false, [], [], {communityId: 'openaire'}));
+          title: 'Admin - ' + this.stakeholder.name,
-      monitorOptions.items.push(new MenuItem("helptexts", "Help texts", "", "/helptexts", false, [], [], {communityId: 'openaire'}));
+          logoUrl: null,
-      this.adminMenuItems.push(monitorOptions);*/
+          logoSmallUrl: null,
+          position: 'center',
+          badge: false
+        };
+        this.menuItems.push({
+          rootItem: new MenuItem("", "Dashboard",
+            "", '/'+ this.stakeholder.alias+'/', false, [], null, {}), items: []
+        });
+        this.adminMenuItems.push(new MenuItem("general", "General", "", "/admin/"+this.stakeholder.alias + '/general', false, [], [], {}, "<i uk-icon=\"image\"></i>"));
+        this.adminMenuItems.push(new MenuItem("indicators", "Indicators", "", "/admin/"+this.stakeholder.alias + '/indicators', false, [], [], {}, "<i uk-icon=\"image\"></i>"));
+        this.adminMenuItems.push(new MenuItem("users", "Users", "", "/admin/"+this.stakeholder.alias+"/users", false, [], [], {}, "<i uk-icon=\"users\"></i>"));
+        this.specialSideBarMenuItem  = new MenuItem("back", "Manage profiles", "", "/admin",false, [], null, {});
+        this.specialSideBarMenuItem.icon = '<span class="uk-icon-button uk-icon portal-button  " uk-icon="chevron-left"></span>';
+
+      }
+      this.userMenuItems = [];
+      /*    if (Session.isPortalAdministrator(this.user)) {
+            this.userMenuItems.push(new MenuItem("", "Manage helptexts",
+              "", "/helptexts", true, [], [], {communityId:'openaire'}))
+
+          }*/
+      if (this.isAdmin()) {
+        this.userMenuItems.push(new MenuItem("", "Manage profiles",
+          "", "/admin", true, [], [], {}))
+        this.specialSideBarMenuItem = null;
+      }
+      if (this.user) {
+        this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {}));
+      }
+    }else{
+      if(this.isFrontPage || !this.hasAdminMenu){
+        this.menuHeader = { 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", position:'left' , badge: true };
+        //TODO monitor menu items?
+
+      }else{
+        this.menuHeader = { route: "/", url: null, title: "Monitor Dashboard", logoUrl: null, logoSmallUrl:null, position:'center' , badge: false };
+        this.adminMenuItems = [];
+        this.specialSideBarMenuItem = null;
+        this.adminMenuItems.push(new MenuItem("stakeholders", "Manage profiles", "", "/admin", false, [], [], {}, "<i uk-icon=\"cog\"></i>"));
+        /*let adminOptions = new MenuItem("adminOptions", "Admin Options", "", "", false, [], [], {})
+        adminOptions.items.push(new MenuItem("pages", "Pages", "", "/pages", false, [], [], {}));
+        adminOptions.items.push(new MenuItem("portals", "Portals", "", "/portals", false, [], [], {}));
+        adminOptions.items.push(new MenuItem("entities", "Entities", "", "/entities", false, [], [], {}));
+        adminOptions.items.push(new MenuItem("classes", "Class help texts", "", "/classes", false, [], [], {}));
+        this.adminMenuItems.push(adminOptions);
+        let monitorOptions = new MenuItem("monitorOptions", "Monitor Options", "", "", false, [], [], {})
+        monitorOptions.items.push(new MenuItem("pages", "Pages", "", "/pages", false, [], [], {communityId: 'openaire'}));
+        monitorOptions.items.push(new MenuItem("entities", "Entities", "", "/entities", false, [], [], {communityId: 'openaire'}));
+        monitorOptions.items.push(new MenuItem("classes", "Class help texts", "", "/classContents", false, [], [], {communityId: 'openaire'}));
+        monitorOptions.items.push(new MenuItem("helptexts", "Help texts", "", "/helptexts", false, [], [], {communityId: 'openaire'}));
+        this.adminMenuItems.push(monitorOptions);*/
+
+      }
     }
+
   }
   
   public isAdmin() {

src/app/error/errorPage.component.ts

@@ -3,7 +3,9 @@ import {Component} from '@angular/core';
 @Component({
     selector: 'openaire-error',
     template: `
-    <error></error>
+      <div class="uk-margin-large-top">
+        <error></error>
+      </div>
     `
 })
 export class OpenaireErrorPageComponent {

src/app/manageStakeholder/manageStakeholder-routing.module.ts

@@ -0,0 +1,21 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {ManageStakeholderComponent} from "./manageStakeholder.component";
+import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ManageStakeholderComponent,
+        canActivate: [AdminDashboardGuard],
+        canDeactivate: [PreviousRouteRecorder],
+        data: {hasSidebar: true}
+      }
+    ])
+  ]
+})
+export class ManageStakeholderRoutingModule {
+}

src/app/manageStakeholder/manageStakeholder.component.html

@@ -0,0 +1,73 @@
+<div id="page_content">
+  <div id="page_content_inner" class="uk-padding-large">
+
+    <modal-alert #editStakeholderModal
+                 id="edit_modal"
+                 (alertOutput)="save()"
+                 [okDisabled]="stakeholderFb && (stakeholderFb.invalid || (stakeholderFb.pristine && index !==-1 && !file))">
+      <div *ngIf="stakeholderFb" class="uk-padding-small" [formGroup]="stakeholderFb">
+        <div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-2" uk-grid>
+          <div dashboard-input [formInput]="stakeholderFb.get('name')" label="Name"></div>
+          <div dashboard-input [formInput]="stakeholderFb.get('alias')" label="Alias"></div>
+        </div>
+        <div dashboard-input class="uk-form-row" [type]="'textarea'" [rows]="4" [formInput]="stakeholderFb.get('description')" label="Description"></div>
+        <div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid>
+          <div dashboard-input [formInput]="stakeholderFb.get('index_id')"
+               label="Index id">
+          </div>
+          <div dashboard-input [formInput]="stakeholderFb.get('index_name')"
+               label="Index name">
+          </div>
+          <div dashboard-input [formInput]="stakeholderFb.get('index_shortName')"
+               label="Index short name">
+          </div>
+        </div>
+        <div class="uk-grid uk-flex uk-flex-center uk-flex-middle" uk-grid>
+          <div class="uk-width-1-5">
+            <img [src]="photo">
+          </div>
+          <div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-width-expand">
+            <div dashboard-input [formInput]="stakeholderFb.get('logoUrl')" label="Logo Path/URL"></div>
+          </div>
+          <ng-template #uploadPhoto>
+            <div>
+              <div uk-form-custom class="uk-width-auto">
+                <input id="photo" type="file" (change)="fileChangeEvent($event)"/>
+                <button class="md-btn md-btn-primary md-btn-small" tabindex="-1">Upload</button>
+              </div>
+              <button *ngIf="file || (stakeholder.isUpload && !deleteCurrentPhoto)" class="md-btn md-btn-danger md-btn-small uk-margin-small-left" (click)="remove()">Remove</button>
+            </div>
+            <div *ngIf="uploadError" class="uk-text-danger uk-margin-small-top">{{uploadError}}</div>
+          </ng-template>
+          <div *ngIf="stakeholderFb.get('isUpload').value" class="uk-width-expand uk-text-center">
+            <ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
+          </div>
+        </div>
+        <div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-text-center uk-margin-bottom">
+          <div>- OR -</div>
+          <div class="uk-margin-small-top">
+            <ng-container [ngTemplateOutlet]="uploadPhoto"></ng-container>
+          </div>
+        </div>
+        <div class="uk-form-row uk-flex uk-flex-middle uk-child-width-1-3" uk-grid>
+          <div dashboard-input [formInput]="stakeholderFb.get('isPublic')"
+               label="Privacy" [options]="stakeholderUtils.isPublic" type="select">
+          </div>
+          <div dashboard-input [formInput]="stakeholderFb.get('isActive')"
+               label="Status" [options]="stakeholderUtils.isActive" type="select">
+          </div>
+          <div dashboard-input [formInput]="stakeholderFb.get('type')"
+               label="Type" [options]="stakeholderUtils.types" type="select">
+          </div>
+        </div>
+        <div *ngIf="!stakeholderFb.get('isDefault').value && index === -1 && stakeholderFb.get('type').valid">
+          <div *ngIf="defaultStakeholdersOptions.length === 0" class="uk-text-danger">No default profiles has been found for this type.</div>
+          <div *ngIf="defaultStakeholdersOptions.length > 0"
+               dashboard-input class="uk-form-row" [formInput]="stakeholderFb.get('defaultId')"
+               label="Indicators" [options]="defaultStakeholdersOptions" type="select"></div>
+        </div>
+      </div>
+    </modal-alert>
+
+  </div>
+</div>

src/app/manageStakeholder/manageStakeholder.component.ts

@@ -0,0 +1,383 @@
+import {Component, OnDestroy, OnInit, ViewChild} from "@angular/core";
+import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
+import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
+import {EnvironmentSpecificService} from "../openaireLibrary/utils/properties/environment-specific.service";
+import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
+import {Subscriber, zip} from "rxjs";
+import {StakeholderUtils} from "../utils/indicator-utils";
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {AlertModal} from "../openaireLibrary/utils/modal/alert";
+import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component";
+import {Title} from "@angular/platform-browser";
+import {UserManagementService} from "../openaireLibrary/services/user-management.service";
+import {Session} from "../openaireLibrary/login/utils/helper.class";
+import {UtilitiesService} from "../openaireLibrary/services/utilities.service";
+
+declare var UIkit;
+
+@Component({
+  selector: 'home',
+  templateUrl: "./manageStakeholder.component.html"
+})
+export class ManageStakeholderComponent implements OnInit, OnDestroy {
+
+  public properties: EnvProperties;
+  public loading: boolean = true;
+  public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
+  public defaultStakeholders: Stakeholder[];
+  public stakeholders: Stakeholder[];
+  public stakeholder: Stakeholder;
+  public stakeholderFb: FormGroup;
+  public index: number;
+  public user = null;
+  /**
+   *  Filtered Stakeholders
+   */
+  public displayDefaultStakeholders: Stakeholder[];
+  public displayStakeholders: Stakeholder[];
+
+  public defaultStakeholdersOptions: Option[] = [];
+
+  /**
+   * Top filters
+   */
+  public filters: FormGroup;
+  public all: Option = {
+    value: 'all',
+    label: 'All'
+  };
+
+  /**
+   * Grid or List View
+   */
+  public grid: boolean = true;
+  private subscriptions: any[] = [];
+
+  /**
+   * Photo upload
+   * */
+  public file: File;
+  public photo: string | ArrayBuffer;
+  public uploadError: string;
+  public deleteCurrentPhoto: boolean = false;
+  private maxsize: number = 200 * 1024;
+
+  @ViewChild('editStakeholderModal') editStakeholderModal: AlertModal;
+  @ViewChild('deleteStakeholderModal') deleteStakeholderModal: AlertModal;
+
+  constructor(private stakeholderService: StakeholderService,
+              private utilsService: UtilitiesService,
+              private userManagementService: UserManagementService,
+              private propertiesService: EnvironmentSpecificService,
+              private title: Title,
+              private fb: FormBuilder) {
+  }
+
+  ngOnInit(): void {
+    this.buildFilters();
+    this.propertiesService.loadEnvironment()
+      .then(properties => {
+        this.properties = properties;
+        this.title.setTitle('Manage profiles');
+        this.userManagementService.getUserInfo().subscribe(user => {
+          this.user = user;
+        });
+        let data = zip(
+          this.stakeholderService.getDefaultStakeholders(this.properties.monitorServiceAPIURL),
+          this.stakeholderService.getStakeholders(this.properties.monitorServiceAPIURL)
+        );
+        data.subscribe(res => {
+          this.defaultStakeholders = res[0];
+          this.stakeholders = res[1];
+          this.displayDefaultStakeholders = res[0];
+          this.displayStakeholders = res[1];
+          this.loading = false;
+        });
+      });
+    this.subscriptions.push(UIkit.util.on(document, 'hidden', '#edit_modal', (): void => {
+      this.removePhoto();
+    }));
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(value => {
+      if (value instanceof Subscriber) {
+        value.unsubscribe();
+      } else if (value instanceof Function) {
+        value();
+      }
+    });
+  }
+
+  hide(element: any) {
+    UIkit.dropdown(element).hide();
+  }
+
+  public changeGrid(value) {
+    this.grid = value;
+  }
+
+  private buildFilters() {
+    this.filters = this.fb.group({
+      privacy: this.fb.control('all'),
+      status: this.fb.control('all'),
+      keyword: this.fb.control('')
+    });
+    this.subscriptions.push(this.filters.get('privacy').valueChanges.subscribe(value => {
+      this.onPrivacyChange(value);
+    }));
+    this.subscriptions.push(this.filters.get('status').valueChanges.subscribe(value => {
+      this.onStatusChange(value);
+    }));
+    this.subscriptions.push(this.filters.get('keyword').valueChanges.subscribe(value => {
+      this.onKeywordChange(value);
+    }));
+  }
+
+  onPrivacyChange(value) {
+    this.displayDefaultStakeholders = this.filterPrivacy(this.defaultStakeholders, value);
+    this.displayStakeholders = this.filterPrivacy(this.stakeholders, value);
+  }
+
+  onStatusChange(value) {
+    this.displayDefaultStakeholders = this.filterStatus(this.defaultStakeholders, value);
+    this.displayStakeholders = this.filterStatus(this.stakeholders, value);
+  }
+
+  onKeywordChange(value) {
+    this.displayDefaultStakeholders = this.filterByKeyword(this.defaultStakeholders, value);
+    this.displayStakeholders = this.filterByKeyword(this.stakeholders, value);
+  }
+
+  onTypeChange(value) {
+    this.defaultStakeholdersOptions = [{
+      label: 'New blank profile',
+      value: '-1'
+    }];
+    this.defaultStakeholders.filter(stakeholder => stakeholder.type === value).forEach(stakeholder => {
+      this.defaultStakeholdersOptions.push({
+        label: 'Use ' + stakeholder.name + ' profile',
+        value: stakeholder._id
+      })
+    });
+  }
+
+
+  private filterPrivacy(stakeholders: Stakeholder[], value): Stakeholder[] {
+    if (value === 'all') {
+      return stakeholders;
+    } else {
+      return stakeholders.filter(stakeholder => stakeholder.isPublic === value);
+    }
+  }
+
+  private filterStatus(stakeholders: Stakeholder[], value): Stakeholder[] {
+    if (value === 'all') {
+      return stakeholders;
+    } else {
+      return stakeholders.filter(stakeholder => stakeholder.isActive === value);
+    }
+  }
+
+  private filterByKeyword(stakeholders: Stakeholder[], value): Stakeholder[] {
+    if (value === null || value === '') {
+      return stakeholders;
+    } else {
+      return stakeholders.filter(stakeholder => (
+        stakeholder.index_id && stakeholder.index_id.toLowerCase().includes(value.toLowerCase())) ||
+        stakeholder.index_shortName && stakeholder.index_shortName.toLowerCase().includes(value.toLowerCase()) ||
+        stakeholder.index_name && stakeholder.index_name.toLowerCase().includes(value.toLowerCase())
+      );
+    }
+  }
+
+  public editStakeholder(stakeholder: Stakeholder = null, isDefault: boolean = false) {
+    if (isDefault) {
+      this.index = (stakeholder) ? this.defaultStakeholders.findIndex(value => value._id === stakeholder._id) : -1;
+    } else {
+      this.index = (stakeholder) ? this.stakeholders.findIndex(value => value._id === stakeholder._id) : -1;
+    }
+    if (!stakeholder) {
+      this.stakeholder = new Stakeholder(null, null, null,
+        null, null, null, false, false, null);
+    } else {
+      this.stakeholder = stakeholder;
+    }
+    this.stakeholderFb = this.fb.group({
+      _id: this.fb.control(this.stakeholder._id),
+      defaultId: this.fb.control(this.stakeholder.defaultId),
+      name: this.fb.control(this.stakeholder.name, Validators.required),
+      description: this.fb.control(this.stakeholder.description),
+      index_name: this.fb.control(this.stakeholder.index_name, Validators.required),
+      index_id: this.fb.control(this.stakeholder.index_id, Validators.required),
+      index_shortName: this.fb.control(this.stakeholder.index_shortName, Validators.required),
+      creationDate: this.fb.control(this.stakeholder.creationDate),
+      alias: this.fb.control(this.stakeholder.alias,
+        [
+          Validators.required,
+          this.stakeholderUtils.aliasValidator(
+            (isDefault) ?
+              this.defaultStakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias) :
+              this.stakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias)
+          )]
+      ),
+      isDefault: this.fb.control(isDefault),
+      isPublic: this.fb.control(this.stakeholder.isPublic),
+      isActive: this.fb.control(this.stakeholder.isActive),
+      type: this.fb.control(this.stakeholder.type, Validators.required),
+      topics: this.fb.control(this.stakeholder.topics),
+      managers: this.fb.control(this.stakeholder.managers),
+      isUpload: this.fb.control(this.stakeholder.isUpload),
+      logoUrl: this.fb.control(this.stakeholder.logoUrl),
+    });
+    this.initPhoto();
+    this.subscriptions.push(this.stakeholderFb.get('type').valueChanges.subscribe(value => {
+      this.onTypeChange(value);
+    }));
+    this.subscriptions.push(this.stakeholderFb.get('logoUrl').valueChanges.subscribe(value => {
+      if(value) {
+        this.photo = value;
+      } else {
+        this.photo = 'assets/common-assets/curator-default.png';
+      }
+    }));
+    if (!isDefault) {
+      this.stakeholderFb.setControl('defaultId', this.fb.control(this.stakeholder.defaultId, Validators.required));
+    }
+    if (this.index !== -1) {
+      if (this.stakeholderFb.value.type) {
+        setTimeout(() => {
+          this.stakeholderFb.get('type').disable();
+        }, 0);
+      } else {
+        setTimeout(() => {
+          this.stakeholderFb.get('type').enable();
+        }, 0);
+      }
+      this.editStakeholderModal.okButtonText = 'Save Changes';
+    } else {
+      setTimeout(() => {
+        this.stakeholderFb.get('type').enable();
+      }, 0);
+      this.editStakeholderModal.okButtonText = 'Create';
+    }
+    this.uploadError = null;
+    this.deleteCurrentPhoto = false;
+    this.editStakeholderModal.cancelButtonText = 'Cancel';
+    this.editStakeholderModal.okButtonLeft = false;
+    this.editStakeholderModal.alertMessage = false;
+    this.editStakeholderModal.open();
+  }
+
+  public save() {
+    if (this.file) {
+      this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.stakeholder.alias), this.file).subscribe(res => {
+        this.deletePhoto();
+        this.removePhoto();
+        this.stakeholderFb.get('logoUrl').setValue(res.filename);
+        this.saveStakeholder();
+      }, error => {
+        this.uploadError = "An error has been occurred during upload your image. Try again later";
+        this.saveStakeholder();
+      });
+    } else if (this.deleteCurrentPhoto) {
+      this.deletePhoto();
+      this.saveStakeholder();
+    } else {
+      this.saveStakeholder();
+    }
+  }
+
+  public saveStakeholder() {
+    if (this.index === -1) {
+      if (!this.stakeholderFb.value.isDefault) {
+        let stakeholder = this.defaultStakeholders.find(value => value._id === this.stakeholderFb.value.defaultId);
+        this.stakeholderFb.setValue(this.stakeholderUtils.createFunderFromDefaultProfile(this.stakeholderFb.value,
+          (stakeholder ? stakeholder.topics : [])));
+      }
+      this.removePhoto();
+      this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL,
+        this.stakeholderFb.value).subscribe(stakeholder => {
+        if (stakeholder.defaultId === null) {
+          this.defaultStakeholders.push(stakeholder);
+        } else {
+          this.stakeholders.push(stakeholder);
+        }
+      });
+    } else {
+      this.stakeholderFb.get('type').enable();
+      this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => {
+        if (stakeholder.defaultId == null) {
+          this.defaultStakeholders[this.index] = stakeholder;
+        } else {
+          this.stakeholders[this.index] = stakeholder;
+        }
+      });
+    }
+  }
+
+
+  public isAdministrator(): boolean {
+    return Session.isPortalAdministrator(this.user);
+  }
+
+  public deletePhoto() {
+    if (this.stakeholder.logoUrl) {
+      this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.stakeholder.logoUrl).subscribe();
+    }
+  }
+
+  fileChangeEvent(event) {
+    if (event.target.files && event.target.files[0]) {
+      this.file = event.target.files[0];
+      if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') {
+        this.uploadError = 'You must choose a file with type: image/png or image/jpeg!';
+        this.stakeholderFb.get('isUpload').setValue(false);
+        this.removePhoto();
+      } else if (this.file.size > this.maxsize) {
+        this.uploadError = 'File exceeds size\'s limit! Maximum resolution is 256x256 pixels.';
+        this.stakeholderFb.get('isUpload').setValue(false);
+        this.removePhoto()
+      } else {
+        this.uploadError = null;
+        const reader = new FileReader();
+        reader.readAsDataURL(this.file);
+        reader.onload = () => {
+          this.photo = reader.result;
+          this.stakeholderFb.get('isUpload').setValue(true);
+        };
+      }
+    }
+  }
+
+  initPhoto() {
+    if (this.stakeholderFb.get('logoUrl').value) {
+      if (!this.stakeholderFb.value.isUpload) {
+        this.photo = this.stakeholderFb.get('logoUrl').value;
+      } else {
+        this.photo = this.properties.utilsService + "/download/" + this.stakeholderFb.get('logoUrl').value;
+      }
+    } else {
+      this.photo = 'assets/common-assets/curator-default.png';
+    }
+  }
+
+  removePhoto() {
+    if (typeof document != 'undefined') {
+      (<HTMLInputElement>document.getElementById("photo")).value = "";
+    }
+    this.initPhoto();
+    this.file = null;
+  }
+
+  remove() {
+    this.stakeholderFb.get('isUpload').setValue(false);
+    if (this.file) {
+      this.removePhoto();
+    }
+    if (this.stakeholder.isUpload) {
+      this.stakeholderFb.get('logoUrl').setValue(null);
+      this.deleteCurrentPhoto = true;
+    }
+  }
+}

src/app/manageStakeholder/manageStakeholder.module.ts

@@ -0,0 +1,31 @@
+import {NgModule} from "@angular/core";
+import {ManageStakeholderComponent} from "./manageStakeholder.component";
+import {ManageStakeholderRoutingModule} from "./manageStakeholder-routing.module";
+import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
+import {CommonModule} from "@angular/common";
+import {RouterModule} from "@angular/router";
+import {InputModule} from "../openaireLibrary/dashboard/sharedComponents/input/input.module";
+import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
+import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
+import {ReactiveFormsModule} from "@angular/forms";
+import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
+
+@NgModule({
+  declarations: [ManageStakeholderComponent],
+  imports: [
+    ManageStakeholderRoutingModule,
+    CommonModule,
+    RouterModule,
+    InputModule,
+    LoadingModule,
+    AlertModalModule,
+    ReactiveFormsModule
+  ],
+  providers: [
+    AdminDashboardGuard, PreviousRouteRecorder,
+  ],
+  exports: [ManageStakeholderComponent]
+})
+export class ManageStakeholderModule {
+
+}

src/app/manageStakeholders/manageStakeholders.component.html

@@ -1,32 +1,32 @@
 <div id="page_content">
-  <div class="uk-padding-small md-bg-white" uk-grid>
+  <div id="page_content_inner" class="uk-padding-large">
-    <div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
+    <div class="uk-padding-small md-bg-white" uk-grid>
-      <div>
+      <div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
-        <div dashboard-input [formInput]="filters.get('privacy')"
+        <div>
-             type="select" [options]="[all].concat(stakeholderUtils.isPublic)"
+          <div dashboard-input [formInput]="filters.get('privacy')"
-             label="Privacy"></div>
+               type="select" [options]="[all].concat(stakeholderUtils.isPublic)"
+               label="Privacy"></div>
+        </div>
+        <div>
+          <div dashboard-input [formInput]="filters.get('status')"
+               type="select" [options]="[all].concat(stakeholderUtils.isActive)"
+               label="Status"></div>
+        </div>
       </div>
-      <div>
+      <div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
-        <div dashboard-input [formInput]="filters.get('status')"
+        <div class="uk-inline uk-width-medium">
-             type="select" [options]="[all].concat(stakeholderUtils.isActive)"
+          <span class="uk-position-center-right"><i class="material-icons">search</i></span>
-             label="Status"></div>
+          <div dashboard-input [formInput]="filters.get('keyword')" label="Locate profile"></div>
+        </div>
+        <div [class.uk-active]="grid" class="uk-margin-small-left">
+          <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(true)"><i
+            class="material-icons">view_module</i></a>
+        </div>
+        <div [class.uk-active]="!grid" class="uk-margin-small-left">
+          <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
+        </div>
       </div>
     </div>
-    <div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
-      <div class="uk-inline uk-width-medium">
-        <span class="uk-position-center-right"><i class="material-icons">search</i></span>
-        <div dashboard-input [formInput]="filters.get('keyword')" label="Locate profile"></div>
-      </div>
-      <div [class.uk-active]="grid" class="uk-margin-small-left">
-        <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(true)"><i
-          class="material-icons">view_module</i></a>
-      </div>
-      <div [class.uk-active]="!grid" class="uk-margin-small-left">
-        <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
-      </div>
-    </div>
-  </div>
-  <div id="page_content_inner">
     <h4 class="uk-text-bold main">Default Profiles</h4>
     <div [class.uk-child-width-1-4@m]="grid"
          [class.uk-child-width-1-3@s]="grid"
@@ -36,10 +36,11 @@
          uk-grid>
       <loading *ngIf="loading"></loading>
       <ng-template ngFor [ngForOf]="defaultStakeholders" let-stakeholder let-i="index">
-        <a *ngIf="stakeholder" [routerLink]="stakeholder.alias">
+        <a *ngIf="stakeholder" [routerLink]="stakeholder.alias+'/indicators'+(stakeholder.topics.length > 0 ?
-          <div class="md-card">
+           '/' + stakeholder.topics[0].alias:'')">
-            <div class="md-card-toolbar">
+          <div class="uk-card uk-card-default">
-              <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
+            <div class=" uk-padding-small uk-card-header">
+              <div class="md-card-toolbar-actions uk-float-right" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
                 <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
                   <i class="material-icons md-24 uk-margin-small-right">{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
                   {{(stakeholder.isPublic) ? 'Public' : 'Private'}}
@@ -50,10 +51,10 @@
                   {{(stakeholder.isActive) ? 'Active' : 'Inactive'}}
                 </span>
                 <div class="md-card-dropdown uk-inline">
-                  <i class="md-icon material-icons"
+                  <i uk-icon="more-vertical"
-                     (click)="$event.stopPropagation();$event.preventDefault()">more_vert</i>
+                     (click)="$event.stopPropagation();$event.preventDefault()"></i>
                   <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false" class="uk-padding-remove-horizontal">
-                    <ul class="uk-nav uk-dropdown-nav">
+                    <ul class="uk-nav uk-dropdown-nav uk-margin-left">
                       <li><a (click)="$event.stopPropagation();editStakeholder(stakeholder, true);hide(element);$event.preventDefault()">Edit</a>
                       </li>
                       <li><a (click)="$event.stopPropagation();toggleStakeholderStatus(stakeholder);hide(element);$event.preventDefault()">
@@ -70,9 +71,9 @@
                   </div>
                 </div>
               </div>
-              <div class="md-card-toolbar-heading-text">{{stakeholder.name}}</div>
+              <div class="uk-card-title">{{stakeholder.name}}</div>
             </div>
-            <div *ngIf="grid" class="md-card-content">
+            <div *ngIf="grid" class="uk-card-body">
               <div class="uk-flex uk-flex-center" uk-grid>
                 <div class="uk-width-1-2 uk-text-center">
                   <i class="material-icons md-24">{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
@@ -89,23 +90,23 @@
         </a>
       </ng-template>
       <div *ngIf="!loading">
-        <div class="md-card clickable" (click)="editStakeholder(null, true)">
+        <div class="uk-card uk-card-default clickable" (click)="editStakeholder(null, true)">
-          <div class="md-card-toolbar">
+          <div class=" uk-padding-small uk-card-header">
-            <div class="md-card-toolbar-heading-text"
+            <div class="uk-card-title"
                  [class.uk-flex-middle]="!grid"
                  [class.uk-flex]="!grid"
                  [class.uk-flex-center]="!grid">
-              <i *ngIf="!grid" class="material-icons md-36">add</i>
+              <i *ngIf="!grid" class="material-icons md-36" uk-icon="plus"></i>
               <span>Create a default profile</span>
             </div>
           </div>
-          <div *ngIf="grid" class="md-card-content">
+          <div *ngIf="grid" class="uk-card-body">
             <div uk-grid>
               <div class="uk-width-1-1">
                 Create a new default profile.
               </div>
               <div class="uk-width-1-1 uk-flex uk-flex-center">
-                <i class="material-icons md-48">add</i>
+                <i class="material-icons md-48" uk-icon="plus"></i>
               </div>
             </div>
           </div>
@@ -121,10 +122,12 @@
          uk-grid>
       <loading *ngIf="loading"></loading>
       <ng-template ngFor [ngForOf]="displayStakeholders" let-stakeholder let-i="index">
-        <a *ngIf="stakeholder" [routerLink]="stakeholder.alias">
+        <a *ngIf="stakeholder"
-          <div class="md-card">
+           [routerLink]="stakeholder.alias+'/indicators'+(stakeholder.topics.length > 0 ?
-            <div class="md-card-toolbar">
+           '/' + stakeholder.topics[0].alias:'')">
-              <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
+          <div class="uk-card uk-card-default">
+            <div class=" uk-padding-small uk-card-header">
+              <div class="md-card-toolbar-actions uk-float-right" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
                 <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
                   <i class="material-icons md-24 uk-margin-small-right">{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
                   {{(stakeholder.isPublic) ? 'Public' : 'Private'}}
@@ -135,10 +138,10 @@
                   {{(stakeholder.isActive) ? 'Active' : 'Inactive'}}
                 </span>
                 <div class="md-card-dropdown uk-inline">
-                  <i class="md-icon material-icons"
+                  <i uk-icon="more-vertical"
-                     (click)="$event.stopPropagation();$event.preventDefault()">more_vert</i>
+                     (click)="$event.stopPropagation();$event.preventDefault()"></i>
                   <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false" class="uk-padding-remove-horizontal">
-                    <ul class="uk-nav uk-dropdown-nav">
+                    <ul class="uk-nav uk-dropdown-nav uk-margin-left">
                       <li><a
                         (click)="$event.stopPropagation();editStakeholder(stakeholder);hide(element);$event.preventDefault()">Edit</a>
                       </li>
@@ -156,9 +159,9 @@
                   </div>
                 </div>
               </div>
-              <div class="md-card-toolbar-heading-text">{{stakeholder.name}}</div>
+              <div class="uk-card-title">{{stakeholder.name}}</div>
             </div>
-            <div *ngIf="grid" class="md-card-content">
+            <div *ngIf="grid" class="uk-card-body">
               <div class="uk-flex uk-flex-center" uk-grid>
                 <div class="uk-width-1-2 uk-text-center">
                   <i class="material-icons md-24">{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}}</i>
@@ -175,24 +178,24 @@
         </a>
       </ng-template>
       <div *ngIf="!loading">
-        <div class="md-card clickable" (click)="editStakeholder()">
+        <div class="uk-card uk-card-default clickable" (click)="editStakeholder()">
-          <div class="md-card-toolbar">
+          <div class=" uk-padding-small uk-card-header">
-            <div class="md-card-toolbar-heading-text"
+            <div class="uk-card-title"
                  [class.uk-flex-middle]="!grid"
                  [class.uk-flex]="!grid"
                  [class.uk-flex-center]="!grid">
-              <i *ngIf="!grid" class="material-icons md-36">add</i>
+              <i *ngIf="!grid" class="material-icons md-36" uk-icon="plus"></i>
               <span>Create a profile</span>
             </div>
           </div>
-          <div *ngIf="grid" class="md-card-content">
+          <div *ngIf="grid" class="uk-card-body">
             <div uk-grid>
               <div class="uk-width-1-1">
                 Create a new profile by selecting the type (Funder, Organization, Research Initiative or Project) and
                 select indicators based on a default or a blank profile.
               </div>
               <div class="uk-width-1-1 uk-flex uk-flex-center">
-                <i class="material-icons md-48">add</i>
+                <i class="material-icons md-48" uk-icon="plus"></i>
               </div>
             </div>
           </div>

src/app/monitor/monitor.component.html

@@ -2,7 +2,7 @@
 <!--  <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="selectedFilterLabel"  [class.uk-margin-small-left]="margin" title="Remove {{periodFilter.selectedFromAndToValues}}">
-          <i class=" material-icons"></i>
+          <i uk-icon="close"></i>
           <span class="uk-margin-small-left">{{periodFilter.selectedFromAndToValues}}</span>
         </span></a>
     </span>
@@ -40,7 +40,7 @@
 </ng-template>
 <div id="page_content" [class.greyOut]="filterToggle" (click)=" (filterToggle)?filterToggle = false:filterToggle">
   <div>
-      <div  class="uk-navbar-container uk-sticky uk-sticky-fixed" style="top: 70px; position:
+      <div  class="uk-navbar-container uk-navbar-transparent uk-sticky uk-sticky-fixed" style="top: 70px; position:
       fixed; width: 100%">
         <div class="uk-margin-large-left">
         <nav class=" ">
@@ -74,7 +74,7 @@
           </div>
         </div>
     </div>
-    <div id="page_content_inner" class="" [style.padding-top.px]="(24+
+    <div id="page_content_inner" class="" [style.margin-top.px]="(24+
     (activeCategory &&
     activeCategory.subCategories.length > 1?40:0)+(activeTopic &&
     activeTopic.categories.length > 1?20:0)+(countSelectedFilters()
@@ -125,7 +125,7 @@
           </div>
         </div>
         <div *ngIf="activeSubCategory" class="uk-grid uk-grid-medium uk-margin-bottom uk-margin-top"
-             uk-height-match="target: div.md-card">
+             uk-height-match="target: div.uk-card">
           <ng-template ngFor [ngForOf]="activeSubCategory.numbers" let-number let-i="index">
             <h4 class="uk-width-1-1">{{number.title}}</h4>
             <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
@@ -133,10 +133,10 @@
                    [class.uk-width-1-3@m]="indicator.width === 'small'"
                    [class.uk-width-1-2@m]="indicator.width === 'medium'"
                    [class.uk-width-1-1]="indicator.width === 'large'" class=" uk-margin-bottom">
-                <div class="md-card" [attr.uk-tooltip]="indicator.description"
+                <div class="uk-card uk-card-default" [attr.uk-tooltip]="indicator.description"
                      [class.uk-disabled]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"
                      [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
-                  <div class="md-card-content uk-text-center">
+                  <div class="uk-card-body uk-text-center">
                     <div *ngIf="properties.environment == 'development'">Filtered:
                       {{indicator.indicatorPaths[0].filtersApplied}}
                       out of
@@ -168,14 +168,14 @@
                   <h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
                     <div>{{indicator.name + " "}}</div>
                   </h4>
-                  <div class="md-card"
+                  <div class="uk-card uk-card-default"
                        [class.uk-disabled]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"
                        [class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"
                   ><!--[
                        attr
                        .uk-tooltip]="indicator
                   .description">-->
-                    <div class="md-card-content uk-text-center">
+                    <div class="uk-card-body uk-text-center">
                       <div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
                         <button *ngFor="let indicatorPath of indicator.indicatorPaths;"
                                 class="uk-button"
@@ -217,28 +217,30 @@
   </div>
 
   </div>
-<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class="filters_switcher"
+<!--(click)="filterToggle= !filterToggle"
-     [class.switcher_active]="filterToggle">
+     [style.display]="(filterToggle?'none':'inherit')"-->
-    <div id="style_switcher_toggle" (click)="filterToggle= !filterToggle"
+<div *ngIf="stakeholder && !privateStakeholder" href="#style_switcher" uk-toggle="" id="filters_switcher_toggle" >
-         [style.display]="(filterToggle?'none':'inherit')">
+  <i class="  uk-text-muted">
-      <i class="  uk-text-muted">
+    <svg style="margin-top: 8px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-        <svg style="margin-top: 8px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
+         viewBox="0 0 20 20"
-             viewBox="0 0 24 24"
+         fill="white" width="24px" height="16px">
-             fill="white" width="24px" height="24px">
+      <g>
-          <g>
+        <path d="M0,0h24 M24,24H0" fill="none"/>
-            <path d="M0,0h24 M24,24H0" fill="none"/>
+        <path
-            <path
+          d="M4.25,5.61C6.57,8.59,10,13,10,13v5c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-5c0,0,3.43-4.41,5.75-7.39 C20.26,4.95,19.79,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"/>
-                d="M4.25,5.61C6.57,8.59,10,13,10,13v5c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-5c0,0,3.43-4.41,5.75-7.39 C20.26,4.95,19.79,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"/>
+        <path d="M0,0h24v24H0V0z" fill="none"/>
-            <path d="M0,0h24v24H0V0z" fill="none"/>
+      </g>
-          </g>
+    </svg>
-        </svg>
+  </i>
-      </i>
+</div>
+<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class=" uk-offcanvas filters_switcher"
+     uk-offcanvas="flip:true" mode="slide" overlay="" style="z-index:982;"  >
+
+  <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>
+
     </div>
-  <div class="" click-outside-or-esc
-       (clickOutside)="(filterToggle)?filterToggle = false:filterToggle" [clickClose]="false" >
-    <div class="uk-float-right" ><a (click)="filterToggle=!filterToggle"> <i
-      class=" material-icons md-icon"></i>
-    </a></div>
     <div class="uk-padding">
       <div class="uk-grid uk-flex uk-flex-middle"><div class="uk-h4 ">Filters</div><a *ngIf="countSelectedFilters() > 1"
         class="  portal-link uk-width-1-2" (click)="clearAll()"> Clear All </a></div>

src/app/stakeholder/stakeholder.component.html

@@ -1,4 +1,5 @@
 <aside id="sidebar_main">
+  <div id="sidebar_content">
   <div *ngIf="stakeholder" class="sidebar_main_header uk-margin-remove-bottom uk-text-center">
     <img  *ngIf="properties.environment =='beta' || properties.environment =='development'" class="badge"
           [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
@@ -11,7 +12,7 @@
     </div>
   </div>
   <div *ngIf="stakeholder" class="menu_section">
-    <ul>
+    <ul class="uk-list">
       <li class="uk-margin-bottom md-bg-blue-900 uk-padding-small">
         <a [routerLink]="'../'" class="md-color-white">
           <span class="menu_icon"><i class="material-icons md-color-white">arrow_back</i></span>
@@ -24,13 +25,15 @@
           [class.act_section]="analysisOpen"
           class="submenu_trigger">
         <a href="#" (click)="analysisOpen = !analysisOpen; $event.preventDefault()">
-          <span class="menu_icon"><i class="material-icons">donut_large</i></span>
+<!--          <span class="menu_icon"><i class="material-icons">donut_large</i></span>-->
           <span class="menu_title uk-width-expand">Analysis Indicators</span>
         </a>
-        <ul [style.display]="(analysisOpen?'block':'none')">
+        <ul [style.display]="(analysisOpen?'block':'none')" class="uk-list">
           <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
-            <li [title]="topic.name+': '+(topic.isActive?'Active':'Inactive')+', '+(topic.isPublic?'Public':'Private')">
+            <li
-              <a [routerLink]="topic.alias">
+              [title]="topic.name+': '+(topic.isActive?'Active':'Inactive')+', '+(topic.isPublic?'Public':'Private')"
+              class="uk-margin-top uk-margin-small-right">
+              <a [routerLink]="topic.alias" class="uk-flex">
                <span *ngIf="topic.icon" class="menu_icon">
                   <span   [innerHTML]="satinizeHTML(topic.icon)"></span>
                 </span>
@@ -42,10 +45,10 @@
                      [class.md-color-green-300]="topic.isActive">brightness_1</i>-->
                 </div>
                 <div class="menu_on_hover" (click)="$event.stopPropagation();$event.preventDefault()">
-                  <i class="material-icons onHover">more_vert</i>
+                  <i class=" onHover" uk-icon="more-vertical"></i>
                   <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
                        class="uk-padding-remove-horizontal">
-                    <ul class="uk-nav uk-dropdown-nav">
+                    <ul class="uk-nav uk-dropdown-nav uk-list">
                       <li><a (click)="editTopicOpen(i); hide(element)">Edit</a></li>
                       <li><a (click)="toggleTopicStatus(topic); hide(element)">
                         {{topic.isActive ? 'Inactive' : 'Active'}}</a>
@@ -76,10 +79,11 @@
       </li>
     </ul>
   </div>
+  </div>
 </aside>
 <div id="page_content">
-  <div id="page_content_inner">
+  <div id="page_content_inner" class="uk-padding-large">
-    <h4 class="uk-text-bold">
+    <h4 class="uk-text-bold uk-margin-top">
       Customise your Monitor Dashboard!
     </h4>
     <div class="uk-text-large uk-margin-bottom">
@@ -108,12 +112,12 @@
     <div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium" uk-grid>
       <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic>
         <div>
-          <a [routerLink]="topic.alias" class="md-card">
+          <a [routerLink]="topic.alias" class="uk-card uk-card-default">
             <div class="md-card-toolbar">
               <!--<div class="md-card-toolbar-actions" >
 
                 <div class="md-card-dropdown uk-inline">
-                  <i class="md-icon material-icons">more_vert</i>
+                  <i uk-icon="more-vertical"></i>
                   <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
                        class="uk-padding-remove-horizontal">
                     <ul class="uk-nav uk-dropdown-nav">
@@ -136,11 +140,11 @@
                   </div>
                 </div>
               </div>-->
-              <div class="md-card-toolbar-heading-text">
+              <div class="uk-card-header">
                 {{topic.name}}
               </div>
             </div>
-            <div class="md-card-content uk-grid">
+            <div class="uk-card-body uk-grid">
 <!--              <h6 class="uk-text-bold">{{topic.name}}</h6>-->
               <div class="uk-width-1-2 uk-text-center"
                    title="{{topic.isPublic?'Visible to all users':'Visible to members'}}">

src/app/topic/indicators.component.html

@@ -1,40 +1,39 @@
-<div id="page_content">
+  <div *ngIf="stakeholder && canEdit" >
-  <div class="uk-padding-small md-bg-white" uk-grid>
+    <div class="uk-padding-small md-bg-white" uk-grid>
-    <div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
+      <div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
-      <div>
+        <div>
-        <div dashboard-input [formInput]="filters.get('chartType')"
+          <div dashboard-input [formInput]="filters.get('chartType')"
-             type="select" [options]="[all].concat(indicatorUtils.allChartTypes)"
+               type="select" [options]="[all].concat(indicatorUtils.allChartTypes)"
-             label="Chart Type"></div>
+               label="Chart Type"></div>
+        </div>
+        <div>
+          <div dashboard-input [formInput]="filters.get('privacy')"
+               type="select" [options]="[all].concat(indicatorUtils.isPublic)"
+               label="Privacy"></div>
+        </div>
+        <div>
+          <div dashboard-input [formInput]="filters.get('status')"
+               type="select" [options]="[all].concat(indicatorUtils.isActive)"
+               label="Status"></div>
+        </div>
       </div>
-      <div>
+      <div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
-        <div dashboard-input [formInput]="filters.get('privacy')"
+        <div class="uk-inline uk-width-medium">
-             type="select" [options]="[all].concat(indicatorUtils.isPublic)"
+          <span class="uk-position-center-right"><i class="material-icons">search</i></span>
-             label="Privacy"></div>
+          <div dashboard-input [formInput]="filters.get('keyword')" label="Locate indicator"></div>
-      </div>
+        </div>
-      <div>
+        <div [class.uk-active]="grid" class="uk-margin-small-left">
-        <div dashboard-input [formInput]="filters.get('status')"
+          <a [routerLink]="" class="uk-icon-button " (click)="changeGrid(true)"><i
-             type="select" [options]="[all].concat(indicatorUtils.isActive)"
-             label="Status"></div>
-      </div>
-    </div>
-    <div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
-      <div class="uk-inline uk-width-medium">
-        <span class="uk-position-center-right"><i class="material-icons">search</i></span>
-        <div dashboard-input [formInput]="filters.get('keyword')" label="Locate indicator"></div>
-      </div>
-      <div [class.uk-active]="grid" class="uk-margin-small-left">
-        <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(true)"><i
             class="material-icons">view_module</i></a>
-      </div>
+        </div>
-      <div [class.uk-active]="!grid" class="uk-margin-small-left">
+        <div [class.uk-active]="!grid" class="uk-margin-small-left">
-        <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
+          <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
+        </div>
       </div>
     </div>
-  </div>
-  <div *ngIf="stakeholder && canEdit" id="page_content_inner">
     <div class="uk-child-width-1-2 uk-flex-middle" uk-grid>
-      <div>
+     <!-- <div>
-        <ul id="breadcrumbs">
+        <ul class="uk-breadcrumb">
           <li><span>{{stakeholder.topics[topicIndex].name}}</span></li>
           <li>
             <span>{{stakeholder.topics[topicIndex].categories[categoryIndex].name}}</span></li>
@@ -44,7 +43,7 @@
             </span>
           </li>
         </ul>
-      </div>
+      </div>-->
       <div class="uk-flex uk-flex-right">
         <a class="md-btn  md-btn-primary waves-button waves-effect">
           <i class="material-icons uk-margin-small-right">remove_red_eye</i>
@@ -53,7 +52,7 @@
         </a>
         <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
              class="uk-padding-remove-horizontal">
-          <ul class="uk-nav uk-dropdown-nav">
+          <ul class="uk-nav uk-dropdown-nav uk-margin-left">
             <li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'public'}" (click)="hide(element)">Public</a>
             </li>
             <li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'private'}" (click)="hide(element)">Private</a>
@@ -69,15 +68,15 @@
              class="uk-grid-match  uk-grid-small uk-grid uk-margin-top"
              uk-sortable="group: number" uk-grid>
           <div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
-            <div *ngIf="isAdministrator" class="md-btn-group">
+            <div *ngIf="isAdministrator" class="actions">
-              <button [disabled]="editing" class="md-btn md-btn-mini" (click)="createSection(i, 'number')"
+              <a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
                       title="Create a new section"><i
-                  class="material-icons">add</i></button>
+                uk-icon="icon:plus;ratio:0.8"></i></a>
               <!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
-              <button [disabled]="editing || number.defaultId  " class="md-btn md-btn-mini"
+              <a [class.uk-disabled]="editing || number.defaultId  " class=""
                       [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section')"
-                      (click)="deleteSectionOpen(number, i, 'number', 'delete')"><i class="material-icons">clear</i>
+                      (click)="deleteSectionOpen(number, i, 'number', 'delete')"><i uk-icon="icon:close;ratio:0.8"></i>
-              </button>
+              </a>
               <!--              <ng-container *ngIf="!stakeholder.defaultId">-->
               <!--                <button   [disabled]="editing || number.defaultId  " class="md-btn md-btn-mini"-->
               <!--                          [title]="(number.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
@@ -112,9 +111,9 @@
                  [class.uk-width-1-2@m]="!grid || indicator.width === 'large'"
                  [class.disable-sortable]="!canReorder"
                  [class.uk-sortable-nodrag]="!canReorder">
-              <div class="md-card" [class.md-card-hover]="canReorder">
+              <div class="uk-card uk-card-default" [class.md-card-hover]="canReorder">
-                <div class="md-card-toolbar">
+                <div class="uk-padding-small uk-card-header">
-                  <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
+                  <div class="md-card-toolbar-actions uk-float-right" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
                     <ng-template [ngIf]="!grid">
                       <div class="uk-margin-medium-right uk-flex uk-flex-middle">
                         <i class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
@@ -127,10 +126,10 @@
                       </div>
                     </ng-template>
                     <div class="md-card-dropdown uk-inline">
-                      <i class="md-icon material-icons">more_vert</i>
+                      <i uk-icon="more-vertical"></i>
                       <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
                            class="uk-padding-remove-horizontal">
-                        <ul class="uk-nav uk-dropdown-nav">
+                        <ul class="uk-nav uk-dropdown-nav uk-margin-left">
                           <li *ngIf="isAdministrator && !indicator.defaultId && !editing"><a
                               (click)="editNumberIndicatorOpen(number, indicator._id)">Edit</a></li>
                           <li *ngIf="!editing"><a (click)="toggleIndicatorStatus(number._id, indicator);hide(element)">
@@ -151,11 +150,11 @@
                       </div>
                     </div>
                   </div>
-                  <div class="md-card-toolbar-heading-text">
+                  <div class="uk-card-title">
                     {{indicator.name ? indicator.name : 'No title available'}}
                   </div>
                 </div>
-                <div *ngIf="grid" class="md-card-content">
+                <div *ngIf="grid" class="uk-card-body">
                   <div class="uk-flex uk-flex-center" uk-grid>
                     <div class="uk-width-1-1">
                       {{indicator.description}}
@@ -179,23 +178,23 @@
           <div *ngIf="isAdministrator" class="disable-sortable uk-sortable-nodrag"
                [class.uk-width-1-3@m]="grid"
                [class.uk-width-1-1@m]="!grid">
-            <div class="md-card clickable" (click)="editNumberIndicatorOpen(number)">
+            <div class="uk-card uk-card-default clickable" (click)="editNumberIndicatorOpen(number)">
-              <div class="md-card-toolbar">
+              <div class="uk-padding-small uk-card-header">
-                <div class="md-card-toolbar-heading-text"
+                <div class="uk-card-title"
                      [class.uk-flex-middle]="!grid"
                      [class.uk-flex]="!grid"
                      [class.uk-flex-center]="!grid">
-                  <i *ngIf="!grid" class="material-icons md-36">add</i>
+                  <i *ngIf="!grid" uk-icon="plus"></i>
                   <span>Create a custom Indicator</span>
                 </div>
               </div>
-              <div *ngIf="grid" class="md-card-content">
+              <div *ngIf="grid" class="uk-card-body">
                 <div uk-grid>
                   <div class="uk-width-1-1">
                     Create a new number Indicator
                   </div>
                   <div class="uk-width-1-1 uk-flex uk-flex-center">
-                    <i class="material-icons md-48">add</i>
+                    <i uk-icon="plus"></i>
                   </div>
                 </div>
               </div>
@@ -205,8 +204,8 @@
       </ng-template>
       <div *ngIf="grid && isAdministrator" class="new-section uk-margin-top">
         <div class="tools uk-flex uk-flex-middle">
-          <button class="md-btn uk-margin-small-right" (click)="createSection(-1, 'number')">
+          <button class="uk-margin-small-right uk-icon-button portal-button" (click)="createSection(-1, 'number')">
-            <i class="material-icons md-24 md-color-white">add</i>
+            <i  uk-icon="plus"></i>
           </button>
           <span>Create a new section</span>
         </div>
@@ -219,16 +218,16 @@
              class="uk-grid-match section uk-grid-small uk-grid uk-margin-top"
              uk-sortable="group: chart" uk-grid>
           <div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
-            <div class="md-btn-group">
+            <div class="actions">
-              <button [disabled]="editing" class="md-btn md-btn-mini" (click)="createSection(i)"
+              <a [class.uk-disabled]="editing" class="" (click)="createSection(i)"
                       title="Create a new section"><i
-                  class="material-icons">add</i></button>
+                uk-icon="icon:plus;ratio:0.8"></i></a>
               <!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
-              <button [disabled]="editing || chart.defaultId  "
+              <a [class.uk-disabled]="editing || chart.defaultId  "
                       [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section')"
-                      class="md-btn md-btn-mini" (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i
+                      class="" (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i
-                  class="material-icons">clear</i>
+                   uk-icon="icon:close;ratio:0.8"></i>
-              </button>
+              </a>
               <!--              <ng-container *ngIf="!stakeholder.defaultId">-->
               <!--                <button   [disabled]="editing || chart.defaultId  " class="md-btn md-btn-mini"-->
               <!--                          [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
@@ -263,9 +262,9 @@
                  [class.uk-width-1-1@m]="!grid || indicator.width === 'large'"
                  [class.disable-sortable]="!canReorder"
                  [class.uk-sortable-nodrag]="!canReorder">
-              <div class="md-card" [class.md-card-hover]="canReorder">
+              <div class="uk-card uk-card-default" [class.md-card-hover]="canReorder">
-                <div class="md-card-toolbar">
+                <div class="uk-padding-small uk-card-header">
-                  <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
+                  <div class="md-card-toolbar-actions uk-float-right" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
                     <ng-template [ngIf]="!grid">
                       <div *ngFor="let indicatorPath of indicator.indicatorPaths"
                            class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle">
@@ -291,10 +290,10 @@
                       {{(indicator.isActive) ? 'Active' : 'Inactive'}}
                     </div>
                     <div class="md-card-dropdown uk-inline">
-                      <i class="md-icon material-icons">more_vert</i>
+                      <i uk-icon="more-vertical"></i>
                       <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
                            class="uk-padding-remove-horizontal">
-                        <ul class="uk-nav uk-dropdown-nav">
+                        <ul class="uk-nav uk-dropdown-nav uk-margin-left">
                           <li *ngIf="!editing"><a (click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a>
                           </li>
                           <li *ngIf="!editing"><a (click)="toggleIndicatorStatus(chart._id, indicator);hide(element)">
@@ -314,11 +313,11 @@
                       </div>
                     </div>
                   </div>
-                  <div class="md-card-toolbar-heading-text">
+                  <div class="">
                     {{indicator.name}}
                   </div>
                 </div>
-                <div *ngIf="grid" class="md-card-content">
+                <div *ngIf="grid" class="uk-card-body">
                   <div class="uk-flex uk-flex-center" uk-grid>
 
                     <div class="uk-width-1-3 uk-text-center"
@@ -362,24 +361,24 @@
           <div class="disable-sortable uk-sortable-nodrag"
                [class.uk-width-1-3@m]="grid"
                [class.uk-width-1-1@m]="!grid">
-            <div class="md-card clickable" (click)="editChartIndicatorOpen(chart)">
+            <div class="uk-card uk-card-default clickable" (click)="editChartIndicatorOpen(chart)">
-              <div class="md-card-toolbar">
+              <div class="uk-padding-small uk-card-header">
-                <div class="md-card-toolbar-heading-text"
+                <div class=""
                      [class.uk-flex-middle]="!grid"
                      [class.uk-flex]="!grid"
                      [class.uk-flex-center]="!grid">
-                  <i *ngIf="!grid" class="material-icons md-36">add</i>
+                  <i *ngIf="!grid" uk-icon="plus"></i>
                   <span>Create a custom Indicator</span>
                 </div>
               </div>
-              <div *ngIf="grid" class="md-card-content">
+              <div *ngIf="grid" class="uk-card-body">
                 <div uk-grid>
                   <div class="uk-width-1-1">
                     Use our advance tool to create a custom Indicator that suit the needs of your funding
                     KPI's.
                   </div>
                   <div class="uk-width-1-1 uk-flex uk-flex-center">
-                    <i class="material-icons md-48">add</i>
+                    <i uk-icon="plus"></i>
                   </div>
                 </div>
               </div>
@@ -389,16 +388,16 @@
       </ng-template>
       <div *ngIf="grid" class="new-section uk-margin-top">
         <div class="tools uk-flex uk-flex-middle">
-          <button [disabled]="editing" class="md-btn uk-margin-small-right" (click)="createSection()">
+          <button [disabled]="editing" class="uk-margin-small-right uk-icon-button portal-button" (click)="createSection()">
-            <i class="material-icons md-24 md-color-white">add</i>
+            <i uk-icon="plus"></i>
           </button>
           <span>Create a new section</span>
         </div>
       </div>
     </div>
   </div>
-</div>
+
-<modal-alert #editNumberModal
+  <modal-alert #editNumberModal
              [classBody]="'large-modal'"
              (alertOutput)="saveIndicator()"
              [okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">

src/app/topic/topic.component.html

@@ -1,4 +1,5 @@
 <aside id="sidebar_main">
+  <div id="sidebar_content">
   <div *ngIf="stakeholder" class="sidebar_main_header uk-margin-remove-bottom uk-text-center">
     <img  *ngIf="properties.environment =='beta' || properties.environment =='development'" class="badge"
           [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
@@ -11,7 +12,70 @@
     </div>
   </div>
   <div *ngIf="stakeholder && stakeholder.topics[topicIndex]" class="menu_section">
-    <ul>
+    <ul class="uk-list">
+      <li class="uk-margin-bottom md-bg-blue-900 uk-padding-small">
+        <a [routerLink]="'/admin/' + stakeholder.alias + '/general'" class="uk-link">
+          <span class="" uk-icon="icon:close;ratio:2"></span>
+
+        </a>
+      </li>
+      <li  class="submenu_trigger">
+
+        <ul class="uk-nav-default">
+          <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
+            <li
+              [title]="topic.name+': '+(topic.isActive?'Active':'Inactive')+', '+(topic.isPublic?'Public':'Private')"
+              class="uk-margin-top uk-margin-small-right uk-visible-toggle"
+              [class.uk-active]="topicIndex == i" [class.uk-text-primary]="topicIndex == i"
+              [class.uk-text-bold]="topicIndex == i">
+              <a [routerLink]="'../' + topic.alias" class="uk-flex">
+               <span *ngIf="topic.icon" class="menu_icon">
+<!--                  <span   [innerHTML]="satinizeHTML(topic.icon)"></span>-->
+                </span>
+                <div class="menu_title uk-width-expand uk-text-center">
+                  {{topic.name}}
+                  <!--<i
+                    class="material-icons md-18 uk-margin-small-left">{{topic.isPublic ? 'public' : 'lock'}}</i>
+                  <i class="material-icons md-18"
+                     [class.md-color-green-300]="topic.isActive">brightness_1</i>-->
+                </div>
+                <div class="uk-invisible-hover" (click)="$event.stopPropagation();$event.preventDefault()">
+                  <i class=" onHover" uk-icon="more-vertical"></i>
+                  <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
+                       class="uk-padding-remove-horizontal">
+                    <ul class="uk-nav uk-dropdown-nav uk-list">
+                      <li><a (click)="editTopicOpen(i); hide(element)">Edit</a></li>
+                      <li><a (click)="toggleTopicStatus(i); hide(element)">
+                        {{topic.isActive ? 'Inactive' : 'Active'}}</a>
+                      </li>
+                      <li><a (click)="toggleTopicAccess(i); hide(element)">
+                        {{topic.isPublic?'Private':'Public'}}</a>
+                      </li>
+                      <hr *ngIf="!topic.defaultId" class="uk-nav-divider">
+                      <li *ngIf="!topic.defaultId"><a (click)="deleteTopicOpen(i, 'delete'); hide(element)">Delete</a>
+                        <!--                        <ng-container *ngIf="!stakeholder.defaultId">-->
+                        <!--                          <a (click)="deleteTopicOpen(i, 'delete'); hide(element)">Delete from all profiles</a>-->
+                        <!--                          <a (click)="deleteTopicOpen(i, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>-->
+                        <!--                        </ng-container>-->
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </a>
+            </li>
+          </ng-template>
+          <li class="uk-text-center uk-margin-top uk-visible-toggle">
+            <a href="#" (click)="editTopicOpen(-1); $event.preventDefault()">
+<!--              <span class="menu_icon"><i class="material-icons">add</i></span>-->
+              <span
+                class="menu_icon uk-icon-button uk-button-primary icon-button-small"><i uk-icon="icon:plus; ratio:0.7"></i></span>
+              <span class="uk-hidden-hover"> Create new topic</span>
+            </a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+   <!-- <ul class="uk-list">
       <li class="uk-margin-bottom md-bg-blue-900 uk-padding-small">
         <a [routerLink]="'../'" class="md-color-white">
           <span class="menu_icon"><i class="material-icons md-color-white">arrow_back</i></span>
@@ -20,10 +84,10 @@
           </div>
           <div class="menu_on_hover"
                (click)="$event.stopPropagation();$event.preventDefault()">
-            <i class="material-icons onHover md-color-white">more_vert</i>
+            <i class="onHover " uk-icon="more-vertical"></i>
             <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
                  class="uk-padding-remove-horizontal">
-              <ul class="uk-nav uk-dropdown-nav">
+              <ul class="uk-nav uk-dropdown-nav uk-list">
                 <li><a (click)="editTopicOpen(); hide(element)">Edit</a></li>
                 <li><a (click)="toggleTopicStatus(); hide(element)">
                   {{stakeholder.topics[topicIndex].isActive ? 'Inactive' : 'Active'}}</a>
@@ -35,10 +99,10 @@
                 <li *ngIf="!stakeholder.topics[topicIndex].defaultId"><a
                        (click)="deleteTopicOpen('delete'); hide(element)">Delete
                 </a>
-<!--                  <ng-container *ngIf="!stakeholder.defaultId">-->
+&lt;!&ndash;                  <ng-container *ngIf="!stakeholder.defaultId">&ndash;&gt;
-<!--                    <a (click)="deleteTopicOpen('delete'); hide(element)">Delete from all profiles</a>-->
+&lt;!&ndash;                    <a (click)="deleteTopicOpen('delete'); hide(element)">Delete from all profiles</a>&ndash;&gt;
-<!--                    <a (click)="deleteTopicOpen('disconnect'); hide(element)">Delete and disconnect from all profiles</a>-->
+&lt;!&ndash;                    <a (click)="deleteTopicOpen('disconnect'); hide(element)">Delete and disconnect from all profiles</a>&ndash;&gt;
-<!--                  </ng-container>-->
+&lt;!&ndash;                  </ng-container>&ndash;&gt;
                 </li>
               </ul>
             </div>
@@ -50,18 +114,15 @@
             [class.act_section]="selectedCategoryIndex === i && toggle"
              [title]="category.name+': '+(category.isActive?'Active':'Inactive')+', '+(category.isPublic?'Public':'Private')"
             class="submenu_trigger">
-          <a href="#" (click)="toggleCategory(i);$event.preventDefault()">
+          <a href="#" (click)="toggleCategory(i);$event.preventDefault()" class="uk-flex">
             <span *ngIf="category.icon" class="menu_icon"><i
                 class="material-icons">{{category.icon}}</i></span>
             <div class="menu_title uk-width-expand" >
               {{category.name}}
-<!--              <i class="material-icons md-18  uk-margin-small-left">{{category.isPublic ? 'public' : 'lock'}}</i>-->
-<!--              <i class="material-icons md-18"-->
-<!--                 [class.md-color-green-300]="category.isActive">brightness_1</i>-->
             </div>
             <div class="menu_on_hover"
                  (click)="$event.stopPropagation();$event.preventDefault()">
-              <i class="material-icons onHover">more_vert</i>
+              <i class=" onHover" uk-icon="more-vertical"></i>
               <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
                    class="uk-padding-remove-horizontal">
                 <ul class="uk-nav uk-dropdown-nav">
@@ -75,10 +136,10 @@
                   <hr *ngIf="!stakeholder.topics[topicIndex].categories[i].defaultId"   class="uk-nav-divider">
                   <li *ngIf="!stakeholder.topics[topicIndex].categories[i].defaultId"><a
                          (click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete</a>
-<!--                    <ng-container *ngIf="!stakeholder.defaultId">-->
+&lt;!&ndash;                    <ng-container *ngIf="!stakeholder.defaultId">&ndash;&gt;
-<!--                      <a (click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete from all profiles</a>-->
+&lt;!&ndash;                      <a (click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete from all profiles</a>&ndash;&gt;
-<!--                      <a (click)="deleteCategoryOpen(i, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>-->
+&lt;!&ndash;                      <a (click)="deleteCategoryOpen(i, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>&ndash;&gt;
-<!--                    </ng-container>-->
+&lt;!&ndash;                    </ng-container>&ndash;&gt;
                   </li>
                 </ul>
               </div>
@@ -89,18 +150,18 @@
                          let-subcategory let-j="index">
               <li [class.act_item]="categoryIndex === i && subCategoryIndex === j"
                   [title]="subcategory.name +': ' + (subcategory.isActive?'Active':'Inactive')+', '+(subcategory.isPublic?'Public':'Private')">
-                <a href="#" (click)="chooseSubcategory(i, j);$event.preventDefault()">
+                <a href="#" (click)="chooseSubcategory(i, j);$event.preventDefault()" class="uk-flex">
                 <span *ngIf="subcategory.icon" class="menu_icon uk-margin-small-right"><i
                     class="material-icons">{{subcategory.icon}}</i></span>
                   <div class="menu_title uk-width-expand ">
                     {{subcategory.name}}
-                   <!-- <i class="material-icons md-18  uk-margin-small-left">{{subcategory.isPublic ? 'public' : 'lock'}}</i>
+                   &lt;!&ndash; <i class="material-icons md-18  uk-margin-small-left">{{subcategory.isPublic ? 'public' : 'lock'}}</i>
                     <i class="material-icons md-18"
-                       [class.md-color-green-300]="subcategory.isActive">brightness_1</i>-->
+                       [class.md-color-green-300]="subcategory.isActive">brightness_1</i>&ndash;&gt;
                   </div>
                   <div class="menu_on_hover"
                        (click)="$event.stopPropagation();$event.preventDefault()">
-                    <i class="material-icons onHover">more_vert</i>
+                    <i class=" onHover" uk-icon="more-vertical"></i>
                     <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
                          class="uk-padding-remove-horizontal">
                       <ul class="uk-nav uk-dropdown-nav">
@@ -115,10 +176,10 @@
                             class="uk-nav-divider">
                         <li *ngIf="!stakeholder.topics[topicIndex].categories[i].subCategories[j].defaultId"><a
                                (click)="deleteSubcategoryOpen(j, 'delete'); hide(element)">Delete</a>
-<!--                          <ng-container *ngIf="!stakeholder.defaultId">-->
+&lt;!&ndash;                          <ng-container *ngIf="!stakeholder.defaultId">&ndash;&gt;
-<!--                            <a (click)="deleteSubcategoryOpen(j, 'delete'); hide(element)">Delete from all profiles</a>-->
+&lt;!&ndash;                            <a (click)="deleteSubcategoryOpen(j, 'delete'); hide(element)">Delete from all profiles</a>&ndash;&gt;
-<!--                            <a (click)="deleteSubcategoryOpen(j, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>-->
+&lt;!&ndash;                            <a (click)="deleteSubcategoryOpen(j, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>&ndash;&gt;
-<!--                          </ng-container>-->
+&lt;!&ndash;                          </ng-container>&ndash;&gt;
                         </li>
                       </ul>
                     </div>
@@ -128,7 +189,7 @@
             </ng-template>
             <li>
               <a href="#" (click)="editSubCategoryOpen();$event.preventDefault()">
-                <span class="menu_icon"><i class="material-icons">add</i></span>
+                <span class="menu_icon"><i uk-icon="plus"></i></span>
                 <span class="menu_title">Create new Subcategory</span>
               </a>
             </li>
@@ -137,17 +198,120 @@
       </ng-template>
       <li>
         <a href="#" (click)="editCategoryOpen();$event.preventDefault()">
-          <span class="menu_icon"><i class="material-icons">add</i></span>
+          <span class="menu_icon"><i uk-icon="plus"></i></span>
           <span class="menu_title">Create new Category</span>
         </a>
       </li>
-    </ul>
+    </ul>-->
+  </div>
+  </div>
+  <div *ngIf="!isSmallScreen" id="sidebar_switcher_toggle" class="clickable "
+       (click)="toggleOpen($event)"  >
+    <span  class="uk-position-center"  *ngIf="!open" uk-icon="icon:chevron-right; ratio: 1.5"  ></span>
+    <span   class="uk-position-center"  *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span>
   </div>
 </aside>
-<indicators *ngIf="stakeholder" [properties]="properties"
+<div id="page_content">
-            [topicIndex]="topicIndex"
+  <div *ngIf="stakeholder"
-            [categoryIndex]="categoryIndex"
+       class="uk-navbar-container uk-sticky uk-sticky-fixed"
+       style="top: 100px; position: fixed; width: 100%">
+    <div class="uk-margin-large-left">
+      <nav class=" ">
+        <div *ngIf="stakeholder  && stakeholder.topics[topicIndex]" class="">
+          <ul *ngIf="stakeholder.topics[topicIndex] && stakeholder.topics[topicIndex].categories.length > 0"
+              class="categoriesTabs uk-tab admin uk-flex uk-flex-middle">
+            <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
+              <li class="uk-visible-toggle"
+                  [class.uk-active]="category.alias === stakeholder.topics[topicIndex].categories[categoryIndex].alias">
+                <a  (click)="toggleCategory(i)"
+                   class="uk-margin-remove-bottom uk-h4"
+                ><span>{{category.name}}</span>
+                  <span class="uk-invisible-hover"
+                       (click)="$event.stopPropagation();$event.preventDefault()">
+                    <i class=" onHover" uk-icon="more-vertical"></i>
+                    <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
+                         class="uk-padding-remove-horizontal">
+                      <ul class="uk-nav uk-dropdown-nav">
+                        <li><a (click)="editCategoryOpen(i); hide(element)">Edit</a></li>
+                        <li><a (click)="toggleCategoryStatus(i); hide(element)">
+                          {{category.isActive ? 'Inactive' : 'Active'}}</a>
+                        </li>
+                        <li><a (click)="toggleCategoryAccess(i); hide(element)">
+                          {{category.isPublic ? 'Private' : 'Public'}}</a>
+                        </li>
+                        <hr *ngIf="!stakeholder.topics[topicIndex].categories[i].defaultId"   class="uk-nav-divider">
+                        <li *ngIf="!stakeholder.topics[topicIndex].categories[i].defaultId"><a
+                          (click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete</a>
+                        </li>
+                      </ul>
+                    </div>
+                  </span>
+                </a>
+              </li>
+            </ng-template>
+            <li>
+              <span href="#" (click)="editCategoryOpen();$event.preventDefault()" class="uk-visible-toggle clickable">
+                <span class="menu_icon uk-icon-button portal-icon-button icon-button-small"><i uk-icon="icon:plus; ratio:0.7"></i></span>
+                <span class="uk-hidden-hover uk-te"> Create new category</span>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <ul *ngIf=" stakeholder.topics[topicIndex].categories[categoryIndex] &&
+      stakeholder.topics[topicIndex].categories[categoryIndex].subCategories.length > 0"
+          class="uk-subnav uk-subnav-pill subCategoriesTabs admin">
+        <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories" let-subCategory let-i="index">
+          <li
+              [class.uk-active]="(subCategory.alias ===
+              stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subCategoryIndex].alias)" class=" uk-visible-toggle uk-flex uk-flex-middle">
+            <a (click)="chooseSubcategory(categoryIndex, i);$event.preventDefault()"
+               class="uk-margin-remove-bottom uk-h3"
+            ><span>{{subCategory.name}}</span>
+
+            </a>
+            <span class="uk-invisible-hover"
+                  (click)="$event.stopPropagation();$event.preventDefault()">
+                <i class=" onHover" uk-icon="more-vertical"></i>
+                <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
+                     class="uk-padding-remove-horizontal">
+                  <ul class="uk-nav uk-dropdown-nav">
+                    <li><a (click)="editSubCategoryOpen(i); hide(element)">Edit</a></li>
+                    <li><a (click)="toggleSubcategoryStatus(i); hide(element)">
+                      {{subCategory.isActive ? 'Inactive' : 'Active'}}</a>
+                    </li>
+                    <li><a (click)="toggleSubcategoryAccess(i); hide(element)">
+                      {{subCategory.isPublic ? 'Private' : 'Public'}}</a>
+                    </li>
+                    <hr *ngIf="!stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[i].defaultId"
+                        class="uk-nav-divider">
+                    <li *ngIf="!stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[i].defaultId"><a
+                      (click)="deleteSubcategoryOpen(i, 'delete'); hide(element)">Delete</a>
+
+                    </li>
+                  </ul>
+                </div>
+              </span>
+          </li>
+        </ng-template>
+        <li>
+          <span href="#" (click)="editSubCategoryOpen();$event.preventDefault()"
+                class="uk-padding-remove uk-visible-toggle clickable">
+            <span class="menu_icon uk-icon-button portal-icon-button icon-button-small"><i uk-icon="icon:plus; ratio:0.7"></i></span>
+            <span class="uk-hidden-hover"> Create new sub category</span>
+          </span>
+        </li>
+      </ul>
+
+    </div>
+  </div>
+  <div  id="page_content_inner" class="uk-padding-large" style="margin-top: 140px;">
+  <indicators *ngIf="stakeholder" [properties]="properties"
+                [topicIndex]="topicIndex"
+                [categoryIndex]="categoryIndex"
             [subcategoryIndex]="subCategoryIndex"></indicators>
+  </div>
+</div>
 <modal-alert #deleteModal (alertOutput)="deleteElement()">
   You are about to delete <span class="uk-text-bold" *ngIf="element">"{{element.name}}"</span> {{type}} permanently.
   <div *ngIf="elementChildrenActionOnDelete == 'delete'" class="uk-text-bold">

src/app/topic/topic.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {Title} from '@angular/platform-browser';
+import {DomSanitizer, Title} from '@angular/platform-browser';
 import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
 import {Category, Section, Stakeholder, SubCategory, Topic} from "../openaireLibrary/monitor/entities/stakeholder";
 import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
@@ -11,6 +11,7 @@ import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 import {StakeholderUtils} from "../utils/indicator-utils";
 import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
 import {IDeactivateComponent} from "../openaireLibrary/utils/can-exit.guard";
+import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
 
 declare var UIkit;
 
@@ -58,7 +59,8 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
     private router: Router,
     private title: Title,
     private fb: FormBuilder,
-    private stakeholderService: StakeholderService) {
+    private stakeholderService: StakeholderService,
+    private layoutService: LayoutService) {
   }
   
   public ngOnInit() {
@@ -73,7 +75,16 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
           subscription = this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
             if (stakeholder) {
               this.stakeholder = stakeholder;
-              this.topicIndex = this.stakeholder.topics.findIndex(topic => topic.alias === params['topic']);
+              if(params['topic']) {
+                this.topicIndex = this.stakeholder.topics.findIndex(topic => topic.alias === params['topic']);
+              }else{
+                this.topicIndex = 0;
+              }
+              this.categoryIndex = 0;
+              this.subCategoryIndex = 0;
+              // console.debug(this. stakeholder.topics[this.topicIndex])
+              // console.debug(this. stakeholder.topics[this.topicIndex].categories)
+              console.debug( this. stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subCategoryIndex])
               if (this.topicIndex === -1) {
                 this.navigateToError();
               } else {
@@ -156,14 +167,19 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
     }));
   }
   
-  public editTopicOpen() {
+  public editTopicOpen(index=this.topicIndex) {
-    this.index = this.topicIndex;
+    this.index = index;
     this.type = 'topic';
-    this.buildTopic(this.stakeholder.topics[this.index]);
+    if (index === -1) {
+      this.buildTopic(new Topic(null, null, null, true, true));
+    } else {
+      this.buildTopic(this.stakeholder.topics[index]);
+    }
     this.editOpen();
   }
   
-  public saveTopic() {
+  public saveTopic(index=this.topicIndex) {
+    this.index = index;
     if (!this.form.invalid) {
       let path = [this.stakeholder._id];
       let callback = (topic: Topic): void => {
@@ -173,47 +189,46 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
     }
   }
   
-  public toggleTopicStatus() {
+  public toggleTopicStatus(index=this.topicIndex) {
-    this.index = this.topicIndex;
     this.type = 'topic';
     let path = [
       this.stakeholder._id,
-      this.stakeholder.topics[this.topicIndex]._id
+      this.stakeholder.topics[index]._id
     ];
-    this.toggleStatus(this.stakeholder.topics[this.topicIndex], path);
+    this.toggleStatus(this.stakeholder.topics[index], path);
   }
   
-  public toggleTopicAccess() {
+  public toggleTopicAccess(index=this.topicIndex) {
-    this.index = this.topicIndex;
+    this.index = index;
     this.type = 'topic';
     let path = [
       this.stakeholder._id,
-      this.stakeholder.topics[this.topicIndex]._id
+      this.stakeholder.topics[index]._id
     ];
-    this.toggleAccess(this.stakeholder.topics[this.topicIndex], path);
+    this.toggleAccess(this.stakeholder.topics[index], path);
   }
   
-  public deleteTopicOpen(childrenAction: string = null) {
+  public deleteTopicOpen( index=this.topicIndex, childrenAction: string = null) {
     this.type = 'topic';
-    this.index = this.topicIndex;
+    this.index = index;
     this.element = this.stakeholder.topics[this.index];
     this.deleteOpen(childrenAction);
   }
   
-  public deleteTopic() {
+  public deleteTopic(index=this.topicIndex) {
     let path: string[] = [
       this.stakeholder._id,
-      this.stakeholder.topics[this.index]._id
+      this.stakeholder.topics[index]._id
     ];
     let callback = (): void => {
-      this.stakeholder.topics.splice(this.index, 1);
+      this.stakeholder.topics.splice(index, 1);
     };
     this.delete('Topic has been successfully be deleted', path, callback, true);
   }
   
   public toggleCategory(index: number) {
-    if (this.selectedCategoryIndex !== index) {
+    if (this.categoryIndex !== index) {
-      this.selectedCategoryIndex = index;
+      this.categoryIndex = index;
       this.toggle = true;
     } else {
       this.toggle = !this.toggle;
@@ -558,4 +573,16 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
       return this.type;
     }
   }
+
+  public get isSmallScreen() {
+    return this.layoutService.isSmallScreen;
+  }
+  public get open() {
+    return this.layoutService.open;
+  }
+
+  public toggleOpen(event: MouseEvent) {
+    event.preventDefault();
+    this.layoutService.setOpen(!this.open);
+  }
 }

src/assets/monitor-custom.css

@@ -20,6 +20,7 @@
 
     /* Dashboard variables*/
     --sidebar-width: 320px;
+    --sidebar-mini-width: 130px;
     --sidebar-font-size: 14px;
     --header-height: 70px;
     --primary-color: #0d47a1;
@@ -40,11 +41,7 @@
 .stakeholderPage #sidebar_main .sidebar_main_header .logo{
     margin-top: 15px;
 }
-.stakeholderPage .uk-navbar-container{
-    /*background-color: white !important;*/
-    padding-left: 0;
 
-}
 .stakeholderPage .uk-navbar-center .uk-logo{
     max-height: var(--header-height);
 }
@@ -56,10 +53,10 @@
 .stakeholderPage #header_main{
     padding-left: 6px;
 }
-#header_main.light_header {
+/*#header_main.light_header {
     background: #F9FBFC !important;
     color: #000000B3;
-}
+}*/
 
 .dashboard #header_main.light_header .uk-navbar-nav > li > user-mini > a, .dashboard #header_main.light_header .uk-navbar-nav > li > a {
     color: #000000B3;
@@ -71,38 +68,12 @@
     stroke: #000000B3;
 }
 
-.stakeholderPage #hide_controls:hover #toggle:hover .material-icons, .stakeholderPage #hide_controls #toggle:not(.sidebar_main_open) .material-icons {
-    color: var(--portal-main-color);
-    /*border: var(--portal-main-color) solid 0px;*/
-}
-.stakeholderPage #hide_controls #toggle:hover .material-icons , .stakeholderPage #hide_controls #toggle:not(.sidebar_main_open) .material-icons, #hide_controls #toggle .material-icons{
-    color: var(--portal-main-color) !important;
-}
-
-.stakeholderPage #sidebar_main .menu_section > ul > li > a > .menu_icon .material-icons, .stakeholderPage #sidebar_main .menu_section > ul > li > a > .menu_icon svg * {
-    color: #1A1A1A !important;
-    fill: #1A1A1A !important;
-}
-.stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon .material-icons, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon svg * {
-    color: var(--portal-main-color) !important;
-    fill: var(--portal-main-color) !important;
-}
-
 .sidebar_mini #sidebar_main .menu_section > ul > li {
     margin-bottom: 15px !important;
 }
-.stakeholderPage #sidebar_main .menu_section > ul > li.current_section, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover,
-.stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover > a:hover
-{
-    /*background-color: var(--portal-main-color)  !important;*/
-}
 .stakeholderPage #sidebar_main .menu_section > ul > li.current_section .menu_title,.stakeholderPage #sidebar_main .menu_section > ul > li.current_section .menu_mini_title, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover  .menu_title,  .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover  .menu_mini_title, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon .material-icons,
 .stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon svg *
-/*, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover > a > .menu_icon svg **/
-/*.stakeholderPage #sidebar_main .menu_section > ul > li:hover > a > .menu_icon .material-icons*/
 {
-    /*color: white !important;*/
-    /*fill: white !important;*/
     color: var(--portal-main-color) !important;
     font-weight: 700;
 }
@@ -111,22 +82,9 @@
     max-height: calc(var(--header-height) - 30px);
 }
 .stakeholderPage .uk-tab > li.uk-active > a,.stakeholderPage .uk-tab > li > a:focus, .stakeholderPage .uk-tab > li > a:hover {
-    /*border-bottom-color: var(--portal-main-color) !important;*/
+    border: 0 transparent !important;
-    border: 0px !important;
     color: var(--portal-main-color) !important
 }
-.stakeholderPage #style_switcher {
-    top:200px;
-}
-
-.stakeholderPage .uk-navbar-container{
-    /*box-shadow: 0px 1px 3px #0000004D;*/
-
-}
-/*
-.stakeholderPage #sidebar_main{
-    background-color: #F0F4F2;
-}*/
 .stakeholderPage .categoriesTabs >li a{
     font-size: 14px;
     text-transform: capitalize;
@@ -150,12 +108,9 @@ bottom a:not(.license), bottom a > :not(svg) {
     text-decoration: underline;
 }
 
-#style_switcher{
+#style_switcher .uk-offcanvas-bar{
     width:450px !important;
 }
-#style_switcher:not(.switcher_active){
-    margin-right: -450px !important;
-}
 
 .ng5-slider .ng5-slider-pointer, .ng5-slider .ng5-slider-selection {
     background-color: var(--portal-main-color) !important;
@@ -169,13 +124,6 @@ bottom a:not(.license), bottom a > :not(svg) {
     top:200px !important;
 }
 
-#style_switcher{
-    top: 0 !important;
-    bottom: 0 !important;
-    /*padding: 50px !important;*/
-    z-index: 1105 !important;
- }
-
 
 .uk-subnav.recentyears > :first-child {
     padding-left: 0 !important;
@@ -185,13 +133,6 @@ bottom a:not(.license), bottom a > :not(svg) {
     padding-left: 0 !important;
 }
 
-/*add miniTitle*/
-.sidebar_mini #sidebar_main .menu_section > ul > li > a .menu_icon{
-    height:35px !important;
-}
-/* #sidebar_main .menu_section > ul > li > a .menu_icon{*/
-/*    height:35px !important;*/
-/*}*/
 #sidebar_main .menu_section > ul > li > a {
     height:inherit !important;
 }
@@ -221,10 +162,6 @@ bottom a:not(.license), bottom a > :not(svg) {
     margin-left: auto;
 }
 
-.stakeholderPage #sidebar_main .menu_section > ul > li > a {
-    display: inherit !important;
-    text-align: center;
-}
 .stakeholderPage #sidebar_main .menu_section > ul > li.current_section {
     width: 150px;
     height: 100%;
@@ -238,7 +175,7 @@ bottom a:not(.license), bottom a > :not(svg) {
     -o-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
     transform: rotate(-90deg);
-    margin: 35px auto 30px auto;
+    margin: 63px auto 63px auto;
 }
 .sidebar_mini #sidebar_main .menu_section > ul > li.current_section{
     -webkit-transform: rotate(0deg);
@@ -258,11 +195,9 @@ bottom a:not(.license), bottom a > :not(svg) {
     border: 1px solid #1a1a1a;
     color:  #1a1a1a;
     border-radius: 40px;
-    background-color: white;
+    background-color: transparent;
     opacity: 0.5 ;
-    /*background: var(--portal-main-color) !important;*/
+    padding: 5px 10px;
-    /*color: var(--portal-main-contrast) !important;*/
-
 }
 
 
@@ -278,7 +213,7 @@ bottom a:not(.license), bottom a > :not(svg) {
 }
 
 
-.stakeholderPage #style_switcher {
+.stakeholderPage #style_switcher .uk-offcanvas-bar {
     box-shadow: none;
     border: 1px solid var(--monitor-portal-color);
 }
@@ -287,10 +222,10 @@ bottom a:not(.license), bottom a > :not(svg) {
     border-right: 1px solid var(--monitor-portal-color);
 }
 
-.stakeholderPage .md-card.uk-disabled, .stakeholderPage .md-card.semiFiltered{
+.stakeholderPage .uk-card.uk-disabled, .stakeholderPage .uk-card.semiFiltered{
     opacity: 0.5;
 }
-.stakeholderPage .md-card.semiFiltered > * > .highcharts-series-group{
+.stakeholderPage .uk-card.semiFiltered > * > .highcharts-series-group{
     opacity: 0.5;
 }
 .stakeholderPage:not(.sidebar_mini) #sidebar_main .menu_section > ul.searchLink {
@@ -303,11 +238,9 @@ bottom a:not(.license), bottom a > :not(svg) {
 }
 .stakeholderPage #page_content > div, .stakeholderPage #page_content .uk-navbar-container{
     background-color: #F9FBFC !important;
+    box-shadow: none;
 }
 
-.stakeholderPage #page_content_inner > div.indicators{
-    padding: 0px 150px;
-}
 
 .stakeholderPage #page_content_inner {
     background-image: url(/assets/monitor-shapes-bg.svg);
@@ -317,10 +250,6 @@ bottom a:not(.license), bottom a > :not(svg) {
     background-attachment: fixed;
 
 }
-/*Don't grey out */
-.sidebar_main_active #page_content, .sidebar_main_active #header_main, .sidebar_main_active #top_bar {
-    margin-left: 320px !important;
-}
 @media only screen and (max-width: 1219px) {
     .sidebar_main_active #page_content:before {
         opacity: 0 !important;
@@ -332,6 +261,6 @@ bottom a:not(.license), bottom a > :not(svg) {
     opacity: 0.8;
 }
 
-.dashboard .sidebar_mini #hide_controls {
+.uk-navbar-container:not(.uk-navbar-transparent){
-    width: 130px;
+    background-color: #F9FBFC !important;
 }

src/assets/new.css

@@ -0,0 +1,372 @@
+:root {
+    --portal-main-color: #4686E5; /*#8DCA26;*/
+    --portal-main-contrast: white;
+    --portal-dark-color: #004494;/*#7c9144;*/
+
+    --openaire-main-color: #313179;
+
+    --explore-portal-color: #D95F2D;
+    --provide-portal-color: #37C7E9;
+    --monitor-portal-color: #8DCA26;
+    --connect-portal-color: #EBB13E;
+    --develop-portal-color: #DA65AB;
+
+    --explore-portal-lower-tone: #a0462c;
+    --provide-portal-lower-tone: #3A8FA3;
+    --monitor-portal-lower-tone: #7c9144;
+    --connect-portal-lower-tone: #b48536;
+    --develop-portal-lower-tone: #9f4e7e;
+
+
+    /* Dashboard variables*/
+    --sidebar-width: 320px;
+    --sidebar-mini-width: 130px;
+    --sidebar-font-size: 14px;
+    --header-height: 70px;
+    --primary-color: #0d47a1;
+    --secondary-color: #1CA9D5;
+
+    --monitor-header-menu-height: 100px;
+}
+/*Stakeholder Specific*/
+.publicationsSearchForm{
+    background-image: none;
+}
+.stakeholderPage #page_content > div, .stakeholderPage #page_content .uk-navbar-container{
+    background-color: #F9FBFC !important;
+    box-shadow: none;
+}
+/*.stakeholderPage #header_main, .stakeholderPage .uk-sticky.uk-navbar-container {*/
+/*    background: #F9FBFC !important;*/
+/*}*/
+.stakeholderPage #page_content_inner {
+    background-image: url(/assets/monitor-shapes-bg.svg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: top;
+    background-attachment: fixed;
+
+}
+/*General*/
+#sidebar_main #sidebar_content{
+    width:var(--sidebar-width);
+    position: fixed;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 981;
+    background: #fff;
+}
+.stakeholderPage {
+    background: #F9FBFC !important;
+}
+
+#style_switcher .uk-offcanvas-bar {
+    box-sizing: border-box;
+    padding: 16px;
+}
+#style_switcher_toggle {
+    top: 320px !important;
+    position: fixed;
+    height: 36px;
+    /*background: #fff;*/
+    background-color: rgb(255, 255, 255);
+    border-radius: 4px 0 0 4px;
+    cursor: pointer;
+    padding: 0 8px;
+    box-shadow: -2px 2px 5px rgba(0,0,0,.26);
+    box-sizing: border-box;
+    /*z-index: 981;*/
+}
+#filters_switcher_toggle {
+    top: 320px !important;
+    position: fixed;
+    height: 36px;
+    background-color: var(--portal-main-color);
+    border-radius: 4px 0 0 4px;
+    cursor: pointer;
+    padding: 0 2px;
+    box-shadow: -2px 2px 5px rgba(0,0,0,.26);
+    box-sizing: border-box;
+    /*z-index: 981;*/
+    right: 0;
+}
+.sidebar_main_swipe.sidebar_mini #sidebar_switcher_toggle{
+    left:calc( var(--sidebar-mini-width) + 0px);
+
+}
+.sidebar_main_swipe #sidebar_switcher_toggle{
+    left:calc( var(--sidebar-width) + 0px);
+}
+#sidebar_switcher_toggle {
+    top: 320px !important;
+    position: fixed;
+    background: #fff;
+    background-color: rgb(255, 255, 255);
+    border: 1px solid var(--portal-dark-color);
+    border-left: 0px ;
+    cursor: pointer;
+    padding: 0 4px;
+    width:10px;
+    height: 66px;
+    z-index: 981;
+}
+
+/*Sidebar*/
+.badge {
+    height: 59px;
+    position: absolute;
+    top: 0;
+    left: -5px;
+    z-index: 1;
+    background-color: transparent;
+    display: block !important;
+}
+/*Style*/
+
+
+#sidebar_main .menu_section > ul li > a {
+    font-size: var(--sidebar-font-size);
+    color: rgba(0,0,0,.7);
+}
+
+.dashboard #sidebar_main .menu_section > ul > li > a:hover, #sidebar_main .menu_section > ul li.current_section > a {
+    color: var(--portal-main-color);
+}
+/*#sidebar_main .menu_section > ul li.current_section > a {*/
+/*    font-size: var(--sidebar-font-size);*/
+/*    color: rgba(0,0,0,.7);*/
+/*}*/
+.sidebar_main_swipe  #page_content{
+    padding-left: var(--sidebar-width);
+    transition: 0.5s;
+}
+
+/*Sidebar close*/
+.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #page_content{
+    padding-left:0;
+    transition: 0.5s;
+
+}
+.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_main #sidebar_content {
+    display: none;
+    width:0;
+
+}
+.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_switcher_toggle{
+    left: 10px;
+}
+/*Sidebar mini*/
+.sidebar_main_swipe.sidebar_mini #page_content{
+    padding-left:var(--sidebar-mini-width);
+    transition: 0.5s;
+
+}
+
+.sidebar_mini #sidebar_main #sidebar_content {
+    width: var(--sidebar-mini-width);
+
+}
+#sidebar_main .menu_section > ul > li > a {
+    display: block;
+}
+
+.dashboard #sidebar_main #sidebar_content{
+    border-right: 1px solid var(--portal-dark-color);
+}
+/*Sidebar Header logo */
+ #sidebar_main .sidebar_main_header .portalLogo{
+    background: url("/assets/logo-large-monitor.png") no-repeat;
+    background-size: contain ;
+    margin-left: 35px;
+    margin-top: 5px;
+     height:50px;
+}
+
+ .sidebar_mini #sidebar_main .sidebar_main_header .portalLogo{
+    background: url("/assets/logo-small-monitor.png") no-repeat !important;
+    background-size: 50px 50px !important;
+}
+/*Sidebar Rotation*/
+
+.stakeholderPage #sidebar_main .menu_section > ul > li.current_section {
+    width: 150px;
+    height: 100%;
+    transition: 0.70s;
+    -webkit-transition: 0.70s;
+    -moz-transition: 0.70s;
+    -ms-transition: 0.70s;
+    -o-transition: 0.70s;
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    margin: 63px auto 63px auto;
+}
+.stakeholderPage #sidebar_main .menu_section > ul > li {
+    transition: 0.70s;
+    -webkit-transition: 0.70s;
+    -moz-transition: 0.70s;
+    -ms-transition: 0.70s;
+    -o-transition: 0.70s;
+    /*display: block;*/
+    /*text-align: center;*/
+    /*margin-right: auto;*/
+    /*margin-left: auto;*/
+}
+.sidebar_mini #sidebar_main .menu_section > ul > li.current_section{
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+    width: inherit;
+    height: inherit;
+
+    margin: 0px 0px;
+}
+
+
+.stakeholderPage #sidebar_main #sidebar_content, .stakeholderPage #sidebar_switcher_toggle {
+    border-color: var(--monitor-portal-color);
+}
+
+
+
+/*tabs
+
+*/
+
+.categoriesTabs.uk-tab > li > a, .categoriesTabs.uk-tab > li.uk-active > a,.categoriesTabs.uk-tab > li > a:focus, .categoriesTabs.uk-tab > li > a:hover {
+    border: 0 transparent !important;
+}
+.categoriesTabs.uk-tab > li.uk-active > a,.categoriesTabs.uk-tab > li > a:focus, .categoriesTabs.uk-tab > li > a:hover {
+    color: var(--portal-main-color) !important
+}
+.categoriesTabs >li a{
+    font-size: 14px;
+    text-transform: capitalize;
+}
+ .subCategoriesTabs >li a{
+    font-size: 13px;
+    text-transform: capitalize;
+}
+ .categoriesTabs > li.uk-active a, .subCategoriesTabs > li.uk-active a{
+    font-weight:bold;
+}
+.uk-subnav-pill.subCategoriesTabs > li > a{
+    border: 1px solid #1a1a1a;
+    color:  #1a1a1a;
+    border-radius: 40px;
+    background-color: transparent;
+    opacity: 0.5 ;
+    padding: 5px 10px;
+}
+
+
+.uk-subnav-pill.subCategoriesTabs > li.uk-active > a{
+    color: white;
+    border: 1px solid var(--portal-main-color);
+    background-color: var(--portal-main-color);
+    opacity: 1 ;
+}
+
+.uk-tab.categoriesTabs::before {
+    border-bottom: none !important;
+}
+
+/*dashboard tabs*/
+
+.categoriesTabs.uk-tab.admin > li.uk-active > a, .categoriesTabs.uk-tab.admin > li > a:focus, .categoriesTabs.uk-tab.admin > li > a:hover {
+    color: var(--portal-dark-color) !important
+}
+.uk-subnav-pill.subCategoriesTabs.admin > li.uk-active > a{
+    border: 1px solid var(--portal-dark-color);
+    background-color: var(--portal-dark-color);
+}
+/* Section Tools*/
+
+.dashboard .section {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-right: 10px;
+    border: rgba(0, 0, 0, 0) solid 1px;
+    position: relative;
+}
+
+.dashboard .section .tools {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -100%);
+    display: none;
+}
+
+.dashboard .section:not(.list-view) {
+    border: white solid 1px;
+}
+
+.dashboard .section:not(.list-view):hover {
+    border: var(--secondary-color) solid 1px;
+}
+
+.dashboard .section:not(.list-view):hover .tools {
+    display: block;
+    width: 50px;
+    background: var(--secondary-color) ;
+    color: white;
+    -webkit-clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%);
+    clip-path: polygon(20% 0%, 80% 0, 100% 100%, 0% 100%);
+}
+
+.dashboard .section:not(.list-view):hover .tools  a{
+    color: white;
+}
+
+.dashboard .section:hover .tools .actions a:last-child {
+    margin-left: 3px
+;
+}
+
+
+
+/* New section*/
+.dashboard .new-section {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-right: 10px;
+    border: #cecece dashed 2px;
+    background-color: white;
+    min-height: 100px;
+    position: relative;
+}
+
+.dashboard .new-section .tools {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.dashboard .new-section .tools .md-btn {
+    background-color: var(--secondary-color);
+    position: relative;
+    min-width: 40px;
+    min-height: 40px;
+    border-radius: 50%;
+}
+
+.dashboard .new-section .tools .md-btn .material-icons {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin: 0;
+}
+/*Search */
+#searchFormPanel{
+    margin-top: 30px;
+    height: 250px;
+}

src/index.html

@@ -32,10 +32,10 @@
       <app-root></app-root>
     </div>
   </body>
-  <script src="assets/theme-assets/js/common.min.js"></script>
+  <!--<script src="assets/theme-assets/js/common.min.js"></script>
   <script src="assets/theme-assets/js/altair_admin_common.min.js"></script>
   <script src="assets/theme-assets/uikit/js/uikit.min.js"></script>
-  <script src="assets/theme-assets/uikit/js/uikit-icons.min.js"></script>
+  <script src="assets/theme-assets/uikit/js/uikit-icons.min.js"></script>-->
   <script src="https://cdn.ckeditor.com/4.5.11/full-all/ckeditor.js"></script>
   <script>
       if(Modernizr.touch) {

src/styles.css

@@ -1,9 +1,21 @@
 /* You can add global styles to this file, and also import other style files */
-@import "assets/theme-assets/dashboard-custom.css";
+/*@import "assets/theme-assets/dashboard-custom.css";*/
-@import "assets/monitor-custom.css";
+/*@import "assets/monitor-custom.css";*/
-@import "assets/theme-assets/uikit/css/uikit.min.css";
+/*@import "assets/theme-assets/uikit/css/uikit.min.css";*/
-@import "assets/theme-assets/icons/flags/flags.min.css";
+/*@import "assets/theme-assets/icons/flags/flags.min.css";*/
-@import "assets/theme-assets/css/style_switcher.min.css";
+/*@import "assets/theme-assets/css/style_switcher.min.css";*/
-@import "assets/theme-assets/css/main.css";
+/*@import "assets/theme-assets/css/main.css";*/
-@import "assets/theme-assets/css/themes/my_theme.min.css";
+/*@import "assets/theme-assets/css/themes/my_theme.min.css";*/
+
+/* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+@import "assets/common-assets/common/theme.css";
+@import "assets/common-assets/common/custom.css";
+@import "assets/common-assets/library.css";
+/*@import "assets/theme-assets/dashboard-custom.css";*/
+/*@import "assets/monitor-custom.css";*/
+@import "assets/new.css";
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import "assets/common-assets/common/theme-changes.css";