MaDgIK
/
irish-monitor
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Finish style structure for all entities. Add root class in app component in order to apply theme in modals.

This commit is contained in:
Konstantinos Triantafyllou 2023-11-24 10:55:49 +02:00
parent 6cf796d3f9
commit e9f62ae683
13 changed files with 193 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/admin/admin.component.ts
View File

@ -9,7 +9,7 @@ import {MenuItem} from "../openaireLibrary/sharedComponents/menu";
@Component({
selector: 'admin',
template: `
<div [ngClass]="stakeholder?stakeholder.type:null">
<div>
<loading *ngIf="loading" class="uk-position-center"></loading>
<div *ngIf="!loading" class="sidebar_main_swipe uk-flex uk-background-default"
[class.sidebar_main_active]="open && (hasSidebar || hasInternalSidebar)"
@ -45,6 +45,7 @@ export class AdminComponent extends SidebarBaseComponent implements OnInit {
if(params['alias']) {
this.subscriptions.push(this.stakeholderService.getStakeholder(params['alias']).subscribe(stakeholder => {
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);
}
}

19
src/app/app.component.ts
View File

@ -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
<div *ngIf="loading">
<loading [full]="true"></loading>
</div>
<div *ngIf="!loading">
<div class="uk-background-default">
<div id="modal-container"></div>
<div *ngIf="!loading" class="uk-background-default">
<navbar *ngIf="hasHeader" portal="irish_monitor" [menuItems]="menuItems" [showMenu]="true"
[header]="header" [user]="user" [userMenuItems]="userMenuItems"></navbar>
<div [ngClass]="rootClass">
<div id="modal-container"></div>
<main>
<router-outlet></router-outlet>
</main>
@ -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() {

10
src/app/national/national.component.ts
View File

@ -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: `
<div class="country">
<div>
<loading *ngIf="loading" class="uk-position-center"></loading>
<div *ngIf="!loading && stakeholder">
<div class="uk-banner">
@ -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);
}
}

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 3c1b72e7e4c2e551f15315a2ddd4e62ec0880423
Subproject commit 205b97487c46062cec7bbbb1828a65b165f72ee6

12
src/app/researcher/researcher.component.ts
View File

@ -12,11 +12,11 @@ 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: `
<div class="researcher">
<loading *ngIf="loading" class="uk-position-center"></loading>
<div *ngIf="!loading">
<div class="uk-banner">
@ -54,7 +54,6 @@ import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
<router-outlet></router-outlet>
</div>
</div>
</div>
`
})
export class ResearcherComponent extends BaseComponent implements OnInit {
@ -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")';

10
src/app/rfo/rfo.component.ts
View File

@ -9,11 +9,11 @@ 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: `
<div class="funder">
<loading *ngIf="loading" class="uk-position-center"></loading>
<div *ngIf="!loading">
<div class="uk-banner">
@ -42,7 +42,6 @@ import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/s
<router-outlet></router-outlet>
</div>
</div>
</div>
`
})
export class RfoComponent extends StakeholderBaseComponent implements OnInit {
@ -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);
}
}

10
src/app/rpo/rpo.component.ts
View File

@ -9,11 +9,11 @@ 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: `
<div class="organization">
<loading *ngIf="loading" class="uk-position-center"></loading>
<div *ngIf="!loading">
<div class="uk-banner">
@ -42,7 +42,6 @@ import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/s
<router-outlet></router-outlet>
</div>
</div>
</div>
`
})
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);
}
}

32
src/assets/extend-theme/less/banner.less
View File

@ -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) {
}

19
src/assets/extend-theme/less/color.less
View File

@ -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;

2
src/assets/extend-theme/less/variables.less
View File

@ -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;

38
src/assets/irish-monitor.less
View File

@ -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;
}

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit 928dfa11bd4aeadb30c2d72d408c7b7206d6598e
Subproject commit 7aa9e577193e3a77415434fd5e6e856a21d5efeb

2
src/styles.less
View File

@ -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";