Prettier Visualization of Itemgroups

src/app/side-overviews/item-overview/item-overview.component.html

@@ -1,19 +1,23 @@
 <p>item-overview works!</p>
 <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
   <!-- This is the tree node template for leaf nodes -->
-  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding matTreeNodePaddingIndent="10">
     <!-- use a disabled button to provide padding for tree leaf -->
-    <button mat-icon-button disabled></button>
+    <button class="small-icon-button" mat-icon-button disabled></button>
+    <mat-icon class="small-icon-button" *ngIf="node.type == ModelComponentType.ITEMGROUP">folder</mat-icon>
+    <mat-icon class="small-icon-button" *ngIf="node.type == ModelComponentType.ITEM">data_object</mat-icon>
     {{node.name}}
   </mat-tree-node>
   <!-- This is the tree node template for expandable nodes -->
-  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
+  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodePaddingIndent="10">
-    <button mat-icon-button matTreeNodeToggle
+    <button class="small-icon-button" mat-icon-button matTreeNodeToggle
             [attr.aria-label]="'Toggle ' + node.name">
       <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>
+    <mat-icon class="small-icon-button" *ngIf="node.type == ModelComponentType.ITEMGROUP">folder</mat-icon>
+    <mat-icon class="small-icon-button" *ngIf="node.type == ModelComponentType.ITEM">data_object</mat-icon>
     {{node.name}}
   </mat-tree-node>
 </mat-tree>

src/app/side-overviews/item-overview/item-overview.component.scss

@@ -0,0 +1,41 @@
+.mat-tree-node {
+  min-height: 1.8em !important;
+  height: 1.8em;
+}
+
+
+.small-icon-button {
+  width: 26px !important;
+  height: 26px !important;
+  padding: 0px !important;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  margin-left: 5px;
+  margin-right: 5px;
+  margin-bottom: 2px;
+
+  & > *[role=img] {
+    width: 18px;
+    height: 18px;
+    font-size: 18px;
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .mat-mdc-button-touch-target {
+    width: 22px !important;
+    height: 22px !important;
+  }
+}
+
+.small-icon-button mat-icon {
+  color: whitesmoke;
+}
+
+.selected-node {
+  background-color: #545456
+}

src/app/side-overviews/item-overview/item-overview.component.ts

@@ -12,7 +12,8 @@ import {ModelComponentType} from "../../project/game-model/ModelComponentType";
 interface FlatNode {
   expandable: boolean,
   name: string,
-  level: number
+  level: number,
+  type: ModelComponentType
 }
 
 @Component({
@@ -30,18 +31,21 @@ export class ItemOverviewComponent implements OnInit{
         expandable: !!node.children && node.children.length > 0,
         name: node.componentName,
         level: level,
+        type: ModelComponentType.ITEMGROUP
       };
     } else if(node instanceof ConcreteItemGroup) {
       return {
         expandable: !!node.items && node.items.length > 0,
         name: node.componentName,
-        level: level
+        level: level,
+        type: ModelComponentType.ITEMGROUP
       }
     } else  {
       return {
         expandable: false,
         name: node.componentName,
-        level: level
+        level: level,
+        type: ModelComponentType.ITEM
       }
     }
   };
@@ -76,4 +80,6 @@ export class ItemOverviewComponent implements OnInit{
   ngOnInit() {
     this.dataSource.data = this.gameModel!.itemgroups;
   }
+
+  protected readonly ModelComponentType = ModelComponentType;
 }