s426135/session-companion
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

SES-90 Added Game Master component #26

Merged
s426128 merged 3 commits from SES-90 into master 2020-12-12 19:39:37 +01:00
Conversation 0 Commits 3 Files Changed 7 +167 -9
7 changed files with 167 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts
View File

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

7
SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
View File

@ -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' }),
@ -39,6 +41,9 @@ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
MatButtonModule,
MatCheckboxModule,
MatIconModule,
MatSidenavModule,
MatToolbarModule,
MatListModule,
],
providers: [],
bootstrap: [AppComponent]

42
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.css
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;
}

56
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.html
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>

30
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.ts
View File

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

33
SessionCompanion/SessionCompanion/ClientApp/src/app/shared/animations/sidenav-animations.ts Normal file
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')),
]);