From deb56fd48e09f103b2b45846c6bbc799c76f74dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20H=C3=B6ra?= Date: Sat, 28 Aug 2021 23:17:08 +0200 Subject: [PATCH] Bugfix/apply themes (#75) * fix: applies themes correctly * chore: removed console.log * feat: added settings modal workaround * fix: failing test --- .../settingsmodals/general-settings.modal.ts | 10 +++++++-- src/app/common/settings.service.ts | 9 +++++--- .../gameboard-controls.component.ts | 11 ++-------- .../gameboard/utils/gameboard.controller.ts | 1 - .../gameboard/utils/world.import.export.ts | 2 +- src/app/titlebar/titlebar.component.html | 21 ++++++++++++------- src/app/titlebar/titlebar.component.spec.ts | 15 +++++++++---- src/app/titlebar/titlebar.component.ts | 15 ++++++------- src/styles.scss | 2 +- 9 files changed, 51 insertions(+), 35 deletions(-) diff --git a/src/app/common/modals/settingsmodals/general-settings.modal.ts b/src/app/common/modals/settingsmodals/general-settings.modal.ts index 2f47d61f..2ab6ad89 100644 --- a/src/app/common/modals/settingsmodals/general-settings.modal.ts +++ b/src/app/common/modals/settingsmodals/general-settings.modal.ts @@ -23,10 +23,16 @@ export class GeneralSettingsModal { theme: [settingsService.theme], language: [settingsService.language], }); - console.log(settingsService.theme); } - onApply() {} + onApply() { + const theme = this.formGroup.get('theme').value as unknown as + | THEMES + | 'auto'; + const language = this.formGroup.get('language') + .value as unknown as LANGUAGES; + this.settingsService.saveGeneralSettings(theme, language); + } originalOrder = (a: any, b: any): number => { return 0; diff --git a/src/app/common/settings.service.ts b/src/app/common/settings.service.ts index e3bfa1fe..82113b22 100644 --- a/src/app/common/settings.service.ts +++ b/src/app/common/settings.service.ts @@ -71,7 +71,7 @@ export class SettingsService implements OnInit { private loadGeneralSettings() { const savedTheme = window.localStorage.getItem(THEME_KEY) as THEMES; if (Object.values(THEMES).includes(savedTheme)) this.saveTheme(savedTheme); - this.theme = 'auto'; + else this.theme = 'auto'; this.language = navigator.language == LANGUAGES.German @@ -80,11 +80,14 @@ export class SettingsService implements OnInit { } private saveTheme(theme: THEMES | 'auto') { - if (theme != 'auto') { - this.theme = theme; + this.theme = theme; + if (theme != 'auto') { this.document.documentElement.setAttribute('light-color-scheme', theme); this.document.documentElement.setAttribute('dark-color-scheme', theme); + } else { + this.document.documentElement.setAttribute('light-color-scheme', 'light'); + this.document.documentElement.setAttribute('dark-color-scheme', 'dark'); } this.window.localStorage.setItem(THEME_KEY, theme); diff --git a/src/app/gameboard/gameboard-controls/gameboard-controls.component.ts b/src/app/gameboard/gameboard-controls/gameboard-controls.component.ts index f24df254..edc39eb1 100644 --- a/src/app/gameboard/gameboard-controls/gameboard-controls.component.ts +++ b/src/app/gameboard/gameboard-controls/gameboard-controls.component.ts @@ -1,11 +1,6 @@ import { DOCUMENT } from '@angular/common'; import { AfterViewInit, Component, Inject } from '@angular/core'; -import { - ExportModal, - ResizeModal, - SettingsModal, - WarningModal, -} from 'src/app/common/modals'; +import { ExportModal, ResizeModal, WarningModal } from 'src/app/common/modals'; import { AdditionalWorldData, Coordinates3 } from '../utils'; import { GameboardController } from '../utils/gameboard.controller'; @@ -61,9 +56,7 @@ export class GameboardControlsComponent implements AfterViewInit { public controller: GameboardController ) {} - ngAfterViewInit(): void { - this.controller.openModal(SettingsModal); - } + ngAfterViewInit(): void {} onColorMenu() { this.colorStyle = this.colorExpanded diff --git a/src/app/gameboard/utils/gameboard.controller.ts b/src/app/gameboard/utils/gameboard.controller.ts index 63e7d099..b89f369a 100644 --- a/src/app/gameboard/utils/gameboard.controller.ts +++ b/src/app/gameboard/utils/gameboard.controller.ts @@ -59,7 +59,6 @@ export class GameboardController { } catch (error) { this.toastr.error(error); } - console.log(this.model.currentSlabs); } private placeSlab(coo: Coordinates2, color: string) { diff --git a/src/app/gameboard/utils/world.import.export.ts b/src/app/gameboard/utils/world.import.export.ts index 45c534a0..9ac1328d 100644 --- a/src/app/gameboard/utils/world.import.export.ts +++ b/src/app/gameboard/utils/world.import.export.ts @@ -94,7 +94,7 @@ export class WorldImport { const errors = validate(world, WorldSchema).errors; if (errors.length == 0) return; - console.log('Encountered errors while parsing world:\n' + errors); + console.error('Encountered errors while parsing world:\n' + errors); throw new Error( 'Could not read world file.\nCheck console for additional details' ); diff --git a/src/app/titlebar/titlebar.component.html b/src/app/titlebar/titlebar.component.html index 3fae0596..b7a78993 100644 --- a/src/app/titlebar/titlebar.component.html +++ b/src/app/titlebar/titlebar.component.html @@ -1,12 +1,19 @@
- +
- - - - - - + + + + + +
diff --git a/src/app/titlebar/titlebar.component.spec.ts b/src/app/titlebar/titlebar.component.spec.ts index 0e133424..27e68fac 100644 --- a/src/app/titlebar/titlebar.component.spec.ts +++ b/src/app/titlebar/titlebar.component.spec.ts @@ -1,5 +1,5 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; - +import { GameboardController } from '../gameboard/utils'; import { TitlebarComponent } from './titlebar.component'; describe('TitlebarComponent', () => { @@ -8,9 +8,16 @@ describe('TitlebarComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ TitlebarComponent ] - }) - .compileComponents(); + declarations: [TitlebarComponent], + providers: [ + { + provide: GameboardController, + useValue: { + openModal: () => {}, + }, + }, + ], + }).compileComponents(); }); beforeEach(() => { diff --git a/src/app/titlebar/titlebar.component.ts b/src/app/titlebar/titlebar.component.ts index 20b29dca..5e1066ab 100644 --- a/src/app/titlebar/titlebar.component.ts +++ b/src/app/titlebar/titlebar.component.ts @@ -1,15 +1,16 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; +import { SettingsModal } from '../common/modals'; +import { GameboardController } from '../gameboard/utils'; @Component({ selector: 'app-titlebar', templateUrl: './titlebar.component.html', - styleUrls: ['./titlebar.component.scss'] + styleUrls: ['./titlebar.component.scss'], }) -export class TitlebarComponent implements OnInit { +export class TitlebarComponent { + constructor(public controller: GameboardController) {} - constructor() { } - - ngOnInit(): void { + openSettings() { + this.controller.openModal(SettingsModal); } - } diff --git a/src/styles.scss b/src/styles.scss index 35c62155..ece7ba9a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,5 +1,6 @@ @use "themes" as themes; @import "~ngx-toastr/toastr"; +@import "~bootstrap/scss/bootstrap"; // Theme loading @media (prefers-color-scheme: light) { @@ -52,4 +53,3 @@ app-root { } /* Importing Bootstrap SCSS file. */ -@import "~bootstrap/scss/bootstrap";