added dark mode

master
Max 5 years ago
parent 630d2be98c
commit 91493d363f

@ -5,19 +5,8 @@ html, body
margin: 0 margin: 0
height: 100% 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

@ -40,6 +40,9 @@ import {MatCardModule} from '@angular/material/card';
import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatSelectModule} from '@angular/material/select'; import {MatSelectModule} from '@angular/material/select';
import {MatCheckboxModule} from '@angular/material/checkbox'; 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 { FlexLayoutModule } from '@angular/flex-layout';
import { MainNavigationComponent } from './components/main-navigation/main-navigation.component'; import { MainNavigationComponent } from './components/main-navigation/main-navigation.component';
@ -108,7 +111,10 @@ const appRoutes: Routes = [
MatCardModule, MatCardModule,
MatButtonToggleModule, MatButtonToggleModule,
MatSelectModule, MatSelectModule,
MatCheckboxModule MatCheckboxModule,
OverlayModule,
MatSlideToggleModule,
MatMenuModule
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

@ -1,9 +1,18 @@
<div id="about"> <div id="text0" style="text-align: center;">
<div id="aboutcontainer"> <h1>Greenvironment</h1>
<h1>What's Greenvironment?</h1> <p>Keep it clean and green!</p>
<h2>Hello!</h2> <button mat-icon-button>
<p>We, the greenviroment team want to create a netwok for environmentalists who care for our nature and our planet as much as we do.</p> <mat-icon class="white-icon">keyboard_arrow_down</mat-icon>
<p>We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p> </button>
<a href="/register">You aren't part of greenvironment yet? - join us here</a> </div>
</div> <div id="text1" style="text-align: center;">
<h1>What's Greenvironment?</h1>
<p>We, the greenviroment team want to create a netwok for environmentalists who care for our nature and our planet as much as we do.</p>
</div>
<div id="text2" style="text-align: center;">
<p>We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p>
<p>You aren't part of greenvironment yet? - join us now!</p>
<a mat-raised-button class="link-button" routerLink="/register" >Register</a>
<br>
<a mat-raised-button class="link-button" routerLink="/login">Login</a>
</div> </div>

@ -1,22 +1,30 @@
@import '../../../styles/mixins.sass' @import '../../../styles/mixins.sass'
@import '../../../styles/vars.sass' @import '../../../styles/vars.sass'
@import '~@angular/material/theming'
@import '../../../styles/greenvironment-material-theme.scss'
#about #text0, #text2
background-color: $cSecondaryBackground padding: 2em
grid-template: 15% 70% 15% / 15% 70% 15% max-width: 100%
display: grid min-height: 50%
min-height: 90vh background-color: mat-color($primary)
max-height: 90vh p, h1, h2
color: white
#aboutcontainer #text1
@include gridPosition(2, 2,2,2) padding: 2em
background-color: $cPrimaryBackground min-height: 50%
padding: 1em max-width: 100%
overflow: auto p, h1, h2
input .white-icon
margin: 0.25em color: white
#header transform: scale(3)
@include gridPosition(1, 2, 1, 2)
a p
color: $cHeadPrimaryBackground font-size: 2em
.link-button
width: 100%
max-width: 30em
margin-bottom: 1em

@ -30,9 +30,9 @@
</button> </button>
<span>Greenvironment</span> <span>Greenvironment</span>
<!--The following menu items will be hidden on both SM and XS screen sizes --> <!--The following menu items will be hidden on both SM and XS screen sizes -->
<nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true"> <nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true">
<div *ngIf="loggedIn"> <div *ngIf="loggedIn">
<a mat-tab-link <a mat-tab-link class="link"
*ngFor="let link of navLinksLoggedIn" *ngFor="let link of navLinksLoggedIn"
[routerLink]="link.path" [routerLink]="link.path"
(click)="activeLink = link" (click)="activeLink = link"
@ -44,7 +44,7 @@
<a mat-tab-link (click)="logout()" >log out</a> <a mat-tab-link (click)="logout()" >log out</a>
</div> </div>
<div *ngIf="!loggedIn"> <div *ngIf="!loggedIn">
<a mat-tab-link <a mat-tab-link class="link"
*ngFor="let link of navLinks" *ngFor="let link of navLinks"
[routerLink]="link.path" [routerLink]="link.path"
(click)="activeLink = link" (click)="activeLink = link"
@ -54,7 +54,31 @@
{{link.label}} {{link.label}}
</a> </a>
</div> </div>
</nav> </nav>
<!--neuer shit jooooooooooooooooooooooooooooooooooooooooooooooooo--->
<div id="menu-button-box">
<button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
<mat-icon>more_vert</mat-icon>
</button>
</div>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<mat-slide-toggle
color="primary"
class="theme-button"
(click)="toggletheme()">
dark mode
</mat-slide-toggle>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Check voice mail</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Disable alerts</span>
</button>
</mat-menu>
</mat-toolbar> </mat-toolbar>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</mat-sidenav-content> </mat-sidenav-content>

@ -26,6 +26,13 @@
width: 100% width: 100%
margin-bottom: 0.5em margin-bottom: 0.5em
/deep/ .mat-tab-link
min-width: 5em!important
#menu-button-box
text-align: right
width: 100%

@ -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 { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators'; import { map, shareReplay } from 'rxjs/operators';
@ -9,6 +9,7 @@ import { Levellist } from 'src/app/models/levellist';
import { Http } from '@angular/http'; import { Http } from '@angular/http';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { User } from 'src/app/models/user'; import { User } from 'src/app/models/user';
import { OverlayContainer} from '@angular/cdk/overlay';
@Component({ @Component({
selector: 'app-main-navigation', selector: 'app-main-navigation',
@ -16,14 +17,16 @@ import { User } from 'src/app/models/user';
styleUrls: ['./main-navigation.component.sass'] styleUrls: ['./main-navigation.component.sass']
}) })
export class MainNavigationComponent implements OnInit { export class MainNavigationComponent implements OnInit {
loggedIn: boolean = false; loggedIn: boolean = false
userId: number; userId: number
username: string username: string
user: User user: User
levellist: Levellist = new Levellist() levellist: Levellist = new Levellist()
level: string level: string
points: number points: number
profileUrl: string; profileUrl: string
lighttheme : boolean = true
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset) isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
@ -32,7 +35,7 @@ export class MainNavigationComponent implements OnInit {
shareReplay() 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() { ngOnInit() {
this.data.currentUserInfo.subscribe(user => { this.data.currentUserInfo.subscribe(user => {
this.user = user this.user = user
@ -58,6 +61,21 @@ export class MainNavigationComponent implements OnInit {
{ path: '/register', label: 'Register' }, { 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() { logout() {
let url = environment.graphQLUrl let url = environment.graphQLUrl

@ -9,19 +9,32 @@
// Define the palettes for your theme using the Material Design palettes available in palette.scss // 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 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/ // hue. Available color palettes: https://material.io/design/color/
$theme-primary: mat-palette($mat-green); $primary: mat-palette($mat-green);
$theme-accent: mat-palette($mat-pink, A200, A100, A400); $accent: mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red). // 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). // 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. // Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component // Alternatively, you can import and @include the theme mixins for each component
// that you are using. // that you are using.
@include angular-material-theme($my-theme); @include angular-material-theme($light-theme);
Loading…
Cancel
Save