cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(aio): don't animate sidenav on launch.

Browse Source
This commit is contained in:
Ward Bell 2017-04-24 17:15:11 -07:00 committed by Pete Bacon Darwin
parent e7c37d77a8
commit 11b2f62ed2
3 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/src/app/app.component.html
View File

@ -10,7 +10,7 @@
</md-toolbar> </md-toolbar>
<a id="top-of-page"></a> <a id="top-of-page"></a>
<md-sidenav-container class="sidenav-container" role="main"> <md-sidenav-container class="sidenav-container" [class.starting]="isStarting" role="main">
<md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode"> <md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode">
<aio-nav-menu *ngIf="!isSideBySide" class="top-menu" [nodes]="topMenuNodes" [currentNode]="currentNode"></aio-nav-menu> <aio-nav-menu *ngIf="!isSideBySide" class="top-menu" [nodes]="topMenuNodes" [currentNode]="currentNode"></aio-nav-menu>

5
aio/src/app/app.component.ts
View File

@ -25,6 +25,7 @@ export class AppComponent implements OnInit {
pageId: string; pageId: string;
currentDocument: DocumentContents; currentDocument: DocumentContents;
footerNodes: NavigationNode[]; footerNodes: NavigationNode[];
isStarting = true;
isSideBySide = false; isSideBySide = false;
private isSideNavDoc = false; private isSideNavDoc = false;
private previousNavView: string; private previousNavView: string;
@ -105,9 +106,9 @@ export class AppComponent implements OnInit {
} }
onDocRendered() { onDocRendered() {
// This handler is needed because the subscription to the `currentUrl` in `ngOnInit` // Scroll after the doc-viewer has finished rendering the new doc
// gets triggered too early before the doc-viewer has finished rendering the doc
this.autoScroll(); this.autoScroll();
this.isStarting = false;
} }
@HostListener('window:resize', ['$event.target.innerWidth']) @HostListener('window:resize', ['$event.target.innerWidth'])

13
aio/src/styles/1-layouts/_sidenav.scss
View File

@ -1,3 +1,14 @@
// Disable sidenav animations while starting the app
// See https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav-transitions.scss
.starting.mat-sidenav-transition {
.mat-sidenav,
.mat-sidenav-content,
.mat-sidenav-backdrop.mat-sidenav-shown {
transition: none;
}
}
aio-nav-menu.top-menu .vertical-menu-item { aio-nav-menu.top-menu .vertical-menu-item {
background-color: $lightgray; background-color: $lightgray;
text-transform: uppercase; text-transform: uppercase;
@ -163,4 +174,4 @@ aio-nav-menu.top-menu {
border-bottom: 2px solid rgba($mediumgray, 0.5); border-bottom: 2px solid rgba($mediumgray, 0.5);
} }
} }