89984: Add themable menu section

This commit is contained in:
Yana De Pauw
2022-04-25 17:40:22 +02:00
parent 870a36180c
commit d6be2e8651
4 changed files with 25 additions and 10 deletions

View File

@@ -22,6 +22,7 @@ import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service
import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service'; import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
import { FeatureID } from '../../core/data/feature-authorization/feature-id'; import { FeatureID } from '../../core/data/feature-authorization/feature-id';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { ThemeService } from '../../shared/theme-support/theme.service';
/** /**
* Component representing the admin sidebar * Component representing the admin sidebar
@@ -70,9 +71,10 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
private modalService: NgbModal, private modalService: NgbModal,
public authorizationService: AuthorizationDataService, public authorizationService: AuthorizationDataService,
private scriptDataService: ScriptDataService, 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); this.inFocus$ = new BehaviorSubject(false);
} }

View File

@@ -13,6 +13,7 @@ import { BrowseDefinition } from '../core/shared/browse-definition.model';
import { RemoteData } from '../core/data/remote-data'; import { RemoteData } from '../core/data/remote-data';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service'; import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
import { ThemeService } from '../shared/theme-support/theme.service';
/** /**
* Component representing the public navbar * Component representing the public navbar
@@ -35,9 +36,10 @@ export class NavbarComponent extends MenuComponent {
public windowService: HostWindowService, public windowService: HostWindowService,
public browseService: BrowseService, public browseService: BrowseService,
public authorizationService: AuthorizationDataService, 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 { ngOnInit(): void {

View File

@@ -1,4 +1,6 @@
import { DEFAULT_THEME } from '../object-collection/shared/listable-object/listable-object.decorator';
import { MenuID } from './initial-menus-state'; import { MenuID } from './initial-menus-state';
import { hasNoValue } from '../empty.util';
const menuComponentMap = new Map(); 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 * @param {boolean} expandable True when the section should be expandable, false when if should not
* @returns {(menuSectionWrapperComponent: GenericConstructor) => void} * @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) { return function decorator(menuSectionWrapperComponent: any) {
if (!menuSectionWrapperComponent) { if (!menuSectionWrapperComponent) {
return; return;
@@ -16,7 +18,10 @@ export function rendersSectionForMenu(menuID: MenuID, expandable: boolean) {
if (!menuComponentMap.get(menuID)) { if (!menuComponentMap.get(menuID)) {
menuComponentMap.set(menuID, new Map()); 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 * @param {boolean} expandable True when the section should be expandable, false when if should not
* @returns {GenericConstructor} The constructor of the matching Component * @returns {GenericConstructor} The constructor of the matching Component
*/ */
export function getComponentForMenu(menuID: MenuID, expandable: boolean) { export function getComponentForMenu(menuID: MenuID, expandable: boolean, theme: string) {
return menuComponentMap.get(menuID).get(expandable); const comp = menuComponentMap.get(menuID).get(expandable).get(theme);
if (hasNoValue(comp)) {
return menuComponentMap.get(menuID).get(expandable).get(DEFAULT_THEME);
}
} }

View File

@@ -12,6 +12,7 @@ import { compareArraysUsingIds } from '../../item-page/simple/item-types/shared/
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service'; import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
import { FeatureID } from '../../core/data/feature-authorization/feature-id'; import { FeatureID } from '../../core/data/feature-authorization/feature-id';
import { ThemeService } from '../theme-support/theme.service';
/** /**
* A basic implementation of a MenuComponent * A basic implementation of a MenuComponent
@@ -72,7 +73,9 @@ export class MenuComponent implements OnInit, OnDestroy {
private activatedRouteLastChild: ActivatedRoute; 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<GenericConstructor<MenuSectionComponent>> { private getSectionComponent(section: MenuSection): Observable<GenericConstructor<MenuSectionComponent>> {
return this.menuService.hasSubSections(this.menuID, section.id).pipe( return this.menuService.hasSubSections(this.menuID, section.id).pipe(
map((expandable: boolean) => { map((expandable: boolean) => {
return getComponentForMenu(this.menuID, expandable); return getComponentForMenu(this.menuID, expandable, this.themeService.getThemeName());
} }
), ),
); );