From f2af2eb6364a9c7581fe1c5e27c92cb0b97e0e2e Mon Sep 17 00:00:00 2001 From: RogierdeRuijter Date: Tue, 1 Sep 2020 20:11:26 +0200 Subject: [PATCH] feat: add game disabled state (#489) * disabled most things * feat: improve it a lot * chore: derp --- .circleci/config.yml | 1 + .../modules/add-game/add-game.module.ts | 5 +++-- .../dialog-data/dialog-data.component.html | 1 + .../dialog-data/dialog-data.component.ts | 11 +++++++++-- .../game-result.component-theme.scss | 19 +++++++++++++++++++ .../game-result/game-result.component.html | 12 ++++++++---- .../game-result/game-result.component.ts | 10 +++++++++- apps/client/src/themes/black-theme.scss | 3 ++- apps/client/src/themes/light-theme.scss | 3 ++- 9 files changed, 54 insertions(+), 11 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 641343269..5de4c1ff0 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -402,6 +402,7 @@ jobs: # - SERVER_IMAGE_TAG npm run docker:e2e:start-environment-build-server + - run: name: Retag and push tested client image command: | diff --git a/apps/client/src/app/shared/modules/add-game/add-game.module.ts b/apps/client/src/app/shared/modules/add-game/add-game.module.ts index f757f284f..ab7d359a3 100644 --- a/apps/client/src/app/shared/modules/add-game/add-game.module.ts +++ b/apps/client/src/app/shared/modules/add-game/add-game.module.ts @@ -5,7 +5,7 @@ import {DialogDataComponent} from './components/dialog-data/dialog-data.componen import {DialogOverviewComponent} from './components/dialog-overview/dialog-overview.component'; import {CustomTranslateModule} from '../translate/custom-translate.module'; import {ButtonModule} from '../button/button.module'; -import {FormsModule} from '@angular/forms'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {GameResultComponent} from './components/dialog-data/game-result/game-result.component'; import {FormModule} from '../form/form.module'; import {GridModule} from '../grid/grid.module'; @@ -42,7 +42,8 @@ import { MatFormFieldModule } from '@angular/material/form-field'; GridModule, TransitionModule, MatChipsModule, - MatFormFieldModule + MatFormFieldModule, + ReactiveFormsModule ], }) export class AddGameModule { } diff --git a/apps/client/src/app/shared/modules/add-game/components/dialog-data/dialog-data.component.html b/apps/client/src/app/shared/modules/add-game/components/dialog-data/dialog-data.component.html index a4c2f70d5..31da6fb72 100644 --- a/apps/client/src/app/shared/modules/add-game/components/dialog-data/dialog-data.component.html +++ b/apps/client/src/app/shared/modules/add-game/components/dialog-data/dialog-data.component.html @@ -7,6 +7,7 @@ [usersWhite]="users" [winnerOptions]="winnerOptions" [winnersDeselected]="winnersDeselected" + [blackDeselected]="blackDeselected" [disabledWinnerOptions]="determineDisabledWinnerOptions()" [blackDisabled]="!data.white" [winnersDisabled]="areAllWinnerOptionsDisabled()" diff --git a/apps/client/src/app/shared/modules/add-game/components/dialog-data/dialog-data.component.ts b/apps/client/src/app/shared/modules/add-game/components/dialog-data/dialog-data.component.ts index 1f9caea19..da84424a6 100644 --- a/apps/client/src/app/shared/modules/add-game/components/dialog-data/dialog-data.component.ts +++ b/apps/client/src/app/shared/modules/add-game/components/dialog-data/dialog-data.component.ts @@ -22,7 +22,8 @@ export class DialogDataComponent extends AsyncBaseComponent implements OnInit, O public winnerOptions: string[] = []; - public winnersDeselected; + public winnersDeselected: boolean; + public blackDeselected: boolean; public draw: string; @@ -65,9 +66,15 @@ export class DialogDataComponent extends AsyncBaseComponent implements OnInit, O private updateGame(event: {name: string, value: string}): void { // Needed to have a pointer change for the input this.winnersDeselected = undefined; - + this.blackDeselected = undefined; + this.data[event.name] = event.value; + if (event.name === 'white' && event.value === undefined) { + this.data.black = undefined; + this.blackDeselected = false; + } + if (event.value === undefined) { this.data.winner = undefined; this.winnersDeselected = false; diff --git a/apps/client/src/app/shared/modules/add-game/components/dialog-data/game-result/game-result.component-theme.scss b/apps/client/src/app/shared/modules/add-game/components/dialog-data/game-result/game-result.component-theme.scss index c3b6cb6d3..ca7e79344 100644 --- a/apps/client/src/app/shared/modules/add-game/components/dialog-data/game-result/game-result.component-theme.scss +++ b/apps/client/src/app/shared/modules/add-game/components/dialog-data/game-result/game-result.component-theme.scss @@ -2,10 +2,29 @@ @mixin game-result-component-theme($theme) { $disabled-color: map-get($theme, form-field-underline-disabled); + $label-color: map-get($theme, label-color); .form-field-with-disabled-underline { .mat-form-field-underline { background-color: $disabled-color; } + + mat-label { + color: $disabled-color; + } } + + .custom-input-field { + .mat-form-field-label { + color: $label-color !important; + } + + .mat-form-field-ripple { + opacity: 0 !important; + } + + .mat-standard-chip:focus::after { + opacity: 0 !important; + } + } } diff --git a/apps/client/src/app/shared/modules/add-game/components/dialog-data/game-result/game-result.component.html b/apps/client/src/app/shared/modules/add-game/components/dialog-data/game-result/game-result.component.html index c7c233061..38a6d6108 100644 --- a/apps/client/src/app/shared/modules/add-game/components/dialog-data/game-result/game-result.component.html +++ b/apps/client/src/app/shared/modules/add-game/components/dialog-data/game-result/game-result.component.html @@ -2,16 +2,17 @@

- + @@ -21,14 +22,16 @@

- + @@ -38,7 +41,7 @@

- + [id]="'winner-' + option" [selected]="winnersDeselected" [disabled]="disabledWinnerOptions[i]" + [disableRipple]="true" (click)="fieldUpdated(matChip);" color="accent" [value]="option"> diff --git a/apps/client/src/app/shared/modules/add-game/components/dialog-data/game-result/game-result.component.ts b/apps/client/src/app/shared/modules/add-game/components/dialog-data/game-result/game-result.component.ts index 0e3aa1c3d..901242037 100644 --- a/apps/client/src/app/shared/modules/add-game/components/dialog-data/game-result/game-result.component.ts +++ b/apps/client/src/app/shared/modules/add-game/components/dialog-data/game-result/game-result.component.ts @@ -47,6 +47,9 @@ export class GameResultComponent { @Input() public winnersDeselected: boolean; + @Input() + public blackDeselected: boolean; + @Input() public winnersDisabled: boolean; @@ -64,7 +67,7 @@ export class GameResultComponent { public GridSizes = GridSizes; public Icons = Icons; public timer = timer; - + public cancel(): void { this.cancelEvent.emit(); } @@ -81,4 +84,9 @@ export class GameResultComponent { value: event.value }); } + + public clicked(): void { + setTimeout(() => { + document.getElementById('formField123').blur(); + }, 200); } } diff --git a/apps/client/src/themes/black-theme.scss b/apps/client/src/themes/black-theme.scss index 4f5058b4d..4963a936f 100644 --- a/apps/client/src/themes/black-theme.scss +++ b/apps/client/src/themes/black-theme.scss @@ -15,7 +15,8 @@ $custom-variables: ( action-bar-border-background: mat-color($anms-black-primary), button-icon-active-color: white, button-icon-inactive-color: gray, - form-field-underline-disabled: #616161 + form-field-underline-disabled: #616161, + label-color: rgba(255, 255, 255, 0.7) ); $anms-black-theme: map_merge($anms-black-theme, $custom-variables); \ No newline at end of file diff --git a/apps/client/src/themes/light-theme.scss b/apps/client/src/themes/light-theme.scss index cd729d681..83b8d3324 100644 --- a/apps/client/src/themes/light-theme.scss +++ b/apps/client/src/themes/light-theme.scss @@ -15,7 +15,8 @@ $custom-variables: ( action-bar-border-background: white, button-icon-active-color: black, button-icon-inactive-color: gray, - form-field-underline-disabled: #e0e0e0 + form-field-underline-disabled: #e0e0e0, + label-color: rgba(0, 0, 0, 0.54) ); $anms-light-theme: map_merge($anms-light-theme, $custom-variables);