8000 feat(signal-graph): clean up styling · angular/angular@97d9d59 · GitHub
[go: up one dir, main page]
Skip to content {"props":{"docsUrl":"https://docs.github.com/get-started/accessibility/keyboard-shortcuts"}}

Commit 97d9d59

Browse files
AleksanderBodurrimilomg
AleksanderBodurri
authored and
milomg
committed
feat(signal-graph): clean up styling
Polishes styling for signal graph nodes, popup and activation button.
1 parent c75ee9a commit 97d9d59

File tree

7 files changed

+115
-24
lines changed

7 files changed

+115
-24
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,8 @@
2222
} @else {
2323
<div class="element-header">
2424
<div class="element-name">{{ currentSelectedElement().element }}</div>
25+
<button ng-button type="button" size="compact" (click)="showGraph($event)">
26+
Show Signal Graph
27+
</button>
2528
</div>
2629
}

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

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,55 @@
22
@if (selectedNode()) {
33
<div class="overlay">
44
<div class="header">
5-
<button (click)="gotoSource()">
5+
<button mat-flat-button (click)="gotoSource()">
66
<mat-icon> arrow_outward </mat-icon>
7+
View Source
78
</button>
8-
<button (click)="toggleLogging()">
9+
<button mat-flat-button (click)="toggleLogging()">
910
<mat-icon> terminal </mat-icon>
11+
Log Signal
1012
</button>
1113
</div>
12-
<div>Name: {{selectedNode()!.label ?? 'Unnamed'}}</div>
13-
<div>Type: {{selectedNode()!.kind}}</div>
14-
<div>Epoch: {{selectedNode()!.epoch}}</div>
1514

16-
<ng-signals-value-tree [dataSource]="dataSource()!" [treeControl]="treeControl()" />
15+
<div class="signal-metadata">
16+
@if (selectedNode()?.label) {
17+
<div class="metadata-field">
18+
<div class="metadata-field-label">Name:</div>
19+
<div>{{selectedNode()!.label}}</div>
20+
</div>
21+
}
22+
<div class="metadata-field">
23+
<div class="metadata-field-label">Type:</div>
24+
<div>{{selectedNode()!.kind}}</div>
25+
</div>
26+
<div class="metadata-field">
27+
<div class="metadata-field-label">Epoch:</div>
28+
<div>{{selectedNode()!.epoch}}</div>
29+
</div>
30+
</div>
31+
32+
@if (selectedNode()) {
33+
@switch (selectedNode()!.kind) {
34+
@case ('computed') {
35+
@if (selectedNode()?.preview?.preview === 'undefined') {
36+
Computed signal value is undefined.
37+
} @else {
38+
<ng-signals-value-tree [dataSource]="dataSource()!" [treeControl]="treeControl()" />
39+
}
40+
}
41+
42+
@case ('signal') {
43+
@if (selectedNode()?.preview?.preview === 'undefined') {
44+
Signal value is undefined.
45+
} @else {
46+
<ng-signals-value-tree [dataSource]="dataSource()!" [treeControl]="treeControl()" />
47+
}
48+
}
49+
}
50+
}
1751
</div>
1852
}
1953
@if (empty()) {
2054
<div class="no-signals">No signals in this component</div>
2155
}
22-
<button (click)="close.emit()" class="close"><mat-icon>close</mat-icon></button>
56+
<button mat-icon-button (click)="close.emit()" class="close"><mat-icon>close</mat-icon></button>

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

