From b02758e19cd44a861bb0f8b1edbb98548a6f4ca0 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Wed, 15 Nov 2023 17:40:20 +0200 Subject: [PATCH] [master | DONE]: Add style for different stakeholders. Fix routes active in menu. Change style also in admin base stakeholder's type. --- src/app/admin/admin.component.ts | 18 ++- src/app/app.component.ts | 8 +- src/app/national/national.component.ts | 58 ++++---- src/app/national/national.module.ts | 2 +- src/app/researcher/researcher.component.ts | 69 ++++----- .../search-researcher.component.html | 5 +- src/app/rfo/rfo.component.ts | 50 ++++--- src/app/rpo/rpo.component.ts | 52 +++---- src/app/rpo/rpo.module.ts | 3 +- .../search/searchPages/searchBaseComponent.ts | 1 - src/assets/extend-theme/less/banner.less | 5 +- src/assets/extend-theme/less/color.less | 16 +- src/assets/extend-theme/less/variables.less | 9 +- src/assets/irish-monitor.less | 138 ++++++++---------- src/styles.less | 2 +- 15 files changed, 210 insertions(+), 226 deletions(-) diff --git a/src/app/admin/admin.component.ts b/src/app/admin/admin.component.ts index 4aa6e2c..d8465a1 100644 --- a/src/app/admin/admin.component.ts +++ b/src/app/admin/admin.component.ts @@ -9,14 +9,16 @@ import {MenuItem} from "../openaireLibrary/sharedComponents/menu"; @Component({ selector: 'admin', template: ` - -
- -
- +
+ +
+ +
+ +
` diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a2d4ddc..06cf3c1 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -69,10 +69,10 @@ export class AppComponent extends StakeholderBaseComponent implements OnInit { initialize() { this.menuItems = [ - new MenuItem("national", this.stakeholderUtils.entities.country + ' ' + this.stakeholderUtils.entities.stakeholder, "", "/", false, [], null, {}, null, null, null, null), - new MenuItem("rpo", this.stakeholderUtils.entities.organization + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rpo", false, [], null, {}, null, null, null, null), - new MenuItem("rfo", this.stakeholderUtils.entities.funder + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rfo", false, [], null, {}, null, null, null, null), - new MenuItem("researcher", "Researcher Monitors", "", "/researcher", false, [], null, {}, null, null, null, null), + new MenuItem("national", this.stakeholderUtils.entities.country + ' ' + this.stakeholderUtils.entities.stakeholder, "", "/", false, [], null, {}, null, null, null, '/search'), + new MenuItem("rpo", this.stakeholderUtils.entities.organization + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rpo", false, [], null, {}, null, null, null, "/rpo"), + new MenuItem("rfo", this.stakeholderUtils.entities.funder + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rfo", false, [], null, {}, null, null, null, "/rfo"), + new MenuItem("researcher", "Researcher Monitors", "", "/researcher", false, [], null, {}, null, null, null, "/researcher"), /* new MenuItem("repository", "Repository Monitors", "", "/", false, [], null, {}, null, null, null, null), */ diff --git a/src/app/national/national.component.ts b/src/app/national/national.component.ts index 4df763c..4ec296d 100644 --- a/src/app/national/national.component.ts +++ b/src/app/national/national.component.ts @@ -13,34 +13,36 @@ import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/s @Component({ selector: 'national', template: ` - - -
-
-
-

{{entities.country}} {{entities.stakeholder}}

-
-
-
-
- -
-
-
-
- -
- -

- No {{entities.country}} {{entities.stakeholder}} yet. -

+
+ +
+
+
+
+

{{entities.country}} {{entities.stakeholder}}

+
+
+
+
+ +
+
+
+
+ +
+
+

+ No {{entities.country}} {{entities.stakeholder}} yet. +

