nosu
/
taskana
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/app/administration/components/tree/tree.component.html
View File

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

7
web/src/app/administration/components/tree/tree.component.scss
View File

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

18
web/src/app/administration/components/tree/tree.component.ts
View File

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