skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(devtools): prevent dblclick on the expand arrow to show the element panel (#54912)

Browse Source 
This will improve the UX

PR Close #54912
This commit is contained in:
Matthieu Riegler
2024-03-17 15:18:13 +01:00
committed by Andrew Kushnir
parent 54de0f3f0b
commit e0096ef945
2 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.html
+15 -13
View File
@@ -21,19 +21,21 @@
(mouseleave)="removeHighlight()"
[style.padding-left]="15 + 15 * node.level + 'px'"
>
<div class="tree-node-info">
@if (node.expandable) {
<button
[style.left]="15 * node.level + 'px'"
(click)="treeControl.toggle(node)"
[attr.aria-label]="'toggle ' + node.name"
>
<mat-icon class="mat-icon-rtl-mirror">
{{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
</mat-icon>
</button>
}
<span class="element-name" [class.angular-element]="isElement(node)">{{ node.name }}</span>
<div class="tree-node-info">
@if (node.expandable) {
<!-- We stop propagration on dblClick to prevent to show the element panel -->
<button
[style.left]="15 * node.level + 'px'"
(click)="treeControl.toggle(node)"
(dblclick)="stopPropagation($event)"
[attr.aria-label]="'toggle ' + node.name"
>
<mat-icon class="mat-icon-rtl-mirror">
{{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
</mat-icon>
</button>
}
<span class="element-name" [class.angular-element]="isElement(node)">{{ node.name }}</span>
@if (node.directives) {
<span class="dir-names">[{{ node.directives }}]</span>
devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts
+4
View File
@@ -344,6 +344,10 @@ export class DirectiveForestComponent {
}
}
stopPropagation(event: Event): void {
event.stopPropagation();
}
private _findMatchedNodes(): number[] {
const indexesOfMatchedNodes: number[] = [];
for (let i = 0; i < this.dataSource.data.length; i++) {