Lines changed: 49 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
display: block;
99
width: 100%;
1010
height: 100%;
11+
color: white;
12+
1113
::ng-deep {
1214
.node-label {
1315
box-sizing: border-box;
@@ -21,51 +23,54 @@
2123
text-align: center;
2224
word-wrap: break-word;
2325
border-radius: 8px;
24-
background-color: #ffaaaa;
26+
background-color: var(--red-03);
27+
cursor: pointer;
2528
transition: border-width 0.25s ease-in-out;
2629
border: 0px solid black;
2730
&.animating {
2831
border-width: 5px;
2932
}
3033
.header {
31-
width: 100%;
34+
width: 85%;
3235
overflow: hidden;
3336
text-overflow: ellipsis;
3437
white-space: nowrap;
35-
background-color: #bb6666;
38+
padding: 7.5%;
39+
background-color: var(--red-06);
3640
}
3741
.body {
3842
flex: 1;
3943
}
4044
}
4145
.selected rect {
42-
stroke: black;
43-
stroke-width: 2px;
46+
stroke: var(--dynamic-blue-02);
47+
stroke-width: 3px;
4448
ry: 8px;
4549
rx: 8px;
4650
}
51+
4752
.kind-signal {
48-
background-color: #aaaaff;
53+
background-color: var(--blue-02);
4954
.header {
50-
background-color: #6666bb;
55+
background-color: var(--blue-01);
5156
}
5257
}
5358
.kind-computed {
54-
background-color: #aaffaa;
59+
background-color: var(--green-02);
5560
.header {
56-
background-color: #66bb66;
61+
background-color: var(--green-01);
5762
}
5863
}
5964
.kind-effect {
60-
background-color: #ffffaa;
65+
background-color: var(--transparent-04);
6166
.header {
62-
background-color: #bbbb66;
67+
background-color: var(--color-tree-node-highlighted);
6368
}
6469
}
6570
.kind-template {
66-
background-color: #aaaaaa;
71+
background-color: var(--gray-400);
6772
.header {
68-
background-color: #666666;
73+
background-color: var(--gray-700);
6974
}
7075
}
7176
}
@@ -74,8 +79,10 @@
7479
position: absolute;
7580
bottom: 8px;
7681
right: 8px;
77-
border: 1px solid black;
82+
border: 1px solid var(--full-contrast);
7883
border-radius: 8px;
84+
background: var(--color-background);
85+
padding: 8px;
7986
}
8087
.no-signals {
8188
position: absolute;
@@ -94,3 +101,31 @@
94101
right: 8px;
95102
}
96103
}
104+
105+
ng-signals-value-tree {
106+
margin-top: 8px;
107+
border: 1px solid var(--tertiary-contrast);
108+
}
109+
110+
.signal-metadata {
111+
display: flex;
112+
background-color: var(--color-background);
113+
color: var(--color-text);
114+
flex-direction: column;
115+
116+
.metadata-field {
117+
display: flex;
118+
119+
&:not(:first-child) {
120+
border-top: 1px solid var(--tertiary-contrast);
121+
}
122+
123+
.metadata-field-label {
124+
background: var(--color-foreground);
125+
padding-right: 2px;
126+
margin-right: 4px;
127+
min-width: 40px;
128+
border-right: 1px solid var(--tertiary-contrast);
129+
}
130+
}
131+
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,13 @@ import {MatTreeFlattener} from '@angular/material/tree';
2626
import {MatIcon} from '@angular/material/icon';
2727
import {ApplicationOperations} from '../../../application-operations/index';
2828
import {FrameManager} from '../../../application-services/frame_manager';
29+
import {MatButton, MatIconButton} from '@angular/material/button';
2930

3031
@Component({
3132
templateUrl: './signals-tab.component.html',
3233
selector: 'ng-signals-tab',
3334
styleUrl: './signals-tab.component.scss',
34-
imports: [SignalsValueTreeComponent, MatIcon],
35+
imports: [SignalsValueTreeComponent, MatIcon, MatIconButton, MatButton],
3536
})
3637
export class SignalsTabComponent {
3738
private svgComponent = viewChild.required<ElementRef>('component');

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signals-view/signals-visualizer.ts

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export class SignalsGraphVisualizer {
104104
header.textContent = node.label ?? 'Unnamed';
105105
const body = document.createElement('div');
106106
body.className = 'body';
107-
body.textContent = node.preview.preview;
107+
body.textContent = getBodyText(node);
108108
outer.appendChild(header);
109109
outer.appendChild(body);
110110
return outer;
@@ -187,3 +187,19 @@ export class SignalsGraphVisualizer {
187187
]);
188188
}
189189
}
190+
191+
function getBodyText(node: DebugSignalGraphNode): string {
192+
if (node.kind === 'signal' || node.kind === 'computed') {
193+
return node.preview.preview;
194+
}
195+
196+
if (node.kind === 'template') {
197+
return '</>';
198+
}
199+
200+
if (node.kind === 'effect') {
201+
return '() => {}';
202+
}
203+
204+
return '';
205+
}

‎devtools/projects/ng-devtools/src/styles/_colors.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ $_colors: (
6868
--dynamic-red-01: var(--red-03);
6969
--dynamic-red-02: var(--red-06);
7070
--dynamic-green-01: var(--green-01);
71+
--dynamic-green-02: var(--green-03);
7172
--dynamic-blue-01: var(--blue-05);
7273
--dynamic-blue-02: var(--blue-02);
7374
--dynamic-purple-01: var(--purple-01);
@@ -109,6 +110,7 @@ $_colors: (
109110
--dynamic-red-01: var(--red-05);
110111
--dynamic-red-02: var(--red-01);
111112
--dynamic-green-01: var(--green-03);
113+
--dynamic-green-02: var(--green-01);
112114
--dynamic-blue-01: var(--blue-01);
113115
--dynamic-blue-02: var(--blue-03);
114116
--dynamic-purple-01: var(--purple-03);

‎devtools/src/app/demo-app/sample-properties.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {SampleService} from './sample.service';
1313

1414
@Component({
1515
selector: 'app-sample-properties',
16-
template: '',
16+
template: '{{computedObject()}}',
1717
styles: [''],
1818
})
1919
export class SamplePropertiesComponent {

0 commit comments

Comments
 (0)
0