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

fix(devtools): directive-forest minor UI fixes (#64426)

Browse Source 
- Fix the hydration icons when the text from the nodes exceeds the component width
- Align and slightly enlarge the arrow icons

PR Close #64426
This commit is contained in:
hawkgs
2025-10-15 10:20:50 +03:00
committed by Jessica Janiuk
parent 570ea346e3
commit 134ff540b5
2 changed files with 33 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/tree-node/tree-node.component.html
+1 -1
View File
@@ -48,7 +48,7 @@
<mat-icon matTooltip="Hydrated" class="hydration">water_drop</mat-icon>
}
@case ('dehydrated') {
<mat-icon matTooltip="Dehydrated" class="hydration skipped">pending</mat-icon>
<mat-icon matTooltip="Dehydrated" class="hydration skipped">water_do</mat-icon>
}
@case ('skipped') {
devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/tree-node/tree-node.component.scss
+32 -12
View File
@@ -6,20 +6,31 @@
cursor: default;
@extend %monospaced;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
&:hover {
background-color: var(--color-tree-node-hovered);
.tree-node-info > .hydration {
background-color: var(--color-tree-node-hovered);
}
}
&.selected,
&.highlighted {
background-color: var(--color-tree-node-highlighted);
.tree-node-info > .hydration {
background-color: var(--color-tree-node-highlighted);
}
}
&.new-node {
animation: appear 1.5s;
.tree-node-info > .hydration {
animation: appear 1.5s;
}
}
.non-element {
@@ -28,22 +39,25 @@
.tree-node-info {
display: flex;
align-items: center;
& > button {
$size: 12px;
width: $size;
height: $size;
outline: none;
border: 0;
padding: 0;
position: absolute;
background-color: transparent;
top: 2px;
}
margin-left: 3px;
.mat-icon {
font-size: 0.8em;
width: 16px;
height: 13px;
display: inline-block;
color: var(--primary-contrast);
mat-icon {
font-size: $size;
width: $size;
height: $size;
color: var(--primary-contrast);
}
}
.node-name {
@@ -93,15 +107,21 @@
}
.hydration {
margin: auto 8px auto auto;
font-size: 14px;
$size: 14px;
margin-left: auto;
padding: 0 0.375rem 0 0.125rem;
font-size: $size;
width: $size;
height: $size;
color: var(--blue-02);
background-color: var(--color-background);
border-radius: 20%;
position: sticky;
right: 0;
&.skipped {
color: var(--senary-contrast);
color: var(--quinary-contrast);
}
&.mismatched {