From d44ec50a6a437c2ff0e2795f69e3db5deacbe17c Mon Sep 17 00:00:00 2001 From: Tom Date: Mon, 31 Mar 2025 16:59:39 +0000 Subject: [PATCH] Added light & dark theme. Basic theme applied on dialogs/modals. Attempt to apply uniformity to the website. --- angular.json | 5 +- package.json | 1 - .../action-item-edit.component.html | 29 +++-- .../action-item-edit.component.scss | 6 - .../action-item-edit.component.ts | 6 +- .../action-list/action-list.component.scss | 5 +- .../action-list.component.theme.scss | 0 .../action-list/action-list.component.ts | 11 +- .../actions/actions/actions.component.html | 4 +- .../actions/actions.component.theme.scss | 0 src/app/actions/actions/actions.component.ts | 15 ++- src/app/app.component.ts | 25 +++- src/app/app.config.ts | 2 +- src/app/app.module.ts | 13 ++ src/app/auth/login/login.component.scss | 1 + .../auth/tts-login/tts-login.component.html | 2 +- .../auth/user-card/user-card.component.html | 3 +- .../connection-item-edit.component.html | 9 +- .../connections/connections.component.html | 6 +- .../group-item-edit.component.html | 4 +- .../group-item/group-item.component.scss | 2 +- .../key-item-edit.component.html | 9 +- src/app/navigation/navigation.component.html | 29 +++-- src/app/navigation/navigation.component.scss | 21 ++-- src/app/navigation/navigation.component.ts | 9 +- .../permission-item-edit.component.html | 14 ++- .../policy-item-edit.component.html | 13 +- .../policy-item-edit.component.ts | 3 +- .../redemption-item-edit.component.html | 34 +++--- .../redemption-item-edit.component.scss | 42 ------- .../redemption-list.component.html | 3 +- src/app/shared/services/theme.service.spec.ts | 16 +++ src/app/shared/services/theme.service.ts | 32 +++++ src/app/theme/theme.component.html | 6 + src/app/theme/theme.component.scss | 0 src/app/theme/theme.component.spec.ts | 23 ++++ src/app/theme/theme.component.ts | 35 ++++++ .../filter-item-edit.component.html | 115 ++++++++++-------- .../filter-item-edit.component.ts | 8 +- .../filter-item/filter-item.component.scss | 1 - .../filter-list/filter-list.component.scss | 10 -- .../filters/filters.component.scss | 1 - src/app/tts-filters/tts-filters.module.ts | 7 +- .../twitch-user-item-add.component.html | 14 ++- src/index.html | 4 +- src/styles.scss | 79 ++++++++++-- 46 files changed, 445 insertions(+), 232 deletions(-) create mode 100644 src/app/actions/action-list/action-list.component.theme.scss create mode 100644 src/app/actions/actions/actions.component.theme.scss create mode 100644 src/app/app.module.ts create mode 100644 src/app/shared/services/theme.service.spec.ts create mode 100644 src/app/shared/services/theme.service.ts create mode 100644 src/app/theme/theme.component.html create mode 100644 src/app/theme/theme.component.scss create mode 100644 src/app/theme/theme.component.spec.ts create mode 100644 src/app/theme/theme.component.ts diff --git a/angular.json b/angular.json index af75ae1..ebda60c 100644 --- a/angular.json +++ b/angular.json @@ -91,7 +91,10 @@ "buildTarget": "hermes-web-angular:build:development" } }, - "defaultConfiguration": "development" + "defaultConfiguration": "development", + "options": { + "allowedHosts": ["*"] + } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n" diff --git a/package.json b/package.json index 4e0b140..7bc7710 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "rxjs-websockets": "^9.0.0", "tslib": "^2.3.0", "uuidv4": "^6.2.13", - "vite": "^6.2.3", "zone.js": "~0.15.0" }, "devDependencies": { diff --git a/src/app/actions/action-item-edit/action-item-edit.component.html b/src/app/actions/action-item-edit/action-item-edit.component.html index bb3c0e7..4f800df 100644 --- a/src/app/actions/action-item-edit/action-item-edit.component.html +++ b/src/app/actions/action-item-edit/action-item-edit.component.html @@ -1,4 +1,4 @@ - + @@ -108,19 +108,26 @@ } - + @if (!isNew) { - + } - - + + (click)="save()"> + saveSave + @if (responseError) { @@ -129,4 +136,4 @@ } - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/actions/action-item-edit/action-item-edit.component.scss b/src/app/actions/action-item-edit/action-item-edit.component.scss index 3af1978..5fdd328 100644 --- a/src/app/actions/action-item-edit/action-item-edit.component.scss +++ b/src/app/actions/action-item-edit/action-item-edit.component.scss @@ -9,12 +9,6 @@ margin: 0; } -.actions { - display: flex; - flex-direction: row; - justify-content: center; -} - .delete { background-color: #ea5151; color: #ba1a1a; diff --git a/src/app/actions/action-item-edit/action-item-edit.component.ts b/src/app/actions/action-item-edit/action-item-edit.component.ts index 7e390fa..8a09d95 100644 --- a/src/app/actions/action-item-edit/action-item-edit.component.ts +++ b/src/app/actions/action-item-edit/action-item-edit.component.ts @@ -9,17 +9,19 @@ import { MatInputModule } from '@angular/material/input'; import { MatSelectModule } from '@angular/material/select'; import { createItemExistsInArrayValidator } from '../../shared/validators/item-exists-in-array'; import { HermesClientService } from '../../hermes-client.service'; +import { MatIconModule } from '@angular/material/icon'; @Component({ selector: 'action-item-edit', imports: [ - ReactiveFormsModule, MatButtonModule, MatCardModule, MatDialogModule, MatFormFieldModule, + MatIconModule, MatInputModule, - MatSelectModule + MatSelectModule, + ReactiveFormsModule, ], templateUrl: './action-item-edit.component.html', styleUrl: './action-item-edit.component.scss' diff --git a/src/app/actions/action-list/action-list.component.scss b/src/app/actions/action-list/action-list.component.scss index 894a345..2d41734 100644 --- a/src/app/actions/action-list/action-list.component.scss +++ b/src/app/actions/action-list/action-list.component.scss @@ -1,3 +1,5 @@ +@use '@angular/material' as mat; + main { display: grid; grid-template-columns: repeat(1, 1fr); @@ -15,7 +17,7 @@ main { border: 1px solid grey; padding: 1em; cursor: pointer; - background-color: white; + background-color: transparent; & span { display: block; @@ -27,7 +29,6 @@ main { & .subtitle { font-size: smaller; - color: lightgrey; } } } diff --git a/src/app/actions/action-list/action-list.component.theme.scss b/src/app/actions/action-list/action-list.component.theme.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/actions/action-list/action-list.component.ts b/src/app/actions/action-list/action-list.component.ts index 87bc474..4f23e80 100644 --- a/src/app/actions/action-list/action-list.component.ts +++ b/src/app/actions/action-list/action-list.component.ts @@ -7,19 +7,28 @@ import { MatIconModule } from '@angular/material/icon'; import { MatDialog } from '@angular/material/dialog'; import { ActionItemEditComponent } from '../action-item-edit/action-item-edit.component'; import { HermesClientService } from '../../hermes-client.service'; +import { MatSelectModule } from '@angular/material/select'; @Component({ selector: 'action-list', standalone: true, - imports: [MatButtonModule, MatFormFieldModule, MatIconModule, MatListModule], + imports: [ + MatButtonModule, + MatFormFieldModule, + MatIconModule, + MatListModule, + MatSelectModule, + ], templateUrl: './action-list.component.html', styleUrl: './action-list.component.scss' }) export class ActionListComponent { @Input() actions: RedeemableAction[] = [] @Output() actionsChange = new EventEmitter(); + readonly dialog = inject(MatDialog); readonly client = inject(HermesClientService); + opened = false; create(): void { diff --git a/src/app/actions/actions/actions.component.html b/src/app/actions/actions/actions.component.html index 36d1266..1cee6b4 100644 --- a/src/app/actions/actions/actions.component.html +++ b/src/app/actions/actions/actions.component.html @@ -1,4 +1,4 @@ - +

