From 1d4c77e48557eead566dda2f2f65ba04df2df851 Mon Sep 17 00:00:00 2001 From: lotte Date: Wed, 17 Mar 2021 11:32:59 +0100 Subject: [PATCH] Added themable header, footer and navbar --- src/app/app.module.ts | 4 +++ src/app/footer/themed-footer.component.ts | 25 ++++++++++++++++ .../header-navbar-wrapper.component.html | 6 ++-- src/app/header/themed-header.component.ts | 29 +++++++++++++++++++ src/app/navbar/navbar.module.ts | 4 ++- src/app/navbar/themed-navbar.component.ts | 25 ++++++++++++++++ src/app/root/root.component.html | 2 +- .../custom/app/footer/footer.component.html | 0 .../custom/app/footer/footer.component.scss | 0 .../custom/app/footer/footer.component.ts | 12 ++++++++ .../custom/app/header/header.component.html | 0 .../custom/app/header/header.component.scss | 0 .../custom/app/header/header.component.ts | 15 ++++++++++ .../custom/app/navbar/navbar.component.html | 0 .../custom/app/navbar/navbar.component.scss | 0 .../custom/app/navbar/navbar.component.ts | 17 +++++++++++ src/themes/custom/theme.module.ts | 8 ++++- 17 files changed, 141 insertions(+), 6 deletions(-) create mode 100644 src/app/footer/themed-footer.component.ts create mode 100644 src/app/header/themed-header.component.ts create mode 100644 src/app/navbar/themed-navbar.component.ts create mode 100644 src/themes/custom/app/footer/footer.component.html create mode 100644 src/themes/custom/app/footer/footer.component.scss create mode 100644 src/themes/custom/app/footer/footer.component.ts create mode 100644 src/themes/custom/app/header/header.component.html create mode 100644 src/themes/custom/app/header/header.component.scss create mode 100644 src/themes/custom/app/header/header.component.ts create mode 100644 src/themes/custom/app/navbar/navbar.component.html create mode 100644 src/themes/custom/app/navbar/navbar.component.scss create mode 100644 src/themes/custom/app/navbar/navbar.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 20aaa4ba02..827c837ce7 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -48,6 +48,8 @@ import { ThemedRootComponent } from './root/themed-root.component'; import { ThemedEntryComponentModule } from '../themes/themed-entry-component.module'; import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component'; import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component'; +import { ThemedHeaderComponent } from './header/themed-header.component'; +import { ThemedFooterComponent } from './footer/themed-footer.component'; export function getBase() { return environment.ui.nameSpace; @@ -129,11 +131,13 @@ const DECLARATIONS = [ RootComponent, ThemedRootComponent, HeaderComponent, + ThemedHeaderComponent, HeaderNavbarWrapperComponent, AdminSidebarComponent, AdminSidebarSectionComponent, ExpandableAdminSidebarSectionComponent, FooterComponent, + ThemedFooterComponent, PageNotFoundComponent, ThemedPageNotFoundComponent, NotificationComponent, diff --git a/src/app/footer/themed-footer.component.ts b/src/app/footer/themed-footer.component.ts new file mode 100644 index 0000000000..c52a0af29f --- /dev/null +++ b/src/app/footer/themed-footer.component.ts @@ -0,0 +1,25 @@ +import { Component } from '@angular/core'; +import { ThemedComponent } from '../shared/theme-support/themed.component'; +import { FooterComponent } from './footer.component'; + +/** + * Themed wrapper for FooterComponent + */ +@Component({ + selector: 'ds-themed-footer', + styleUrls: ['footer.component.scss'], + templateUrl: '../shared/theme-support/themed.component.html', +}) +export class ThemedFooterComponent extends ThemedComponent { + protected getComponentName(): string { + return 'FooterComponent'; + } + + protected importThemedComponent(themeName: string): Promise { + return import(`../../themes/${themeName}/app/footer/footer.component`); + } + + protected importUnthemedComponent(): Promise { + return import(`./footer.component`); + } +} diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html index 931ab36749..f99070b738 100644 --- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html +++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html @@ -1,4 +1,4 @@
- - -
\ No newline at end of file + + + diff --git a/src/app/header/themed-header.component.ts b/src/app/header/themed-header.component.ts new file mode 100644 index 0000000000..8bf43e8ea1 --- /dev/null +++ b/src/app/header/themed-header.component.ts @@ -0,0 +1,29 @@ +import { Component } from '@angular/core'; +import { Observable } from 'rxjs'; +import { MenuService } from '../shared/menu/menu.service'; +import { MenuID } from '../shared/menu/initial-menus-state'; +import { ThemedComponent } from '../shared/theme-support/themed.component'; +import { CommunityListPageComponent } from '../community-list-page/community-list-page.component'; +import { HeaderComponent } from './header.component'; + +/** + * Themed wrapper for HeaderComponent + */ +@Component({ + selector: 'ds-themed-header', + styleUrls: [], + templateUrl: '../shared/theme-support/themed.component.html', +}) +export class ThemedHeaderComponent extends ThemedComponent { + protected getComponentName(): string { + return 'HeaderComponent'; + } + + protected importThemedComponent(themeName: string): Promise { + return import(`../../themes/${themeName}/app/header/header.component`); + } + + protected importUnthemedComponent(): Promise { + return import(`./header.component`); + } +} diff --git a/src/app/navbar/navbar.module.ts b/src/app/navbar/navbar.module.ts index 5e1e11d10f..5299c6cfc3 100644 --- a/src/app/navbar/navbar.module.ts +++ b/src/app/navbar/navbar.module.ts @@ -10,6 +10,7 @@ import { ExpandableNavbarSectionComponent } from './expandable-navbar-section/ex import { NavbarComponent } from './navbar.component'; import { MenuModule } from '../shared/menu/menu.module'; import { FormsModule } from '@angular/forms'; +import { ThemedNavbarComponent } from './themed-navbar.component'; const effects = [ NavbarEffects @@ -31,6 +32,7 @@ const ENTRY_COMPONENTS = [ ], declarations: [ NavbarComponent, + ThemedNavbarComponent, NavbarSectionComponent, ExpandableNavbarSectionComponent ], @@ -42,7 +44,7 @@ const ENTRY_COMPONENTS = [ ExpandableNavbarSectionComponent ], exports: [ - NavbarComponent, + ThemedNavbarComponent, NavbarSectionComponent, ExpandableNavbarSectionComponent ] diff --git a/src/app/navbar/themed-navbar.component.ts b/src/app/navbar/themed-navbar.component.ts new file mode 100644 index 0000000000..43efdc181e --- /dev/null +++ b/src/app/navbar/themed-navbar.component.ts @@ -0,0 +1,25 @@ +import { Component } from '@angular/core'; +import { ThemedComponent } from '../shared/theme-support/themed.component'; +import { NavbarComponent } from './navbar.component'; + +/** + * Themed wrapper for NavbarComponent + */ +@Component({ + selector: 'ds-themed-navbar', + styleUrls: [], + templateUrl: '../shared/theme-support/themed.component.html', +}) +export class ThemedNavbarComponent extends ThemedComponent { + protected getComponentName(): string { + return 'NavbarComponent'; + } + + protected importThemedComponent(themeName: string): Promise { + return import(`../../themes/${themeName}/app/navbar/navbar.component`); + } + + protected importUnthemedComponent(): Promise { + return import(`./navbar.component`); + } +} diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html index 96439cd999..a0aa4dc1a3 100644 --- a/src/app/root/root.component.html +++ b/src/app/root/root.component.html @@ -20,7 +20,7 @@ - + diff --git a/src/themes/custom/app/footer/footer.component.html b/src/themes/custom/app/footer/footer.component.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/themes/custom/app/footer/footer.component.scss b/src/themes/custom/app/footer/footer.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/themes/custom/app/footer/footer.component.ts b/src/themes/custom/app/footer/footer.component.ts new file mode 100644 index 0000000000..de80ceb311 --- /dev/null +++ b/src/themes/custom/app/footer/footer.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; +import { FooterComponent as BaseComponent } from '../../../../app/footer/footer.component'; + +@Component({ + selector: 'ds-footer', + // styleUrls: ['footer.component.scss'], + styleUrls: ['../../../../app/footer/footer.component.scss'], + // templateUrl: 'footer.component.html' + templateUrl: '../../../../app/footer/footer.component.html' +}) +export class FooterComponent extends BaseComponent { +} diff --git a/src/themes/custom/app/header/header.component.html b/src/themes/custom/app/header/header.component.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/themes/custom/app/header/header.component.scss b/src/themes/custom/app/header/header.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/themes/custom/app/header/header.component.ts b/src/themes/custom/app/header/header.component.ts new file mode 100644 index 0000000000..866072f3b6 --- /dev/null +++ b/src/themes/custom/app/header/header.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; +import { HeaderComponent as BaseComponent } from '../../../../app/header/header.component'; + +/** + * Represents the header with the logo and simple navigation + */ +@Component({ + selector: 'ds-header', + // styleUrls: ['header.component.scss'], + styleUrls: ['../../../../app/header/header.component.scss'], + // templateUrl: 'header.component.html', + templateUrl: '../../../../app/header/header.component.html', +}) +export class HeaderComponent extends BaseComponent { +} diff --git a/src/themes/custom/app/navbar/navbar.component.html b/src/themes/custom/app/navbar/navbar.component.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/themes/custom/app/navbar/navbar.component.scss b/src/themes/custom/app/navbar/navbar.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/themes/custom/app/navbar/navbar.component.ts b/src/themes/custom/app/navbar/navbar.component.ts new file mode 100644 index 0000000000..e163f096e9 --- /dev/null +++ b/src/themes/custom/app/navbar/navbar.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import { NavbarComponent as BaseComponent } from '../../../../app/navbar/navbar.component'; +import { slideMobileNav } from '../../../../app/shared/animations/slide'; + +/** + * Component representing the public navbar + */ +@Component({ + selector: 'ds-navbar', + // styleUrls: ['./navbar.component.scss'], + styleUrls: ['../../../../app/navbar/navbar.component.scss'], + // templateUrl: './navbar.component.html', + templateUrl: '../../../../app/navbar/navbar.component.html', + animations: [slideMobileNav] +}) +export class NavbarComponent extends BaseComponent { +} diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts index 6192451692..0e1096f957 100644 --- a/src/themes/custom/theme.module.ts +++ b/src/themes/custom/theme.module.ts @@ -74,6 +74,9 @@ import { WorkflowItemSendBackComponent } from './app/+workflowitems-edit-page/wo import { WorkflowItemDeleteComponent } from './app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component'; import { SubmissionModule } from '../../app/submission/submission.module'; import { MyDSpacePageModule } from '../../app/+my-dspace-page/my-dspace-page.module'; +import { NavbarComponent } from './app/navbar/navbar.component'; +import { HeaderComponent } from './app/header/header.component'; +import { FooterComponent } from './app/footer/footer.component'; const DECLARATIONS = [ HomePageComponent, @@ -109,7 +112,10 @@ const DECLARATIONS = [ SubmissionImportExternalComponent, SubmissionSubmitComponent, WorkflowItemDeleteComponent, - WorkflowItemSendBackComponent + WorkflowItemSendBackComponent, + FooterComponent, + HeaderComponent, + NavbarComponent ];