SES-90 Added Game Master component #26
@ -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);
|
||||
|
@ -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]
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -0,0 +1,56 @@
|
||||
<div class="root-container" >
|
||||
<mat-sidenav-container class="sidenav-container">
|
||||
<mat-sidenav class="leftnav" opened mode="side" [@onSideNavChange]="leftSidenavExpanded ? 'open' : 'close'">
|
||||
<div style="background-color: #292F36">
|
||||
<button mat-icon-button (click)="UpdateSidenavStatus('left', !leftSidenavTextExpanded)" style="margin: 12px; ">
|
||||
<mat-icon aria-label="Menu">menu</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-nav-list>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-icon>folder</mat-icon>
|
||||
<span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" style="color: white">Link 1</span>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-icon>folder</mat-icon>
|
||||
<span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" style="color: white">Link 2</span>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-icon>folder</mat-icon>
|
||||
<span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" style="color: white">Link 3</span>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
<mat-sidenav-content >
|
||||
<mat-toolbar color="primary" class="gm-toolbar">
|
||||
<span>SessionCompanion</span>
|
||||
</mat-toolbar>
|
||||
</mat-sidenav-content>
|
||||
<mat-sidenav class="rightnav" opened mode="side" position="end" [@onSideNavChange]="rightSidenavExpanded ? 'open' : 'close'">
|
||||
<div style="background-color: #4F5B69">
|
||||
<button mat-icon-button (click)="UpdateSidenavStatus('right', !rightSidenavExpanded)" style="margin: 12px; ">
|
||||
<mat-icon aria-label="Menu">chat</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button *ngIf="rightSidenavTextExpanded" (click)="UpdateSidenavStatus('right', !rightSidenavExpanded)" style="margin: 12px; position: absolute; right: 10px;">
|
||||
<mat-icon aria-label="Menu">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-nav-list>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-icon>folder</mat-icon>
|
||||
<a [@animateText]="rightSidenavTextExpanded ? 'show' : 'hide'" mat-list-item href="#" style="color: white">Link 1</a>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-icon>folder</mat-icon>
|
||||
<a [@animateText]="rightSidenavTextExpanded ? 'show' : 'hide'" mat-list-item href="#" style="color: white">Link 2</a>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-icon>folder</mat-icon>
|
||||
<a [@animateText]="rightSidenavTextExpanded ? 'show' : 'hide'" mat-list-item href="#" style="color: white">Link 3</a>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
</mat-sidenav-container>
|
||||
</div>
|
@ -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() {}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.isExpanded = !this.isExpanded;
|
||||
}
|
||||
}
|
||||
|
@ -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')),
|
||||
]);
|
Loading…
Reference in New Issue
Block a user