+
` }) export class NationalComponent extends StakeholderBaseComponent implements OnInit { diff --git a/src/app/national/national.module.ts b/src/app/national/national.module.ts index 67aa019..f11c6a5 100644 --- a/src/app/national/national.module.ts +++ b/src/app/national/national.module.ts @@ -8,7 +8,7 @@ const routes: Route[] = [ path: '', component: NationalComponent, children: [ {path: 'search', loadChildren: () => import('../search/search.module').then(m => m.SearchModule)}, {path: '', loadChildren: () => import('../shared/monitor/monitor.module').then(m => m.MonitorModule)}, - ], data: {stakeholder: 'irish'} + ], data: {stakeholder: 'tubitak'} } ]; diff --git a/src/app/researcher/researcher.component.ts b/src/app/researcher/researcher.component.ts index 3f5a0a2..409cb90 100644 --- a/src/app/researcher/researcher.component.ts +++ b/src/app/researcher/researcher.component.ts @@ -16,45 +16,50 @@ import {StringUtils} from "../openaireLibrary/utils/string-utils.class"; @Component({ selector: 'researcher', template: ` -
-
-
-
- - -
-
- {{author.authorGivenName}} {{author.authorFamilyName}} -
- {{totalResults}} research outcomes ({{getPercentage()}}% open access) - {{author.institutions.join(", ")}} -
- -
+
+ +
+
+
+
+
+
+
+ + +
+
+ {{author.authorGivenName}} {{author.authorFamilyName}} +
+ {{totalResults}} research outcomes ({{getPercentage()}}% open access) + {{author.institutions.join(", ")}} +
-
- orcid - +
- {{properties.orcidURL + author.id}}
+
+ orcid + + + {{properties.orcidURL + author.id}}
+
+

Researchers

+
+
+
+
+ +
+
-
-
Researcher Monitors
-
Lorem ipsum...
-
- -
-
- -
` }) export class ResearcherComponent extends BaseComponent implements OnInit { author; authorId; - properties = properties; totalResults; openResults; loading = false; @@ -74,7 +79,6 @@ export class ResearcherComponent extends BaseComponent implements OnInit { ngOnInit() { this.params.subscribe(params => { - this.authorId = params['stakeholder']; this.author = null; this._customFilterService.setCustomFilter([]); @@ -90,7 +94,6 @@ export class ResearcherComponent extends BaseComponent implements OnInit { ]); this.getResultsForAuthor(); - // TODO not correct id/ no author // no irish author? }, err => { this._router.navigate([properties.errorLink]); })); diff --git a/src/app/researcher/search-researcher/search-researcher.component.html b/src/app/researcher/search-researcher/search-researcher.component.html index 16c51f9..de4b7e2 100644 --- a/src/app/researcher/search-researcher/search-researcher.component.html +++ b/src/app/researcher/search-researcher/search-researcher.component.html @@ -52,12 +52,11 @@
- diff --git a/src/app/rfo/rfo.component.ts b/src/app/rfo/rfo.component.ts index 5210d5d..083582d 100644 --- a/src/app/rfo/rfo.component.ts +++ b/src/app/rfo/rfo.component.ts @@ -13,34 +13,36 @@ import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/s @Component({ selector: 'rfo', template: ` - - -
-
-
-

{{stakeholder.name}}

-

{{entities.funders}}

-
-
-
+
+ +
+
- +
+

{{stakeholder.name}}

+

{{entities.funders}}

+
+
+
+
+ +
+
+ +
-
- -
- +
` }) export class RfoComponent extends StakeholderBaseComponent implements OnInit { diff --git a/src/app/rpo/rpo.component.ts b/src/app/rpo/rpo.component.ts index ad706a0..ff08001 100644 --- a/src/app/rpo/rpo.component.ts +++ b/src/app/rpo/rpo.component.ts @@ -13,34 +13,36 @@ import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/s @Component({ selector: 'rpo', template: ` - - -
-
-
-

{{stakeholder.name}}

-

{{entities.organizations}}

-
-
-
+
+ +
+
- +
+

{{stakeholder.name}}

+

{{entities.organizations}}

