diff --git a/src/app/_layout/app-footer/_app-footer-theme.scss b/src/app/_layout/app-footer/_app-footer-theme.scss new file mode 100644 index 000000000..bde2fc9ee --- /dev/null +++ b/src/app/_layout/app-footer/_app-footer-theme.scss @@ -0,0 +1,36 @@ +@use "@angular/material" as mat; +@use "sass:map"; + +@mixin color($theme) { + $color-config: map.get($theme, "color"); + $primary: map.get($color-config, "primary"); + + .footer { + background-color: mat.m2-get-color-from-palette($primary, "default-contrast"); + color: mat.m2-get-color-from-palette($primary); + + a, + .toplink, + .footer-copy, + mat-icon { + color: mat.m2-get-color-from-palette($primary); + + } + + mat-toolbar { + background-color: mat.m2-get-color-from-palette($primary, "darker"); + } + + a { + color: mat.m2-get-color-from-palette($primary, "default-contrast"); + } + } +} + +@mixin theme($theme) { + + // Check if the 'color' key exists in the theme map + @if map.has-key($theme, "color") { + @include color($theme); + } +} diff --git a/src/app/_layout/app-footer/app-footer.component.html b/src/app/_layout/app-footer/app-footer.component.html new file mode 100644 index 000000000..f66a91b5e --- /dev/null +++ b/src/app/_layout/app-footer/app-footer.component.html @@ -0,0 +1,33 @@ + diff --git a/src/app/_layout/app-footer/app-footer.component.scss b/src/app/_layout/app-footer/app-footer.component.scss new file mode 100644 index 000000000..405a4ad43 --- /dev/null +++ b/src/app/_layout/app-footer/app-footer.component.scss @@ -0,0 +1,27 @@ +.footer { + // background: white; + // width: 100%; + // padding: 1rem; + // text-align: center; + + background-color: white; + + mat-toolbar { + background: white !important; + height: 3.5rem; + + .spacer { + flex: 1 1 auto; + } + + .toplink { + padding: 0.5rem 1rem; + font: bold; + font-size: 11pt; + + mat-icon { + vertical-align: middle; + } + } + } +} diff --git a/src/app/_layout/app-footer/app-footer.component.spec.ts b/src/app/_layout/app-footer/app-footer.component.spec.ts new file mode 100644 index 000000000..c5dc558d4 --- /dev/null +++ b/src/app/_layout/app-footer/app-footer.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AppFooterComponent } from './app-footer.component'; + +describe('AppFooterComponent', () => { + let component: AppFooterComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [AppFooterComponent] + }); + fixture = TestBed.createComponent(AppFooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/_layout/app-footer/app-footer.component.ts b/src/app/_layout/app-footer/app-footer.component.ts new file mode 100644 index 000000000..b95f940a0 --- /dev/null +++ b/src/app/_layout/app-footer/app-footer.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from "@angular/core"; +import { AppConfigService } from "app-config.service"; + +@Component({ + selector: "app-app-footer", + templateUrl: "./app-footer.component.html", + styleUrls: ["./app-footer.component.scss"], + standalone: false, +}) +export class AppFooterComponent implements OnInit { + appConfig = this.appConfigService.getConfig(); + + imprintUrl = ""; + privacyUrl = ""; + + constructor(public appConfigService: AppConfigService) { } + + ngOnInit() { + this.imprintUrl = + this.appConfig.imprintUrl || "https://example.com/imprint"; + this.privacyUrl = + this.appConfig.privacyUrl || "https://example.com/privacy"; + } +} diff --git a/src/app/_layout/app-layout/app-layout.component.html b/src/app/_layout/app-layout/app-layout.component.html index 22e872007..343229592 100644 --- a/src/app/_layout/app-layout/app-layout.component.html +++ b/src/app/_layout/app-layout/app-layout.component.html @@ -3,4 +3,5 @@
+ diff --git a/src/app/_layout/layout.module.ts b/src/app/_layout/layout.module.ts index d9ed0af58..a3f6a570f 100644 --- a/src/app/_layout/layout.module.ts +++ b/src/app/_layout/layout.module.ts @@ -12,12 +12,14 @@ import { AppMainLayoutComponent } from "./app-main-layout/app-main-layout.compon import { BatchCardModule } from "datasets/batch-card/batch-card.module"; import { BreadcrumbModule } from "shared/modules/breadcrumb/breadcrumb.module"; import { UsersModule } from "../users/users.module"; +import { AppFooterComponent } from './app-footer/app-footer.component'; @NgModule({ declarations: [ AppLayoutComponent, AppHeaderComponent, AppMainLayoutComponent, + AppFooterComponent, ], imports: [ CommonModule, @@ -33,4 +35,4 @@ import { UsersModule } from "../users/users.module"; ], exports: [], }) -export class LayoutModule {} +export class LayoutModule { } diff --git a/src/app/app-config.service.spec.ts b/src/app/app-config.service.spec.ts index 8ca39f261..5325d16d4 100644 --- a/src/app/app-config.service.spec.ts +++ b/src/app/app-config.service.spec.ts @@ -55,6 +55,8 @@ const appConfig: AppConfigInterface = { multipleDownloadAction: "http://localhost:3012/zip", multipleDownloadEnabled: true, multipleDownloadUseAuthToken: false, + imprintUrl = "https://example.com/imprint", + privacyUrl = "https://example.com/privacy", oAuth2Endpoints: [], policiesEnabled: true, retrieveDestinations: [], diff --git a/src/app/app-config.service.ts b/src/app/app-config.service.ts index e20f86898..0eda705d3 100644 --- a/src/app/app-config.service.ts +++ b/src/app/app-config.service.ts @@ -143,6 +143,8 @@ export interface AppConfigInterface { mainMenu?: MainMenuConfiguration; supportEmail?: string; checkBoxFilterClickTrigger?: boolean; + imprintUrl?: string; + privacyUrl?: string; } function isMainPageConfiguration(obj: any): obj is MainPageConfiguration { diff --git a/src/styles.scss b/src/styles.scss index b21134000..32a5b5cd2 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -4,6 +4,7 @@ @use "@angular/material" as mat; @use "./app/app-theme" as app; @use "./app/_layout/app-header/app-header-theme" as app-header; +@use "./app/_layout/app-footer/app-footer-theme" as app-footer; @use "./app/datasets/batch-view/batch-view-theme" as batch-view; @use "./app/datasets/dashboard/dashboard-theme" as dashboard; @use "./app/datasets/datafiles/datafiles-theme" as datafiles; @@ -229,6 +230,7 @@ $theme: map.merge( @include mat.all-component-themes($theme); @include app.theme($theme); @include app-header.theme($theme); +@include app-footer.theme($theme); @include batch-view.theme($theme); @include dashboard.theme($theme); @include datafiles.theme($theme);