From 8aa0828701a4a434c7df324a90839e3784cd14bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1vid=20Danyi?= Date: Mon, 24 Sep 2018 15:54:27 +0200 Subject: [PATCH] * Home key added to navigation, navigates to dashboard * route animation reworked into routeTransition to avoid memory leaks --- src/app/admin/admin-routing.module.ts | 23 +++---- src/app/app.component.html | 4 +- src/app/app.component.ts | 23 ++++++- .../commit-tracker.component.css | 6 ++ .../commit-tracker.component.ts | 13 +--- src/app/display/display-routing.module.ts | 50 +++++++++------ .../kanban-board/kanban-board.component.css | 7 +- .../kanban-board/kanban-board.component.ts | 33 ++++------ .../display/settings/settings.component.ts | 10 +-- .../slide-show/slide-show.component.css | 8 +++ .../slide-show/slide-show.component.ts | 15 +---- .../display/watchers/watchers.component.css | 6 ++ .../display/watchers/watchers.component.ts | 13 +--- src/app/shared/slide-in-out-animation.ts | 64 ++++++++----------- 14 files changed, 138 insertions(+), 137 deletions(-) mode change 100644 => 100755 src/app/admin/admin-routing.module.ts mode change 100644 => 100755 src/app/display/settings/settings.component.ts mode change 100644 => 100755 src/app/display/slide-show/slide-show.component.css diff --git a/src/app/admin/admin-routing.module.ts b/src/app/admin/admin-routing.module.ts old mode 100644 new mode 100755 index 641706c..cdaf912 --- a/src/app/admin/admin-routing.module.ts +++ b/src/app/admin/admin-routing.module.ts @@ -11,63 +11,56 @@ import { SlideResolverService } from './slide-resolver.service'; import { SlideService } from '../shared/service/slide.service'; import { DashboardComponent } from './dashboard/dashboard.component'; + const routes: Routes = [ { path: 'admin', redirectTo: '/dashboard', - pathMatch: 'full' - // canActivate: [AuthGuardService, RoleGuardService], + pathMatch: 'full', }, { path: 'dashboard', component: DashboardComponent, - // canActivate: [AuthGuardService, RoleGuardService], }, { path: 'admin/teams', component: TeamListComponent, - // canActivate: [AuthGuardService, RoleGuardService], resolve: { teams: TeamService, } }, { path: 'admin/team/new', component: TeamEditorComponent, - // canActivate: [AuthGuardService, RoleGuardService], }, { path: 'admin/team/edit/:id', component: TeamEditorComponent, - // canActivate: [AuthGuardService, RoleGuardService], resolve: { team: TeamResolverService, - } + }, }, { path: 'admin/slides', component: SlideListComponent, - // canActivate: [AuthGuardService, RoleGuardService], resolve: { slides: SlideService, teams: TeamService, - } + }, }, { path: 'admin/slide/new', component: SlideEditorComponent, - // canActivate: [AuthGuardService, RoleGuardService], resolve: { teams: TeamService, - } + }, }, { path: 'admin/slide/edit/:id', component: SlideEditorComponent, - // canActivate: [AuthGuardService, RoleGuardService], resolve: { slide: SlideResolverService, teams: TeamService, - } + }, } ]; + @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) -export class AdminRoutingModule { -} +export class AdminRoutingModule {} diff --git a/src/app/app.component.html b/src/app/app.component.html index cf874bf..418f9c1 100755 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,2 +1,4 @@
Slideshow is paused
- +
+ +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 68b3ef4..81358b0 100755 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,15 +1,21 @@ import { Component, HostListener, OnInit } from '@angular/core'; import { TimerService } from './shared/service/timer.service'; import { SlideShowService } from './display/slide-show.service'; +import { Router, RouterOutlet } from '@angular/router'; +import { slideInOutAnimation } from './shared/slide-in-out-animation'; +import { AnimationDirection, SettingsService } from './shared/service/settings.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], + animations: [slideInOutAnimation], }) export class AppComponent implements OnInit { constructor(private timerService: TimerService, - private slideShowService: SlideShowService) {} + private slideShowService: SlideShowService, + private settings: SettingsService, + private router: Router) {} public ngOnInit() {} @@ -17,6 +23,9 @@ export class AppComponent implements OnInit { private keyPressed(key: string) { if (this.timerService.autoSwitch) { switch (key) { + case 'Home': + this.router.navigate(['/dashboard']); + break; case ' ': this.timerService.togglePause(); break; @@ -35,4 +44,14 @@ export class AppComponent implements OnInit { public get paused(): boolean { return this.timerService.paused; } + + public getAnimationData(outlet: RouterOutlet) { + return { + value: outlet.activatedRouteData.state ? outlet.activatedRouteData.state : false, + params: { + offsetEnter: this.settings.animationDirection === AnimationDirection.LEFT ? -100 : 100, + offsetLeave: this.settings.animationDirection === AnimationDirection.LEFT ? 100 : -100, + } + }; + } } diff --git a/src/app/display/commit-tracker/commit-tracker.component.css b/src/app/display/commit-tracker/commit-tracker.component.css index fe2b29d..d8057a4 100755 --- a/src/app/display/commit-tracker/commit-tracker.component.css +++ b/src/app/display/commit-tracker/commit-tracker.component.css @@ -1,5 +1,11 @@ :host { background-color: #444; + position: fixed; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; } .ui.label.inprogress { diff --git a/src/app/display/commit-tracker/commit-tracker.component.ts b/src/app/display/commit-tracker/commit-tracker.component.ts index 4d972d1..98f3768 100755 --- a/src/app/display/commit-tracker/commit-tracker.component.ts +++ b/src/app/display/commit-tracker/commit-tracker.component.ts @@ -1,11 +1,10 @@ -import {Component, HostBinding, OnDestroy, OnInit} from '@angular/core'; +import {Component, OnDestroy, OnInit} from '@angular/core'; import {Title} from '@angular/platform-browser'; import {ActivatedRoute} from '@angular/router'; import {Subscription, timer} from 'rxjs'; -import {slideInOutAnimation} from '../../shared/slide-in-out-animation'; import {CommitTrackerService} from '../../shared/service/commit-tracker.service'; -import {AnimationDirection, SettingsService} from '../../shared/service/settings.service'; +import {SettingsService} from '../../shared/service/settings.service'; import {Commit} from '../../shared/commit'; import {CommitStatus} from '../../shared/commit-status.enum'; import {Result} from '../../shared/result.enum'; @@ -19,20 +18,12 @@ const DEFAULT_AVATAR = '/assets/riddler.png'; selector: 'app-commit-tracker', templateUrl: './commit-tracker.component.html', styleUrls: ['./commit-tracker.component.css'], - animations: [slideInOutAnimation] }) export class CommitTrackerComponent implements OnInit, OnDestroy { public CommitStatus = CommitStatus; private refreshCommitTrackerTimer: Subscription; - @HostBinding('@slideInOutAnimation') - public get slideInOutAnimation() { - return this.settings.animationDirection === AnimationDirection.RIGHT - ? {value: 'right', params: {offsetEnter: 100, offsetLeave: -100}} - : {value: 'left', params: {offsetEnter: -100, offsetLeave: 100}}; - } - constructor(private commitTrackerService: CommitTrackerService, private settings: SettingsService, private titleService: Title, diff --git a/src/app/display/display-routing.module.ts b/src/app/display/display-routing.module.ts index d3a784b..dfc8259 100755 --- a/src/app/display/display-routing.module.ts +++ b/src/app/display/display-routing.module.ts @@ -9,109 +9,117 @@ import { SlideShowComponent } from './slide-show/slide-show.component'; import { SlideResolverService } from '../admin/slide-resolver.service'; import { KanbanBoardComponent } from './kanban-board/kanban-board.component'; import { KanbanService } from './shared'; -import {WatchersComponent} from './watchers/watchers.component'; -import {WatcherService} from './shared/watcher.service'; +import { WatchersComponent } from './watchers/watchers.component'; +import { WatcherService } from './shared/watcher.service'; + const routes: Routes = [ { path: 'slideshow/:id', component: SlideShowComponent, - // canActivate: [AuthGuardService, RoleGuardService], resolve: { slide: SlideResolverService, }, data: { - autoSwitchable: false + autoSwitchable: false, + state: 'slideshow', } }, { path: 'slideshow-odd/:id', component: SlideShowComponent, - // canActivate: [AuthGuardService, RoleGuardService], resolve: { slide: SlideResolverService, }, data: { - autoSwitchable: true + autoSwitchable: true, + state: 'slideshow-odd', } }, { path: 'slideshow-even/:id', component: SlideShowComponent, - // canActivate: [AuthGuardService, RoleGuardService], resolve: { slide: SlideResolverService, }, data: { - autoSwitchable: true + autoSwitchable: true, + state: 'slideshow-even', } }, { path: 'commit-tracker', component: CommitTrackerComponent, - // canActivate: [AuthGuardService, RoleGuardService], resolve: { commits: CommitTrackerService, }, data: { - autoSwitchable: true + autoSwitchable: true, + state: 'commit-tracker', } }, { path: 'commit-tracker-fixed', component: CommitTrackerComponent, - // canActivate: [AuthGuardService, RoleGuardService], resolve: { commits: CommitTrackerService, + }, + data: { + autoSwitchable: false, + state: 'commit-tracker-fixed', } }, { path: 'kanban', component: KanbanBoardComponent, - // canActivate: [AuthGuardService, RoleGuardService], resolve: { kanbanBoard: KanbanService, }, data: { - autoSwitchable: true + autoSwitchable: true, + state: 'kanban', } }, { path: 'kanban-fixed', component: KanbanBoardComponent, - // canActivate: [AuthGuardService, RoleGuardService], resolve: { kanbanBoard: KanbanService, }, data: { - autoSwitchable: false + autoSwitchable: false, + state: 'kanban-fixed', } }, { path: 'watchers', component: WatchersComponent, - // canActivate: [AuthGuardService, RoleGuardService], resolve: { watchers: WatcherService, }, data: { - autoSwitchable: true + autoSwitchable: true, + state: 'watchers', } }, { path: 'watchers-fixed', component: WatchersComponent, - // canActivate: [AuthGuardService, RoleGuardService], resolve: { watchers: WatcherService, }, data: { - autoSwitchable: false + autoSwitchable: false, + state: 'watchers-fixed', } }, { path: 'settings', component: SettingsComponent, - // canActivate: [AuthGuardService, RoleGuardService], resolve: { teams: TeamService, }, + data: { + autoSwitchable: true, + // state: 'settings', + } } ]; + @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) -export class DisplayRoutingModule { } +export class DisplayRoutingModule {} diff --git a/src/app/display/kanban-board/kanban-board.component.css b/src/app/display/kanban-board/kanban-board.component.css index 60b4ac5..986a319 100755 --- a/src/app/display/kanban-board/kanban-board.component.css +++ b/src/app/display/kanban-board/kanban-board.component.css @@ -1,5 +1,10 @@ :host { - display: inline-block; + position: fixed; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; height: 100vh; overflow-x: hidden; overflow-y: scroll; diff --git a/src/app/display/kanban-board/kanban-board.component.ts b/src/app/display/kanban-board/kanban-board.component.ts index 8098e7f..397b2ab 100755 --- a/src/app/display/kanban-board/kanban-board.component.ts +++ b/src/app/display/kanban-board/kanban-board.component.ts @@ -1,37 +1,28 @@ -import {Component, HostBinding, OnInit} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {Title} from '@angular/platform-browser'; import {ActivatedRoute} from '@angular/router'; import {KanbanBoard, KanbanEntry, KanbanService,} from '../shared'; -import {slideInOutAnimation} from '../../shared/slide-in-out-animation'; -import {AnimationDirection, SettingsService} from '../../shared/service/settings.service'; +import {SettingsService} from '../../shared/service/settings.service'; @Component({ selector: 'app-kanban-board', templateUrl: './kanban-board.component.html', styleUrls: ['./kanban-board.component.css'], - animations: [slideInOutAnimation] }) export class KanbanBoardComponent implements OnInit { - @HostBinding('@slideInOutAnimation') - public get slideInOutAnimation() { - return this.settingService.animationDirection === AnimationDirection.RIGHT - ? {value: 'right', params: {offsetEnter: 100, offsetLeave: -100}} - : {value: 'left', params: {offsetEnter: -100, offsetLeave: 100}}; - } - constructor(private titleService: Title, private route: ActivatedRoute, private kanbanService: KanbanService, - private settingService: SettingsService) { + private settings: SettingsService) { } /** * Set page title, and handle preloaded kanbanBoard data */ ngOnInit() { - this.titleService.setTitle(`${this.settingService.team.name} : Kanban board`); + this.titleService.setTitle(`${this.settings.team.name} : Kanban board`); this.route.data.subscribe((data: { kanbanBoard: KanbanBoard, }) => { @@ -48,7 +39,7 @@ export class KanbanBoardComponent implements OnInit { } get inprogressWipLimit(): number { - return this.settingService.team.inprogressColumn.wipLimit; + return this.settings.team.inprogressColumn.wipLimit; } get inprogressWipCount(): number { @@ -67,12 +58,12 @@ export class KanbanBoardComponent implements OnInit { */ get inprogressWipClass() { return { - 'over-wip': this.inprogressWipCount > this.settingService.team.inprogressColumn.wipLimit, + 'over-wip': this.inprogressWipCount > this.settings.team.inprogressColumn.wipLimit, }; } get verificationWipLimit(): number { - return this.settingService.team.verificationColumn.wipLimit; + return this.settings.team.verificationColumn.wipLimit; } get verificationWipCount(): number { @@ -91,23 +82,23 @@ export class KanbanBoardComponent implements OnInit { */ get verificationWipClass() { return { - 'over-wip': this.verificationWipCount > this.settingService.team.verificationColumn.wipLimit, + 'over-wip': this.verificationWipCount > this.settings.team.verificationColumn.wipLimit, }; } get backlogLabel(): string { - return this.settingService.team.backlogColumn.label; + return this.settings.team.backlogColumn.label; } get inProgressLabel(): string { - return this.settingService.team.inprogressColumn.label; + return this.settings.team.inprogressColumn.label; } get verificationLabel(): string { - return this.settingService.team.verificationColumn.label; + return this.settings.team.verificationColumn.label; } get doneLabel(): string { - return this.settingService.team.doneColumn.label; + return this.settings.team.doneColumn.label; } } diff --git a/src/app/display/settings/settings.component.ts b/src/app/display/settings/settings.component.ts old mode 100644 new mode 100755 index fbaf8f9..0697827 --- a/src/app/display/settings/settings.component.ts +++ b/src/app/display/settings/settings.component.ts @@ -15,20 +15,20 @@ export class SettingsComponent implements OnInit { public slideInterval: number; constructor(private route: ActivatedRoute, - private settingsService: SettingsService, + private settings: SettingsService, private router: Router) {} ngOnInit() { this.route.data.subscribe((data: {teams: Array}) => { this.teams = data.teams; - this.selectedTeam = this.teams.find(team => team.id === this.settingsService.team.id); - this.slideInterval = this.settingsService.slideInterval; + this.selectedTeam = this.teams.find(team => team.id === this.settings.team.id); + this.slideInterval = this.settings.slideInterval; }); } public saveSettings() { - this.settingsService.team = this.selectedTeam; - this.settingsService.slideInterval = this.slideInterval; + this.settings.team = this.selectedTeam; + this.settings.slideInterval = this.slideInterval; this.router.navigate(['/admin']); } } diff --git a/src/app/display/slide-show/slide-show.component.css b/src/app/display/slide-show/slide-show.component.css old mode 100644 new mode 100755 index e69de29..fcf6d07 --- a/src/app/display/slide-show/slide-show.component.css +++ b/src/app/display/slide-show/slide-show.component.css @@ -0,0 +1,8 @@ +:host { + position: fixed; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; +} diff --git a/src/app/display/slide-show/slide-show.component.ts b/src/app/display/slide-show/slide-show.component.ts index 6f7871f..0bdad19 100755 --- a/src/app/display/slide-show/slide-show.component.ts +++ b/src/app/display/slide-show/slide-show.component.ts @@ -1,32 +1,21 @@ -import {Component, HostBinding, OnInit} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; import {Title} from '@angular/platform-browser'; import * as marked from 'marked'; import {Slide, SlideType} from '../../shared/slide'; -import {slideInOutAnimation} from '../../shared/slide-in-out-animation'; -import {AnimationDirection, SettingsService} from '../../shared/service/settings.service'; @Component({ selector: 'app-slide-show', templateUrl: './slide-show.component.html', styleUrls: ['./slide-show.component.css'], - animations: [slideInOutAnimation] }) export class SlideShowComponent implements OnInit { private md; public slide: Slide; - @HostBinding('@slideInOutAnimation') - public get slideInOutAnimation() { - return this.settings.animationDirection === AnimationDirection.RIGHT - ? {value: 'right', params: {offsetEnter: 100, offsetLeave: -100}} - : {value: 'left', params: {offsetEnter: -100, offsetLeave: 100}}; - } - constructor(private route: ActivatedRoute, - private titleService: Title, - private settings: SettingsService) { + private titleService: Title) { this.md = marked.setOptions({}); } diff --git a/src/app/display/watchers/watchers.component.css b/src/app/display/watchers/watchers.component.css index 0394016..c1fcd59 100755 --- a/src/app/display/watchers/watchers.component.css +++ b/src/app/display/watchers/watchers.component.css @@ -1,5 +1,11 @@ :host { background-color: #444; + position: fixed; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; } /* avatar */ diff --git a/src/app/display/watchers/watchers.component.ts b/src/app/display/watchers/watchers.component.ts index a61427f..df795be 100755 --- a/src/app/display/watchers/watchers.component.ts +++ b/src/app/display/watchers/watchers.component.ts @@ -1,8 +1,7 @@ -import {Component, HostBinding, OnInit} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {Title} from '@angular/platform-browser'; import {ActivatedRoute} from '@angular/router'; -import {AnimationDirection, SettingsService} from '../../shared/service/settings.service'; -import {slideInOutAnimation} from '../../shared/slide-in-out-animation'; +import {SettingsService} from '../../shared/service/settings.service'; import {WatcherService} from '../shared/watcher.service'; import {WatchedIssue} from '../shared/watched-issue.model'; import {environment} from '../../../environments/environment'; @@ -13,17 +12,9 @@ const DEFAULT_AVATAR = '/assets/riddler.png'; selector: 'app-watchers', templateUrl: './watchers.component.html', styleUrls: ['./watchers.component.css'], - animations: [slideInOutAnimation] }) export class WatchersComponent implements OnInit { - @HostBinding('@slideInOutAnimation') - public get slideInOutAnimation() { - return this.settingService.animationDirection === AnimationDirection.RIGHT - ? {value: 'right', params: {offsetEnter: 100, offsetLeave: -100}} - : {value: 'left', params: {offsetEnter: -100, offsetLeave: 100}}; - } - constructor(private titleService: Title, private route: ActivatedRoute, private watcherService: WatcherService, diff --git a/src/app/shared/slide-in-out-animation.ts b/src/app/shared/slide-in-out-animation.ts index 319df6d..bf40e79 100755 --- a/src/app/shared/slide-in-out-animation.ts +++ b/src/app/shared/slide-in-out-animation.ts @@ -1,42 +1,34 @@ // import the required animation functions from the angular animations module -import { animate, state, style, transition, trigger } from '@angular/animations'; +import {animate, group, query, state, style, transition, trigger} from '@angular/animations'; + export const slideInOutAnimation = - // trigger name for attaching this animation to an element using the [@triggerName] syntax - trigger('slideInOutAnimation', [ - - // end state styles for route container (host) - state('*', style({ - // the view covers the whole screen with a semi tranparent background - position: 'fixed', - top: 0, - left: 0, - right: 0, - bottom: 0 - })), - - // route 'enter' transition - transition(':enter', [ - // styles at start of transition - style({ - // start with the content positioned off the right of the screen, - // -400% is required instead of -100% because the negative position adds to the width of the element - transform: 'translateX({{offsetEnter}}%)' + trigger('routerTransition', [ + transition('* <=> *', [ + query(':enter, :leave', style({ + position: 'fixed', + top: 0, + left: 0, + right: 0, + bottom: 0 + }), { + optional: true }), - - // animation and styles at end of transition - animate('.75s cubic-bezier(0.175, 0.885, 0.32, 1.275)', style({ - // transition the right position to 0 which slides the content into view - transform: 'translateX(0)' - })) - ]), - - // route 'leave' transition - transition(':leave', [ - // animation and styles at end of transition - animate('.75s cubic-bezier(0.175, 0.885, 0.32, 1.275)', style({ - // transition the right position to -400% which slides the content out of view - transform: 'translateX({{offsetLeave}}%)' - })) + group([ + query(':enter', [ + style({ transform: 'translateX({{offsetEnter}}%)'}), + animate('.75s cubic-bezier(0.175, 0.885, 0.32, 1.275)', style({ + transform: 'translateX(0%)' + })) + ], { + optional: true + }), + query(':leave', [ + style({ transform: 'translateX(0%)' }), + animate('.75s cubic-bezier(0.175, 0.885, 0.32, 1.275)', style({ + transform: 'translateX({{offsetLeave}}%)' + })) + ], { optional: true }) + ]) ]) ]);