SES-90 Added Game master component
This commit is contained in:
parent
0fd20fd2b1
commit
a4ed6faa05
@ -2,6 +2,7 @@ import { RouterModule, Routes } from '@angular/router';
|
|||||||
import { SelectRoleComponent } from './app/components/select-role/select-role.component';
|
import { SelectRoleComponent } from './app/components/select-role/select-role.component';
|
||||||
import { SignInComponent } from './app/components/sign-in/sign-in.component';
|
import { SignInComponent } from './app/components/sign-in/sign-in.component';
|
||||||
import { RegistrationComponent } from './app/components/registration/registration.component';
|
import { RegistrationComponent } from './app/components/registration/registration.component';
|
||||||
|
import {GameMasterDashboardComponent} from './app/components/game-master-dashboard/game-master-dashboard.component';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{
|
{
|
||||||
@ -19,6 +20,11 @@ const routes: Routes = [
|
|||||||
component: RegistrationComponent,
|
component: RegistrationComponent,
|
||||||
pathMatch: 'full'
|
pathMatch: 'full'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'gamemaster',
|
||||||
|
component: GameMasterDashboardComponent,
|
||||||
|
pathMatch: 'full'
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
export const appRoutingModule = RouterModule.forRoot(routes);
|
export const appRoutingModule = RouterModule.forRoot(routes);
|
||||||
|
@ -8,6 +8,7 @@ import { appRoutingModule } from '../app.routing';
|
|||||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
import { SignInComponent } from './components/sign-in/sign-in.component';
|
import { SignInComponent } from './components/sign-in/sign-in.component';
|
||||||
import { RegistrationComponent } from './components/registration/registration.component';
|
import { RegistrationComponent } from './components/registration/registration.component';
|
||||||
|
import { GameMasterDashboardComponent} from './components/game-master-dashboard/game-master-dashboard.component';
|
||||||
import {
|
import {
|
||||||
MatCardModule,
|
MatCardModule,
|
||||||
MatTabsModule,
|
MatTabsModule,
|
||||||
@ -15,7 +16,7 @@ import {
|
|||||||
MatInputModule,
|
MatInputModule,
|
||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
MatCheckboxModule,
|
MatCheckboxModule,
|
||||||
MatIconModule
|
MatIconModule, MatSidenavModule, MatToolbarModule, MatListModule
|
||||||
} from '@angular/material';
|
} from '@angular/material';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
@ -24,6 +25,7 @@ import {
|
|||||||
SelectRoleComponent,
|
SelectRoleComponent,
|
||||||
SignInComponent,
|
SignInComponent,
|
||||||
RegistrationComponent,
|
RegistrationComponent,
|
||||||
|
GameMasterDashboardComponent,
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
|
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
|
||||||
@ -38,6 +40,9 @@ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
|
|||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
MatCheckboxModule,
|
MatCheckboxModule,
|
||||||
MatIconModule,
|
MatIconModule,
|
||||||
|
MatSidenavModule,
|
||||||
|
MatToolbarModule,
|
||||||
|
MatListModule,
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
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 { Component } from '@angular/core';
|
||||||
|
import {animateText, onSideNavChange} from '../../shared/animations/sidenav-animations';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-game-master-dashboard',
|
selector: 'app-game-master-dashboard',
|
||||||
templateUrl: './game-master-dashboard.component.html',
|
templateUrl: './game-master-dashboard.component.html',
|
||||||
styleUrls: ['./game-master-dashboard.component.css']
|
styleUrls: ['./game-master-dashboard.component.css'],
|
||||||
|
animations: [onSideNavChange, animateText]
|
||||||
})
|
})
|
||||||
export class GameMasterDashboardComponent {
|
export class GameMasterDashboardComponent {
|
||||||
isExpanded = false;
|
leftSidenavExpanded = false;
|
||||||
|
leftSidenavTextExpanded = false;
|
||||||
|
|
||||||
collapse() {
|
rightSidenavExpanded = false;
|
||||||
this.isExpanded = false;
|
rightSidenavTextExpanded = false;
|
||||||
}
|
constructor() {}
|
||||||
|
|
||||||
toggle() {
|
UpdateSidenavStatus(sidenav: string, newValue: boolean){
|
||||||
this.isExpanded = !this.isExpanded;
|
switch (sidenav) {
|
||||||
|
case 'left':
|
||||||
|
this.leftSidenavExpanded = newValue;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.leftSidenavTextExpanded = newValue;
|
||||||
|
}, 200);
|
||||||
|
break;
|
||||||
|
case 'right':
|
||||||
|
this.rightSidenavExpanded = newValue;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.rightSidenavTextExpanded = newValue;
|
||||||
|
}, 200);
|
||||||
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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