George Kalpakas
fd8f9ab4e8
This commit changes the anchor elements used for external links to `MatIconButton`s. While the appearance remains the same (with the exception of hover/focus styles), this better aligns the styling of external link icons with other nearby icon buttons (i.e. the theme toggle) and alows as to simplify the CSS for external links (since much of their styling is handled by Angular Material). PR Close #42584
83 lines
4.3 KiB
HTML
83 lines
4.3 KiB
HTML
<div id="top-of-page"></div>
|
|
|
|
<aio-cookies-popup></aio-cookies-popup>
|
|
|
|
<div *ngIf="isFetching" class="progress-bar-container">
|
|
<mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar>
|
|
</div>
|
|
|
|
<mat-toolbar color="primary" class="app-toolbar no-print" [class.transitioning]="isTransitioning">
|
|
<mat-toolbar-row class="notification-container">
|
|
<aio-notification notificationId="survey-march-2020" expirationDate="2020-04-15" [dismissOnContentClick]="true" (dismissed)="notificationDismissed()">
|
|
<a href="https://goo.gle/angular-survey-2020">
|
|
<mat-icon class="icon" svgIcon="insert_comment" aria-label="Announcement"></mat-icon>
|
|
<span class="message">Help Angular by taking a <b>1 minute survey</b>!</span>
|
|
<span class="action-button">Go to survey</span>
|
|
</a>
|
|
</aio-notification>
|
|
</mat-toolbar-row>
|
|
<mat-toolbar-row>
|
|
<button mat-button class="hamburger" [class.starting]="isStarting" (click)="sidenav.toggle()" title="Docs menu">
|
|
<mat-icon svgIcon="menu"></mat-icon>
|
|
</button>
|
|
<a class="nav-link home" href="/" [ngSwitch]="showTopMenu">
|
|
<img *ngSwitchCase="true" src="assets/images/logos/angular/[email protected]" width="150" height="40" title="Home" alt="Home">
|
|
<img *ngSwitchDefault src="assets/images/logos/angular/shield-large.svg" width="37" height="40" title="Home" alt="Home">
|
|
</a>
|
|
<aio-top-menu *ngIf="showTopMenu" [nodes]="topMenuNodes" [currentNode]="currentNodes?.TopBar"></aio-top-menu>
|
|
<aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
|
|
<aio-theme-toggle></aio-theme-toggle>
|
|
<div class="toolbar-external-icons-container">
|
|
<a mat-icon-button href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter">
|
|
<mat-icon svgIcon="logos:twitter"></mat-icon>
|
|
</a>
|
|
<a mat-icon-button href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github">
|
|
<mat-icon svgIcon="logos:github"></mat-icon>
|
|
</a>
|
|
<a mat-icon-button href="https://youtube.com/angular" title="YouTube" aria-label="Angular on YouTube">
|
|
<mat-icon svgIcon="logos:youtube"></mat-icon>
|
|
</a>
|
|
</div>
|
|
</mat-toolbar-row>
|
|
</mat-toolbar>
|
|
|
|
<aio-search-results #searchResultsView *ngIf="showSearchResults" [searchResults]="searchResults | async" (resultSelected)="hideSearchResults()"></aio-search-results>
|
|
|
|
<mat-sidenav-container class="sidenav-container" [class.starting]="isStarting" [class.has-floating-toc]="hasFloatingToc" role="main">
|
|
|
|
<mat-sidenav [ngClass]="{'collapsed': !dockSideNav}" #sidenav class="sidenav" [mode]="mode" [opened]="isOpened" (openedChange)="updateHostClasses()">
|
|
<aio-nav-menu *ngIf="!showTopMenu" [nodes]="topMenuNarrowNodes" [currentNode]="currentNodes?.TopBarNarrow" [isWide]="false"></aio-nav-menu>
|
|
<aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNodes?.SideNav" [isWide]="dockSideNav"></aio-nav-menu>
|
|
|
|
<div class="doc-version">
|
|
<aio-select (change)="onDocVersionChange($event.index)" [options]="docVersions" [selected]="currentDocVersion"></aio-select>
|
|
</div>
|
|
</mat-sidenav>
|
|
|
|
<main class="sidenav-content" [id]="pageId" role="main">
|
|
<aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
|
|
<aio-doc-viewer [class.no-animations]="isStarting" [doc]="currentDocument" (docReady)="onDocReady()" (docRemoved)="onDocRemoved()" (docInserted)="onDocInserted()" (docRendered)="onDocRendered()">
|
|
</aio-doc-viewer>
|
|
<aio-dt *ngIf="dtOn" [(doc)]="currentDocument"></aio-dt>
|
|
</main>
|
|
|
|
</mat-sidenav-container>
|
|
|
|
<div *ngIf="hasFloatingToc" class="toc-container no-print" [style.max-height.px]="tocMaxHeight" (wheel)="restrainScrolling($event)">
|
|
<aio-lazy-ce selector="aio-toc"></aio-lazy-ce>
|
|
</div>
|
|
|
|
<footer class="no-print">
|
|
<aio-footer [nodes]="footerNodes" [versionInfo]="versionInfo"></aio-footer>
|
|
</footer>
|
|
|
|
<!--
|
|
Work-around to ensure that the `.woff2` file for the 'Material Icons' font will always be fetched.
|
|
This allows the SW to cache the file (even if there are no icons in the current page) and ensure
|
|
material icons on other pages are displayed correctly in offline mode.
|
|
(Note: Instantiate lazily to avoid affecting the initial rendering.)
|
|
-->
|
|
<div class="cdk-visually-hidden" *ngIf="!isStarting">
|
|
<mat-icon> </mat-icon>
|
|
</div>
|