Merge pull request DSpace#2362 from Leano1998/making_user-menu-component_themeable

Making user menu component themeable

Author: tdonohue

src/app/navbar/navbar.component.html

@@ -6,7 +6,7 @@
             <div id="collapsingNav">
                 <ul class="navbar-nav navbar-navigation mr-auto shadow-none">
                     <li *ngIf="(isXsOrSm$ | async) && (isAuthenticated$ | async)">
-                        <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
+                        <ds-themed-user-menu [inExpandableNavbar]="true"></ds-themed-user-menu>
                     </li>
                     <li *ngFor="let section of (sections | async)">
                         <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>

src/app/shared/auth-nav-menu/auth-nav-menu.component.html

@@ -22,7 +22,7 @@
       <a href="javascript:void(0);" role="button" [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" (click)="$event.preventDefault()" [title]="'nav.user-profile-menu-and-logout' | translate" class="dropdownLogout px-1" [attr.data-test]="'user-menu' | dsBrowserOnly" ngbDropdownToggle>
         <i class="fas fa-user-circle fa-lg fa-fw"></i></a>
       <div class="logoutDropdownMenu" ngbDropdownMenu [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate">
-        <ds-user-menu></ds-user-menu>
+        <ds-themed-user-menu></ds-themed-user-menu>
       </div>
     </div>
   </li>

src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts

@@ -248,7 +248,7 @@ describe('AuthNavMenuComponent', () => {
           component = null;
         });
         it('should render UserMenuComponent component', () => {
-          const logoutDropdownMenu = deNavMenuItem.query(By.css('ds-user-menu'));
+          const logoutDropdownMenu = deNavMenuItem.query(By.css('ds-themed-user-menu'));
           expect(logoutDropdownMenu.nativeElement).toBeDefined();
         });
       });

src/app/shared/auth-nav-menu/user-menu/themed-user-menu.component.ts

@@ -0,0 +1,33 @@
+import {Component, Input} from '@angular/core';
+import {ThemedComponent} from '../../theme-support/themed.component';
+import {UserMenuComponent} from './user-menu.component';
+
+/**
+ * This component represents the user nav menu.
+ */
+@Component({
+  selector: 'ds-themed-user-menu',
+  templateUrl: './../../theme-support/themed.component.html',
+  styleUrls: []
+})
+export class ThemedUserMenuComponent extends ThemedComponent<UserMenuComponent>{
+
+  /**
+   * The input flag to show user details in navbar expandable menu
+   */
+  @Input() inExpandableNavbar: boolean;
+
+  protected inAndOutputNames: (keyof UserMenuComponent & keyof this)[] = ['inExpandableNavbar'];
+
+  protected getComponentName(): string {
+    return 'UserMenuComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import((`../../../../themes/${themeName}/app/shared/auth-nav-menu/user-menu/user-menu.component`));
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./user-menu.component');
+  }
+}

src/app/shared/shared.module.ts

@@ -281,6 +281,7 @@ import {
 } from '../item-page/simple/field-components/specific-field/title/themed-item-page-field.component';
 import { BitstreamListItemComponent } from './object-list/bitstream-list-item/bitstream-list-item.component';
 import { NgxPaginationModule } from 'ngx-pagination';
+import { ThemedUserMenuComponent } from './auth-nav-menu/user-menu/themed-user-menu.component';
 import { ThemedLangSwitchComponent } from './lang-switch/themed-lang-switch.component';
 
 const MODULES = [
@@ -330,6 +331,7 @@ const COMPONENTS = [
   AuthNavMenuComponent,
   ThemedAuthNavMenuComponent,
   UserMenuComponent,
+  ThemedUserMenuComponent,
   DsSelectComponent,
   ErrorComponent,
   LangSwitchComponent,

src/themes/custom/app/shared/auth-nav-menu/user-menu/user-menu.component.html

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { UserMenuComponent as BaseComponent } from '../../../../../../app/shared/auth-nav-menu/user-menu/user-menu.component';
+
+/**
+ * Component representing the {@link UserMenuComponent} of a page
+ */
+@Component({
+  selector: 'ds-user-menu',
+  // templateUrl: 'user-menu.component.html',
+  templateUrl: '../../../../../../app/shared/auth-nav-menu/user-menu/user-menu.component.html',
+  // styleUrls: ['user-menu.component.scss'],
+  styleUrls: ['../../../../../../app/shared/auth-nav-menu/user-menu/user-menu.component.scss'],
+})
+export class UserMenuComponent extends BaseComponent {
+}

src/themes/custom/app/shared/auth-nav-menu/user-menu/user-menu.component.scss

@@ -156,6 +156,7 @@ import { ItemStatusComponent } from './app/item-page/edit-item-page/item-status/
 import { EditBitstreamPageComponent } from './app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component';
 import { FormModule } from '../../app/shared/form/form.module';
 import { RequestCopyModule } from 'src/app/request-copy/request-copy.module';
+import {UserMenuComponent} from './app/shared/auth-nav-menu/user-menu/user-menu.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -239,6 +240,7 @@ const DECLARATIONS = [
   SubmissionSectionUploadFileComponent,
   ItemStatusComponent,
   EditBitstreamPageComponent,
+  UserMenuComponent,
 ];
 
 @NgModule({