TSK-1564: Make scrolling in classification list smoother

This commit is contained in:
Sofie Hofmann 2021-03-02 08:16:58 +01:00
parent ec822c1168
commit 385780d138
3 changed files with 23 additions and 25 deletions

View File

@ -1,17 +1,16 @@
<tree-root #tree [nodes]="treeNodes" [options]="options" (activate)="onActivate($event)" (deactivate)="onDeactivate($event)"
(moveNode)="onMoveNode($event)" (treeDrop)="onDrop($event)">
<ng-template #treeNodeTemplate let-node let-index="index">
<span class="text-top">
<svg-icon
*ngIf="node.data.category"
class="fa-fw pr-1"
[src]="(getCategoryIcon(node.data.category) | async)?.left"
matTooltip="{{(getCategoryIcon(node.data.category) | async)?.right}}">
</svg-icon>
</span>
<span>
<strong>{{ node.data.key }}</strong>
</span>
<span> - {{ node.data.name }}</span>
<span class="tree__svg-icon">
<svg-icon
*ngIf="node.data.category"
[src]="getCategoryIcon(node.data.category).left"
matTooltip="{{getCategoryIcon(node.data.category).right}}">
</svg-icon>
</span>
<span>
<strong>{{ node.data.key }}</strong>
</span>
<span> - {{ node.data.name }}</span>
</ng-template>
</tree-root>

View File

@ -1,8 +1,5 @@
.text-top {
.tree__svg-icon {
vertical-align: text-top;
}
svg-icon {
padding-right: 4px;
fill: #555;
top: -5px !important;
}

View File

@ -40,6 +40,7 @@ import { Pair } from '../../../shared/models/pair';
})
export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy {
treeNodes: TreeNodeModel[];
categoryIcons: ClassificationCategoryImages;
@Input() selectNodeId: string;
@Input() filterText: string;
@ -60,6 +61,7 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy
}
},
useVirtualScroll: true,
scrollOnActivate: false,
levelPadding: 20,
allowDrag: true,
allowDrop: true
@ -113,6 +115,10 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy
this.deselectActiveNode();
}
});
this.categoryIcons$.pipe(takeUntil(this.destroy$)).subscribe((categoryIcons) => {
this.categoryIcons = categoryIcons;
});
}
ngAfterViewChecked(): void {
@ -168,14 +174,10 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy
}
}
getCategoryIcon(category: string): Observable<Pair<string, string>> {
return this.categoryIcons$.pipe(
map((iconMap) =>
iconMap[category]
? { left: iconMap[category], right: category }
: { left: iconMap.missing, right: 'Category does not match with the configuration' }
)
);
getCategoryIcon(category: string): Pair<string, string> {
return this.categoryIcons[category]
? { left: this.categoryIcons[category], right: category }
: { left: this.categoryIcons.missing, right: 'Category does not match with the configuration' };
}
switchTaskanaSpinner(active: boolean) {