Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(devtools): clean up menu layout (#45665)

Browse source 
The menus weren't using the `mat-menu` component correctly which had led to some inconsistent spacing and the need for style overrides. These changes correctly wrap the menu content in `mat-menu-item` which has the added benefit of having keyboard support. I had to keep some of the overrides in order to preserve the dense layout of the menus.

I've also cleaned up the component by:
* Removing some unnecessary styles.
* Switching single-class usages of `ngClass` to `class.` bindings.
* Not using `br` tags for spacing.

PR Close #45665
This commit is contained in:
Kristiyan Kostadinov 2022-04-18 09:35:56 +02:00 committed by Dylan Hunn
parent 68357104c9
commit b29b95b0f8
2 changed files with 50 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
View file

@ -1,7 +1,7 @@
<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 [ngClass]="{ 'inspector-active': inspectorRunning }"> pin_end </mat-icon>
<mat-icon [class.inspector-active]="inspectorRunning">pin_end</mat-icon>
</button>
<button mat-icon-button color="primary" [matMenuTriggerFor]="menu" matTooltip="Open settings">
<mat-icon> settings </mat-icon>
@ -25,51 +25,43 @@
<div class="tab-content">
<ng-directive-explorer
[showCommentNodes]="showCommentNodes"
[ngClass]="{ hidden: activeTab !== 'Components' }"
[class.hidden]="activeTab !== 'Components'"
(toggleInspector)="toggleInspector()"
></ng-directive-explorer>
<ng-profiler [ngClass]="{ hidden: activeTab !== 'Profiler' }"></ng-profiler>
<ng-router-tree [routes]="routes" [ngClass]="{ hidden: activeTab !== 'Router Tree' }"></ng-router-tree>
<ng-profiler [class.hidden]="activeTab !== 'Profiler'"></ng-profiler>
<ng-router-tree [routes]="routes" [class.hidden]="activeTab !== 'Router Tree'"></ng-router-tree>
</div>
<mat-menu #menu="matMenu" class="options-menu">
<mat-slide-toggle (change)="toggleTimingAPI($event)" class="menu-toggle-button" (click)="$event.stopPropagation()">
Enable timing API
</mat-slide-toggle>
<br />
<br />
<mat-slide-toggle
[checked]="currentTheme === 'dark-theme'"
(change)="themeService.toggleDarkMode($event.checked)"
class="menu-toggle-button"
(click)="$event.stopPropagation()"
>
Dark Mode
</mat-slide-toggle>
<br />
<br />
<mat-slide-toggle
(change)="showCommentNodes = $event.checked"
class="menu-toggle-button"
(click)="$event.stopPropagation()"
>
Show comment nodes
</mat-slide-toggle>
<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>
<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>
<div mat-menu-item disableRipple>
<mat-slide-toggle
(change)="showCommentNodes = $event.checked"
(click)="$event.stopPropagation()">Show comment nodes</mat-slide-toggle>
</div>
</mat-menu>
<mat-menu #info="matMenu">
<div class="info-menu">
<a mat-button class="menu-toggle-button" href="https://angular.io/devtools" target="_blank">
<mat-icon>library_books</mat-icon>
Guide
</a>
<a mat-button class="menu-toggle-button" href="https://github.com/angular/angular" target="_blank">
<mat-icon>launch</mat-icon>
GitHub
</a>
<a mat-button class="menu-toggle-button" href="https://github.com/angular/angular/issues" target="_blank">
<mat-icon>bug_report</mat-icon>
Issues
</a>
</div>
<a mat-menu-item href="https://angular.io/devtools" target="_blank">
<mat-icon>library_books</mat-icon>
Guide
</a>
<a mat-menu-item href="https://github.com/angular/angular" target="_blank">
<mat-icon>launch</mat-icon>
GitHub
</a>
<a mat-menu-item href="https://github.com/angular/angular/issues" target="_blank">
<mat-icon>bug_report</mat-icon>
Issues
</a>
</mat-menu>

51
devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
View file

@ -51,6 +51,12 @@ button.mat-icon-button {
mat-icon {
font-size: 16px;
.mat-menu-item & {
width: 16px;
height: 16px;
margin-right: 8px;
}
}
.mat-tab-link {
@ -63,41 +69,24 @@ mat-icon {
font-weight: 400;
}
::ng-deep {
.options-menu {
padding: 1rem 1.25rem;
}
.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;
.info-menu {
padding: 0.5rem;
display: flex;
flex-direction: column;
}
.info-menu mat-icon {
height: unset;
width: unset;
}
body.dark-theme .menu-toggle-button {
::ng-deep .dark-theme & {
color: white;
}
.menu-toggle-button {
mat-icon {
position: relative;
top: -1px;
margin-right: 5px;
}
mat-slide-toggle {
width: 100%;
height: 100%;
}
}
.menu-toggle-button {
font-size: 0.7em;
font-weight: 500;
color: #777;
}
:host-context(.dark-theme) {
#version-number {
color: #5caace;
@ -108,12 +97,6 @@ mat-icon {
}
}
:host-context(.light-theme) {
mat-icon {
color: rgba(0, 0, 0, 0.87);
}
}
@media only screen and (max-width: 700px) {
#app-angular-version {
max-width: 135px;