SES-90 Added Game master component

This commit is contained in:
Łukasz Góreczny 2020-12-12 19:06:30 +01:00
parent 0fd20fd2b1
commit a4ed6faa05
6 changed files with 166 additions and 8 deletions

View File

@ -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);

View File

@ -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]

View File

@ -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;
}

View File

@ -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>

View File

@ -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;
}
} }
} }

View File

@ -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')),
]);