From e9f62ae6830ec70a58c0724f4466e07cd8b86725 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Fri, 24 Nov 2023 10:55:49 +0200 Subject: [PATCH] Finish style structure for all entities. Add root class in app component in order to apply theme in modals. --- src/app/admin/admin.component.ts | 9 ++- src/app/app.component.ts | 21 ++++--- src/app/national/national.component.ts | 10 ++- src/app/openaireLibrary | 2 +- src/app/researcher/researcher.component.ts | 70 +++++++++++---------- src/app/rfo/rfo.component.ts | 56 +++++++++-------- src/app/rpo/rpo.component.ts | 66 ++++++++++--------- src/assets/extend-theme/less/banner.less | 32 ++++++---- src/assets/extend-theme/less/color.less | 19 +++--- src/assets/extend-theme/less/variables.less | 2 +- src/assets/irish-monitor.less | 38 ++++++----- src/assets/openaire-theme | 2 +- src/styles.less | 2 - 13 files changed, 193 insertions(+), 136 deletions(-) diff --git a/src/app/admin/admin.component.ts b/src/app/admin/admin.component.ts index 9dc57a7..e764209 100644 --- a/src/app/admin/admin.component.ts +++ b/src/app/admin/admin.component.ts @@ -9,7 +9,7 @@ import {MenuItem} from "../openaireLibrary/sharedComponents/menu"; @Component({ selector: 'admin', template: ` -
+
{ this.stakeholder = stakeholder; + this.layoutService.setRootClass(this.stakeholder.type); this.sideBarItems.push(new MenuItem("general", "General", "", "/admin/" + this.stakeholder.alias, false, [], [], {}, {name: 'badge'})); this.sideBarItems.push(new MenuItem("indicators", "Indicators", "", "/admin/" + this.stakeholder.alias + '/indicators', false, [], [], {}, {name: 'bar_chart'}, null, "uk-visible@m")); this.backItem = new MenuItem("back", "Manage profiles", "", "/admin", false, [], null, {}, {name: 'west'}); @@ -52,9 +53,15 @@ export class AdminComponent extends SidebarBaseComponent implements OnInit { })); } else { this.stakeholderService.setStakeholder(null); + this.layoutService.setRootClass(null); this.hasSidebar = false; this.loading = false; } })); } + + ngOnDestroy() { + super.ngOnDestroy(); + this.layoutService.setRootClass(null); + } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 48f107d..ffda138 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -9,6 +9,7 @@ import {UserManagementService} from "./openaireLibrary/services/user-management. import {Session, User} from "./openaireLibrary/login/utils/helper.class"; import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll"; import {StakeholderBaseComponent} from "./openaireLibrary/monitor-admin/utils/stakeholder-base.component"; +import {LayoutService} from "./openaireLibrary/dashboard/sharedComponents/sidebar/layout.service"; @Component({ selector: 'app-root', @@ -16,11 +17,11 @@ import {StakeholderBaseComponent} from "./openaireLibrary/monitor-admin/utils/st
-
-
+
+ +
-
@@ -31,6 +32,7 @@ import {StakeholderBaseComponent} from "./openaireLibrary/monitor-admin/utils/st export class AppComponent extends StakeholderBaseComponent implements OnInit { loading: boolean = false; hasHeader: boolean = true; + rootClass: string; header: Header = { route: "/", title: "Noami", @@ -46,8 +48,10 @@ export class AppComponent extends StakeholderBaseComponent implements OnInit { constructor(protected _route: ActivatedRoute, protected _router: Router, + private layoutService: LayoutService, private smoothScroll: SmoothScroll, - private configurationService: ConfigurationService, private customFilterService:CustomFilterService, + private configurationService: ConfigurationService, + private customFilterService:CustomFilterService, private userManagementService: UserManagementService) { super(); this.configurationService.initStaticPortal(this.irish.portal); @@ -61,10 +65,13 @@ export class AppComponent extends StakeholderBaseComponent implements OnInit { } ngOnInit() { - this.userManagementService.getUserInfo().subscribe(user => { + this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => { this.user = user; this.initialize(); - }) + })); + this.subscriptions.push(this.layoutService.rootClass.subscribe(rootClass => { + this.rootClass = rootClass; + })); } initialize() { diff --git a/src/app/national/national.component.ts b/src/app/national/national.component.ts index ac960dc..11835f7 100644 --- a/src/app/national/national.component.ts +++ b/src/app/national/national.component.ts @@ -9,11 +9,12 @@ import {SearchCustomFilter} from "../openaireLibrary/searchPages/searchUtils/sea import {LinksResolver} from "../search/links-resolver"; import {CustomFilterService} from "../shared/customFilter.service"; import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/stakeholder-base.component"; +import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service"; @Component({ selector: 'national', template: ` -
+
@@ -51,6 +52,7 @@ export class NationalComponent extends StakeholderBaseComponent implements OnIni isSearch: boolean = false; constructor(private stakeholderService: StakeholderService, + private layoutService: LayoutService, protected _router: Router, protected _route: ActivatedRoute, protected seoService: SEOService, @@ -65,6 +67,7 @@ export class NationalComponent extends StakeholderBaseComponent implements OnIni } ngOnInit() { + this.layoutService.setRootClass('country'); this.stakeholderService.getStakeholder(this._route.snapshot.data.stakeholder).subscribe(stakeholder => { this.stakeholder = stakeholder; if(this.stakeholder) { @@ -76,4 +79,9 @@ export class NationalComponent extends StakeholderBaseComponent implements OnIni } }); } + + ngOnDestroy() { + super.ngOnDestroy(); + this.layoutService.setRootClass(null); + } } diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary index 3c1b72e..205b974 160000 --- a/src/app/openaireLibrary +++ b/src/app/openaireLibrary @@ -1 +1 @@ -Subproject commit 3c1b72e7e4c2e551f15315a2ddd4e62ec0880423 +Subproject commit 205b97487c46062cec7bbbb1828a65b165f72ee6 diff --git a/src/app/researcher/researcher.component.ts b/src/app/researcher/researcher.component.ts index 409cb90..cb9d072 100644 --- a/src/app/researcher/researcher.component.ts +++ b/src/app/researcher/researcher.component.ts @@ -12,47 +12,46 @@ import {CustomFilterService} from "../shared/customFilter.service"; import {LinksResolver} from "../search/links-resolver"; import {SearchResearchResultsService} from "../openaireLibrary/services/searchResearchResults.service"; import {StringUtils} from "../openaireLibrary/utils/string-utils.class"; +import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service"; @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}}
-

Researchers

+ +
+ orcid + + + {{properties.orcidURL + author.id}}
+

Researchers

-
- -
+
+
+
` @@ -69,6 +68,7 @@ export class ResearcherComponent extends BaseComponent implements OnInit { protected _piwikService: PiwikService, protected _title: Title, protected _meta: Meta, + private layoutService: LayoutService, private _searchOrcidService: SearchOrcidService, private _customFilterService:CustomFilterService, private _searchResearchResultsService: SearchResearchResultsService) { super(); @@ -78,6 +78,7 @@ export class ResearcherComponent extends BaseComponent implements OnInit { ngOnInit() { + this.layoutService.setRootClass('researcher'); this.params.subscribe(params => { this.authorId = params['stakeholder']; this.author = null; @@ -100,8 +101,13 @@ export class ResearcherComponent extends BaseComponent implements OnInit { } }); - } + + ngOnDestroy() { + super.ngOnDestroy(); + this.layoutService.setRootClass(null); + } + getResultsForAuthor(){ let param = '(authorid="' + StringUtils.URIEncode(this.author.id) + '")'; param += ' and (country exact "IE")'; diff --git a/src/app/rfo/rfo.component.ts b/src/app/rfo/rfo.component.ts index 552c9ed..4eb6116 100644 --- a/src/app/rfo/rfo.component.ts +++ b/src/app/rfo/rfo.component.ts @@ -9,38 +9,37 @@ import {SearchCustomFilter} from "../openaireLibrary/searchPages/searchUtils/sea import {LinksResolver} from "../search/links-resolver"; import {CustomFilterService} from "../shared/customFilter.service"; import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/stakeholder-base.component"; +import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service"; @Component({ selector: 'rfo', template: ` -
- -
-
+ +
+
+
+
+

{{stakeholder.name}}

+

{{entities.funders}}

+
+
+
-
-

{{stakeholder.name}}

-

{{entities.funders}}

-
-
-
-
- -
+
-
- -
+
+
+
` @@ -52,6 +51,7 @@ export class RfoComponent extends StakeholderBaseComponent implements OnInit { loading: boolean = false; constructor(private stakeholderService: StakeholderService, + private layoutService: LayoutService, private _customFilterService: CustomFilterService, protected _router: Router, protected _route: ActivatedRoute, @@ -67,6 +67,7 @@ export class RfoComponent extends StakeholderBaseComponent implements OnInit { } ngOnInit() { + this.layoutService.setRootClass('funder'); this.params.subscribe(params => { this._customFilterService.setCustomFilter(null); this.alias = params['stakeholder']; @@ -92,4 +93,9 @@ export class RfoComponent extends StakeholderBaseComponent implements OnInit { } }); } + + ngOnDestroy() { + super.ngOnDestroy(); + this.layoutService.setRootClass(null); + } } diff --git a/src/app/rpo/rpo.component.ts b/src/app/rpo/rpo.component.ts index 40a9b07..8faa10a 100644 --- a/src/app/rpo/rpo.component.ts +++ b/src/app/rpo/rpo.component.ts @@ -9,40 +9,39 @@ import {SearchCustomFilter} from "../openaireLibrary/searchPages/searchUtils/sea import {LinksResolver} from "../search/links-resolver"; import {CustomFilterService} from "../shared/customFilter.service"; import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/stakeholder-base.component"; +import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service"; @Component({ selector: 'rpo', template: ` -
- -
-
-
-
-

{{stakeholder.name}}

-

{{entities.organizations}}

-
-
-
-
- -
-
-
-
- -
-
-
+ +
+
+
+
+

{{stakeholder.name}}

+

{{entities.organizations}}

+
+
+
+
+ +
+
+
+
+ +
+
` }) export class RpoComponent extends StakeholderBaseComponent implements OnInit { @@ -53,6 +52,7 @@ export class RpoComponent extends StakeholderBaseComponent implements OnInit { constructor(private stakeholderService: StakeholderService, private _customFilterService: CustomFilterService, + private layoutService: LayoutService, protected _router: Router, protected _route: ActivatedRoute, protected seoService: SEOService, @@ -67,6 +67,7 @@ export class RpoComponent extends StakeholderBaseComponent implements OnInit { } ngOnInit() { + this.layoutService.setRootClass('organization'); this.params.subscribe(params => { this._customFilterService.setCustomFilter(null); this.alias = params['stakeholder']; @@ -92,6 +93,11 @@ export class RpoComponent extends StakeholderBaseComponent implements OnInit { } }); } + + ngOnDestroy() { + super.ngOnDestroy(); + this.layoutService.setRootClass(null); + } } diff --git a/src/assets/extend-theme/less/banner.less b/src/assets/extend-theme/less/banner.less index a5dc884..1c5714c 100644 --- a/src/assets/extend-theme/less/banner.less +++ b/src/assets/extend-theme/less/banner.less @@ -2,30 +2,35 @@ @banner-background-gradient: none; @banner-mode: dark; -@banner-footer-background: transparent; +@banner-footer-background: #000000; @banner-tab-gutter: 60px; -@banner-tab-margin-bottom: @global-small-margin; +@banner-tab-margin-vertical: @global-small-margin; @banner-tab-divider: @global-border-width solid @global-border; @banner-tab-divider-height: @global-line-height; -@banner-tab-item-hover-color: @global-secondary-background; -@banner-tab-item-active-color: @global-secondary-background; +@banner-tab-item-hover-color: @irish-global-secondary-color; +@banner-tab-item-active-color: @banner-tab-item-hover-color; @banner-tab-item-active-indicator: @global-background; .uk-banner:extend(.uk-section) { background: @banner-background; position: relative; - & .uk-banner-footer { - background: @banner-footer-background; + & .uk-banner-footer:extend(.uk-light all) { position: absolute; bottom: 0; left: 0; right: 0; + background: fade(@banner-footer-background, 50%); + + @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { + -webkit-backdrop-filter: blur(30px) opacity(10%) brightness(90%); + backdrop-filter: blur(30px) opacity(10%) brightness(90%); + } & ul.uk-banner-tab:extend(.uk-flex) { list-style: none; - margin-bottom: @banner-tab-margin-bottom; + margin: @banner-tab-margin-vertical 0; & > li { &:not(:first-child) { @@ -48,7 +53,7 @@ } &:hover a { - color:@banner-tab-item-hover-color; + color: @banner-tab-item-hover-color; } &.uk-active a { @@ -59,14 +64,14 @@ &:after { content: ''; position: absolute; - bottom: -@banner-tab-margin-bottom; + bottom: -@banner-tab-margin-vertical; left: 50%; transform: translate(-50%, 50%); width: 0; height: 0; - border-left: 2*@banner-tab-margin-bottom solid transparent; - border-right: 2*@banner-tab-margin-bottom solid transparent; - border-bottom: @banner-tab-margin-bottom solid @banner-tab-item-active-indicator; + border-left: 2*@banner-tab-margin-vertical solid transparent; + border-right: 2*@banner-tab-margin-vertical solid transparent; + border-bottom: @banner-tab-margin-vertical solid @banner-tab-item-active-indicator; } } } @@ -74,4 +79,5 @@ } } -.uk-banner:extend(.uk-light all) when (@banner-mode = light) {} +.uk-banner:extend(.uk-light all) when (@banner-mode = light) { +} diff --git a/src/assets/extend-theme/less/color.less b/src/assets/extend-theme/less/color.less index 45b3b96..c26a8f6 100644 --- a/src/assets/extend-theme/less/color.less +++ b/src/assets/extend-theme/less/color.less @@ -1,13 +1,16 @@ -@primary-color: #009A49; -@primary-light-color: #25AE7A; +@irish-global-secondary-color: #FF7901; +@irish-global-primary-color: #1B895F; + +@primary-color: @irish-global-primary-color; +@primary-light-color: #23B58B; @primary-dark-color: #002B1A; -@secondary-color: #FF7901; -@ciel-color: #DCE9E3; +@secondary-color: @irish-global-secondary-color; +@ciel-color: #EBF4F2; @default-color: #F9FBFC; @funder-color: #4D276F; -@organization-color: #f5cc1c; -@country-color: @primary-color; -@datasource-color: #D45E50; -@researcher-color: #184377; +@organization-color: #762243; +@country-color: @primary-dark-color; +@datasource-color: #66264D; +@researcher-color: #0647A6; diff --git a/src/assets/extend-theme/less/variables.less b/src/assets/extend-theme/less/variables.less index 9503001..7b5b1ab 100644 --- a/src/assets/extend-theme/less/variables.less +++ b/src/assets/extend-theme/less/variables.less @@ -1,7 +1,7 @@ @import "color"; /** Backgrounds */ -@global-primary-gradient: radial-gradient(closest-side at 50% 50%, @primary-light-color 0%, @primary-dark-color 100%); +@global-primary-gradient: radial-gradient(farthest-corner at 50% 25%, @primary-light-color 0%, @primary-dark-color 100%); /** Border */ @global-border: @gray-300; diff --git a/src/assets/irish-monitor.less b/src/assets/irish-monitor.less index b03a0a9..6829441 100644 --- a/src/assets/irish-monitor.less +++ b/src/assets/irish-monitor.less @@ -1,11 +1,16 @@ @general-search-form-background: none; .country { - @import (multiple) "~src/assets/extend-theme/less/_import-variables"; - @import (multiple) "~src/assets/extend-theme/less/banner"; + @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"; + @import (multiple) "~src/assets/common-assets/less/indicators"; @banner-mode: light; @banner-background: @global-primary-gradient; + @primary-color: @primary-dark-color; + @secondary-color: @irish-global-primary-color; } .funder { @@ -16,9 +21,10 @@ @import (multiple) "~src/assets/common-assets/less/indicators"; @primary-color: @funder-color; - @primary-light-color: #9A4DDD; - @primary-dark-color: #480088; - @ciel-color: #dab6ff; + @secondary-color: #9A4DDD; + @primary-light-color: @secondary-color; + @primary-dark-color: @primary-color; + @ciel-color: #F5EDFC; @banner-mode: light; @banner-background: @global-primary-gradient; } @@ -29,10 +35,12 @@ @import (multiple) "~src/assets/common-assets/less/landing"; @import (multiple) "~src/assets/common-assets/less/dashboard"; @import (multiple) "~src/assets/common-assets/less/indicators"; + @primary-color: @organization-color; - @primary-light-color: #ffe165; - @primary-dark-color: #9c7d00; - @ciel-color: #fff1cb; + @secondary-color: #EB4386; + @primary-light-color: @secondary-color; + @primary-dark-color: @primary-color; + @ciel-color: #F7E9F0; @banner-mode: light; @banner-background: @global-primary-gradient; } @@ -45,9 +53,10 @@ @import (multiple) "~src/assets/common-assets/less/indicators"; @primary-color: @datasource-color; - @primary-light-color: #D45E50; - @primary-dark-color: #6A2F28; - @ciel-color: #ffc3bf; + @secondary-color: #CB4C99; + @primary-light-color: @secondary-color; + @primary-dark-color: @primary-color; + @ciel-color: #F5E9F3; @banner-mode: light; @banner-background: @global-primary-gradient; } @@ -60,9 +69,10 @@ @import (multiple) "~src/assets/common-assets/less/indicators"; @primary-color: @researcher-color; - @primary-light-color: #3086ED; - @primary-dark-color: #184377; - @ciel-color: #ddeaff; + @secondary-color: #3086ED; + @primary-light-color: @secondary-color; + @primary-dark-color: @primary-color; + @ciel-color: #E5F0FA; @banner-mode: light; @banner-background: @global-primary-gradient; } diff --git a/src/assets/openaire-theme b/src/assets/openaire-theme index 928dfa1..7aa9e57 160000 --- a/src/assets/openaire-theme +++ b/src/assets/openaire-theme @@ -1 +1 @@ -Subproject commit 928dfa11bd4aeadb30c2d72d408c7b7206d6598e +Subproject commit 7aa9e577193e3a77415434fd5e6e856a21d5efeb diff --git a/src/styles.less b/src/styles.less index b3be04d..b6252bc 100644 --- a/src/styles.less +++ b/src/styles.less @@ -3,9 +3,7 @@ @import "~src/assets/extend-theme/less/_import"; @import "~src/assets/common-assets/less/general"; @import "~src/assets/common-assets/less/user"; -@import "~src/assets/common-assets/less/landing"; @import "~src/assets/common-assets/less/linking"; @import "~src/assets/common-assets/less/dashboard"; -@import "~src/assets/common-assets/less/indicators"; @import "~src/assets/common-assets/less/ckeditor"; @import "~src/assets/irish-monitor";