Skip to content

Commit cfa074a

Browse files
bodnarabodnara
committed
fix: revert initializing colors during runtime
1 parent 391f340 commit cfa074a

File tree

9 files changed

+303
-41
lines changed

9 files changed

+303
-41
lines changed

‎apps/admin-gui/src/_styles.scss‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -94,10 +94,10 @@ mat.$theme-ignore-duplication-warnings: true;
9494

9595
.vo-btn {
9696
background: var(--vo-color);
97-
color: rgba(var(--vo-theme-primary-contrast-500), 1);
97+
color: rgba(var(--vo-color-text), 1);
9898

9999
&:hover {
100-
color: rgba(var(--vo-theme-primary-contrast-500), 1);
100+
color: rgba(var(--vo-color-text), 1);
101101
}
102102
}
103103

@@ -106,7 +106,7 @@ mat.$theme-ignore-duplication-warnings: true;
106106
text-decoration: underline;
107107

108108
&:hover {
109-
color: rgba(var(--vo-theme-primary-contrast-500), 1);
109+
color: rgba(var(--vo-color-text), 1);
110110
}
111111
}
112112

@@ -163,10 +163,10 @@ mat.$theme-ignore-duplication-warnings: true;
163163

164164
.facility-btn {
165165
background-color: var(--facility-color);
166-
color: rgba(var(--facility-theme-primary-contrast-500), 1);
166+
color: rgba(var(--facility-color-text), 1);
167167

168168
&:hover {
169-
color: rgba(var(--facility-theme-primary-contrast-500), 1);
169+
color: rgba(var(--facility-color-text), 1);
170170
}
171171
}
172172

@@ -175,7 +175,7 @@ mat.$theme-ignore-duplication-warnings: true;
175175
text-decoration: underline;
176176

177177
&:hover {
178-
color: rgba(var(--facility-theme-primary-contrast-500), 1);
178+
color: rgba(var(--facility-color-text), 1);
179179
}
180180
}
181181

@@ -232,10 +232,10 @@ mat.$theme-ignore-duplication-warnings: true;
232232

233233
.resource-btn {
234234
background-color: var(--resource-color);
235-
color: rgba(var(--resource-theme-primary-contrast-500), 1);
235+
color: rgba(var(--resource-color-text), 1);
236236

237237
&:hover {
238-
color: rgba(var(--resource-theme-primary-contrast-500), 1);
238+
color: rgba(var(--resource-color-text), 1);
239239
}
240240
}
241241

@@ -244,7 +244,7 @@ mat.$theme-ignore-duplication-warnings: true;
244244
text-decoration: underline;
245245

246246
&:hover {
247-
color: rgba(var(--resource-theme-primary-contrast-500), 1);
247+
color: rgba(var(--resource-color-text), 1);
248248
}
249249
}
250250

@@ -301,10 +301,10 @@ mat.$theme-ignore-duplication-warnings: true;
301301

302302
.group-btn {
303303
background: var(--group-color);
304-
color: rgba(var(--group-theme-primary-contrast-500), 1);
304+
color: rgba(var(--group-color-text), 1);
305305

306306
&:hover {
307-
color: rgba(var(--group-theme-primary-contrast-500), 1);
307+
color: rgba(var(--group-color-text), 1);
308308
}
309309
}
310310

@@ -313,7 +313,7 @@ mat.$theme-ignore-duplication-warnings: true;
313313
text-decoration: underline;
314314

315315
&:hover {
316-
color: rgba(var(--group-theme-primary-contrast-500), 1);
316+
color: rgba(var(--group-color-text), 1);
317317
}
318318
}
319319

@@ -370,10 +370,10 @@ mat.$theme-ignore-duplication-warnings: true;
370370

371371
.member-btn {
372372
background-color: var(--member-color);
373-
color: rgba(var(--member-theme-primary-contrast-500), 1);
373+
color: rgba(var(--member-color-text), 1);
374374

375375
&:hover {
376-
color: rgba(var(--member-theme-primary-contrast-500), 1);
376+
color: rgba(var(--member-color-text), 1);
377377
}
378378
}
379379

@@ -382,7 +382,7 @@ mat.$theme-ignore-duplication-warnings: true;
382382
text-decoration: underline;
383383

384384
&:hover {
385-
color: rgba(var(--member-theme-primary-contrast-500), 1);
385+
color: rgba(var(--member-color-text), 1);
386386
}
387387
}
388388

@@ -439,10 +439,10 @@ mat.$theme-ignore-duplication-warnings: true;
439439

440440
.admin-btn {
441441
background-color: var(--admin-color);
442-
color: rgba(var(--admin-theme-primary-contrast-500), 1);
442+
color: rgba(var(--admin-color-text), 1);
443443

444444
&:hover {
445-
color: rgba(var(--admin-theme-primary-contrast-500), 1);
445+
color: rgba(var(--admin-color-text), 1);
446446
}
447447
}
448448

@@ -499,10 +499,10 @@ mat.$theme-ignore-duplication-warnings: true;
499499

