Include description in simple state visualisation
All checks were successful
E2E Testing / test (push) Successful in 1m32s

This commit is contained in:
Sebastian Böckelmann 2024-02-10 11:09:53 +01:00
parent 9462de256b
commit 8df38376d0
3 changed files with 44 additions and 10 deletions

View File

@ -1,14 +1,20 @@
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Label</th> <th mat-header-cell *matHeaderCellDef>Label</th>
<td mat-cell *matCellDef="let state">{{state.stateLabel}}</td> <td mat-cell *matCellDef="let state">{{state.stateLabel}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="description"> <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<th mat-header-cell *matHeaderCellDef>Label</th> <ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let state">{{state.stateDescription}}</td> <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
<div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<p>{{element.stateDescription}}</p>
</div>
</td>
</ng-container> </ng-container>
<ng-container matColumnDef="initial"> <ng-container matColumnDef="initial">
<th mat-header-cell *matHeaderCellDef>Initial</th> <th mat-header-cell *matHeaderCellDef>Initial</th>
<td mat-cell *matCellDef="let state"> <td mat-cell *matCellDef="let state">
@ -31,6 +37,24 @@
</td> </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <ng-container matColumnDef="expand">
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
@if (expandedElement === element) {
<mat-icon>keyboard_arrow_up</mat-icon>
} @else {
<mat-icon>keyboard_arrow_down</mat-icon>
}
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table> </table>

View File

@ -7,11 +7,11 @@ tr.example-detail-row {
} }
tr.example-element-row:not(.example-expanded-row):hover { tr.example-element-row:not(.example-expanded-row):hover {
background: whitesmoke; background: #545456
} }
tr.example-element-row:not(.example-expanded-row):active { tr.example-element-row:not(.example-expanded-row):active {
background: #efefef; background: #545456;
} }
.example-element-row td { .example-element-row td {
@ -46,6 +46,6 @@ tr.example-element-row:not(.example-expanded-row):active {
opacity: 0.5; opacity: 0.5;
} }
.mat-column-edit, .mat-column-delete { .mat-column-edit, .mat-column-delete, .mat-column-expand {
width: 32px; width: 32px;
} }

View File

@ -1,17 +1,27 @@
import {Component, Input, OnInit} from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
import {SimpleState} from "../../../../game-model/gamesystems/SimpleState"; import {SimpleState} from "../../../../game-model/gamesystems/SimpleState";
import {MatTableDataSource} from "@angular/material/table"; import {MatTableDataSource} from "@angular/material/table";
import {animate, state, style, transition, trigger} from "@angular/animations";
@Component({ @Component({
selector: 'app-simple-state-editor', selector: 'app-simple-state-editor',
templateUrl: './simple-state-editor.component.html', templateUrl: './simple-state-editor.component.html',
styleUrl: './simple-state-editor.component.scss' styleUrl: './simple-state-editor.component.scss',
animations: [
trigger('detailExpand', [
state('collapsed,void', style({height: '0px', minHeight: '0'})),
state('expanded', style({height: '*'})),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
}) })
export class SimpleStateEditorComponent implements OnInit{ export class SimpleStateEditorComponent implements OnInit{
@Input() states: SimpleState[] = []; @Input() states: SimpleState[] = [];
dataSource = new MatTableDataSource(); dataSource = new MatTableDataSource();
displayedColumns = ["name", "initial", "edit", "delete"]; displayedColumns = ["name", "initial", "edit", "delete"];
columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
expandedElement: SimpleState | null = null;
ngOnInit() { ngOnInit() {
this.dataSource.data = this.states; this.dataSource.data = this.states;