[master]: Set irish prefix to empty, Split all themes in different css and include them when rootclass is changed.

angular.json

@@ -56,7 +56,12 @@
             ],
             "styles": [
               "src/styles.less",
-              "src/assets/common-assets/library-css/material.scss"
+              "src/assets/common-assets/library-css/material.scss",
+              {"input": "src/assets/country.less", "inject": false },
+              {"input": "src/assets/funder.less", "inject": false },
+              {"input": "src/assets/organization.less", "inject": false },
+              {"input": "src/assets/datasource.less", "inject": false },
+              {"input": "src/assets/researcher.less", "inject": false }
             ],
             "scripts": [
               "src/assets/common-assets/js/copy.js",

src/app/app.component.ts

@@ -12,6 +12,7 @@ import {LayoutService} from "./openaireLibrary/dashboard/sharedComponents/sideba
 import {StakeholderUtils} from "./openaireLibrary/monitor-admin/utils/indicator-utils";
 import {ResearcherBaseComponent} from "./shared/researcher-base.component";
 import {UserProfileService} from "./openaireLibrary/services/userProfile.service";
+import {app} from "../../server";
 
 @Component({
   selector: 'app-root',
@@ -94,6 +95,7 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.isClient = typeof document !== 'undefined';
     this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
       this.user = user;
       if(user){
@@ -104,12 +106,24 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit {
       this.initialize();
     }));
     this.subscriptions.push(this.layoutService.rootClass.subscribe(rootClass => {
+      if(rootClass && this.isClient) {
+        let link = <HTMLLinkElement>document.getElementById('theme');
+        let append = false;
+        if(!link) {
+          link = document.createElement('link');
+          link.rel = 'stylesheet';
+          link.id = 'theme';
+          append = true;
+        }
+        link.href = rootClass + '.css';
+        link.onerror = (error) => console.log(error);
+        if(append) {
+          document.head.appendChild(link);
+        }
+      }
       this.rootClass = rootClass;
       this.cdr.detectChanges();
     }));
-    if (typeof document !== 'undefined') {
-      this.isClient = true;
-    }
 
   }
 

src/app/shared/irish.ts

@@ -4,7 +4,7 @@ import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sideb
 import {Role} from "../openaireLibrary/login/utils/helper.class";
 
 export class Irish {
-  public static METADATA_PREFIX = 'NOAMI | ';
+  public static METADATA_PREFIX = '';
 
   public portal: Portal = Portal.getMockCommunityInfo("noami", "Noami",['service'],['/search/advanced/services', '/search/find/services']);
 

src/assets/common-assets

@@ -1 +1 @@
-Subproject commit 2b5a3ffcbafe4ec3513a145c218027721a2689fa
+Subproject commit 2ea093d47e975941833c4303e37c691967732d4b

src/assets/country.less

@@ -0,0 +1,7 @@
+.country {
+  @import (multiple) "~src/assets/common";
+
+  @primary-color: @primary-dark-color;
+  @secondary-color: @irish-global-primary-color;
+  @banner-background: @global-primary-gradient;
+}

src/assets/datasource.less

@@ -0,0 +1,10 @@
+.datasource {
+  @import (multiple) "~src/assets/common";
+
+  @primary-color: @datasource-color;
+  @secondary-color: #CB4C99;
+  @primary-light-color: @secondary-color;
+  @primary-dark-color: @primary-color;
+  @ciel-color: #F5E9F3;
+  @banner-background: @global-primary-gradient;
+}

src/assets/funder.less

@@ -0,0 +1,10 @@
+.funder {
+  @import (multiple) "~src/assets/common";
+
+  @primary-color: @funder-color;
+  @secondary-color: #9A4DDD;
+  @primary-light-color: @secondary-color;
+  @primary-dark-color: @primary-color;
+  @ciel-color: #F5EDFC;
+  @banner-background: @global-primary-gradient;
+}

src/assets/irish-monitor.less

@@ -1,91 +0,0 @@
-.country {
-  @import (multiple) "~src/assets/common";
-
-  @primary-color: @primary-dark-color;
-  @secondary-color: @irish-global-primary-color;
-  @banner-background: @global-primary-gradient;
-
-  .indicator-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: @global-overlay-background;
-    width: 100%;
-    height: 100%;
-  
-    .inner {
-      background: @global-background;
-      border-radius: @global-border-radius;
-      width: 75%;
-      max-height: 75%;
-      overflow: auto;
-    }
-  }
-}
-
-.funder {
-  @import (multiple) "~src/assets/common";
-
-  @primary-color: @funder-color;
-  @secondary-color: #9A4DDD;
-  @primary-light-color: @secondary-color;
-  @primary-dark-color: @primary-color;
-  @ciel-color: #F5EDFC;
-  @banner-background: @global-primary-gradient;
-}
-
-.organization {
-  @import (multiple) "~src/assets/common";
-
-  @primary-color: @organization-color;
-  @secondary-color: #EB4386;
-  @primary-light-color: @secondary-color;
-  @primary-dark-color: @primary-color;
-  @ciel-color: #F7E9F0;
-  @banner-background: @global-primary-gradient;
-}
-
-.datasource {
-  @import (multiple) "~src/assets/common";
-
-  @primary-color: @datasource-color;
-  @secondary-color: #CB4C99;
-  @primary-light-color: @secondary-color;
-  @primary-dark-color: @primary-color;
-  @ciel-color: #F5E9F3;
-  @banner-background: @global-primary-gradient;
-}
-
-.researcher {
-  @import (multiple) "~src/assets/common";
-
-  @primary-color: @researcher-color;
-  @secondary-color: #3086ED;
-  @primary-light-color: @secondary-color;
-  @primary-dark-color: @primary-color;
-  @ciel-color: #E5F0FA;
-  @banner-background: @global-primary-gradient;
-}
-
-#filters_switcher_toggle {
-  top: 400px !important;
-}
-
-@media (max-width: @breakpoint-small-max) {
-  #filters_switcher_toggle {
-    top: unset !important;
-    bottom: 10vh;
-  }
-}
-
-/* Quick fix for svgs with a class that makes their opacity: 0.5*/
-svg .a {
-  opacity: 1 !important;
-}
-
-
-&.semiFiltered {
-  &, & > * > .highcharts-series-group {
-    opacity: 0.5;
-  }
-}

