From e4fee144d95c4631dbf8d2636212644c65c64d21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Thu, 23 May 2019 14:15:59 +0200
Subject: [PATCH] Fix theme activation
---
src/app/app.component.css | 0
src/app/app.component.scss | 2 --
.../shared/header/header.component.html | 22 +++++++++++++++----
.../shared/header/header.component.scss | 1 +
.../shared/header/header.component.ts | 6 +----
src/theme/arsnova-theme.const.ts | 4 ++--
src/theme/default-Theme/defaultTheme.const.ts | 2 +-
src/theme/theme.directive.ts | 2 +-
8 files changed, 24 insertions(+), 15 deletions(-)
delete mode 100644 src/app/app.component.css
diff --git a/src/app/app.component.css b/src/app/app.component.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 046919174..c88959035 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,5 +1,3 @@
-@import '../theme/default-Theme/_variables.scss';
-
.app-component {
padding: 4%;
background-color:var(--background);
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 111deec40..51d1685f9 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar>
+<mat-toolbar class="mat-elevation-z6">
<mat-toolbar-row>
<button *ngIf="router.url !== '/home'" (click)="goBack()" mat-icon-button>
<mat-icon class="header-icons" aria-label="Go back">keyboard_arrow_left</mat-icon>
@@ -7,9 +7,23 @@
<span *ngIf="router.url !== '/home'" class="app-title" (click)="goToHomepage()">ARSnova</span>
<span class="fill-remaining-space"></span>
- <mat-menu #themeMenu="matMenu" [overlapTrigger]="false">
- <button mat-menu-item (click)="changeTheme('')">{{ 'header.default' | translate }}</button>
- <button mat-menu-item (click)="changeTheme('dark')">{{ 'header.dark' | translate }}</button>
+ <mat-menu #themeMenu="matMenu" [overlapTrigger]="false" xPosition="before">
+ <mat-grid-list cols="2">
+ <mat-grid-tile>
+ <button mat-menu-item (click)="changeTheme('arsnova')">{{ 'header.default' | translate }}</button>
+ </mat-grid-tile>
+ <mat-grid-tile>
+ <button mat-menu-item (click)="changeTheme('dark')">{{ 'header.dark' | translate }}</button>
+ </mat-grid-tile>
+ <mat-grid-tile>
+ <button mat-menu-item (click)="changeTheme('purple')">
+ <mat-icon>lens</mat-icon>
+ </button>
+ </mat-grid-tile>
+ <mat-grid-tile>
+ <button mat-menu-item (click)="changeTheme('yellow')">Yellow</button>
+ </mat-grid-tile>
+ </mat-grid-list>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="themeMenu">
diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss
index 3daed6217..9e2de8a46 100644
--- a/src/app/components/shared/header/header.component.scss
+++ b/src/app/components/shared/header/header.component.scss
@@ -6,6 +6,7 @@
mat-toolbar {
background-color: var(--surface);
+ position: relative;
}
.header-icons {
diff --git a/src/app/components/shared/header/header.component.ts b/src/app/components/shared/header/header.component.ts
index 6c0490fb1..df26a09a6 100644
--- a/src/app/components/shared/header/header.component.ts
+++ b/src/app/components/shared/header/header.component.ts
@@ -67,11 +67,7 @@ export class HeaderComponent implements OnInit {
changeTheme(theme) {
this.themeClass = theme;
- if (theme === '') {
- this.themeService.activate('arsnovaTheme');
- } else {
- this.themeService.activate(theme);
- }
+ this.themeService.activate(theme);
}
login(isLecturer: boolean) {
diff --git a/src/theme/arsnova-theme.const.ts b/src/theme/arsnova-theme.const.ts
index 91ae0b442..44fd8b030 100644
--- a/src/theme/arsnova-theme.const.ts
+++ b/src/theme/arsnova-theme.const.ts
@@ -1,7 +1,7 @@
import { dark } from './dark-Theme/darkTheme.const';
-import { defaultTheme } from './default-Theme/defaultTheme.const';
+import { arsnova } from './default-Theme/defaultTheme.const';
export const themes = {
- arsnovaTheme: defaultTheme,
+ arsnova: arsnova,
dark: dark
};
diff --git a/src/theme/default-Theme/defaultTheme.const.ts b/src/theme/default-Theme/defaultTheme.const.ts
index 30c85dab7..82f67187b 100644
--- a/src/theme/default-Theme/defaultTheme.const.ts
+++ b/src/theme/default-Theme/defaultTheme.const.ts
@@ -1,4 +1,4 @@
-export const defaultTheme = {
+export const arsnova = {
'--primary' : '#4DB6AC',
'--primary-variant': '#80cbc4',
diff --git a/src/theme/theme.directive.ts b/src/theme/theme.directive.ts
index 4202d0503..e9903558f 100644
--- a/src/theme/theme.directive.ts
+++ b/src/theme/theme.directive.ts
@@ -10,7 +10,7 @@ import { Subscription } from 'rxjs';
export class ThemeDirective implements OnInit, OnDestroy {
- private themeName = 'arsnovaTheme';
+ private themeName = 'arsnova';
private themServiceSubscription: Subscription;
constructor(private elementRef: ElementRef,
--
GitLab