Redeemable Actions

@@ -31,4 +31,4 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/actions/actions/actions.component.theme.scss b/src/app/actions/actions/actions.component.theme.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/actions/actions/actions.component.ts b/src/app/actions/actions/actions.component.ts index 7d9d008..dbd4a7f 100644 --- a/src/app/actions/actions/actions.component.ts +++ b/src/app/actions/actions/actions.component.ts @@ -1,4 +1,4 @@ -import { Component, inject, OnInit } from '@angular/core'; +import { Component, Inject, inject, OnInit } from '@angular/core'; import { ActionListComponent } from "../action-list/action-list.component"; import { MatSelectModule } from '@angular/material/select'; import { MatFormFieldModule } from '@angular/material/form-field'; @@ -9,6 +9,8 @@ import RedeemableAction from '../../shared/models/redeemable-action'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; import { ActivatedRoute } from '@angular/router'; import RedeemableActionService from '../../shared/services/redeemable-action.service'; +import { MatButtonModule } from '@angular/material/button'; +import { DOCUMENT } from '@angular/common'; interface IActionFilter { name: string @@ -17,14 +19,15 @@ interface IActionFilter { @Component({ selector: 'actions', - standalone: true, imports: [ ActionListComponent, - ReactiveFormsModule, + MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, - MatSelectModule + MatSelectModule, + ReactiveFormsModule, + ReactiveFormsModule, ], templateUrl: './actions.component.html', styleUrl: './actions.component.scss' @@ -43,11 +46,15 @@ export class ActionsComponent implements OnInit { private readonly client = inject(HermesClientService); private readonly redeemableActionService = inject(RedeemableActionService); private readonly route = inject(ActivatedRoute); + filter = this.filters[0]; searchControl = new FormControl(''); search = ''; items: RedeemableAction[] = []; + constructor(@Inject(DOCUMENT) private document: Document) { } + + ngOnInit(): void { this.route.data.subscribe(data => { if (!data['redeemableActions']) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d4d24bc..0e36c9a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,5 +1,5 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, OnInit, Inject, PLATFORM_ID, NgZone, OnDestroy, inject } from '@angular/core'; +import { Component, OnInit, Inject, PLATFORM_ID, NgZone, OnDestroy, inject, HostBinding } from '@angular/core'; import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; import { HermesClientService } from './hermes-client.service'; import { AuthUserGuard } from './shared/auth/auth.user.guard' @@ -10,23 +10,42 @@ import { ApiAuthenticationService } from './shared/services/api/api-authenticati import { AuthModule } from './auth/auth.module'; import { ApiKeyService } from './shared/services/api/api-key.service'; import ApiKey from './shared/models/api-key'; +import { ThemeService } from './shared/services/theme.service'; +import { OverlayContainer } from '@angular/cdk/overlay'; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet, AuthModule, NavigationComponent], + imports: [ + RouterOutlet, + AuthModule, + NavigationComponent + ], providers: [AuthUserGuard], templateUrl: './app.component.html', styleUrl: './app.component.scss' }) export class AppComponent implements OnInit, OnDestroy { private readonly keyService = inject(ApiKeyService); + private readonly overlayContainer = inject(OverlayContainer); + private readonly themeService = inject(ThemeService); private isBrowser: boolean; private ngZone: NgZone; private subscriptions: Subscription[]; + @HostBinding('class.dark-theme') + get isDarkTheme() { + return this.themeService.isDarkTheme(); + } + + @HostBinding('class.light-theme') + get isLightTheme() { + return this.themeService.isLightTheme(); + } + + constructor(private auth: ApiAuthenticationService, private client: HermesClientService, private events: EventService, private router: Router, ngZone: NgZone, @Inject(PLATFORM_ID) private platformId: Object) { this.ngZone = ngZone; this.isBrowser = isPlatformBrowser(this.platformId); @@ -80,6 +99,8 @@ export class AppComponent implements OnInit, OnDestroy { }); })); + this.overlayContainer.getContainerElement().classList.add(this.themeService.theme + '-theme'); + this.ngZone.runOutsideAngular(() => setInterval(() => this.client.heartbeat(), 15000)); } diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 83d3434..3d07852 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -17,6 +17,6 @@ export const appConfig: ApplicationConfig = { }]) ), provideOAuthClient(), - provideClientHydration(), provideAnimationsAsync() + provideClientHydration(), provideAnimationsAsync(), provideAnimationsAsync() ] }; \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts new file mode 100644 index 0000000..54e1b98 --- /dev/null +++ b/src/app/app.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatDialogModule } from '@angular/material/dialog'; +import { TtsFiltersModule } from './tts-filters/tts-filters.module'; + + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + ] +}) +export class AppModule { } diff --git a/src/app/auth/login/login.component.scss b/src/app/auth/login/login.component.scss index 95dec7b..773d650 100644 --- a/src/app/auth/login/login.component.scss +++ b/src/app/auth/login/login.component.scss @@ -18,6 +18,7 @@ .mat-mdc-card-content { align-self: center; + justify-content: space-between; } a { diff --git a/src/app/auth/tts-login/tts-login.component.html b/src/app/auth/tts-login/tts-login.component.html index 05a01ab..7beae39 100644 --- a/src/app/auth/tts-login/tts-login.component.html +++ b/src/app/auth/tts-login/tts-login.component.html @@ -16,7 +16,7 @@ - + diff --git a/src/app/auth/user-card/user-card.component.html b/src/app/auth/user-card/user-card.component.html index fe16d78..4edb800 100644 --- a/src/app/auth/user-card/user-card.component.html +++ b/src/app/auth/user-card/user-card.component.html @@ -8,8 +8,7 @@ - +
@if (isTTSLoggedIn) { - diff --git a/src/app/connections/connections/connections.component.html b/src/app/connections/connections/connections.component.html index 2033919..b29bc9a 100644 --- a/src/app/connections/connections/connections.component.html +++ b/src/app/connections/connections/connections.component.html @@ -1,3 +1,5 @@ -

Connections

+ +

Connections

- \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/groups/group-item-edit/group-item-edit.component.html b/src/app/groups/group-item-edit/group-item-edit.component.html index e170b87..0456c88 100644 --- a/src/app/groups/group-item-edit/group-item-edit.component.html +++ b/src/app/groups/group-item-edit/group-item-edit.component.html @@ -38,13 +38,15 @@ } - + - diff --git a/src/app/navigation/navigation.component.html b/src/app/navigation/navigation.component.html index 83ce2c5..2167af9 100644 --- a/src/app/navigation/navigation.component.html +++ b/src/app/navigation/navigation.component.html @@ -1,6 +1,6 @@ \ No newline at end of file diff --git a/src/app/navigation/navigation.component.scss b/src/app/navigation/navigation.component.scss index 45d94a8..0e55ac8 100644 --- a/src/app/navigation/navigation.component.scss +++ b/src/app/navigation/navigation.component.scss @@ -1,8 +1,4 @@ -$primary_background_color: #EEEEEE; -$primary_font_color: #111111; - -$secondary_background_color: #DDDDDD; -$secondary_font_color: #333333; +@use "@angular/material" as mat; ul { padding: 0; @@ -18,20 +14,17 @@ li { } a { - background-color: transparent; padding: 1em; border: 0; margin: 0; font-size: large; text-decoration: none; - color: $primary_font_color; + border-radius: 10px; -} -a:hover { - background-color: #FAFAFA; -} - -a.active { - background-color: #F5F5F5; + @include mat.button-overrides( + ( + protected-container-height: 1 + ) + ); } \ No newline at end of file diff --git a/src/app/navigation/navigation.component.ts b/src/app/navigation/navigation.component.ts index 0cdbbf0..c8c222c 100644 --- a/src/app/navigation/navigation.component.ts +++ b/src/app/navigation/navigation.component.ts @@ -5,11 +5,18 @@ import { ApiAuthenticationService } from '../shared/services/api/api-authenticat import { MatCardModule } from '@angular/material/card'; import { AuthModule } from '../auth/auth.module'; import { UserCardComponent } from "../auth/user-card/user-card.component"; +import { MatButtonModule } from '@angular/material/button'; @Component({ selector: 'navigation', standalone: true, - imports: [RouterModule, MatCardModule, AuthModule, UserCardComponent], + imports: [ + AuthModule, + MatButtonModule, + MatCardModule, + RouterModule, + UserCardComponent, + ], templateUrl: './navigation.component.html', styleUrl: './navigation.component.scss' }) diff --git a/src/app/permissions/permission-item-edit/permission-item-edit.component.html b/src/app/permissions/permission-item-edit/permission-item-edit.component.html index 7f4e9bc..223f9de 100644 --- a/src/app/permissions/permission-item-edit/permission-item-edit.component.html +++ b/src/app/permissions/permission-item-edit/permission-item-edit.component.html @@ -23,13 +23,19 @@ - + (click)="dialogRef.close()"> + cancelCancel + - + (click)="submit()"> + {{data.isNew ? "add" : "save"}}{{data.isNew ? "Add" : "Save"}} + @if (responseError) { diff --git a/src/app/policies/policy-item-edit/policy-item-edit.component.html b/src/app/policies/policy-item-edit/policy-item-edit.component.html index 1b3509d..ee08ac5 100644 --- a/src/app/policies/policy-item-edit/policy-item-edit.component.html +++ b/src/app/policies/policy-item-edit/policy-item-edit.component.html @@ -52,22 +52,17 @@ } - + - @if (isNew) { - } @else { - - } @if (responseError) { diff --git a/src/app/policies/policy-item-edit/policy-item-edit.component.ts b/src/app/policies/policy-item-edit/policy-item-edit.component.ts index cf9c8a8..abc70a2 100644 --- a/src/app/policies/policy-item-edit/policy-item-edit.component.ts +++ b/src/app/policies/policy-item-edit/policy-item-edit.component.ts @@ -2,7 +2,7 @@ import { AfterViewInit, Component, inject, OnInit, ViewChild } from '@angular/co import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; -import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; @@ -18,6 +18,7 @@ import { PolicyDropdownComponent } from '../policy-dropdown/policy-dropdown.comp GroupDropdownComponent, MatButtonModule, MatCardModule, + MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, diff --git a/src/app/redemptions/redemption-item-edit/redemption-item-edit.component.html b/src/app/redemptions/redemption-item-edit/redemption-item-edit.component.html index 5b55b33..5940936 100644 --- a/src/app/redemptions/redemption-item-edit/redemption-item-edit.component.html +++ b/src/app/redemptions/redemption-item-edit/redemption-item-edit.component.html @@ -31,23 +31,25 @@ } } -
- - @if (redemption.id) { - - } -
+ + + @if (redemption.id) { + + } + + + @if (responseError) { {{responseError}} diff --git a/src/app/redemptions/redemption-item-edit/redemption-item-edit.component.scss b/src/app/redemptions/redemption-item-edit/redemption-item-edit.component.scss index 45cd2c8..cdb2012 100644 --- a/src/app/redemptions/redemption-item-edit/redemption-item-edit.component.scss +++ b/src/app/redemptions/redemption-item-edit/redemption-item-edit.component.scss @@ -1,46 +1,4 @@ -.mat-mdc-card { - margin: 0.5em; -} - -.mat-mdc-card-content { - display: flex; - flex-direction: row; - column-gap: 1em; - padding-bottom: 0; -} .buttons { margin: -0.75em; -} - -button, -.mdc-button { - display: block; -} - -@media (max-width:1000px) { - .mat-mdc-card-content { - flex-direction: column; - margin-bottom: 0.5em; - display: flex; - justify-content: center; - align-items: center; - margin-top: 1em; - } - - .buttons { - margin: 0; - } - - button~button { - margin-left: 2em; - } - - button { - display: inline; - } - - .delete { - background-color: rgb(255, 152, 152); - } } \ No newline at end of file diff --git a/src/app/redemptions/redemption-list/redemption-list.component.html b/src/app/redemptions/redemption-list/redemption-list.component.html index b0ef71e..5db7d08 100644 --- a/src/app/redemptions/redemption-list/redemption-list.component.html +++ b/src/app/redemptions/redemption-list/redemption-list.component.html @@ -29,8 +29,7 @@ Twitch Redemption Name {{getTwitchRedemptionNameById(redemption.redemption_id) || 'Unknown - Twitch Redemption'}} + *matCellDef="let redemption">{{getTwitchRedemptionNameById(redemption.redemption_id) || 'Unknown Twitch Redemption'}} diff --git a/src/app/shared/services/theme.service.spec.ts b/src/app/shared/services/theme.service.spec.ts new file mode 100644 index 0000000..1c2957b --- /dev/null +++ b/src/app/shared/services/theme.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ThemeService } from './theme.service'; + +describe('ThemeService', () => { + let service: ThemeService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ThemeService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/shared/services/theme.service.ts b/src/app/shared/services/theme.service.ts new file mode 100644 index 0000000..6528c1f --- /dev/null +++ b/src/app/shared/services/theme.service.ts @@ -0,0 +1,32 @@ +import { Injectable, signal } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class ThemeService { + private _current = signal<'light' | 'dark'>('dark'); + + get theme() { + return this._current(); + } + + set theme(value: 'light' | 'dark') { + this._current.set(value); + } + + isDarkTheme() { + return this.theme == 'dark'; + } + + isLightTheme() { + return this.theme == 'light'; + } + + toggle() { + if (this.theme == 'light') { + this.theme = 'dark'; + } else { + this.theme = 'light'; + } + } +} diff --git a/src/app/theme/theme.component.html b/src/app/theme/theme.component.html new file mode 100644 index 0000000..24fbdd2 --- /dev/null +++ b/src/app/theme/theme.component.html @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/src/app/theme/theme.component.scss b/src/app/theme/theme.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/theme/theme.component.spec.ts b/src/app/theme/theme.component.spec.ts new file mode 100644 index 0000000..7472879 --- /dev/null +++ b/src/app/theme/theme.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ThemeComponent } from './theme.component'; + +describe('ThemeComponent', () => { + let component: ThemeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ThemeComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ThemeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/theme/theme.component.ts b/src/app/theme/theme.component.ts new file mode 100644 index 0000000..9c9dd4e --- /dev/null +++ b/src/app/theme/theme.component.ts @@ -0,0 +1,35 @@ +import { Component, HostBinding, inject } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { ThemeService } from '../shared/services/theme.service'; + +@Component({ + selector: 'theme', + imports: [ + MatButtonModule, + MatIconModule, + ], + templateUrl: './theme.component.html', + styleUrl: './theme.component.scss' +}) +export class ThemeComponent { + private readonly _themeService = inject(ThemeService); + + @HostBinding('class.dark-theme') + get isDarkMode() { + return this._themeService.isDarkTheme(); + } + + @HostBinding('class.light-theme') + get isLightMode() { + return this._themeService.isLightTheme(); + } + + set(theme: 'light' | 'dark') { + this._themeService.theme = theme; + } + + toggle() { + this._themeService.toggle(); + } +} diff --git a/src/app/tts-filters/filter-item-edit/filter-item-edit.component.html b/src/app/tts-filters/filter-item-edit/filter-item-edit.component.html index 2f502d1..8a97d71 100644 --- a/src/app/tts-filters/filter-item-edit/filter-item-edit.component.html +++ b/src/app/tts-filters/filter-item-edit/filter-item-edit.component.html @@ -1,59 +1,66 @@ + + TTS Filter + + -

TTS Filter

- -
-
- - Search - - @if (forms.get('search')?.invalid && (forms.get('search')?.dirty || forms.get('search')?.touched)) { - Search is required. - } - -
-
- - Replace - - -
-
- - Regex Options - - - {{optionsSelected[0] || ''}} - @if ((flagControl.value?.length || 0) > 1) { - - (+{{flagControl.value!.length - 1}}) - - } - - @for (option of regexOptions; track option) { - {{option.name}} + +
+ + Search + + @if (forms.get('search')?.invalid && (forms.get('search')?.dirty || forms.get('search')?.touched)) { + Search is required. + } + +
+
+ + Replace + + +
+
+ + Regex Options + + + {{optionsSelected[0] || ''}} + @if ((flagControl.value?.length || 0) > 1) { + + (+{{flagControl.value!.length - 1}}) + } - - -
- @if (responseError) { - {{responseError}} - } - - - - - - + + @for (option of regexOptions; track option) { + {{option.name}} + } + + +
+ @if (responseError) { + {{responseError}} + } + + + + + + \ No newline at end of file diff --git a/src/app/tts-filters/filter-item-edit/filter-item-edit.component.ts b/src/app/tts-filters/filter-item-edit/filter-item-edit.component.ts index 8413984..2201c27 100644 --- a/src/app/tts-filters/filter-item-edit/filter-item-edit.component.ts +++ b/src/app/tts-filters/filter-item-edit/filter-item-edit.component.ts @@ -1,5 +1,5 @@ import { Component, inject } from '@angular/core'; -import { MatDialogRef, MAT_DIALOG_DATA, MatDialogActions, MatDialogTitle, MatDialogContent } from '@angular/material/dialog'; +import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; import { Filter } from '../../shared/models/filter'; import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; import { MatFormFieldModule } from '@angular/material/form-field'; @@ -8,6 +8,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { MatSelectChange, MatSelectModule } from '@angular/material/select'; import { HermesClientService } from '../../hermes-client.service'; +import { MatIconModule } from '@angular/material/icon'; @Component({ selector: 'tts-filter-item-edit', @@ -16,10 +17,9 @@ import { HermesClientService } from '../../hermes-client.service'; FormsModule, MatButtonModule, MatCardModule, - MatDialogActions, - MatDialogContent, - MatDialogTitle, + MatDialogModule, MatFormFieldModule, + MatIconModule, MatInputModule, MatSelectModule, ReactiveFormsModule, diff --git a/src/app/tts-filters/filter-item/filter-item.component.scss b/src/app/tts-filters/filter-item/filter-item.component.scss index bec9105..171f794 100644 --- a/src/app/tts-filters/filter-item/filter-item.component.scss +++ b/src/app/tts-filters/filter-item/filter-item.component.scss @@ -22,7 +22,6 @@ ul { } >button { - background: #dddddd; border-radius: 50%; :hover { diff --git a/src/app/tts-filters/filter-list/filter-list.component.scss b/src/app/tts-filters/filter-list/filter-list.component.scss index 11c1a8e..4b55589 100644 --- a/src/app/tts-filters/filter-list/filter-list.component.scss +++ b/src/app/tts-filters/filter-list/filter-list.component.scss @@ -1,7 +1,3 @@ -div { - background-color: #fafafa; -} - ul.data { margin: 0; padding: 0; @@ -22,10 +18,6 @@ ul.data { >li:last-child { border-bottom: 0 solid #aaaaaa; } - - >li:nth-child(2n) { - background-color: #f5f5f5; - } } ul.header { @@ -33,7 +25,6 @@ ul.header { flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; - background-color: #fafafa; li { border-bottom: 0 solid #aaaaaa; @@ -41,7 +32,6 @@ ul.header { list-style-type: none; white-space: pre; text-align: justify; - background-color: #fafafa; } li:nth-child(1), diff --git a/src/app/tts-filters/filters/filters.component.scss b/src/app/tts-filters/filters/filters.component.scss index 609ceaa..5e01391 100644 --- a/src/app/tts-filters/filters/filters.component.scss +++ b/src/app/tts-filters/filters/filters.component.scss @@ -1,5 +1,4 @@ main { - background-color: #fafafa; display: flex; flex-direction: column; height: 100vh; diff --git a/src/app/tts-filters/tts-filters.module.ts b/src/app/tts-filters/tts-filters.module.ts index bce0a73..9df5dd0 100644 --- a/src/app/tts-filters/tts-filters.module.ts +++ b/src/app/tts-filters/tts-filters.module.ts @@ -1,12 +1,17 @@ import { NgModule } from '@angular/core'; import { FiltersComponent } from './filters/filters.component'; import { FilterListComponent } from './filter-list/filter-list.component'; +import { FilterItemEditComponent } from './filter-item-edit/filter-item-edit.component'; +import { FilterItemComponent } from './filter-item/filter-item.component'; @NgModule({ declarations: [], imports: [ - FiltersComponent, FilterListComponent + FiltersComponent, + FilterItemComponent, + FilterItemEditComponent, + FilterListComponent, ] }) export class TtsFiltersModule { } diff --git a/src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.html b/src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.html index b900a99..77dd03b 100644 --- a/src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.html +++ b/src/app/twitch-users/twitch-user-item-add/twitch-user-item-add.component.html @@ -15,12 +15,18 @@ - - + + (click)="submit()"> + addAdd + @if (responseError) { diff --git a/src/index.html b/src/index.html index 5ecd64d..e70ec3c 100644 --- a/src/index.html +++ b/src/index.html @@ -14,7 +14,9 @@ rel="stylesheet"> - + + + diff --git a/src/styles.scss b/src/styles.scss index a62aeb5..3b74a50 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,21 +1,71 @@ -/* You can add global styles to this file, and also import other style files */ +@use "@angular/material" as mat; +@include mat.core(); -@use '@angular/material' as mat; +html { + @include mat.theme((theme-type: light dark, + color: (primary: mat.$violet-palette, + tertiary: mat.$orange-palette, + use-system-variables: true, + ), + typography: Roboto, + density: 0, + )); +} html, -body { +body, +main { height: 100%; } +html, +body, +main, +content, +nav { + background-color: var(--mat-sys-background); + color: var(--mat-sys-on-background); +} + +.mat-mdc-card-header, +.mat-mdc-card-actions { + color: var(--mat-sys-on-background); + margin: 1em; +} + +.mat-mdc-card-actions { + padding: 0; + margin: 0; +} + body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } +.light-theme { + color-scheme: light; +} + +.dark-theme { + color-scheme: dark; +} + .mat-mdc-dialog-surface { background-color: transparent !important; } +.mat-mdc-card-actions { + display: flex; + align-items: center; + flex-direction: row; + justify-content: center; +} + +.mat-mdc-button { + color: var(--mat-sys-on-background); +} + /* width */ ::-webkit-scrollbar { width: 5px; @@ -47,28 +97,28 @@ body { } .confirm { - @include mat.button-overrides((text-state-layer-color: rgb(52, 255, 62), + @include mat.button-overrides(( //text-state-layer-color: rgb(52, 255, 62), text-label-text-color: rgb(71, 218, 78), text-disabled-label-text-color: rgb(71, 218, 78), )); } .neutral { - @include mat.button-overrides((text-state-layer-color: rgb(64, 141, 255), + @include mat.button-overrides(( //text-state-layer-color: rgb(64, 141, 255), text-label-text-color: rgb(52, 106, 255), text-disabled-label-text-color: rgb(52, 106, 255), )); } .warning { - @include mat.button-overrides((text-state-layer-color: rgb(255, 172, 63), + @include mat.button-overrides(( //text-state-layer-color: rgb(255, 172, 63), text-label-text-color: rgb(255, 145, 19), text-disabled-label-text-color: rgb(255, 145, 19), )); } .danger { - @include mat.button-overrides((text-state-layer-color: rgb(255, 48, 48), + @include mat.button-overrides(( //text-state-layer-color: rgb(255, 48, 48), text-label-text-color: rgb(255, 52, 52), text-disabled-label-text-color: rgb(255, 52, 52), filled-label-text-color: rgb(255, 52, 52), @@ -90,4 +140,19 @@ body { align-items: center; align-self: center; text-align: center; +} + +@include mat.button-overrides((text-label-text-color: --mat-sys-on-primary, + protected-label-text-color: --mat-sys-on-primary, + //state-layer-color: --mat-sys-on-primary, + )); + +html, +body { + height: 100%; +} + +body { + margin: 0; + font-family: Roboto, "Helvetica Neue", sans-serif; } \ No newline at end of file