src/assets/organization.less

@@ -0,0 +1,10 @@
+.organization {
+  @import (multiple) "~src/assets/common";
+
+  @primary-color: @organization-color;
+  @secondary-color: #EB4386;
+  @primary-light-color: @secondary-color;
+  @primary-dark-color: @primary-color;
+  @ciel-color: #F7E9F0;
+  @banner-background: @global-primary-gradient;
+}

src/assets/researcher.less

@@ -0,0 +1,10 @@
+.researcher {
+  @import (multiple) "~src/assets/common";
+
+  @primary-color: @researcher-color;
+  @secondary-color: #3086ED;
+  @primary-light-color: @secondary-color;
+  @primary-dark-color: @primary-color;
+  @ciel-color: #E5F0FA;
+  @banner-background: @global-primary-gradient;
+}

src/styles.less

@@ -1,7 +1,27 @@
-/* You can add global styles to this file, and also import other style files */
-/* Import Irish theme*/
 @import "~src/assets/common";
 @import "~src/assets/common-assets/less/user";
 @import "~src/assets/common-assets/less/linking";
 @import "~src/assets/common-assets/less/ckeditor";
-@import "~src/assets/irish-monitor";
+
+#filters_switcher_toggle {
+  top: 400px !important;
+}
+
+@media (max-width: @breakpoint-small-max) {
+  #filters_switcher_toggle {
+    top: unset !important;
+    bottom: 10vh;
+  }
+}
+
+/* Quick fix for svgs with a class that makes their opacity: 0.5*/
+svg .a {
+  opacity: 1 !important;
+}
+
+
+&.semiFiltered {
+  &, & > * > .highcharts-series-group {
+    opacity: 0.5;
+  }
+}