Content-Length: 961111 | pFad | http://github.com/angular/angular/commit/037dede0a0e645f817c285f958128f18a3ae3424

BA refactor(devtools): improve components tab side pane UI (#60901) · angular/angular@037dede · GitHub
Skip to content

Commit 037dede

Browse files
hawkgspkozlowski-opensource
hawkgs
authored and
pkozlowski-opensource
committed
refactor(devtools): improve components tab side pane UI (#60901)
Improve the overall UI/UX. Drop the expandable containers shadows in favor of solid borders. PR Close #60901
1 parent 3a6121f commit 037dede

17 files changed

+190
-115
lines changed

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,15 @@
2828
</as-split-area>
2929
<as-split-area size="40" minSize="25" class="prop-split">
3030
<div class="property-tab-wrapper">
31-
<ng-property-tab
32-
[currentSelectedElement]="currentSelectedElement()!"
33-
(inspect)="inspect($event)"
34-
(viewSource)="viewSource($event)"
35-
/>
31+
@if (currentSelectedElement(); as currentSelectedElement) {
32+
<ng-property-tab
33+
[currentSelectedElement]="currentSelectedElement"
34+
(inspect)="inspect($event)"
35+
(viewSource)="viewSource($event)"
36+
/>
37+
} @else {
38+
<p class="no-selected-element">No selected element</p>
39+
}
3640
</div>
3741
@if (isHydrationEnabled) {
3842
<div class="hydration">

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@
2121
flex: 1;
2222
overflow: auto;
2323
width: 100%;
24+
25+
.no-selected-element {
26+
text-align: center;
27+
padding: 1rem;
28+
}
2429
}
2530

2631
.hydration {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.meta-data-container {
22
display: flex;
33
flex-direction: column;
4-
padding: 0.75rem;
4+
padding: 0.25rem 0.75rem;
55
}
66

77
.meta-data-container a {

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

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,21 @@
1-
@if (currentSelectedElement()) {
2-
@let comp = currentSelectedElement().component;
3-
@if (comp) {
4-
<mat-accordion class="property-tab-header">
5-
<div>
6-
<mat-expansion-panel [hideToggle]="true">
7-
<mat-expansion-panel-header collapsedHeight="32px" expandedHeight="32px">
8-
<mat-panel-title>
9-
<div class="element-header">
10-
<div class="component-name">{{ comp.name }}</div>
11-
</div>
12-
</mat-panel-title>
13-
</mat-expansion-panel-header>
14-
<ng-component-metadata [currentSelectedComponent]="comp"></ng-component-metadata>
15-
</mat-expansion-panel>
16-
</div>
17-
</mat-accordion>
18-
} @else {
19-
<div class="element-header">
20-
<div class="element-name">{{ currentSelectedElement().element }}</div>
1+
@let comp = currentSelectedElement().component;
2+
@if (comp) {
3+
<mat-accordion class="property-tab-header">
4+
<div>
5+
<mat-expansion-panel [hideToggle]="true">
6+
<mat-expansion-panel-header collapsedHeight="32px" expandedHeight="32px">
7+
<mat-panel-title>
8+
<div class="element-header">
9+
<div class="component-name">{{ comp.name }}</div>
10+
</div>
11+
</mat-panel-title>
12+
</mat-expansion-panel-header>
13+
<ng-component-metadata [currentSelectedComponent]="comp"></ng-component-metadata>
14+
</mat-expansion-panel>
2115
</div>
22-
}
16+
</mat-accordion>
2317
} @else {
2418
<div class="element-header">
25-
<div class="element-name">No selected Element</div>
19+
<div class="element-name">{{ currentSelectedElement().element }}</div>
2620
</div>
2721
}

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
@use '../../../../styles/typography';
22

3+
:host {
4+
border-bottom: 1px solid var(--color-separator);
5+
display: block;
6+
}
7+
38
.element-header {
9+
@extend %body-bold-01;
410
display: flex;
511
justify-content: space-between;
612
width: 100%;
713
align-items: center;
8-
padding: 0.375rem 0;
9-
@extend %body-bold-01;
14+
height: 32px; /* Same as mat-expansion-panel-header height */
1015

1116
.component-name,
1217
.element-name {
13-
margin-left: 10px;
18+
margin-left: 0.625rem;
1419
}
1520
}
1621

@@ -22,6 +27,9 @@
2227

2328
&.mat-accordion {
2429
.mat-expansion-panel {
30+
border: none;
31+
box-shadow: none;
32+
2533
.mat-expansion-panel-header {
2634
padding: 0;
2735

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
<ng-property-tab-header [currentSelectedElement]="currentSelectedElement()">
2-
</ng-property-tab-header>
1+
<ng-property-tab-header [currentSelectedElement]="currentSelectedElement()" />
32
<ng-property-tab-body
43
(inspect)="inspect.emit($event)"
54
(viewSource)="viewSource.emit($event)"
65
[currentSelectedElement]="currentSelectedElement()"
7-
>
8-
</ng-property-tab-body>
6+
/>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ _STYLE_SRCS = [
1111
"property-view-body.component.scss",
1212
"property-view-header.component.scss",
1313
"property-view-tree.component.scss",
14+
"dependency-viewer.component.scss",
1415
]
1516

1617
_STYLE_LABELS = [
@@ -32,6 +33,7 @@ _STYLE_LABELS = [
3233
ng_module(
3334
name = "property-view",
3435
srcs = [
36+
"dependency-viewer.component.ts",
3537
"property-editor.component.ts",
3638
"property-preview.component.ts",
3739
"property-tab-body.component.ts",
@@ -48,6 +50,7 @@ ng_module(
4850
"property-preview.component.html",
4951
"property-editor.component.html",
5052
"property-tab-body.component.html",
53+
"dependency-viewer.component.html",
5154
] + _STYLE_LABELS,
5255
deps = [
5356
"//devtools/projects/ng-devtools/src/lib/application-environment",

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<mat-accordion class="example-headers-align" multi>
2+
<mat-expansion-panel>
3+
<mat-expansion-panel-header collapsedHeight="2.5rem" expandedHeight="2.5rem">
4+
<div class="dep-data">
5+
<div class="dep-pill" matTooltipPosition="left" matTooltip="Dependency injection token">
6+
{{ dependency().token }}
7+
</div>
8+
@if (dependency().flags?.optional) {
9+
<div class="dep-pill flagged">Optional</div>
10+
}
11+
@if (dependency().flags?.host) {
12+
<div class="dep-pill flagged">Host</div>
13+
}
14+
@if (dependency().flags?.self) {
15+
<div class="dep-pill flagged">Self</div>
16+
}
17+
@if (dependency().flags?.skipSelf) {
18+
<div class="dep-pill flagged">SkipSelf</div>
19+
}
20+
</div>
21+
</mat-expansion-panel-header>
22+
<ng-resolution-path [path]="dependency().resolutionPath!"></ng-resolution-path>
23+
</mat-expansion-panel>
24+
</mat-accordion>

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/dependency-viewer.component.scss

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@import '../../../../../styles/typography';
2+
3+
:host {
4+
.dep-data {
5+
display: flex;
6+
flex-wrap: nowrap;
7+
gap: 0.5rem;
8+
width: 100%;
9+
padding-right: 0.5rem;
10+
box-sizing: border-box;
11+
12+
.dep-pill {
13+
background: color-mix(in srgb, var(--quinary-contrast), var(--senary-contrast));
14+
padding: 0.125rem 0.5rem;
15+
border-radius: 1rem;
16+
white-space: nowrap;
17+
text-overflow: ellipsis;
18+
overflow: hidden;
19+
@extend %body-01;
20+
21+
&.flagged {
22+
background: var(--quinary-contrast);
23+
}
24+
}
25+
}
26+
27+
.mat-expansion-panel {
28+
position: relative;
29+
border-bottom: none;
30+
background: none;
31+
32+
mat-expansion-panel-header {
33+
padding-right: 1.2rem;
34+
}
35+
}
36+
37+
&:not(:last-of-type) {
38+
.mat-expansion-panel {
39+
&::after {
40+
content: '';
41+
position: absolute;
42+
width: calc(100% - 1rem);
43+
height: 1px;
44+
background: color-mix(in srgb, var(--quinary-contrast), var(--senary-contrast));
45+
bottom: 0;
46+
left: 0.5rem;
47+
}
48+
49+
&.mat-expanded {
50+
&::after {
51+
width: 100%;
52+
left: 0;
53+
}
54+
}
55+
}
56+
}
57+
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
9+
import {Component, input} from '@angular/core';
10+
import {SerializedInjectedService} from 'protocol';
11+
import {ResolutionPathComponent} from '../../../dependency-injection/resolution-path/resolution-path.component';
12+
import {MatTooltip} from '@angular/material/tooltip';
13+
import {MatExpansionModule} from '@angular/material/expansion';
14+
15+
@Component({
16+
selector: 'ng-dependency-viewer',
17+
templateUrl: './dependency-viewer.component.html',
18+
styleUrl: './dependency-viewer.component.scss',
19+
imports: [MatExpansionModule, MatTooltip, ResolutionPathComponent],
20+
})
21+
export class DependencyViewerComponent {
22+
readonly dependency = input.required<SerializedInjectedService>();
23+
}

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
@if (currentSelectedElement()) {
2-
@for (directive of currentDirectives(); track $index) {
3-
<div class="explorer-panel">
4-
<ng-property-view
5-
(inspect)="inspect.emit($event)"
6-
(viewSource)="viewSource.emit(directive.name)"
7-
[directive]="directive"
8-
/>
9-
</div>
10-
}
1+
@for (directive of currentDirectives(); track $index) {
2+
<div class="explorer-panel">
3+
<ng-property-view
4+
(inspect)="inspect.emit($event)"
5+
(viewSource)="viewSource.emit(directive.name)"
6+
[directive]="directive"
7+
/>
8+
</div>
119
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
::ng-deep {
2+
.mat-expansion-panel {
3+
border-bottom: 1px solid var(--color-separator);
4+
box-shadow: none !important;
5+
}
6+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@if (deps && deps.length > 0) {
55
<div class="mat-accordion-content">
66
<mat-expansion-panel [expanded]="true">
7-
<mat-expansion-panel-header collapsedHeight="25px" expandedHeight="25px">
7+
<mat-expansion-panel-header collapsedHeight="28px" expandedHeight="28px">
88
<mat-panel-title>
99
Injected Services
1010
<a
@@ -26,7 +26,7 @@
2626
<div class="mat-accordion-content" cdkDrag>
2727
@if (panel.controls().dataSource.data.length > 0) {
2828
<mat-expansion-panel [expanded]="true">
29-
<mat-expansion-panel-header collapsedHeight="25px" expandedHeight="25px">
29+
<mat-expansion-panel-header collapsedHeight="28px" expandedHeight="28px">
3030
<mat-panel-title>{{ panel.title() }}</mat-panel-title>
3131
</mat-expansion-panel-header>
3232
<ng-property-view-tree

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,6 @@
66
border-radius: unset !important;
77
}
88

9-
.mat-expansion-panel {
10-
box-shadow:
11-
0 -2px 5px -2px var(--dynamic-transparent-02),
12-
0 2px 5px 0 var(--dynamic-transparent-02);
13-
}
14-
159
.mat-expansion-panel-body {
1610
padding: 0;
1711
}

0 commit comments

Comments
 (0)








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/angular/angular/commit/037dede0a0e645f817c285f958128f18a3ae3424

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy