From 52ca46ebfe7c68ed74cbdc19b7417747c5035ec5 Mon Sep 17 00:00:00 2001
From: Lorenz Detterbeck <lorenz.detterbeck@gmail.com>
Date: Mon, 2 Apr 2018 23:36:39 +0200
Subject: [PATCH] Add theme-switcher component Add Buttons for
default/dark/light Theme Add preliminary dark and light themes Todo: only the
button color itself changes, not the whole theme
---
src/app/app.module.ts | 11 ++++--
.../fragments/footer/footer.component.html | 4 +--
.../fragments/footer/footer.component.ts | 4 ++-
.../theme-switcher.component.html | 11 ++++++
.../theme-switcher.component.scss | 0
.../theme-switcher.component.spec.ts | 25 ++++++++++++++
.../theme-switcher.component.ts | 34 +++++++++++++++++++
src/theme/_variables.scss | 28 +++++++++++++++
8 files changed, 110 insertions(+), 7 deletions(-)
create mode 100644 src/app/components/fragments/theme-switcher/theme-switcher.component.html
create mode 100644 src/app/components/fragments/theme-switcher/theme-switcher.component.scss
create mode 100644 src/app/components/fragments/theme-switcher/theme-switcher.component.spec.ts
create mode 100644 src/app/components/fragments/theme-switcher/theme-switcher.component.ts
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4a9cb100c..0012a9609 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -80,6 +80,8 @@ import { AuthenticationInterceptor } from './interceptors/authentication.interce
import { HeaderComponent } from './components/fragments/header/header.component';
import { FooterComponent } from './components/fragments/footer/footer.component';
import { FooterLoginDialogComponent } from './components/dialogs/footer-login-dialog/footer-login-dialog.component';
+import { ThemeSwitcherComponent } from './components/fragments/theme-switcher/theme-switcher.component';
+import { OverlayModule } from '@angular/cdk/overlay';
@NgModule({
declarations: [
@@ -114,7 +116,8 @@ import { FooterLoginDialogComponent } from './components/dialogs/footer-login-di
ContentTextCreatorComponent,
HeaderComponent,
FooterComponent,
- FooterLoginDialogComponent
+ FooterLoginDialogComponent,
+ ThemeSwitcherComponent
],
entryComponents: [
RegisterComponent,
@@ -162,7 +165,8 @@ import { FooterLoginDialogComponent } from './components/dialogs/footer-login-di
MatToolbarModule,
MatTooltipModule,
ReactiveFormsModule,
- HttpClientModule
+ HttpClientModule,
+ OverlayModule
],
providers: [
{
@@ -177,7 +181,8 @@ import { FooterLoginDialogComponent } from './components/dialogs/footer-login-di
RoomService,
CommentService,
ContentService,
- ContentAnswerService
+ ContentAnswerService,
+ ThemeSwitcherComponent
],
bootstrap: [AppComponent]
})
diff --git a/src/app/components/fragments/footer/footer.component.html b/src/app/components/fragments/footer/footer.component.html
index b85e5da66..78dddd65a 100644
--- a/src/app/components/fragments/footer/footer.component.html
+++ b/src/app/components/fragments/footer/footer.component.html
@@ -6,9 +6,7 @@
<div class="container">
<mat-list role="list">
<h3 mat-subheader>Change Theme</h3>
- <mat-list-item role="listitem">
- <mat-slide-toggle></mat-slide-toggle>
- </mat-list-item>
+<app-theme-switcher></app-theme-switcher>
</mat-list>
<mat-nav-list>
<h3 mat-subheader>Login</h3>
diff --git a/src/app/components/fragments/footer/footer.component.ts b/src/app/components/fragments/footer/footer.component.ts
index 5f750688c..f74ece4c7 100644
--- a/src/app/components/fragments/footer/footer.component.ts
+++ b/src/app/components/fragments/footer/footer.component.ts
@@ -4,6 +4,7 @@ import { NotificationService } from '../../../services/util/notification.service
import { Router } from '@angular/router';
import { MatDialog } from '@angular/material';
import { FooterLoginDialogComponent } from '../../dialogs/footer-login-dialog/footer-login-dialog.component';
+import { ThemeSwitcherComponent } from '../theme-switcher/theme-switcher.component';
@Component({
selector: 'app-footer',
@@ -17,7 +18,8 @@ export class FooterComponent implements OnInit {
public authenticationService: AuthenticationService,
public notificationService: NotificationService,
public router: Router,
- public dialog: MatDialog
+ public dialog: MatDialog,
+ public themeSwitcher: ThemeSwitcherComponent
) { }
ngOnInit() {
diff --git a/src/app/components/fragments/theme-switcher/theme-switcher.component.html b/src/app/components/fragments/theme-switcher/theme-switcher.component.html
new file mode 100644
index 000000000..883c0e35e
--- /dev/null
+++ b/src/app/components/fragments/theme-switcher/theme-switcher.component.html
@@ -0,0 +1,11 @@
+<mat-nav-list role="list">
+ <mat-list-item role="listitem">
+ <button mat-button color="primary" (click)="onSetTheme('default-theme')">Default</button>
+ </mat-list-item>
+ <mat-list-item role="listitem">
+ <button mat-button color="primary" (click)="onSetTheme('dark-theme')">Dark</button>
+ </mat-list-item>
+ <mat-list-item role="listitem">
+ <button mat-button color="primary" (click)="onSetTheme('light-theme')">Light</button>
+ </mat-list-item>
+</mat-nav-list>
diff --git a/src/app/components/fragments/theme-switcher/theme-switcher.component.scss b/src/app/components/fragments/theme-switcher/theme-switcher.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/components/fragments/theme-switcher/theme-switcher.component.spec.ts b/src/app/components/fragments/theme-switcher/theme-switcher.component.spec.ts
new file mode 100644
index 000000000..4fdae9d32
--- /dev/null
+++ b/src/app/components/fragments/theme-switcher/theme-switcher.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ThemeSwitcherComponent } from './theme-switcher.component';
+
+describe('ThemeSwitcherComponent', () => {
+ let component: ThemeSwitcherComponent;
+ let fixture: ComponentFixture<ThemeSwitcherComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ThemeSwitcherComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ThemeSwitcherComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/fragments/theme-switcher/theme-switcher.component.ts b/src/app/components/fragments/theme-switcher/theme-switcher.component.ts
new file mode 100644
index 000000000..0f9935427
--- /dev/null
+++ b/src/app/components/fragments/theme-switcher/theme-switcher.component.ts
@@ -0,0 +1,34 @@
+import { Component, HostBinding, OnInit, Version } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { OverlayContainer } from '@angular/cdk/overlay';
+
+@Component({
+ selector: 'app-theme-switcher',
+ templateUrl: './theme-switcher.component.html',
+ styleUrls: ['./theme-switcher.component.scss']
+})
+export class ThemeSwitcherComponent implements OnInit {
+
+ constructor(private http: HttpClient, public overlayContainer: OverlayContainer) {}
+
+ title = 'app';
+ version: Version;
+ @HostBinding('class') componentCssClass;
+
+ ngOnInit() {
+ this.getVersion();
+ }
+
+ onSetTheme(theme) {
+ this.overlayContainer.getContainerElement().classList.add(theme);
+ this.componentCssClass = theme;
+ }
+
+ getVersion() {
+ this.http.get<Version>('/api/version')
+ .subscribe(data => {
+ this.version = data;
+ });
+ }
+
+}
diff --git a/src/theme/_variables.scss b/src/theme/_variables.scss
index e77658e95..b62fef3fd 100644
--- a/src/theme/_variables.scss
+++ b/src/theme/_variables.scss
@@ -1,4 +1,5 @@
@import '~@angular/material/theming';
+@include mat-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://www.google.com/design/spec/style/color.html
@@ -10,3 +11,30 @@ $arsnova-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$arsnova-theme: mat-light-theme($arsnova-primary, $arsnova-accent, $arsnova-warn);
+
+// Default colors
+
+$my-app-theme: mat-light-theme($arsnova-primary, $arsnova-accent, $arsnova-warn);
+@include angular-material-theme($my-app-theme);
+
+// Dark theme
+$dark-primary: mat-palette($mat-blue-grey);
+$dark-accent: mat-palette($mat-amber, 200, 100, 400);
+$dark-warn: mat-palette($mat-deep-orange);
+
+$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
+
+.dark-theme {
+ @include angular-material-theme($dark-theme);
+}
+
+// Light theme
+$light-primary: mat-palette($mat-cyan, 200, 500, 300);
+$light-accent: mat-palette($mat-brown, 200);
+$light-warn: mat-palette($mat-deep-orange, 200);
+
+$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);
+
+.light-theme {
+ @include angular-material-theme($light-theme)
+}
--
GitLab