sebastian/ConceptCreator
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

Prettier Visualization of Itemgroups
All checks were successful
E2E Testing / test (push) Successful in 1m32s
Details

Browse Source
This commit is contained in:
Sebastian Böckelmann 2024-05-05 18:22:49 +02:00
parent 5a3c0e9d75
commit db0455cd07
3 changed files with 58 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/side-overviews/item-overview/item-overview.component.html
View File

@ -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>
<button mat-icon-button matTreeNodeToggle
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodePaddingIndent="10">
<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>

41
src/app/side-overviews/item-overview/item-overview.component.scss
View File

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

12
src/app/side-overviews/item-overview/item-overview.component.ts
View File

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