From 1bf46d16c8a27fb9fd7b79eb8b8bc869b613d0b7 Mon Sep 17 00:00:00 2001 From: Zak Timson Date: Wed, 14 Nov 2018 19:04:43 -0500 Subject: [PATCH] Some bitchin animations --- src/app/animations.ts | 4 ++-- src/app/app-routing.module.ts | 2 +- src/app/app.component.html | 6 +++-- src/app/app.component.ts | 13 ++++++++++- src/app/app.module.ts | 3 ++- src/app/login/login.component.html | 31 ++++++++++++++++++++------ src/app/login/login.component.ts | 13 ++++++++--- src/app/weather/weather.component.html | 10 ++++----- src/index.html | 13 +++++++++-- src/main.ts | 3 +-- src/styles.scss | 31 +++++++++++++++++++++++++- 11 files changed, 102 insertions(+), 27 deletions(-) diff --git a/src/app/animations.ts b/src/app/animations.ts index 08b146b..b1ccea0 100644 --- a/src/app/animations.ts +++ b/src/app/animations.ts @@ -8,8 +8,8 @@ import { export const expandDown = trigger('expandDown', [ transition('void => *', [ - style({transform: 'translateY(-100%)'}), - animate('0.5s ease-in-out', style({transform: 'translateY(0%)'})) + style({opacity: 0, transform: 'translateY(-100%)'}), + animate('0.5s ease-in-out', style({opacity: 1, transform: 'translateY(0%)'})) ]) ]); diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 6ada6be..bd32764 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -11,7 +11,7 @@ import {LoginGuard} from './login/login.guard'; const routes: Routes = [ {path: 'battery', component: BatteryComponent, canActivate: [LoginGuard]}, {path: 'dashboard', component: DashboardComponent, canActivate: [LoginGuard]}, - {path: 'login', component: LoginComponent, data: {hide: true}}, + {path: 'login', component: LoginComponent, data: {hide: true, noAnimation: true}}, {path: 'security', component: SecurityComponent, canActivate: [LoginGuard]}, {path: 'settings', component: SettingsComponent, canActivate: [LoginGuard]}, {path: 'weather', component: WeatherComponent, canActivate: [LoginGuard]}, diff --git a/src/app/app.component.html b/src/app/app.component.html index 4350276..89bc8cd 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -20,10 +20,12 @@ settings Settings + logout Logout + - -
+ +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b0d7dda..c9be439 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,6 +6,7 @@ import {expandDown, routerTransition} from './animations'; import {ActivatedRoute, NavigationEnd, Router} from '@angular/router'; import {filter} from 'rxjs/operators'; import {WeatherService} from './weather/weather.service'; +import {firebaseApp} from './app.module'; @Component({ selector: 'app-root', @@ -18,7 +19,7 @@ export class AppComponent { open = false; environment = environment; - constructor(public batteryService: BatteryService, public weatherService: WeatherService, router: Router, route: ActivatedRoute, breakpointObserver: BreakpointObserver) { + constructor(private router: Router, public batteryService: BatteryService, public weatherService: WeatherService, route: ActivatedRoute, breakpointObserver: BreakpointObserver) { router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => { this.hide = !!route.root.firstChild.snapshot.data.hide; this.open = !this.hide && !this.mobile; @@ -29,4 +30,14 @@ export class AppComponent { this.open = !this.mobile; }) } + + async logout() { + await firebaseApp.auth().signOut(); + return this.router.navigate(['/login']) + } + + getState(outlet) { + if(!outlet.isActivated) return ''; + return outlet.activatedRouteData.noAnimation ? '' : outlet.activatedRoute; + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d167f69..719049d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,7 +10,7 @@ import { MatCardModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatInputModule, - MatListModule, + MatListModule, MatProgressBarModule, MatSidenavModule, MatToolbarModule } from '@angular/material'; @@ -50,6 +50,7 @@ export const firebaseApp = firebase.initializeApp(environment.firebase); MatIconModule, MatInputModule, MatListModule, + MatProgressBarModule, MatSidenavModule, MatToolbarModule, ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }), diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index c3a9c08..a6d03e7 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -1,10 +1,27 @@ -
-
-

Home Front

- v{{environment.version}} + +
+
+

Home Front

+
+
+ +
+
+
+
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index 1025a85..29cbdbc 100644 --- a/src/app/login/login.component.ts +++ b/src/app/login/login.component.ts @@ -3,12 +3,15 @@ import {environment} from '../../environments/environment'; import {firebaseApp} from '../app.module'; import {Router} from '@angular/router'; import * as firebase from 'firebase'; +import {expandDown} from '../animations'; @Component({ selector: 'app-login', - templateUrl: './login.component.html' + templateUrl: './login.component.html', + animations: [expandDown] }) export class LoginComponent implements OnInit { + animate = false; environment = environment; constructor(private router: Router, private ngZone: NgZone) { } @@ -16,12 +19,16 @@ export class LoginComponent implements OnInit { ngOnInit() { firebaseApp.auth().onAuthStateChanged(user => { if(!!user) this.ngZone.run(() => this.router.navigate(['/dashboard'])); - }) + }); + + setTimeout(this.ngZone.run(() => this.animate = true), 1000); } async login() { await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL); await firebaseApp.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider()); - return this.router.navigate(['/dashboard']); + this.ngZone.run(() => { + return this.router.navigate(['/dashboard']); + }); } } diff --git a/src/app/weather/weather.component.html b/src/app/weather/weather.component.html index ac42055..7c4bc9b 100644 --- a/src/app/weather/weather.component.html +++ b/src/app/weather/weather.component.html @@ -1,5 +1,5 @@
-
+

{{weatherService.temp}} °C

@@ -7,19 +7,19 @@
-
+
{{weatherService.humidity}} %
-
+
{{weatherService.cloudCover}} %
-
+
{{weatherService.wind[1]}} KM/H
-
+
{{w.day}} {{w.temp}} °C diff --git a/src/index.html b/src/index.html index fd481f8..9cd3737 100644 --- a/src/index.html +++ b/src/index.html @@ -13,7 +13,16 @@ - - + +
+
+

Home Front

+
+
+ +
+
+ + diff --git a/src/main.ts b/src/main.ts index e4a9318..0962c87 100644 --- a/src/main.ts +++ b/src/main.ts @@ -8,5 +8,4 @@ if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err)); diff --git a/src/styles.scss b/src/styles.scss index 1281296..4b42cb9 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -29,6 +29,19 @@ html, body { background-color: #2F323A; } +.center { + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.off-center { + position: fixed; + left: calc(50% - 75px); + top: 75%; +} + .mat-list-item { height: auto !important; color: #9CA4B6 !important; @@ -74,10 +87,26 @@ html, body { vertical-align: middle; } -.mat-stroked-button { +.mat-stroked-button:not([disabled]) { border-color: #ffffff !important; } .mat-form-field label { color: #ffffff !important; } + +.flex-grow-0 { + flex-grow: 0; +} + +.flex-grow-1 { + flex-grow: 1; +} + +.flex-grow-2 { + flex-grow: 2; +} + +.flex-grow-3 { + flex-grow: 3; +}