mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
refactor(devtools): introduce input styles (#62215)
Add global styles for input elements. PR Close #62215
This commit is contained in:
hawkgs
Jessica Janiuk
parent
2fc176d7fe
commit
2788544c6a
9 changed files with 135 additions and 67 deletions
|
|
@ -7,65 +7,67 @@
|
|||
[color]="'accent'"
|
||||
[tabPanel]="tabPanel"
|
||||
>
|
||||
<div id="nav-buttons">
|
||||
<button (click)="toggleInspector()" matTooltip="Inspect element" aria-label="Inspect element">
|
||||
<mat-icon [class.inspector-active]="inspectorRunning()"> pin_end </mat-icon>
|
||||
</button>
|
||||
<button [matMenuTriggerFor]="menu" matTooltip="Open settings" aria-label="Open settings">
|
||||
<mat-icon> settings </mat-icon>
|
||||
</button>
|
||||
<button [matMenuTriggerFor]="info" matTooltip="Info" aria-label="Info">
|
||||
<mat-icon> info </mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-wrapper">
|
||||
<div id="nav-buttons">
|
||||
<button (click)="toggleInspector()" matTooltip="Inspect element" aria-label="Inspect element">
|
||||
<mat-icon [class.inspector-active]="inspectorRunning()"> pin_end </mat-icon>
|
||||
</button>
|
||||
<button [matMenuTriggerFor]="menu" matTooltip="Open settings" aria-label="Open settings">
|
||||
<mat-icon> settings </mat-icon>
|
||||
</button>
|
||||
<button [matMenuTriggerFor]="info" matTooltip="Info" aria-label="Info">
|
||||
<mat-icon> info </mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<select
|
||||
matTooltip="Select a frame to inspect with Angular Devtools"
|
||||
class="frame-selector"
|
||||
(change)="emitSelectedFrame($event)"
|
||||
>
|
||||
@for (frame of frameManager.frames(); track frame.id) {
|
||||
<option [value]="frame.id" [selected]="frameManager.isSelectedFrame(frame)">
|
||||
@if (frame.id === TOP_LEVEL_FRAME_ID) {
|
||||
top
|
||||
} @else {
|
||||
{{ frame.name }} ({{ frame.id }})
|
||||
}
|
||||
</option>
|
||||
} @empty {
|
||||
<option value="0" selected>top</option>
|
||||
<select
|
||||
matTooltip="Select a frame to inspect with Angular Devtools"
|
||||
class="ng-select size-compact frame-selector"
|
||||
(change)="emitSelectedFrame($event)"
|
||||
>
|
||||
@for (frame of frameManager.frames(); track frame.id) {
|
||||
<option [value]="frame.id" [selected]="frameManager.isSelectedFrame(frame)">
|
||||
@if (frame.id === TOP_LEVEL_FRAME_ID) {
|
||||
top
|
||||
} @else {
|
||||
{{ frame.name }} ({{ frame.id }})
|
||||
}
|
||||
</option>
|
||||
} @empty {
|
||||
<option value="0" selected>top</option>
|
||||
}
|
||||
</select>
|
||||
|
||||
@for (tab of tabs(); track $index) {
|
||||
<a class="mat-tab-link" mat-tab-link (click)="changeTab(tab)" [active]="activeTab() === tab">
|
||||
{{ tab }}
|
||||
</a>
|
||||
}
|
||||
</select>
|
||||
@if (angularVersion()) {
|
||||
<section id="app-angular-version">
|
||||
Angular version:
|
||||
|
||||
@for (tab of tabs(); track $index) {
|
||||
<a class="mat-tab-link" mat-tab-link (click)="changeTab(tab)" [active]="activeTab() === tab">
|
||||
{{ tab }}
|
||||
</a>
|
||||
}
|
||||
@if (angularVersion()) {
|
||||
<section id="app-angular-version">
|
||||
Angular version:
|
||||
|
||||
@if (majorAngularVersion() > 12 || majorAngularVersion() == 0) {
|
||||
<span id="version-number">
|
||||
{{ angularVersion() }}
|
||||
</span>
|
||||
} @else {
|
||||
<span
|
||||
id="version-number"
|
||||
matTooltip="
|
||||
@if (majorAngularVersion() > 12 || majorAngularVersion() == 0) {
|
||||
<span id="version-number">
|
||||
{{ angularVersion() }}
|
||||
</span>
|
||||
} @else {
|
||||
<span
|
||||
id="version-number"
|
||||
matTooltip="
|
||||
Angular Devtools supports Angular versions 12 and above. Some DevTools features may be available in
|
||||
older versions of Angular, but it is not officially supported.
|
||||
"
|
||||
class="unsupported-version"
|
||||
>
|
||||
{{ angularVersion() }} (unsupported)
|
||||
</span>
|
||||
}
|
||||
class="unsupported-version"
|
||||
>
|
||||
{{ angularVersion() }} (unsupported)
|
||||
</span>
|
||||
}
|
||||
|
||||
| DevTools: {{ extensionVersion() }}
|
||||
</section>
|
||||
}
|
||||
| DevTools: {{ extensionVersion() }}
|
||||
</section>
|
||||
}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<mat-tab-nav-panel #tabPanel>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
.filter-input {
|
||||
border: none;
|
||||
padding-left: 5px;
|
||||
padding: 1px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
<br />
|
||||
<input
|
||||
type="file"
|
||||
class="ng-input"
|
||||
(change)="importProfilerResults($event)"
|
||||
placeholder="Upload file"
|
||||
accept=".json"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<input
|
||||
matInput
|
||||
class="filter-input"
|
||||
class="ng-input filter-input"
|
||||
(keyup)="filter.emit($any($event.target).value)"
|
||||
placeholder="duration: >30 source: click"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
</div>
|
||||
|
||||
<select [hidden]="!record()" (change)="onVisualizationChange($event)">
|
||||
<select [hidden]="!record()" (change)="onVisualizationChange($event)" class="ng-select">
|
||||
<option [value]="VisMode.FlameGraph" [selected]="visualizationMode() === VisMode.FlameGraph">
|
||||
Flame graph
|
||||
</option>
|
||||
|
|
|
|||
|
|
@ -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 = [
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
58
devtools/projects/ng-devtools/src/styles/_inputs.scss
Normal file
58
devtools/projects/ng-devtools/src/styles/_inputs.scss
Normal file
|
|
@ -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,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="black"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>');
|
||||
|
||||
&.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,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="white"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>');
|
||||
}
|
||||
}
|
||||
|
||||
.ng-textarea {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
Loading…
Reference in a new issue