+
+
+
+
+ +
-
-
- -
- +
+ +
+
+
` }) export class RpoComponent extends StakeholderBaseComponent implements OnInit { diff --git a/src/app/rpo/rpo.module.ts b/src/app/rpo/rpo.module.ts index 1018910..a4cf979 100644 --- a/src/app/rpo/rpo.module.ts +++ b/src/app/rpo/rpo.module.ts @@ -2,6 +2,7 @@ import {NgModule} from "@angular/core"; import {CommonModule} from "@angular/common"; import {Route, RouterModule} from "@angular/router"; import {RpoComponent} from "./rpo.component"; +import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module"; const routes: Route[] = [ { path: '', component: RpoComponent, children: [ @@ -13,7 +14,7 @@ const routes: Route[] = [ ]; @NgModule({ - imports: [CommonModule, RouterModule.forChild(routes)], + imports: [CommonModule, RouterModule.forChild(routes), LoadingModule], declarations: [RpoComponent], exports: [RpoComponent], }) diff --git a/src/app/search/searchPages/searchBaseComponent.ts b/src/app/search/searchPages/searchBaseComponent.ts index 57fef2d..a8f5fce 100644 --- a/src/app/search/searchPages/searchBaseComponent.ts +++ b/src/app/search/searchPages/searchBaseComponent.ts @@ -1,6 +1,5 @@ import {Directive, OnInit} from "@angular/core"; import {SearchCustomFilter} from "../../openaireLibrary/searchPages/searchUtils/searchUtils.class"; -import {properties} from "../../../environments/environment"; import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component"; import {CustomFilterService} from "../../shared/customFilter.service"; import {ActivatedRoute, Router} from "@angular/router"; diff --git a/src/assets/extend-theme/less/banner.less b/src/assets/extend-theme/less/banner.less index 3bd57bc..a5dc884 100644 --- a/src/assets/extend-theme/less/banner.less +++ b/src/assets/extend-theme/less/banner.less @@ -1,4 +1,5 @@ -@banner-background: @irish-thin-color; +@banner-background: @ciel-color; +@banner-background-gradient: none; @banner-mode: dark; @banner-footer-background: transparent; @@ -7,7 +8,6 @@ @banner-tab-margin-bottom: @global-small-margin; @banner-tab-divider: @global-border-width solid @global-border; @banner-tab-divider-height: @global-line-height; -@banner-tab-item-color: @global-color; @banner-tab-item-hover-color: @global-secondary-background; @banner-tab-item-active-color: @global-secondary-background; @banner-tab-item-active-indicator: @global-background; @@ -43,7 +43,6 @@ } a { - color: @banner-tab-item-color; text-transform: uppercase; text-decoration: none; } diff --git a/src/assets/extend-theme/less/color.less b/src/assets/extend-theme/less/color.less index 5fe56b9..9018756 100644 --- a/src/assets/extend-theme/less/color.less +++ b/src/assets/extend-theme/less/color.less @@ -1,12 +1,14 @@ -@irish-primary-color: #009A49; -@irish-light-color: #25AE7A; -@irish-dark-color: #002B1A; -@irish-secondary-color: #FF7901; -@irish-thin-color: #DCE9E3; -@irish-global-background: #F9FBFC; +@primary-color: #009A49; +@primary-light-color: #25AE7A; +@primary-dark-color: #002B1A; +@secondary-color: #FF7901; +@ciel-color: #DCE9E3; +@default-color: #F9FBFC; +@muted-color: @gray-300; @funder-color: #4D276F; @organization-color: #f5cc1c; -@country-color: @irish-primary-color; +@country-color: @primary-color; @datasource-color: #D45E50; +@researcher-color: #184377; diff --git a/src/assets/extend-theme/less/variables.less b/src/assets/extend-theme/less/variables.less index f7bdd32..204c092 100644 --- a/src/assets/extend-theme/less/variables.less +++ b/src/assets/extend-theme/less/variables.less @@ -1,14 +1,7 @@ @import "color"; /** Backgrounds */ -@global-primary-background: @irish-primary-color; -@global-secondary-background: @irish-secondary-color; -@global-background: @irish-global-background; -@global-primary-gradient: radial-gradient(closest-side at 50% 50%, @irish-light-color 0%, @irish-dark-color 100%); -@global-muted-background: @gray-300; - -/** Borders */ -@global-border: @gray-300; +@global-primary-gradient: radial-gradient(closest-side at 50% 50%, @primary-light-color 0%, @primary-dark-color 100%); /* Controls */ @global-control-small-height: 25px; diff --git a/src/assets/irish-monitor.less b/src/assets/irish-monitor.less index 4d98861..f35c7b1 100644 --- a/src/assets/irish-monitor.less +++ b/src/assets/irish-monitor.less @@ -1,87 +1,67 @@ @general-search-form-background: none; -.irish-monitor { - /* Import OpenAIRE theme*/ - @import (multiple) "~src/assets/openaire-theme/less/_import"; - @import (multiple) "~src/assets/common-assets/less/general"; - @import (multiple) "~src/assets/common-assets/less/dashboard"; - @import (multiple) "~src/assets/common-assets/less/landing"; +.country { + @import (multiple) "~src/assets/extend-theme/less/_import-variables"; + @import (multiple) "~src/assets/extend-theme/less/banner"; - @monitor-dashboard-background: #F3F3F3; - - /** Global */ - @global-primary-gradient: linear-gradient(110deg, @monitor-light-color 0%, @monitor-dark-color 100%); - - /** Background */ - @background-primary-background: @monitor-color; - @background-primary-background-gradient: none; - - /** Button */ - @button-primary-background: @monitor-color; - @button-secondary-border: @monitor-color; - @button-secondary-color: @monitor-color; - @button-secondary-hover-background: @global-secondary-background; - @button-secondary-hover-background-gradient: none; - @button-secondary-active-background: @global-secondary-background; - @button-secondary-active-background-gradient: none; - - /** Label */ - @label-secondary-color: @monitor-color; - @label-secondary-border: @monitor-color; - - /** List */ - @list-primary-color: @monitor-color; - - /* Navbar */ - @inverse-navbar-background: @monitor-color; - - /** Text */ - @text-primary-color: @monitor-color; - @text-background-color: @monitor-color; - @inverse-text-primary-color: @monitor-color; - - /* Slider */ - @dotnav-item-background: fade(@monitor-color, 50%); - @dotnav-item-hover-background: @monitor-color; - @dotnav-item-onclick-background: @monitor-color; - @dotnav-item-active-background: @monitor-color; - - /* General */ - @general-search-form-background: @monitor-dashboard-background; - @general-tab-featured-tab: @monitor-color; - - /* Landing */ - @landing-portal-color: @monitor-color; - - /* Dashboard */ - @dashboard-page-content-background: @monitor-dashboard-background; - @dashboard-primary-background: @monitor-color; - @dashboard-menu-section-sublist-border: fade(@monitor-color, 30%); - - & #filters_icon .start { - stop-color: @monitor-light-color; - } - - & #filters_icon .end { - stop-color: @monitor-dark-color; - } - - .preview { - position: fixed; - bottom: 40px; - left: 50%; - transform: translateX(-50%); - background: @global-inverse-color; - border: 2px solid @background-primary-background; - border-radius: @global-border-radius; - box-shadow: @global-large-box-shadow; - padding: 20px 25px; - z-index: @global-z-index; - } + @banner-mode: light; + @banner-background: @global-primary-gradient; } -#print_toggle { - top: 320px !important; +.funder { + @import (multiple) "~src/assets/extend-theme/less/_import"; + @import (multiple) "~src/assets/common-assets/less/general"; + @import (multiple) "~src/assets/common-assets/less/landing"; + @import (multiple) "~src/assets/common-assets/less/dashboard"; + + @primary-color: @funder-color; + @primary-light-color: #9A4DDD; + @primary-dark-color: #480088; + @ciel-color: #dab6ff; + @banner-mode: light; + @banner-background: @global-primary-gradient; +} + +.organization { + @import (multiple) "~src/assets/extend-theme/less/_import"; + @import (multiple) "~src/assets/common-assets/less/general"; + @import (multiple) "~src/assets/common-assets/less/landing"; + @import (multiple) "~src/assets/common-assets/less/dashboard"; + + @primary-color: @organization-color; + @primary-light-color: #ffe165; + @primary-dark-color: #9c7d00; + @ciel-color: #fff1cb; + @banner-mode: light; + @banner-background: @global-primary-gradient; +} + +.datasource { + @import (multiple) "~src/assets/extend-theme/less/_import"; + @import (multiple) "~src/assets/common-assets/less/general"; + @import (multiple) "~src/assets/common-assets/less/landing"; + @import (multiple) "~src/assets/common-assets/less/dashboard"; + + @primary-color: @datasource-color; + @primary-light-color: #D45E50; + @primary-dark-color: #6A2F28; + @ciel-color: #ffc3bf; + @banner-mode: light; + @banner-background: @global-primary-gradient; +} + +.researcher { + @import (multiple) "~src/assets/extend-theme/less/_import"; + @import (multiple) "~src/assets/common-assets/less/general"; + @import (multiple) "~src/assets/common-assets/less/landing"; + @import (multiple) "~src/assets/common-assets/less/dashboard"; + + @primary-color: @researcher-color; + @primary-light-color: #3086ED; + @primary-dark-color: #184377; + @ciel-color: #ddeaff; + @banner-mode: light; + @banner-background: @global-primary-gradient; } #filters_switcher_toggle { diff --git a/src/styles.less b/src/styles.less index 5dd7d53..a2c20e3 100644 --- a/src/styles.less +++ b/src/styles.less @@ -1,5 +1,5 @@ /* You can add global styles to this file, and also import other style files */ -/* Import OpenAIRE theme*/ +/* Import Irish theme*/ @import "~src/assets/extend-theme/less/_import"; @import "~src/assets/common-assets/less/general"; @import "~src/assets/common-assets/less/user";