500500
.user-btn {
501501
background-color: var(--user-color);
502-
color: rgba(var(--user-theme-primary-contrast-500), 1);
502+
color: rgba(var(--user-color-text), 1);
503503

504504
&:hover {
505-
color: rgba(var(--user-theme-primary-contrast-500), 1);
505+
color: rgba(var(--user-color-text), 1);
506506
}
507507
}
508508

@@ -511,7 +511,7 @@ mat.$theme-ignore-duplication-warnings: true;
511511
text-decoration: underline;
512512

513513
&:hover {
514-
color: rgba(var(--user-theme-primary-contrast-500), 1);
514+
color: rgba(var(--user-color-text), 1);
515515
}
516516
}
517517

@@ -568,10 +568,10 @@ mat.$theme-ignore-duplication-warnings: true;
568568

569569
.service-btn {
570570
background-color: var(--service-color);
571-
color: rgba(var(--service-theme-primary-contrast-500), 1);
571+
color: rgba(var(--service-color-text), 1);
572572

573573
&:hover {
574-
color: rgba(var(--service-theme-primary-contrast-500), 1);
574+
color: rgba(var(--service-color-text), 1);
575575
}
576576
}
577577

@@ -580,7 +580,7 @@ mat.$theme-ignore-duplication-warnings: true;
580580
text-decoration: underline;
581581

582582
&:hover {
583-
color: rgba(var(--service-theme-primary-contrast-500), 1);
583+
color: rgba(var(--service-color-text), 1);
584584
}
585585
}
586586

‎apps/admin-gui/src/app/app.component.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<ng-template [ngIf]="!isLoginScreenShow && !isServiceAccess && isLoggedIn() && !isMfaWindowOpen">
77
<perun-web-apps-header
88
(sidenavToggle)="sidenav.toggle()"
9-
[ngStyle]="{'top': getNavMenuTop()}"
9+
[ngStyle]="{'top': getNavMenuTop(), 'background': navBackgroundColor}"
1010
[otherApp]="otherApp"
1111
[showNotifications]="true"
1212
class="nav-menu mat-elevation-z3"></perun-web-apps-header>
@@ -18,14 +18,17 @@
1818
[fixedInViewport]="true"
1919
[mode]="sidebarMode"
2020
[fixedTopGap]="getTopGap()"
21+
[ngStyle]="{'border-color': sideBarBorderColor, 'background': sideMenubackgroundColor}"
2122
[opened]="!isMobile()"
2223
class="side-nav">
2324
<ng-scrollbar>
2425
<app-side-menu [sideNav]="sidenav"></app-side-menu>
2526
</ng-scrollbar>
2627
</mat-sidenav>
2728

28-
<mat-sidenav-content class="side-nav-content">
29+
<mat-sidenav-content
30+
[ngStyle]="{'background-color': contentBackgroundColor}"
31+
class="side-nav-content">
2932
<div [ngStyle]="{'min-height' : contentInnerMinHeight}" id="content-wrap">
3033
<router-outlet></router-outlet>
3134
</div>

