From 10852321395ab88effab0afd0c9f7302d119d51b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Sat, 25 May 2019 17:03:58 +0200
Subject: [PATCH] Adjust theme manager design
---
.../home/home-page/home-page.component.scss | 2 +-
.../shared/header/header.component.html | 24 ++++++++---
.../shared/header/header.component.scss | 43 +++++++++++++++++++
src/theme/dark-Theme/darkTheme.const.ts | 4 +-
src/theme/default-Theme/defaultTheme.const.ts | 4 +-
5 files changed, 68 insertions(+), 9 deletions(-)
diff --git a/src/app/components/home/home-page/home-page.component.scss b/src/app/components/home/home-page/home-page.component.scss
index 8f6f54c55..b84a2bf8c 100644
--- a/src/app/components/home/home-page/home-page.component.scss
+++ b/src/app/components/home/home-page/home-page.component.scss
@@ -21,7 +21,7 @@
font-size: 60%;
text-align: center;
letter-spacing: 10px;
- color: var(--secondary-variant);
+ color: var(--on-surface);
animation: moveInRight 1s ease-out;
}
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 51d1685f9..c5da79c4d 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -7,21 +7,33 @@
<span *ngIf="router.url !== '/home'" class="app-title" (click)="goToHomepage()">ARSnova</span>
<span class="fill-remaining-space"></span>
- <mat-menu #themeMenu="matMenu" [overlapTrigger]="false" xPosition="before">
+ <mat-menu class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false">
<mat-grid-list cols="2">
<mat-grid-tile>
- <button mat-menu-item (click)="changeTheme('arsnova')">{{ 'header.default' | translate }}</button>
+ <button mat-icon-button class="default color-button" (click)="changeTheme('arsnova')">
+ <mat-icon class="color-icon">
+ lens
+ <mat-icon *ngIf="themeClass === 'arsnova'" class="check">check_circle</mat-icon>
+ </mat-icon>
+ </button>
</mat-grid-tile>
<mat-grid-tile>
- <button mat-menu-item (click)="changeTheme('dark')">{{ 'header.dark' | translate }}</button>
+ <button mat-icon-button class="dark color-button" (click)="changeTheme('dark')">
+ <mat-icon class="color-icon">lens</mat-icon>
+ <mat-icon *ngIf="themeClass === 'dark'" class="check">check_circle</mat-icon>
+ </button>
</mat-grid-tile>
<mat-grid-tile>
- <button mat-menu-item (click)="changeTheme('purple')">
- <mat-icon>lens</mat-icon>
+ <button mat-icon-button class="purple color-button" (click)="changeTheme('purple')">
+ <mat-icon class="color-icon">lens</mat-icon>
+ <mat-icon *ngIf="themeClass === 'purple'" class="check">check_circle</mat-icon>
</button>
</mat-grid-tile>
<mat-grid-tile>
- <button mat-menu-item (click)="changeTheme('yellow')">Yellow</button>
+ <button mat-icon-button class="blue color-button" (click)="changeTheme('blue')">
+ <mat-icon class="color-icon">lens</mat-icon>
+ <mat-icon *ngIf="themeClass === 'blue'" class="check">check_circle</mat-icon>
+ </button>
</mat-grid-tile>
</mat-grid-list>
</mat-menu>
diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss
index 9e2de8a46..f091a4504 100644
--- a/src/app/components/shared/header/header.component.scss
+++ b/src/app/components/shared/header/header.component.scss
@@ -12,3 +12,46 @@ mat-toolbar {
.header-icons {
color: var(--on-surface);
}
+
+.purple {
+ color: var(--purple);
+}
+
+.blue {
+ color: var(--blue);
+}
+
+.dark {
+ color: var(--on-primary);
+}
+
+.default {
+ color: var(--teal);
+}
+
+.color-button {
+ width: 100%;
+ height: 100%;
+}
+
+.color-icon {
+ font-size: 45px;
+ height: 45px;
+ width: 45px;
+ line-height: 100%!important;
+}
+
+::ng-deep .color-menu {
+ padding: 0 8px 0 8px;
+}
+
+.check {
+ font-size: 25px;
+ height: 25px;
+ width: 25px;
+ line-height: 100%!important;
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ color: white;
+}
diff --git a/src/theme/dark-Theme/darkTheme.const.ts b/src/theme/dark-Theme/darkTheme.const.ts
index e326878b0..6e66c17f8 100644
--- a/src/theme/dark-Theme/darkTheme.const.ts
+++ b/src/theme/dark-Theme/darkTheme.const.ts
@@ -18,7 +18,9 @@ export const dark = {
'--green': '#AED581',
'--red': '#FF8A80',
'--yellow': '#FFD54F',
- '--blue': '#1E88E5',
+ '--blue': '#3f51b5',
+ '--purple': '#9c27b0',
+ '--teal': '#4DB6AC',
'--grey': '#BDBDBD',
'--grey-light': '#9E9E9E'
};
diff --git a/src/theme/default-Theme/defaultTheme.const.ts b/src/theme/default-Theme/defaultTheme.const.ts
index 82f67187b..f27dfde39 100644
--- a/src/theme/default-Theme/defaultTheme.const.ts
+++ b/src/theme/default-Theme/defaultTheme.const.ts
@@ -18,7 +18,9 @@ export const arsnova = {
'--green': '#AED581',
'--red': '#FF8A80',
'--yellow': '#FFD54F',
- '--blue': '#1E88E5',
+ '--blue': '#3f51b5',
+ '--purple': '#9c27b0',
+ '--teal': '#4DB6AC',
'--grey': '#BDBDBD',
'--grey-light': '#EEEEEE'
};
--
GitLab