From 91493d363fd9e0febc2f877b962238f4b3b980bd Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 10 Dec 2019 22:00:30 +0100 Subject: [PATCH] added dark mode --- src/app/app.component.sass | 13 +----- src/app/app.module.ts | 8 +++- src/app/components/about/about.component.html | 27 ++++++++---- src/app/components/about/about.component.sass | 42 +++++++++++-------- .../main-navigation.component.html | 32 ++++++++++++-- .../main-navigation.component.sass | 7 ++++ .../main-navigation.component.ts | 28 ++++++++++--- src/styles/greenvironment-material-theme.scss | 23 +++++++--- 8 files changed, 127 insertions(+), 53 deletions(-) diff --git a/src/app/app.component.sass b/src/app/app.component.sass index 55b5dc7..9de1e9a 100644 --- a/src/app/app.component.sass +++ b/src/app/app.component.sass @@ -5,19 +5,8 @@ html, body margin: 0 height: 100% -#imprint - background-color: $cSecondaryBackground - grid-template: 15% 70% 15% / 15% 70% 15% - display: grid - min-height: 100vh - max-height: 100vh -#about - background-color: $cSecondaryBackground - grid-template: 15% 70% 15% / 15% 70% 15% - display: grid - min-height: 100vh - max-height: 100vh + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6fab380..b392881 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -40,6 +40,9 @@ import {MatCardModule} from '@angular/material/card'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatSelectModule} from '@angular/material/select'; import {MatCheckboxModule} from '@angular/material/checkbox'; +import { OverlayModule} from '@angular/cdk/overlay'; +import {MatSlideToggleModule} from '@angular/material/slide-toggle'; +import {MatMenuModule} from '@angular/material/menu'; import { FlexLayoutModule } from '@angular/flex-layout'; import { MainNavigationComponent } from './components/main-navigation/main-navigation.component'; @@ -108,7 +111,10 @@ const appRoutes: Routes = [ MatCardModule, MatButtonToggleModule, MatSelectModule, - MatCheckboxModule + MatCheckboxModule, + OverlayModule, + MatSlideToggleModule, + MatMenuModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/components/about/about.component.html b/src/app/components/about/about.component.html index 37ea6ad..635ed77 100644 --- a/src/app/components/about/about.component.html +++ b/src/app/components/about/about.component.html @@ -1,9 +1,18 @@ -
-
-

What's Greenvironment?

-

Hello!

-

We, the greenviroment team want to create a netwok for environmentalists who care for our nature and our planet as much as we do.

-

We believe, that together we can do amazing things to protect our environment and keep it clean and green.

- You aren't part of greenvironment yet? - join us here -
-
\ No newline at end of file +
+

Greenvironment

+

Keep it clean and green!

+ +
+
+

What's Greenvironment?

+

We, the greenviroment team want to create a netwok for environmentalists who care for our nature and our planet as much as we do.

+
+
+

We believe, that together we can do amazing things to protect our environment and keep it clean and green.

+

You aren't part of greenvironment yet? - join us now!

