diff --git a/src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.html b/src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.html
index e2da5c2..2ef43f7 100644
--- a/src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.html
+++ b/src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.html
@@ -4,14 +4,31 @@
{{col.displayedName}} | {{getLeafStateByIndex(transition, i).stateLabel}} | ++ | + + | + +Ending State | @@ -41,9 +58,22 @@ >
+
+
+ Expanded Row + |
+
---|---|---|---|
No data matching the filter "{{input.value}}" | diff --git a/src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.scss b/src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.scss index 432fb10..c9cf5f4 100644 --- a/src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.scss +++ b/src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.scss @@ -2,3 +2,56 @@ width: 100%; } + +.mat-column-expand { + width: 32px; + text-align: center; +} + +table { + width: 100%; +} + +tr.example-detail-row { + height: 0; +} + +tr.example-element-row:not(.example-expanded-row):hover { + background: whitesmoke; +} + +tr.example-element-row:not(.example-expanded-row):active { + background: #efefef; +} + +.example-element-row td { + border-bottom-width: 0; +} + +.example-element-detail { + overflow: hidden; + display: flex; +} + +.example-element-diagram { + min-width: 80px; + border: 2px solid black; + padding: 8px; + font-weight: lighter; + margin: 8px 0; + height: 104px; +} + +.example-element-symbol { + font-weight: bold; + font-size: 40px; + line-height: normal; +} + +.example-element-description { + padding: 16px; +} + +.example-element-description-attribution { + opacity: 0.5; +} diff --git a/src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.ts b/src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.ts index e6bbea0..741f8b6 100644 --- a/src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.ts +++ b/src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.ts @@ -7,6 +7,7 @@ import { import {LeafGamesystemCalculator} from "../../product-gamesystem-editor/LeafGamesystemCalculator"; import {ProductTransition} from "../../../../game-model/gamesystems/transitions/ProductTransition"; import {ProductState} from "../../../../game-model/gamesystems/states/ProductState"; +import {animate, state, style, transition, trigger} from "@angular/animations"; class DisplayedColumnName { displayedName: string internalName: string @@ -20,7 +21,14 @@ class DisplayedColumnName { @Component({ selector: 'app-product-transition-editor', templateUrl: './product-transition-editor.component.html', - styleUrl: './product-transition-editor.component.scss' + styleUrl: './product-transition-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 ProductTransitionEditorComponent implements OnInit{ @@ -30,6 +38,8 @@ export class ProductTransitionEditorComponent implements OnInit{ dataSource = new MatTableDataSource