From 2788544c6aaa38429fae06b44fe40072d00c2dbd Mon Sep 17 00:00:00 2001 From: hawkgs Date: Thu, 19 Jun 2025 14:23:15 +0300 Subject: [PATCH] refactor(devtools): introduce input styles (#62215) Add global styles for input elements. PR Close #62215 --- .../devtools-tabs.component.html | 106 +++++++++--------- .../devtools-tabs.component.scss | 13 ++- .../filter/filter.component.scss | 2 +- .../profiler/profiler.component.html | 1 + ...recording-timeline-controls.component.html | 2 +- .../visualizer-controls.component.html | 2 +- .../ng-devtools/src/styles/BUILD.bazel | 10 ++ .../ng-devtools/src/styles/_global.scss | 8 +- .../ng-devtools/src/styles/_inputs.scss | 58 ++++++++++ 9 files changed, 135 insertions(+), 67 deletions(-) create mode 100644 devtools/projects/ng-devtools/src/styles/_inputs.scss diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html index facfc6fc6f7..a04259fa95f 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html @@ -7,65 +7,67 @@ [color]="'accent'" [tabPanel]="tabPanel" > - +
+ - + @for (frame of frameManager.frames(); track frame.id) { + + } @empty { + + } + + + @for (tab of tabs(); track $index) { + + {{ tab }} + } - + @if (angularVersion()) { +
+ Angular version: - @for (tab of tabs(); track $index) { - - {{ tab }} - - } - @if (angularVersion()) { -
- Angular version: - - @if (majorAngularVersion() > 12 || majorAngularVersion() == 0) { - - {{ angularVersion() }} - - } @else { - + {{ angularVersion() }} + + } @else { + - {{ angularVersion() }} (unsupported) - - } + class="unsupported-version" + > + {{ angularVersion() }} (unsupported) + + } - | DevTools: {{ extensionVersion() }} -
- } + | DevTools: {{ extensionVersion() }} +
+ } +
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss index 1e8be60d54e..88f80df2b2f 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss @@ -14,6 +14,13 @@ nav { border-bottom: 1px solid var(--color-separator); + + .nav-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + } } #nav-buttons { @@ -99,10 +106,6 @@ mat-icon { } .frame-selector { - border-radius: 2px; - border: none; - margin: 4px 4px 2px 4px; - padding: 2px; - outline-offset: -2px; width: 100px; + margin: 0 0.5rem; } diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss index f6bd6926c11..3e21619db80 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss @@ -24,7 +24,7 @@ .filter-input { border: none; - padding-left: 5px; + padding: 1px; width: 100%; height: 30px; outline: none; diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.html index f2970447478..e8d116154f2 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.html +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.html @@ -19,6 +19,7 @@
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/visualizer-controls/visualizer-controls.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/visualizer-controls/visualizer-controls.component.html index f0fd384ed96..74251ee2ba2 100644 --- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/visualizer-controls/visualizer-controls.component.html +++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/visualizer-controls/visualizer-controls.component.html @@ -30,7 +30,7 @@ } - diff --git a/devtools/projects/ng-devtools/src/styles/BUILD.bazel b/devtools/projects/ng-devtools/src/styles/BUILD.bazel index b0e0c613776..24431779725 100644 --- a/devtools/projects/ng-devtools/src/styles/BUILD.bazel +++ b/devtools/projects/ng-devtools/src/styles/BUILD.bazel @@ -15,6 +15,7 @@ sass_library( srcs = ["_global.scss"], deps = [ ":colors", + ":inputs", ":material_sass_deps", ":typography", ], @@ -38,6 +39,15 @@ sass_library( ], ) +sass_library( + name = "inputs", + srcs = ["_inputs.scss"], + deps = [ + ":theme", + ":typography", + ], +) + sass_library( name = "typography", srcs = [ diff --git a/devtools/projects/ng-devtools/src/styles/_global.scss b/devtools/projects/ng-devtools/src/styles/_global.scss index 06a6132514c..671b0789298 100644 --- a/devtools/projects/ng-devtools/src/styles/_global.scss +++ b/devtools/projects/ng-devtools/src/styles/_global.scss @@ -4,6 +4,7 @@ @use 'external/npm/node_modules/@angular/material/index' as mat; @use './colors' as clr; @use './typography' as tg; +@use './inputs'; @include mat.all-component-typographies(); @include mat.core(); @@ -114,13 +115,6 @@ body { @extend %body-01; } -input, -select { - color: var(--primary-contrast); - background: var(--color-foreground); - @extend %body-01; -} - ng-devtools { .mdc-card { padding: 4px; diff --git a/devtools/projects/ng-devtools/src/styles/_inputs.scss b/devtools/projects/ng-devtools/src/styles/_inputs.scss new file mode 100644 index 00000000000..29ab0461586 --- /dev/null +++ b/devtools/projects/ng-devtools/src/styles/_inputs.scss @@ -0,0 +1,58 @@ +/* Global input styles */ +@use './typography'; +@use './theme' as theme; + +.ng-input, +.ng-select, +.ng-textarea { + @extend %body-01; + color: var(--primary-contrast); + background: var(--color-foreground); + border: none; + padding: 0.375rem 0.75rem; + border-radius: 2rem; +} + +.ng-input { + &::placeholder { + color: var(--tertiary-contrast); + } + + &.size-mid { + padding: 0.25rem 0.75rem; + } + + &.size-compact { + padding: 0.1rem 0.5rem; + } +} + +.ng-select { + position: relative; + appearance: none; + padding-right: 2rem; + display: inline-block; + background-repeat: no-repeat; + background-size: 18px; + background-position: top 50% right 0.375rem; + background-image: url('data:image/svg+xml;utf-8,'); + + &.size-mid { + padding: 0.25rem 2rem 0.25rem 0.75rem; + } + + &.size-compact { + padding: 0.1rem 2rem 0.1rem 0.5rem; + } +} + +/* We can't use the theme mixins on top-level styles due to `:host-context` */ +:root.#{theme.$dark-theme-class} { + .ng-select { + background-image: url('data:image/svg+xml;utf-8,'); + } +} + +.ng-textarea { + border-radius: 0.75rem; +}