10000 refactor(devtools): style the show graph button; add property show gr… · angular/angular@78472e1 · GitHub
[go: up one dir, main page]
Skip to content

Commit 78472e1

Browse files
hawkgsmilomg
hawkgs
authored and
milomg
committed
refactor(devtools): style the show graph button; add property show graph button
Change the toggle button to a "Show graph" button as per the doc; Add "Show graph" button to the signal properties in the side pane.
1 parent 3c1d6a5 commit 78472e1

21 files changed

+213
-27
lines changed

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<as-split-area size="70">
2929
<ng-signals-tab
3030
[currentElement]="currentSelectedElement.position"
31-
(close)="closeSignalsTab()"
31+
(close)="signalsOpen.set(false)"
3232
#signalsTab
3333
/>
3434
</as-split-area>
@@ -40,7 +40,8 @@
4040
@if (currentSelectedElement(); as currentSelectedElement) {
4141
<ng-property-tab
4242
[currentSelectedElement]="currentSelectedElement"
43-
[toggleSignalGraph]="signals() ? toggleSignalGraph : undefined"
43+
[signalGraphAvailable]="!!signals()"
44+
(showSignalGraph)="showSignalGraph($event)"
4445
(inspect)="inspect($event)"
4546
(viewSource)="viewSource($event)"
4647
/>

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,6 @@ export class DirectiveExplorerComponent {
120120
private readonly _frameManager = inject(FrameManager);
121121

122122
private readonly platform = inject(Platform);
123-
124123
private readonly snackBar = inject(MatSnackBar);
125124

126125
constructor() {
@@ -348,11 +347,8 @@ export class DirectiveExplorerComponent {
348347
}
349348
}
350349

351-
closeSignalsTab() {
352-
this.signalsOpen.set(false);
353-
}
354-
355-
toggleSignalGraph = () => {
356-
this.signalsOpen.set(!this.signalsOpen())
350+
showSignalGraph(node: PropertyFlatNode | null) {
351+
// TBD: Use the node argument for graph node selection/highlighting.
352+
this.signalsOpen.set(true);
357353
}
358354
}

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ ng_project(
4848
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver:property-resolver_rjs",
4949
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/defer-view:defer-view_rjs",
5050
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view:property-view_rjs",
51+
"//devtools/projects/ng-devtools/src/lib/shared/button:button_rjs",
5152
"//devtools/projects/protocol:protocol_rjs",
5253
],
5354
)

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77
<mat-panel-title>
88
<div class="element-header">
99
<div class="component-name">{{ comp.name }}</div>
10+
@if (signalGraphAvailable()) {
11+
<button ng-button type="button" size="compact" (click)="showGraph($event)">
12+
Show Signal Graph
13+
</button>
14+
}
1015
</div>
1116
</mat-panel-title>
12-
@if (toggleSignalGraph()) {
13-
<button (click)="handleToggleSignalGraph($event)">
14-
<mat-icon> schema </mat-icon>
15-
</button>
16-
}
1717
</mat-expansion-panel-header>
1818
<ng-component-metadata [currentSelectedComponent]="comp"></ng-component-metadata>
1919
</mat-expansion-panel>

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header.component.ts

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,26 @@
77
*/
88

99
import {ChangeDetectionStrategy, Component, input, output} from '@angular/core';
10+
import {MatExpansionModule} from '@angular/material/expansion';
1011

1112
import {IndexedNode} from '../directive-forest/index-forest';
1213
import {ComponentMetadataComponent} from './component-metadata.component';
13-
import {MatExpansionModule} from '@angular/material/expansion';
14-
import {MatIcon} from '@angular/material/icon';
14+
import {ButtonComponent} from '../../../shared/button/button.component';
1515

1616
@Component({
1717
templateUrl: './property-tab-header.component.html',
1818
selector: 'ng-property-tab-header',
1919
styleUrls: ['./property-tab-header.component.scss'],
2020
changeDetection: ChangeDetectionStrategy.OnPush,
21-
imports: [MatExpansionModule, ComponentMetadataComponent, MatIcon],
21+
imports: [MatExpansionModule, ComponentMetadataComponent, ButtonComponent],
2222
})
2323
export class PropertyTabHeaderComponent {
24-
currentSelectedElement = input.required<IndexedNode>();
25-
toggleSignalGraph = input<() =>void>();
24+
readonly currentSelectedElement = input.required<IndexedNode>();
25+
readonly signalGraphAvailable = input<boolean>(false);
26+
readonly showSignalGraph = output<void>();
2627

27-
handleToggleSignalGraph(event: MouseEvent) {
28+
showGraph(event: Event) {
2829
event.stopPropagation();
29-
// we don't show the button unless toggleSignalGraph is defined
30-
const toggleSignalGraphFn = this.toggleSignalGraph()!;
31-
toggleSignalGraphFn();
30+
this.showSignalGraph.emit();
3231
}
3332
}

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
@if (currentSelectedElement) {
44
<ng-property-tab-header
55
[currentSelectedElement]="currentSelectedElement"
6-
[toggleSignalGraph]="toggleSignalGraph()"
6+
[signalGraphAvailable]="signalGraphAvailable()"
7+
(showSignalGraph)="showSignalGraph.emit(null)"
78
/>
89
<ng-property-tab-body
910
(inspect)="inspect.emit($event)"
1011
(viewSource)="viewSource.emit($event)"
12+
(showSignalGraph)="showSignalGraph.emit($event)"
1113
[currentSelectedElement]="currentSelectedElement"
1214
/>
1315

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ import {DeferViewComponent} from './defer-view/defer-view.component';
2323
})
2424
export class PropertyTabComponent {
2525
readonly currentSelectedElement = input.required<IndexedNode | null>();
26+
readonly signalGraphAvailable = input<boolean>(false);
27+
2628
readonly viewSource = output<string>();
2729
readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
28-
readonly toggleSignalGraph = input<() => void>();
30+
readonly showSignalGraph = output<FlatNode | null>();
2931
}

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<ng-property-view
44
(inspect)="inspect.emit($event)"
55
(viewSource)="viewSource.emit(directive.name)"
6+
(showSignalGraph)="showSignalGraph.emit($event)"
67
[directive]="directive"
78
/>
89
</div>

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-tab-body.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export class PropertyTabBodyComponent {
2323
readonly currentSelectedElement = input.required<IndexedNode>();
2424
readonly inspect = output<{node: FlatNode; directivePosition: DirectivePosition}>();
2525
readonly viewSource = output<string>();
26+
readonly showSignalGraph = output<FlatNode>();
2627

2728
readonly currentDirectives = computed(() => {
2829
const selected = this.currentSelectedElement();

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
[treeControl]="panel.controls().treeControl"
3535
(updateValue)="updateValue($event)"
3636
(inspect)="handleInspect($event)"
37+
(showSignalGraph)="showSignalGraph.emit($event)"
3738
/>
3839
</mat-expansion-panel>
3940
}

0 commit comments

Comments
 (0)
0