‎apps/admin-gui/src/app/app.component.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,11 @@ export class AppComponent implements OnInit, AfterViewInit {
4141
isServiceAccess: boolean;
4242

4343
principal: PerunPrincipal;
44+
theme = this.store.getProperty('theme');
45+
navBackgroundColor = this.theme.nav_bg_color;
46+
sideBarBorderColor = this.theme.sidemenu_border_color;
47+
contentBackgroundColor = this.theme.content_bg_color;
48+
sideMenubackgroundColor = this.theme.sidemenu_bg_color;
4449

4550
displayWarning: boolean = this.store.getProperty('display_warning');
4651
warningMessage: string = this.store.getProperty('warning_message');

‎apps/admin-gui/src/app/core/services/common/admin-gui-config.service.ts‎

Lines changed: 90 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
InitAuthService,
55
MfaHandlerService,
66
} from '@perun-web-apps/perun/services';
7-
import { AppConfigService } from '@perun-web-apps/config';
7+
import { AppConfigService, ColorConfig, EntityColorConfig } from '@perun-web-apps/config';
88
import { AuthzResolverService } from '@perun-web-apps/perun/openapi';
99
import { MatDialog } from '@angular/material/dialog';
1010
import { Location } from '@angular/common';
@@ -20,6 +20,92 @@ import { firstValueFrom } from 'rxjs';
2020
providedIn: 'root',
2121
})
2222
export class AdminGuiConfigService {
23+
entityColorConfigs: EntityColorConfig[] = [
24+
{
25+
entity: 'vo',
26+
configValue: 'vo_color',
27+
cssVariable: '--vo-color',
28+
cssTextVariable: '--vo-color-text',
29+
},
30+
{
31+
entity: 'group',
32+
configValue: 'group_color',
33+
cssVariable: '--group-color',
34+
cssTextVariable: '--group-color-text',
35+
},
36+
{
37+
entity: 'user',
38+
configValue: 'user_color',
39+
cssVariable: '--user-color',
40+
cssTextVariable: '--user-color-text',
41+
},
42+
{
43+
entity: 'member',
44+
configValue: 'member_color',
45+
cssVariable: '--member-color',
46+
cssTextVariable: '--member-color-text',
47+
},
48+
{
49+
entity: 'facility',
50+
configValue: 'facility_color',
51+
cssVariable: '--facility-color',
52+
cssTextVariable: '--facility-color-text',
53+
},
54+
{
55+
entity: 'resource',
56+
configValue: 'resource_color',
57+
cssVariable: '--resource-color',
58+
cssTextVariable: '--resource-color-text',
59+
},
60+
{
61+
entity: 'admin',
62+
configValue: 'admin_color',
63+
cssVariable: '--admin-color',
64+
cssTextVariable: '--admin-color-text',
65+
},
66+
{
67+
entity: 'service',
68+
configValue: 'service_color',
69+
cssVariable: '--service-color',
70+
cssTextVariable: '--service-color-text',
71+
},
72+
];
73+
74+
colorConfigs: ColorConfig[] = [
75+
{
76+
configValue: 'sidemenu_hover_color',
77+
cssVariable: '--sidemenu-hover-color',
78+
},
79+
{
80+
configValue: 'sidemenu_active_color',
81+
cssVariable: '--sidemenu-active-color',
82+
},
83+
{
84+
configValue: 'sidemenu_submenu_active_color',
85+
cssVariable: '--sidemenu-submenu-active-color',
86+
},
87+
{
88+
configValue: 'sidemenu_submenu_hover_color',
89+
cssVariable: '--sidemenu-submenu-hover-color',
90+
},
91+
{
92+
configValue: 'sidemenu_hover_text_color',
93+
cssVariable: '--sidemenu-hover-text-color',
94+
},
95+
{
96+
configValue: 'sidemenu_active_text_color',
97+
cssVariable: '--sidmenu-active-text-color',
98+
},
99+
{
100+
configValue: 'sidemenu_submenu_active_text_color',
101+
cssVariable: '--sidemenu-submenu-active-test-color',
102+
},
103+
{
104+
configValue: 'sidemenu_submenu_hover_text_color',
105+
cssVariable: '--sidemenu-submenu-hover-text-color',
106+
},
107+
];
108+
23109
constructor(
24110
private initAuthService: InitAuthService,
25111
private appConfigService: AppConfigService,
@@ -35,6 +121,9 @@ export class AdminGuiConfigService {
35121
.loadAppDefaultConfig()
36122
.then(() => this.appConfigService.loadAppInstanceConfig())
37123
.then(() => this.appConfigService.setApiUrl())
124+
.then(() =>
125+
this.appConfigService.initializeColors(this.entityColorConfigs, this.colorConfigs)
126+
)
38127
.then(() => this.appConfigService.setInstanceFavicon())
39128
.then(() => this.initAuthService.verifyAuth())
40129
.catch((err) => {

‎apps/publications/src/app/services/publications-config.service.ts‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
InitAuthService,
55
MfaHandlerService,
66
} from '@perun-web-apps/perun/services';
7-
import { AppConfigService } from '@perun-web-apps/config';
7+
import { AppConfigService, ColorConfig, EntityColorConfig } from '@perun-web-apps/config';
88
import { Location } from '@angular/common';
99
import { AuthzResolverService } from '@perun-web-apps/perun/openapi';
1010
import { firstValueFrom } from 'rxjs';
@@ -13,6 +13,38 @@ import { firstValueFrom } from 'rxjs';
1313
providedIn: 'root',
1414
})
1515
export class PublicationsConfigService {
16+
private entityColorConfigs: EntityColorConfig[] = [
17+
{
18+
entity: 'user',
19+
configValue: 'user_color',
20+
cssVariable: '--user-color',
21+
cssTextVariable: '--user-color-text',
22+
},
23+
];
24+
25+
private colorConfigs: ColorConfig[] = [
26+
{
27+
configValue: 'sidemenu_bg_color',
28+
cssVariable: '--side-bg',
29+
},
30+
{
31+
configValue: 'sidemenu_hover_color',
32+
cssVariable: '--side-hover',
33+
},
34+
{
35+
configValue: 'sidemenu_hover_text_color',
36+
cssVariable: '--side-text-hover',
37+
},
38+
{
39+
configValue: 'sidemenu_active_color',
40+
cssVariable: '--side-active',
41+
},
42+
{
43+
configValue: 'sidemenu_active_text_color',
44+
cssVariable: '--side-text-active',
45+
},
46+
];
47+
1648
constructor(
1749
private initAuthService: InitAuthService,
1850
private appConfigService: AppConfigService,
@@ -27,6 +59,9 @@ export class PublicationsConfigService {
2759
.loadAppDefaultConfig()
2860
.then(() => this.appConfigService.loadAppInstanceConfig())
2961
.then(() => this.appConfigService.setApiUrl())
62+
.then(() =>
63+
this.appConfigService.initializeColors(this.entityColorConfigs, this.colorConfigs)
64+
)
3065
.then(() => this.initAuthService.verifyAuth())
3166
.catch((err) => {
3267
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument

0 commit comments

Comments
 (0)