From d6be2e86517afd0e35b93a5c37bfa893f523a94f Mon Sep 17 00:00:00 2001 From: Yana De Pauw Date: Mon, 25 Apr 2022 17:40:22 +0200 Subject: [PATCH] 89984: Add themable menu section --- .../admin-sidebar/admin-sidebar.component.ts | 6 ++++-- src/app/navbar/navbar.component.ts | 6 ++++-- src/app/shared/menu/menu-section.decorator.ts | 16 ++++++++++++---- src/app/shared/menu/menu.component.ts | 7 +++++-- 4 files changed, 25 insertions(+), 10 deletions(-) diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts index c81b2e6e93..55d5fd4374 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts @@ -22,6 +22,7 @@ import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service'; import { FeatureID } from '../../core/data/feature-authorization/feature-id'; import { Router, ActivatedRoute } from '@angular/router'; +import { ThemeService } from '../../shared/theme-support/theme.service'; /** * Component representing the admin sidebar @@ -70,9 +71,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { private modalService: NgbModal, public authorizationService: AuthorizationDataService, private scriptDataService: ScriptDataService, - public route: ActivatedRoute + public route: ActivatedRoute, + protected themeService: ThemeService ) { - super(menuService, injector, authorizationService, route); + super(menuService, injector, authorizationService, route, themeService); this.inFocus$ = new BehaviorSubject(false); } diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts index 836f94781a..1d070b17c2 100644 --- a/src/app/navbar/navbar.component.ts +++ b/src/app/navbar/navbar.component.ts @@ -13,6 +13,7 @@ import { BrowseDefinition } from '../core/shared/browse-definition.model'; import { RemoteData } from '../core/data/remote-data'; import { ActivatedRoute } from '@angular/router'; import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service'; +import { ThemeService } from '../shared/theme-support/theme.service'; /** * Component representing the public navbar @@ -35,9 +36,10 @@ export class NavbarComponent extends MenuComponent { public windowService: HostWindowService, public browseService: BrowseService, public authorizationService: AuthorizationDataService, - public route: ActivatedRoute + public route: ActivatedRoute, + protected themeService: ThemeService ) { - super(menuService, injector, authorizationService, route); + super(menuService, injector, authorizationService, route, themeService); } ngOnInit(): void { diff --git a/src/app/shared/menu/menu-section.decorator.ts b/src/app/shared/menu/menu-section.decorator.ts index c27e870e13..94a0469a7e 100644 --- a/src/app/shared/menu/menu-section.decorator.ts +++ b/src/app/shared/menu/menu-section.decorator.ts @@ -1,4 +1,6 @@ +import { DEFAULT_THEME } from '../object-collection/shared/listable-object/listable-object.decorator'; import { MenuID } from './initial-menus-state'; +import { hasNoValue } from '../empty.util'; const menuComponentMap = new Map(); @@ -8,7 +10,7 @@ const menuComponentMap = new Map(); * @param {boolean} expandable True when the section should be expandable, false when if should not * @returns {(menuSectionWrapperComponent: GenericConstructor) => void} */ -export function rendersSectionForMenu(menuID: MenuID, expandable: boolean) { +export function rendersSectionForMenu(menuID: MenuID, expandable: boolean, theme = DEFAULT_THEME) { return function decorator(menuSectionWrapperComponent: any) { if (!menuSectionWrapperComponent) { return; @@ -16,7 +18,10 @@ export function rendersSectionForMenu(menuID: MenuID, expandable: boolean) { if (!menuComponentMap.get(menuID)) { menuComponentMap.set(menuID, new Map()); } - menuComponentMap.get(menuID).set(expandable, menuSectionWrapperComponent); + if (!menuComponentMap.get(menuID).get(expandable)) { + menuComponentMap.get(menuID).set(expandable, new Map()); + } + menuComponentMap.get(menuID).get(expandable).set(theme, menuSectionWrapperComponent); }; } @@ -26,6 +31,9 @@ export function rendersSectionForMenu(menuID: MenuID, expandable: boolean) { * @param {boolean} expandable True when the section should be expandable, false when if should not * @returns {GenericConstructor} The constructor of the matching Component */ -export function getComponentForMenu(menuID: MenuID, expandable: boolean) { - return menuComponentMap.get(menuID).get(expandable); +export function getComponentForMenu(menuID: MenuID, expandable: boolean, theme: string) { + const comp = menuComponentMap.get(menuID).get(expandable).get(theme); + if (hasNoValue(comp)) { + return menuComponentMap.get(menuID).get(expandable).get(DEFAULT_THEME); + } } diff --git a/src/app/shared/menu/menu.component.ts b/src/app/shared/menu/menu.component.ts index e5e899805b..e520ddc93c 100644 --- a/src/app/shared/menu/menu.component.ts +++ b/src/app/shared/menu/menu.component.ts @@ -12,6 +12,7 @@ import { compareArraysUsingIds } from '../../item-page/simple/item-types/shared/ import { ActivatedRoute } from '@angular/router'; import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service'; import { FeatureID } from '../../core/data/feature-authorization/feature-id'; +import { ThemeService } from '../theme-support/theme.service'; /** * A basic implementation of a MenuComponent @@ -72,7 +73,9 @@ export class MenuComponent implements OnInit, OnDestroy { private activatedRouteLastChild: ActivatedRoute; - constructor(protected menuService: MenuService, protected injector: Injector, public authorizationService: AuthorizationDataService, public route: ActivatedRoute) { + constructor(protected menuService: MenuService, protected injector: Injector, public authorizationService: AuthorizationDataService, + public route: ActivatedRoute, protected themeService: ThemeService + ) { } /** @@ -215,7 +218,7 @@ export class MenuComponent implements OnInit, OnDestroy { private getSectionComponent(section: MenuSection): Observable> { return this.menuService.hasSubSections(this.menuID, section.id).pipe( map((expandable: boolean) => { - return getComponentForMenu(this.menuID, expandable); + return getComponentForMenu(this.menuID, expandable, this.themeService.getThemeName()); } ), );