mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
refactor(devtools): migrate material legacy components to mdc (#51590)
Removes all legacy angular material imports and moves devtools over to mdc. PR Close #51590
This commit is contained in:
AleksanderBodurri
Jessica Janiuk
parent
525acbb165
commit
78afe889fd
34 changed files with 209 additions and 203 deletions
|
|
@ -11,7 +11,7 @@ sass_binary(
|
|||
src = "styles.scss",
|
||||
include_paths = ["external/npm/node_modules"],
|
||||
sourcemap = False,
|
||||
deps = ["//devtools:material_sass_deps"],
|
||||
deps = ["//devtools:global_styles"],
|
||||
)
|
||||
|
||||
sass_binary(
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
import {CommonModule} from '@angular/common';
|
||||
import {Component, Inject} from '@angular/core';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogModule as MatDialogModule, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
|
||||
import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
|
||||
import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
|
||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
||||
|
||||
|
||||
export interface DialogData {
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
import {CommonModule} from '@angular/common';
|
||||
import {Component} from '@angular/core';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {MatLegacyDialog as MatDialog, MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
|
||||
import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
|
||||
import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
|
||||
import {MatDialog, MatDialogModule} from '@angular/material/dialog';
|
||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
||||
import {MatInputModule} from '@angular/material/input';
|
||||
import {RouterLink, RouterOutlet} from '@angular/router';
|
||||
|
||||
import {DialogComponent} from './dialog.component';
|
||||
|
|
|
|||
|
|
@ -1,48 +1 @@
|
|||
@use 'sass:map';
|
||||
@use 'external/npm/node_modules/@angular/material/index' as mat;
|
||||
@include mat.all-legacy-component-typographies();
|
||||
@include mat.legacy-core();
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Light theme
|
||||
$light-primary: mat.define-palette(mat.$grey-palette, 700, 200);
|
||||
$light-accent: mat.define-palette(mat.$blue-palette, 800);
|
||||
$light-theme: mat.define-light-theme($light-primary, $light-accent);
|
||||
|
||||
// Dark theme
|
||||
$dark-primary: mat.define-palette(mat.$blue-grey-palette, 50);
|
||||
$dark-accent: mat.define-palette(mat.$blue-palette, 200);
|
||||
$dark-theme: map.deep-merge(
|
||||
mat.define-dark-theme($dark-primary, $dark-accent),
|
||||
(
|
||||
'color': (
|
||||
'background': (
|
||||
background: #202124,
|
||||
card: #202124,
|
||||
),
|
||||
'foreground': (
|
||||
text: #bcc5ce,
|
||||
),
|
||||
),
|
||||
'background': (
|
||||
background: #202124,
|
||||
card: #202124,
|
||||
),
|
||||
'foreground': (
|
||||
'text': #bcc5ce,
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
.light-theme {
|
||||
@include mat.all-legacy-component-themes($light-theme);
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
@include mat.all-legacy-component-themes($dark-theme);
|
||||
}
|
||||
@use '../../../styles.scss' as devtools;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,23 @@
|
|||
<nav #navBar mat-tab-nav-bar [color]="'accent'">
|
||||
<nav class="devtools-nav" #navBar mat-tab-nav-bar [color]="'accent'">
|
||||
|
||||
<div id="nav-buttons">
|
||||
<button mat-icon-button color="primary" (click)="toggleInspector()" matTooltip="Inspect element">
|
||||
<mat-icon [class.inspector-active]="inspectorRunning">pin_end</mat-icon>
|
||||
<button (click)="toggleInspector()" matTooltip="Inspect element">
|
||||
<mat-icon [class.inspector-active]="inspectorRunning"> pin_end </mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="primary" [matMenuTriggerFor]="menu" matTooltip="Open settings">
|
||||
|
||||
<button [matMenuTriggerFor]="menu" matTooltip="Open settings">
|
||||
<mat-icon> settings </mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="primary" [matMenuTriggerFor]="info" matTooltip="Info">
|
||||
|
||||
<button [matMenuTriggerFor]="info" matTooltip="Info">
|
||||
<mat-icon> info </mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<a class="mat-tab-link" mat-tab-link *ngFor="let tab of tabs" (click)="changeTab(tab)" [active]="activeTab === tab">
|
||||
{{ tab }}
|
||||
</a>
|
||||
|
||||
<section *ngIf="angularVersion" id="app-angular-version">
|
||||
Angular version:
|
||||
<span id="version-number">
|
||||
|
|
@ -20,6 +25,7 @@
|
|||
</span>
|
||||
<ng-container *ngIf="latestSHA; let sha"> | DevTools SHA: {{ sha }} </ng-container>
|
||||
</section>
|
||||
|
||||
</nav>
|
||||
|
||||
<div class="tab-content">
|
||||
|
|
@ -33,21 +39,20 @@
|
|||
</div>
|
||||
|
||||
<mat-menu #menu="matMenu">
|
||||
<div mat-menu-item disableRipple>
|
||||
<mat-slide-toggle
|
||||
(change)="toggleTimingAPI($event)"
|
||||
(click)="$event.stopPropagation()">Enable timing API</mat-slide-toggle>
|
||||
<div mat-menu-item disableRipple (click)="$event.stopPropagation(); toggleTimingAPI()">
|
||||
<mat-slide-toggle [checked]="timingAPIEnabled">
|
||||
Enable timing API
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div mat-menu-item disableRipple>
|
||||
<mat-slide-toggle
|
||||
[checked]="currentTheme === 'dark-theme'"
|
||||
(change)="themeService.toggleDarkMode($event.checked)"
|
||||
(click)="$event.stopPropagation()">Dark Mode</mat-slide-toggle>
|
||||
<div mat-menu-item disableRipple (click)="$event.stopPropagation(); themeService.toggleDarkMode(currentTheme === 'light-theme')">
|
||||
<mat-slide-toggle [checked]="currentTheme === 'dark-theme'">
|
||||
Dark Mode
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div mat-menu-item disableRipple>
|
||||
<mat-slide-toggle
|
||||
(change)="showCommentNodes = $event.checked"
|
||||
(click)="$event.stopPropagation()">Show comment nodes</mat-slide-toggle>
|
||||
<div mat-menu-item disableRipple (click)="$event.stopPropagation(); showCommentNodes = $event.checked">
|
||||
<mat-slide-toggle [checked]="showCommentNodes">
|
||||
Show comment nodes
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
</mat-menu>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
|
|
@ -15,6 +15,25 @@
|
|||
|
||||
#nav-buttons {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
|
||||
&:active {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.dark-theme) {
|
||||
#nav-buttons {
|
||||
button {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inspector-active {
|
||||
|
|
@ -42,24 +61,14 @@
|
|||
user-select: text;
|
||||
}
|
||||
|
||||
button.mat-icon-button {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
line-height: 30px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
font-size: 16px;
|
||||
|
||||
.mat-menu-item & {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mat-tab-link {
|
||||
.mat-mdc-tab-link {
|
||||
min-width: unset;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
|
|
@ -69,24 +78,6 @@ mat-icon {
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
.mat-menu-item {
|
||||
font-size: 0.7em;
|
||||
font-weight: 500;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
overflow: visible; // Avoids clipping of the button toggle ripple.
|
||||
color: #777;
|
||||
|
||||
::ng-deep .dark-theme & {
|
||||
color: white;
|
||||
}
|
||||
|
||||
mat-slide-toggle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.dark-theme) {
|
||||
#version-number {
|
||||
color: #5caace;
|
||||
|
|
@ -108,3 +99,15 @@ mat-icon {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-tab-header {
|
||||
--mdc-secondary-navigation-tab-container-height: 30px;
|
||||
}
|
||||
|
||||
.mat-mdc-menu-item.mdc-list-item {
|
||||
::ng-deep {
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
*/
|
||||
|
||||
import {AfterViewInit, Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
|
||||
import {MatLegacySlideToggleChange as MatSlideToggleChange} from '@angular/material/legacy-slide-toggle';
|
||||
import {MatLegacyTabNav as MatTabNav} from '@angular/material/legacy-tabs';
|
||||
import {MatSlideToggleChange} from '@angular/material/slide-toggle';
|
||||
import {MatTabNav} from '@angular/material/tabs';
|
||||
import {Events, MessageBus, Route} from 'protocol';
|
||||
import {Subscription} from 'rxjs';
|
||||
|
||||
|
|
@ -33,6 +33,7 @@ export class DevToolsTabsComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
inspectorRunning = false;
|
||||
routerTreeEnabled = false;
|
||||
showCommentNodes = false;
|
||||
timingAPIEnabled = false;
|
||||
|
||||
private _currentThemeSubscription: Subscription;
|
||||
currentTheme: Theme;
|
||||
|
|
@ -51,6 +52,8 @@ export class DevToolsTabsComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
this._messageBus.on('updateRouterTree', (routes) => {
|
||||
this.routes = routes || [];
|
||||
});
|
||||
|
||||
this.navbar.stretchTabs = false;
|
||||
}
|
||||
|
||||
get tabs(): string[] {
|
||||
|
|
@ -97,8 +100,9 @@ export class DevToolsTabsComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
this.inspectorRunning = !this.inspectorRunning;
|
||||
}
|
||||
|
||||
toggleTimingAPI(change: MatSlideToggleChange): void {
|
||||
change.checked ? this._messageBus.emit('enableTimingAPI') :
|
||||
this._messageBus.emit('disableTimingAPI');
|
||||
toggleTimingAPI(): void {
|
||||
this.timingAPIEnabled = !this.timingAPIEnabled;
|
||||
this.timingAPIEnabled ? this._messageBus.emit('enableTimingAPI') :
|
||||
this._messageBus.emit('disableTimingAPI');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@
|
|||
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
|
||||
import {MatLegacyMenuModule as MatMenuModule} from '@angular/material/legacy-menu';
|
||||
import {MatLegacySlideToggleModule as MatSlideToggleModule} from '@angular/material/legacy-slide-toggle';
|
||||
import {MatLegacyTabsModule as MatTabsModule} from '@angular/material/legacy-tabs';
|
||||
import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
|
||||
import {MatMenuModule} from '@angular/material/menu';
|
||||
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
|
||||
import {MatTabsModule} from '@angular/material/tabs';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
|
||||
import {DevToolsTabsComponent} from './devtools-tabs.component';
|
||||
import {DirectiveExplorerModule} from './directive-explorer/directive-explorer.module';
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@
|
|||
import {ScrollingModule} from '@angular/cdk/scrolling';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
|
||||
import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
|
||||
import {MatLegacySnackBarModule as MatSnackBarModule} from '@angular/material/legacy-snack-bar';
|
||||
import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
|
||||
import {MatSnackBarModule} from '@angular/material/snack-bar';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
import {MatTreeModule} from '@angular/material/tree';
|
||||
|
||||
import {AngularSplitModule} from '../../vendor/angular-split/public_api';
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
.mat-card.breadcrumb-card {
|
||||
.mdc-card.breadcrumb-card {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.scroll-button {
|
||||
height: 100%;
|
||||
|
|
@ -28,13 +29,15 @@
|
|||
}
|
||||
|
||||
button {
|
||||
height: 24px;
|
||||
|
||||
&.selected {
|
||||
background-color: rgb(243, 243, 243);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-button {
|
||||
.mdc-button {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 11px;
|
||||
|
|
@ -49,7 +52,7 @@
|
|||
}
|
||||
|
||||
:host-context(.dark-theme) {
|
||||
.mat-card {
|
||||
.mdc-card {
|
||||
&.breadcrumb-card {
|
||||
.scroll-button {
|
||||
background-color: rgb(41, 42, 45);
|
||||
|
|
@ -64,7 +67,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mat-button {
|
||||
.mdc-button {
|
||||
color: #5caace;
|
||||
&:hover {
|
||||
background-color: #093e69;
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
|
||||
import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
|
||||
|
||||
import {BreadcrumbsComponent} from './breadcrumbs.component';
|
||||
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
import {ScrollingModule} from '@angular/cdk/scrolling';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
|
||||
import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
|
||||
|
||||
import {BreadcrumbsModule} from './breadcrumbs/breadcrumbs.module';
|
||||
import {DirectiveForestComponent} from './directive-forest.component';
|
||||
|
|
|
|||
|
|
@ -12,16 +12,20 @@
|
|||
placeholder="Search components"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="up-down-buttons" *ngIf="hasMatched">
|
||||
<button mat-icon-button matTooltip="Select previous element" (click)="emitPrevMatched()">
|
||||
|
||||
<button matTooltip="Select previous element" (click)="emitPrevMatched()">
|
||||
<mat-icon class="mat-icon-rtl-mirror">
|
||||
expand_less
|
||||
</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button matTooltip="Select next element" (click)="emitNextMatched()">
|
||||
<button matTooltip="Select next element" (click)="emitNextMatched()">
|
||||
<mat-icon class="">
|
||||
expand_more
|
||||
</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-card>
|
||||
|
|
|
|||
|
|
@ -36,27 +36,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mdc-card {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.up-down-buttons {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
:host {
|
||||
::ng-deep {
|
||||
.up-down-buttons {
|
||||
.mat-icon-button {
|
||||
line-height: 25px;
|
||||
}
|
||||
opacity: 0.5;
|
||||
|
||||
button {
|
||||
mat-icon {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -70,4 +72,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
|
||||
import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
|
||||
|
||||
import {FilterComponent} from './filter.component';
|
||||
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatExpansionModule} from '@angular/material/expansion';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
|
||||
import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
|
||||
import {ComponentMetadataComponent} from './component-metadata.component';
|
||||
import {PropertyTabHeaderComponent} from './property-tab-header.component';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<mat-toolbar>
|
||||
{{ directive }}
|
||||
<button matTooltip="Open source" mat-icon-button (click)="handleViewSource($event)">
|
||||
<button matTooltip="Open source" (click)="handleViewSource($event)">
|
||||
<mat-icon> code </mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
|
|
@ -14,14 +14,26 @@ mat-toolbar {
|
|||
line-height: 10px;
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
float: right;
|
||||
button {
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.dark-theme) {
|
||||
.mat-icon-button {
|
||||
fill: #fff;
|
||||
button {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ import {DragDropModule} from '@angular/cdk/drag-drop';
|
|||
import {CommonModule} from '@angular/common';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatExpansionModule} from '@angular/material/expansion';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
|
||||
import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
|
||||
import {MatToolbarModule} from '@angular/material/toolbar';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
import {MatTreeModule} from '@angular/material/tree';
|
||||
|
||||
import {PropertyEditorComponent} from './property-editor.component';
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
|
||||
import {Component, Inject} from '@angular/core';
|
||||
import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
|
||||
|
||||
interface DialogData {
|
||||
profilerVersion?: number;
|
||||
|
|
|
|||
|
|
@ -3,20 +3,16 @@
|
|||
font-size: 1em;
|
||||
width: 100%;
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
display: flex;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
height: wrap-content;
|
||||
margin: 0 !important;
|
||||
padding: 5px !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-icon {
|
||||
font-size: 18px;
|
||||
top: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.profiler-control {
|
||||
|
|
@ -28,9 +24,6 @@
|
|||
}
|
||||
|
||||
.instructions {
|
||||
margin-bottom: 0 !important;
|
||||
align-self: center;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -61,3 +54,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-card {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
|
||||
import {Component, OnDestroy, OnInit} from '@angular/core';
|
||||
import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
|
||||
import {MatDialog} from '@angular/material/dialog';
|
||||
import {Events, MessageBus, ProfilerFrame} from 'protocol';
|
||||
import {Subject, Subscription} from 'rxjs';
|
||||
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
import {CommonModule} from '@angular/common';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import {MatDialogModule} from '@angular/material/dialog';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
|
||||
import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
|
||||
import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
|
||||
import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
|
||||
import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
|
||||
import {MatSelectModule} from '@angular/material/select';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
|
||||
import {ProfilerImportDialogComponent} from './profiler-import-dialog.component';
|
||||
import {ProfilerComponent} from './profiler.component';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<mat-card class="bar-graph-container">
|
||||
|
||||
<p class="txt-frames" matTooltip="{{ selectionLabel }} / {{ (graphData$ | async)?.length }}">
|
||||
{{ selectionLabel }} / {{ (graphData$ | async)?.length }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
mat-icon-button
|
||||
matTooltip="Select previous frame"
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
padding: 2px;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -73,3 +74,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
cdk-virtual-scroll-viewport {
|
||||
height: 50px;
|
||||
}
|
||||
|
|
@ -8,9 +8,9 @@
|
|||
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
|
||||
import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import {MatToolbarModule} from '@angular/material/toolbar';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
import {NgxFlamegraphModule} from 'ngx-flamegraph';
|
||||
|
||||
import {AngularSplitModule} from '../../../../vendor/angular-split/public_api';
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
.visual-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 80px;
|
||||
justify-content: space-around;
|
||||
margin-right: 25px;
|
||||
width: 180px;
|
||||
min-width: 30%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
|
|
@ -32,7 +30,7 @@
|
|||
}
|
||||
|
||||
::ng-deep .details {
|
||||
flex: 1 1 150px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: 500;
|
||||
|
|
|
|||
|
|
@ -10,15 +10,15 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
|
|||
import {CommonModule} from '@angular/common';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import {MatCheckboxModule} from '@angular/material/checkbox';
|
||||
import {MatDialogModule} from '@angular/material/dialog';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
|
||||
import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
|
||||
import {MatLegacyCheckboxModule as MatCheckboxModule} from '@angular/material/legacy-checkbox';
|
||||
import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
|
||||
import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
|
||||
import {MatLegacyProgressBarModule as MatProgressBarModule} from '@angular/material/legacy-progress-bar';
|
||||
import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
|
||||
import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
|
||||
import {MatInputModule} from '@angular/material/input';
|
||||
import {MatProgressBarModule} from '@angular/material/progress-bar';
|
||||
import {MatSelectModule} from '@angular/material/select';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
import {NgxFlamegraphModule} from 'ngx-flamegraph';
|
||||
|
||||
import {FrameSelectorComponent} from './frame-selector.component';
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
|
||||
import {MatDialogModule} from '@angular/material/dialog';
|
||||
import {MatSelectModule} from '@angular/material/select';
|
||||
|
||||
import {RouterTreeComponent} from './router-tree.component';
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {MatLegacyProgressSpinnerModule as MatProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
|
||||
import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
|
||||
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
|
||||
import {DevToolsTabModule} from './devtools-tabs/devtools-tabs.module';
|
||||
import {DevToolsComponent} from './devtools.component';
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
|
||||
import {Component} from '@angular/core';
|
||||
import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
|
||||
import {MatDialog} from '@angular/material/dialog';
|
||||
|
||||
import {DialogComponent} from './dialog.component';
|
||||
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
import {CommonModule} from '@angular/common';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
|
||||
import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
|
||||
import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
|
||||
import {MatDialogModule} from '@angular/material/dialog';
|
||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
||||
import {MatInputModule} from '@angular/material/input';
|
||||
import {RouterModule} from '@angular/router';
|
||||
|
||||
import {AppTodoComponent} from './app-todo.component';
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
|
||||
import {Component, Inject} from '@angular/core';
|
||||
import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
|
||||
|
||||
export interface DialogData {
|
||||
animal: string;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@use 'sass:map';
|
||||
@use 'external/npm/node_modules/@angular/material/index' as mat;
|
||||
@include mat.all-legacy-component-typographies();
|
||||
@include mat.legacy-core();
|
||||
@include mat.all-component-typographies();
|
||||
@include mat.core();
|
||||
|
||||
html,
|
||||
body {
|
||||
|
|
@ -40,9 +40,21 @@ $dark-theme: map.deep-merge(
|
|||
);
|
||||
|
||||
.light-theme {
|
||||
@include mat.all-legacy-component-themes($light-theme);
|
||||
@include mat.all-component-themes($light-theme);
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
@include mat.all-legacy-component-themes($dark-theme);
|
||||
background: #202124;
|
||||
@include mat.all-component-themes($dark-theme);
|
||||
}
|
||||
|
||||
|
||||
ng-devtools {
|
||||
.mdc-card {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-menu-content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue