From 0fd20fd2b1104595a4459d523b40f1bbdedcbe4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20G=C3=B3reczny?= Date: Sat, 12 Dec 2020 11:16:25 +0100 Subject: [PATCH 1/2] SES-90 Styles changes --- .../SessionCompanion/ClientApp/src/app/app.component.html | 2 +- .../app/components/select-role/select-role.component.css | 4 ++-- .../src/app/components/sign-in/sign-in.component.css | 4 ++-- .../src/app/components/sign-in/sign-in.component.ts | 7 ++----- 4 files changed, 7 insertions(+), 10 deletions(-) diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.component.html index d2e8ce1..a30a60d 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.component.html +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.component.html @@ -1,5 +1,5 @@ -
+
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css index 946e5cb..9eaea08 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css @@ -32,7 +32,7 @@ @media (max-width: 768px) { .container { - padding-top: 70%; + padding-top: 50%; } .button { margin: 10px; @@ -47,7 +47,7 @@ @media (min-width: 768px) { .container { - padding-top: 20%; + padding-top: 10%; } .button { margin: 20px; diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css index 4ea546d..1960915 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css @@ -45,13 +45,13 @@ input { @media (max-width: 768px) { .container { width: 350px; - padding-top: 50%; + padding-top: 20%; } } @media (min-width: 768px) { .container { width: 550px; - padding-top: 20%; + padding-top: 10%; } } diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts index d4c960d..05edfef 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts @@ -11,11 +11,8 @@ export class SignInComponent { username = ""; password = ""; - - constructor(private router: Router) {} - ngOnInit(): void { - } + constructor(private router: Router) {} onLoginButtonClick(){ //TODO connect with backend and added router @@ -31,7 +28,7 @@ export class SignInComponent { onArrowBackClick(){ this.router.navigate(['']) } - + collapse() { this.isExpanded = false; } -- 2.20.1 From a4ed6faa05e074da43de607b60eb2119e5c219b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20G=C3=B3reczny?= Date: Sat, 12 Dec 2020 19:06:30 +0100 Subject: [PATCH 2/2] SES-90 Added Game master component --- .../ClientApp/src/app.routing.ts | 6 ++ .../ClientApp/src/app/app.module.ts | 7 ++- .../game-master-dashboard.component.css | 42 ++++++++++++++ .../game-master-dashboard.component.html | 56 +++++++++++++++++++ .../game-master-dashboard.component.ts | 30 +++++++--- .../shared/animations/sidenav-animations.ts | 33 +++++++++++ 6 files changed, 166 insertions(+), 8 deletions(-) create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/shared/animations/sidenav-animations.ts 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 @@ +
+ + +
+ +
+ + + + folder + Link 1 + + + folder + Link 2 + + + folder + Link 3 + + + + + + SessionCompanion + + + +
+ + +
+ + + + folder + Link 1 + + + folder + Link 2 + + + folder + Link 3 + + + + +
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')), +]); -- 2.20.1