+ Register +
+ Login +
diff --git a/src/app/components/about/about.component.sass b/src/app/components/about/about.component.sass index 1df2e95..65e75dc 100644 --- a/src/app/components/about/about.component.sass +++ b/src/app/components/about/about.component.sass @@ -1,22 +1,30 @@ @import '../../../styles/mixins.sass' @import '../../../styles/vars.sass' +@import '~@angular/material/theming' +@import '../../../styles/greenvironment-material-theme.scss' -#about - background-color: $cSecondaryBackground - grid-template: 15% 70% 15% / 15% 70% 15% - display: grid - min-height: 90vh - max-height: 90vh +#text0, #text2 + padding: 2em + max-width: 100% + min-height: 50% + background-color: mat-color($primary) + p, h1, h2 + color: white + +#text1 + padding: 2em + min-height: 50% + max-width: 100% + p, h1, h2 -#aboutcontainer - @include gridPosition(2, 2,2,2) - background-color: $cPrimaryBackground - padding: 1em - overflow: auto +.white-icon + color: white + transform: scale(3) + +p + font-size: 2em -input - margin: 0.25em -#header - @include gridPosition(1, 2, 1, 2) -a - color: $cHeadPrimaryBackground +.link-button + width: 100% + max-width: 30em + margin-bottom: 1em diff --git a/src/app/components/main-navigation/main-navigation.component.html b/src/app/components/main-navigation/main-navigation.component.html index d6aac82..4d7142e 100644 --- a/src/app/components/main-navigation/main-navigation.component.html +++ b/src/app/components/main-navigation/main-navigation.component.html @@ -30,9 +30,9 @@ Greenvironment - + + + + + + + diff --git a/src/app/components/main-navigation/main-navigation.component.sass b/src/app/components/main-navigation/main-navigation.component.sass index 50f76fb..732861a 100644 --- a/src/app/components/main-navigation/main-navigation.component.sass +++ b/src/app/components/main-navigation/main-navigation.component.sass @@ -26,6 +26,13 @@ width: 100% margin-bottom: 0.5em +/deep/ .mat-tab-link + min-width: 5em!important + +#menu-button-box + text-align: right + width: 100% + diff --git a/src/app/components/main-navigation/main-navigation.component.ts b/src/app/components/main-navigation/main-navigation.component.ts index 7c1b355..9f90072 100644 --- a/src/app/components/main-navigation/main-navigation.component.ts +++ b/src/app/components/main-navigation/main-navigation.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, HostBinding } from '@angular/core'; import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; import { Observable } from 'rxjs'; import { map, shareReplay } from 'rxjs/operators'; @@ -9,6 +9,7 @@ import { Levellist } from 'src/app/models/levellist'; import { Http } from '@angular/http'; import { Router } from '@angular/router'; import { User } from 'src/app/models/user'; +import { OverlayContainer} from '@angular/cdk/overlay'; @Component({ selector: 'app-main-navigation', @@ -16,14 +17,16 @@ import { User } from 'src/app/models/user'; styleUrls: ['./main-navigation.component.sass'] }) export class MainNavigationComponent implements OnInit { - loggedIn: boolean = false; - userId: number; + loggedIn: boolean = false + userId: number username: string user: User levellist: Levellist = new Levellist() level: string points: number - profileUrl: string; + profileUrl: string + + lighttheme : boolean = true isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset) @@ -32,7 +35,7 @@ export class MainNavigationComponent implements OnInit { shareReplay() ); - constructor(private data: DatasharingService,private selfservice: SelfService,private breakpointObserver: BreakpointObserver, private http: Http, private router: Router) {} + constructor(public overlayContainer: OverlayContainer, private data: DatasharingService,private selfservice: SelfService,private breakpointObserver: BreakpointObserver, private http: Http, private router: Router) {} ngOnInit() { this.data.currentUserInfo.subscribe(user => { this.user = user @@ -57,7 +60,22 @@ export class MainNavigationComponent implements OnInit { { path: '/login', label: 'Login' }, { path: '/register', label: 'Register' }, ]; + + public toggletheme(){ + if(this.lighttheme){ + this.onSetTheme("dark-theme"); + this.lighttheme = false; + } else{ + this.onSetTheme("light-theme"); + this.lighttheme = true; + } + } + @HostBinding('class') componentCssClass; + onSetTheme(theme) { + this.overlayContainer.getContainerElement().classList.add(theme); + this.componentCssClass = theme; + } logout() { let url = environment.graphQLUrl diff --git a/src/styles/greenvironment-material-theme.scss b/src/styles/greenvironment-material-theme.scss index dcf65d2..36d2c93 100644 --- a/src/styles/greenvironment-material-theme.scss +++ b/src/styles/greenvironment-material-theme.scss @@ -9,19 +9,32 @@ // 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://material.io/design/color/ -$theme-primary: mat-palette($mat-green); -$theme-accent: mat-palette($mat-pink, A200, A100, A400); +$primary: mat-palette($mat-green); +$accent: mat-palette($mat-pink, A200, A100, A400); // The warn palette is optional (defaults to red). -$theme-warn: mat-palette($mat-red); +$warn: mat-palette($mat-red); // Create the theme object (a Sass map containing all of the palettes). -$my-theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn); +$light-theme: mat-light-theme($primary, $accent, $warn); +$dark-primary: mat-palette($mat-green); +$dark-accent: mat-palette($mat-pink, A200, A100, A400); +// The warn palette is optional (defaults to red). +$dark-warn: mat-palette($mat-red); + +// Create the theme object (a Sass map containing all of the palettes). +$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn); +.dark-theme { + @include angular-material-theme($dark-theme); +} +.light-theme { + @include angular-material-theme($light-theme) +} // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. -@include angular-material-theme($my-theme); \ No newline at end of file +@include angular-material-theme($light-theme); \ No newline at end of file