Skip to content

Commit 832d428

Browse files
hawkgsatscott
hawkgs
authored and
atscott
committed
refactor(devtools): change upstream and downstream signal deps icons
Update the icons with better custom ones; Introduce an icon component and an assets folder.
1 parent 71c9c6d commit 832d428

11 files changed

Lines changed: 128 additions & 3 deletions

File tree

‎devtools/projects/ng-devtools/src/assets/BUILD.bazel‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
package(default_visibility = ["//devtools:__subpackages__"])
2+
3+
filegroup(
4+
name = "assets",
5+
srcs = glob(
6+
include = [
7+
"*.svg",
8+
],
9+
allow_empty = True,
10+
),
11+
)

‎devtools/projects/ng-devtools/src/assets/sprite.svg‎

Lines changed: 20 additions & 0 deletions
Loading

‎devtools/projects/ng-devtools/src/lib/shared/icon/BUILD.bazel‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
load("//devtools/tools:defaults.bzl", "ng_project", "sass_binary")
2+
3+
package(default_visibility = ["//devtools:__subpackages__"])
4+
5+
sass_binary(
6+
name = "icon_component_styles",
7+
src = "icon.component.scss",
8+
deps = [
9+
"//devtools/projects/ng-devtools/src/styles:typography",
10+
],
11+
)
12+
13+
ng_project(
14+
name = "icon",
15+
srcs = ["icon.component.ts"],
16+
angular_assets = [
17+
":icon_component_styles",
18+
],
19+
deps = [
20+
"//:node_modules/@angular/core",
21+
],
22+
)

‎devtools/projects/ng-devtools/src/lib/shared/icon/icon.component.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
$default-size: 16px;
2+
3+
:host {
4+
position: relative;
5+
display: block;
6+
width: var(--icon-size, $default-size);
7+
height: var(--icon-size, $default-size);
8+
9+
svg {
10+
position: absolute;
11+
top: 0;
12+
left: 0;
13+
fill: var(--icon-color, currentColor);
14+
stroke: var(--icon-color, currentColor);
15+
width: inherit;
16+
height: inherit;
17+
}
18+
}

‎devtools/projects/ng-devtools/src/lib/shared/icon/icon.component.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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+
11+
export type IconName = 'graph_downstream' | 'graph_upstream';
12+
13+
@Component({
14+
selector: 'ng-icon',
15+
template: `
16+
<svg class="svg">
17+
<use [attr.xlink:href]="'/assets/sprite.svg#' + name()"></use>
18+
</svg>
19+
`,
20+
styleUrl: './icon.component.scss',
21+
})
22+
export class IconComponent {
23+
name = input.required<IconName>();
24+
}

‎devtools/projects/ng-devtools/src/lib/shared/signal-details/BUILD.bazel‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ ng_project(
2424
"//:node_modules/@angular/core",
2525
"//:node_modules/@angular/material",
2626
"//devtools/projects/ng-devtools/src/lib/shared/button",
27+
"//devtools/projects/ng-devtools/src/lib/shared/icon",
2728
"//devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-value-tree",
2829
"//devtools/projects/ng-devtools/src/lib/shared/signal-graph",
2930
"//devtools/projects/protocol",

‎devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
(click)="highlightDeps.emit({node, direction: 'down'})"
3737
matTooltip="Highlight downstream dependents path"
3838
>
39-
<mat-icon> swipe_down_alt </mat-icon>
39+
<ng-icon name="graph_downstream" />
4040
</button>
4141
<button
4242
ng-button
@@ -46,7 +46,7 @@
4646
(click)="highlightDeps.emit({node, direction: 'up'})"
4747
matTooltip="Highlight upstream dependencies path"
4848
>
49-
<mat-icon> swipe_up_alt </mat-icon>
49+
<ng-icon name="graph_upstream" />
5050
</button>
5151
</div>
5252
<button

‎devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@
3535
height: 16px;
3636
font-size: 16px;
3737
}
38+
39+
ng-icon {
40+
--icon-size: 14px;
41+
}
3842
}
3943
}
4044

‎devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
DevtoolsSignalGraph,
2323
} from '../signal-graph';
2424
import {MatTooltip} from '@angular/material/tooltip';
25+
import {IconComponent} from '../icon/icon.component';
2526

2627
const TYPE_CLASS_MAP: {[key in DebugSignalGraphNode['kind']]: string} = {
2728
'signal': 'type-signal',
@@ -49,7 +50,7 @@ interface ResourceCluster {
4950
templateUrl: './signal-details.component.html',
5051
styleUrl: './signal-details.component.scss',
5152
changeDetection: ChangeDetectionStrategy.OnPush,
52-
imports: [SignalValueTreeComponent, MatIcon, ButtonComponent, MatTooltip],
53+
imports: [SignalValueTreeComponent, MatIcon, ButtonComponent, MatTooltip, IconComponent],
5354
})
5455
export class SignalDetailsComponent {
5556
protected readonly node = input.required<DevtoolsSignalGraphNode>();

‎devtools/projects/shell-browser/src/BUILD.bazel‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,22 @@ esbuild(
8181

8282
exports_files(["index.html"])
8383

84+
copy_to_directory(
85+
name = "devtools_assets",
86+
srcs = [
87+
"//devtools/projects/ng-devtools/src/assets",
88+
],
89+
out = "assets",
90+
replace_prefixes = {
91+
"devtools/projects/ng-devtools/src/assets": "",
92+
},
93+
)
94+
8495
filegroup(
8596
name = "prod_app_static_files",
8697
srcs = [
8798
":browser_specific_styles",
99+
":devtools_assets",
88100
":index.html",
89101
":shell_common_styles",
90102
],

0 commit comments

Comments
 (0)