tom/hermes-web-angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added light & dark theme. Basic theme applied on dialogs/modals. Attempt to apply uniformity to the website.

Browse Source
This commit is contained in:
Tom
2025-03-31 16:59:39 +00:00
parent ea19375ad2
commit d44ec50a6a
46 changed files with 445 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/app/actions/action-item-edit/action-item-edit.component.html
View File

@@ -1,4 +1,4 @@
<body>
<content>
<mat-card>
<mat-card-header>
<mat-card-title-group>
@@ -108,19 +108,26 @@
}
</mat-card-content>
<mat-card-actions class="actions"
align="end">
<mat-card-actions class="actions">
@if (!isNew) {
<button mat-raised-button
class="delete"
(click)="deleteAction(action)">Delete</button>
<button mat-button
class="danger"
(click)="deleteAction(action)">
<mat-icon>delete</mat-icon>Delete
</button>
}
<button mat-raised-button
<button mat-button
class="neutral"
disabled="{{waitForResponse}}"
(click)="dialogRef.close()">Cancel</button>
<button mat-raised-button
(click)="dialogRef.close()">
<mat-icon>cancel</mat-icon>Cancel
</button>
<button mat-button
class="confirm"
disabled="{{!formsDirty || !formsValidity || waitForResponse}}"
(click)="save()">Save</button>
(click)="save()">
<mat-icon>save</mat-icon>Save
</button>
</mat-card-actions>
@if (responseError) {
@@ -129,4 +136,4 @@
</mat-card-footer>
}
</mat-card>
</body>
</content>

6
src/app/actions/action-item-edit/action-item-edit.component.scss
View File

@@ -9,12 +9,6 @@
margin: 0;
}
.actions {
display: flex;
flex-direction: row;
justify-content: center;
}
.delete {
background-color: #ea5151;
color: #ba1a1a;

6
src/app/actions/action-item-edit/action-item-edit.component.ts
View File

@@ -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'

5
src/app/actions/action-list/action-list.component.scss
View File

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

0
src/app/actions/action-list/action-list.component.theme.scss Normal file
View File

11
src/app/actions/action-list/action-list.component.ts
View File

@@ -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<RedeemableAction>();
readonly dialog = inject(MatDialog);
readonly client = inject(HermesClientService);
opened = false;
create(): void {

4
src/app/actions/actions/actions.component.html
View File

@@ -1,4 +1,4 @@
<body>
<content>
<h3>Redeemable Actions</h3>
<section>
@@ -31,4 +31,4 @@
<action-list class="center"
[actions]="actions"
(actionsChange)="items.push($event)" />
</body>
</content>

0
src/app/actions/actions/actions.component.theme.scss Normal file
View File

15
src/app/actions/actions/actions.component.ts
View File

@@ -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'])