mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
9872baa24f
* feat: adding info popup * Update projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html Co-authored-by: Minko Gechev <mgechev@gmail.com>
86 lines
2.6 KiB
HTML
86 lines
2.6 KiB
HTML
<nav #navBar mat-tab-nav-bar [color]="'accent'">
|
|
<div id="nav-buttons">
|
|
<button mat-icon-button color="primary" (click)="toggleInspector()">
|
|
<mat-icon [ngClass]="{ 'inspector-active': inspectorRunning }">
|
|
pin_end
|
|
</mat-icon>
|
|
</button>
|
|
<button mat-icon-button color="primary" [matMenuTriggerFor]="menu">
|
|
<mat-icon>
|
|
settings
|
|
</mat-icon>
|
|
</button>
|
|
<button mat-icon-button color="primary" [matMenuTriggerFor]="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">
|
|
{{ angularVersion }}
|
|
</span>
|
|
<ng-container *ngIf="latestSHA; let sha"> | DevTools SHA: {{ sha }} </ng-container>
|
|
</section>
|
|
</nav>
|
|
|
|
<div class="tab-content">
|
|
<ng-directive-explorer
|
|
[showCommentNodes]="showCommentNodes"
|
|
[ngClass]="{ 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>
|
|
</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>
|
|
|
|
<mat-menu #info="matMenu">
|
|
<div class="info-menu">
|
|
<a
|
|
mat-button
|
|
class="menu-toggle-button"
|
|
href="https://github.com/rangle/angular-devtools/blob/main/docs/overview.md"
|
|
target="_blank"
|
|
>
|
|
<mat-icon>library_books</mat-icon>
|
|
Guide
|
|
</a>
|
|
<a mat-button class="menu-toggle-button" href="https://github.com/rangle/angular-devtools" target="_blank">
|
|
<mat-icon>launch</mat-icon>
|
|
GitHub
|
|
</a>
|
|
<a mat-button class="menu-toggle-button" href="https://github.com/rangle/angular-devtools/issues" target="_blank">
|
|
<mat-icon>bug_report</mat-icon>
|
|
Issues
|
|
</a>
|
|
</div>
|
|
</mat-menu>
|