diff --git a/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.html b/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.html
index 5b9c36a..4c42012 100644
--- a/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.html
+++ b/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.html
@@ -1,14 +1,20 @@
-
+
Label |
{{state.stateLabel}} |
-
- Label |
- {{state.stateDescription}} |
+
+
+
+
+ {{element.stateDescription}}
+
+ |
+
+
Initial |
@@ -31,6 +37,24 @@
|
-
-
+
+ |
+
+
+ |
+
+
+
+
+
+
diff --git a/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.scss b/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.scss
index 9a0a3e1..4ae2ebf 100644
--- a/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.scss
+++ b/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.scss
@@ -7,11 +7,11 @@ tr.example-detail-row {
}
tr.example-element-row:not(.example-expanded-row):hover {
- background: whitesmoke;
+ background: #545456
}
tr.example-element-row:not(.example-expanded-row):active {
- background: #efefef;
+ background: #545456;
}
.example-element-row td {
@@ -46,6 +46,6 @@ tr.example-element-row:not(.example-expanded-row):active {
opacity: 0.5;
}
-.mat-column-edit, .mat-column-delete {
+.mat-column-edit, .mat-column-delete, .mat-column-expand {
width: 32px;
}
diff --git a/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.ts b/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.ts
index 39387bc..1b62bce 100644
--- a/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.ts
+++ b/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.ts
@@ -1,17 +1,27 @@
import {Component, Input, OnInit} from '@angular/core';
import {SimpleState} from "../../../../game-model/gamesystems/SimpleState";
import {MatTableDataSource} from "@angular/material/table";
+import {animate, state, style, transition, trigger} from "@angular/animations";
@Component({
selector: 'app-simple-state-editor',
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{
@Input() states: SimpleState[] = [];
dataSource = new MatTableDataSource();
displayedColumns = ["name", "initial", "edit", "delete"];
+ columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
+ expandedElement: SimpleState | null = null;
ngOnInit() {
this.dataSource.data = this.states;