main #48

Closed
sebastian wants to merge 44 commits from main into inventory
3 changed files with 58 additions and 7 deletions
Showing only changes of commit db0455cd07 - Show all commits

View File

@ -1,19 +1,23 @@
<p>item-overview works!</p> <p>item-overview works!</p>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<!-- This is the tree node template for leaf nodes --> <!-- 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 --> <!-- 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}} {{node.name}}
</mat-tree-node> </mat-tree-node>
<!-- This is the tree node template for expandable nodes --> <!-- 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"> [attr.aria-label]="'Toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror"> <mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon> </mat-icon>
</button> </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}} {{node.name}}
</mat-tree-node> </mat-tree-node>
</mat-tree> </mat-tree>

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
}

View File

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