diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts index 1495863..344501c 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts @@ -2,6 +2,7 @@ import { RouterModule, Routes } from '@angular/router'; import { SelectRoleComponent } from './app/components/select-role/select-role.component'; import { SignInComponent } from './app/components/sign-in/sign-in.component'; import { RegistrationComponent } from './app/components/registration/registration.component'; +import {GameMasterDashboardComponent} from './app/components/game-master-dashboard/game-master-dashboard.component'; const routes: Routes = [ { @@ -19,6 +20,11 @@ const routes: Routes = [ component: RegistrationComponent, pathMatch: 'full' }, + { + path: 'gamemaster', + component: GameMasterDashboardComponent, + pathMatch: 'full' + } ]; export const appRoutingModule = RouterModule.forRoot(routes); diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts index 19bfa46..c0ac601 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts @@ -8,6 +8,7 @@ import { appRoutingModule } from '../app.routing'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { SignInComponent } from './components/sign-in/sign-in.component'; import { RegistrationComponent } from './components/registration/registration.component'; +import { GameMasterDashboardComponent} from './components/game-master-dashboard/game-master-dashboard.component'; import { MatCardModule, MatTabsModule, @@ -15,7 +16,7 @@ import { MatInputModule, MatButtonModule, MatCheckboxModule, - MatIconModule + MatIconModule, MatSidenavModule, MatToolbarModule, MatListModule } from '@angular/material'; @NgModule({ @@ -24,6 +25,7 @@ import { SelectRoleComponent, SignInComponent, RegistrationComponent, + GameMasterDashboardComponent, ], imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), @@ -38,6 +40,9 @@ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), MatButtonModule, MatCheckboxModule, MatIconModule, + MatSidenavModule, + MatToolbarModule, + MatListModule, ], providers: [], bootstrap: [AppComponent] diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.css index e69de29..49d12fc 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.css +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.css @@ -0,0 +1,42 @@ +@import "../../../styles.css"; + +.root-container { + display: flex; + flex-direction: column; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.leftnav{ + background-color: #3D4751; + border-right:none; +} + +.rightnav{ + background-color: #606F80; + border-left: none; +} + +mat-sidenav-content{ + background-color: #4F5C69; +} + +mat-icon{ + color: #DF7C0F; +} + +mat-sidenav-content>.gm-toolbar{ + background-color: #3D4751; + color: whitesmoke; +} + +.main-block{ + height: 100%; +} +.sidenav-container { + flex: 1; +} + diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.html index e69de29..6b72c96 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.html +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.html @@ -0,0 +1,56 @@ +
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.ts index 0a3c585..db858c6 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.ts @@ -1,18 +1,34 @@ import { Component } from '@angular/core'; +import {animateText, onSideNavChange} from '../../shared/animations/sidenav-animations'; @Component({ selector: 'app-game-master-dashboard', templateUrl: './game-master-dashboard.component.html', - styleUrls: ['./game-master-dashboard.component.css'] + styleUrls: ['./game-master-dashboard.component.css'], + animations: [onSideNavChange, animateText] }) export class GameMasterDashboardComponent { - isExpanded = false; + leftSidenavExpanded = false; + leftSidenavTextExpanded = false; - collapse() { - this.isExpanded = false; - } + rightSidenavExpanded = false; + rightSidenavTextExpanded = false; + constructor() {} - toggle() { - this.isExpanded = !this.isExpanded; + UpdateSidenavStatus(sidenav: string, newValue: boolean){ + switch (sidenav) { + case 'left': + this.leftSidenavExpanded = newValue; + setTimeout(() => { + this.leftSidenavTextExpanded = newValue; + }, 200); + break; + case 'right': + this.rightSidenavExpanded = newValue; + setTimeout(() => { + this.rightSidenavTextExpanded = newValue; + }, 200); + break; + } } } diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/animations/sidenav-animations.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/animations/sidenav-animations.ts new file mode 100644 index 0000000..fba161d --- /dev/null +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/shared/animations/sidenav-animations.ts @@ -0,0 +1,33 @@ +import { trigger, state, style, transition, animate, animateChild, query } from '@angular/animations'; + +export const onSideNavChange = trigger('onSideNavChange', [ + state('close', + style({ + 'min-width': '50px' + }) + ), + state('open', + style({ + 'min-width': '200px' + }) + ), + transition('close => open', animate('250ms ease-in')), + transition('open => close', animate('250ms ease-in')), +]); + +export const animateText = trigger('animateText', [ + state('hide', + style({ + 'display': 'none', + opacity: 0, + }) + ), + state('show', + style({ + 'display': 'block', + opacity: 1, + }) + ), + transition('close => open', animate('350ms ease-in')), + transition('open => close', animate('200ms ease-out')), +]);