address comments

Author: mmalerba

src/lib/sidenav/drawer.ts

@@ -8,27 +8,29 @@
 
 import {
   AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
+  ContentChild,
   ContentChildren,
   ElementRef,
+  EventEmitter,
+  forwardRef,
+  Inject,
   Input,
+  NgZone,
+  OnDestroy,
   Optional,
   Output,
   QueryList,
-  ChangeDetectionStrategy,
-  EventEmitter,
   Renderer2,
   ViewEncapsulation,
-  NgZone,
-  OnDestroy,
-  Inject,
-  ChangeDetectorRef, ContentChild, forwardRef,
 } from '@angular/core';
-import {animate, state, style, transition, trigger, AnimationEvent} from '@angular/animations';
-import {Directionality, coerceBooleanProperty} from '../core';
-import {FocusTrapFactory, FocusTrap} from '../core/a11y/focus-trap';
+import {animate, AnimationEvent, state, style, transition, trigger} from '@angular/animations';
+import {coerceBooleanProperty, Directionality} from '../core';
+import {FocusTrap, FocusTrapFactory} from '../core/a11y/focus-trap';
 import {ESCAPE} from '../core/keyboard/keycodes';
-import {first, takeUntil, startWith} from '../core/rxjs/index';
+import {first, startWith, takeUntil} from '../core/rxjs/index';
 import {DOCUMENT} from '@angular/platform-browser';
 import {merge} from 'rxjs/observable/merge';
 import {Subject} from 'rxjs/Subject';
@@ -62,7 +64,11 @@ export class MdDrawerToggleResult {
   encapsulation: ViewEncapsulation.None,
 })
 export class MdDrawerContent implements AfterContentInit {
-  /** Margins to be applied to the content. */
+  /**
+   * Margins to be applied to the content. These are used to push / shrink the drawer content when a
+   * drawer is open. We use margin rather than transform even for push mode because transform breaks
+   * fixed position elements inside of the transformed element.
+   */
   _margins: {left: number, right: number} = {left: 0, right: 0};
 
   constructor(
@@ -71,7 +77,7 @@ export class MdDrawerContent implements AfterContentInit {
   }
 
   ngAfterContentInit() {
-    this._container._contentMargins.subscribe((margins) => {
+    this._container._contentMargins.subscribe(margins => {
       this._margins = margins;
       this._changeDetectorRef.markForCheck();
     });
@@ -193,6 +199,10 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
   /** @deprecated */
   @Output('align-changed') onAlignChanged = new EventEmitter<void>();
 
+  /**
+   * An observable that emits when the drawer mode changes. This is used by the drawer container to
+   * to know when to when the mode changes so it can adapt the margins on the content.
+   */
   _modeChanged = new Subject();
 
   get isFocusTrapEnabled() {
@@ -524,6 +534,13 @@ export class MdDrawerContainer implements AfterContentInit {
    * sparingly, because it causes a reflow.
    */
   private _updateContentMargins() {
+    // 1. For drawers in `over` mode, they don't affect the content.
+    // 2. For drawers in `side` mode they should shrink the content. We do this by adding to the
+    //    left margin (for left drawer) or right margin (for right the drawer).
+    // 3. For drawers in `push` mode the should shift the content without resizing it. We do this by
+    //    adding to the left or right margin and simultaneously subtracting the same amount of
+    //    margin from the other side.
+
     let left = 0;
     let right = 0;
 

src/lib/sidenav/sidenav.spec.ts

@@ -0,0 +1,67 @@
+import {Component} from '@angular/core';
+import {async, TestBed, ComponentFixture} from '@angular/core/testing';
+import {MdSidenav, MdSidenavModule} from './index';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {By} from '@angular/platform-browser';
+
+
+describe('MdSidenav', () => {
+  let fixture: ComponentFixture<SidenavWithFixedPosition>;
+  let sidenavEl: HTMLElement;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MdSidenavModule, NoopAnimationsModule],
+      declarations: [SidenavWithFixedPosition],
+    });
+
+    TestBed.compileComponents();
+
+    fixture = TestBed.createComponent(SidenavWithFixedPosition);
+    fixture.detectChanges();
+
+    sidenavEl = fixture.debugElement.query(By.directive(MdSidenav)).nativeElement;
+  }));
+
+  it('should be fixed position when in fixed mode', () => {
+    expect(sidenavEl.classList).toContain('mat-sidenav-fixed');
+
+    fixture.componentInstance.fixed = false;
+    fixture.detectChanges();
+
+    expect(sidenavEl.classList).not.toContain('mat-sidenav-fixed');
+  });
+
+  it('should set fixed bottom and top when in fixed mode', () => {
+    expect(sidenavEl.style.top).toBe('20px');
+    expect(sidenavEl.style.bottom).toBe('30px');
+
+    fixture.componentInstance.fixed = false;
+    fixture.detectChanges();
+
+    expect(sidenavEl.style.top).toBeFalsy();
+    expect(sidenavEl.style.bottom).toBeFalsy();
+  });
+});
+
+
+@Component({
+  template: `
+    <md-sidenav-container>
+      <md-sidenav
+          #drawer
+          [fixedInViewport]="fixed"
+          [fixedTopGap]="fixedTop"
+          [fixedBottomGap]="fixedBottom">
+        Drawer.
+      </md-sidenav>
+      <md-sidenav-content>
+        Some content.
+      </md-sidenav-content>
+    </md-sidenav-container>`,
+})
+class SidenavWithFixedPosition {
+  fixed = true;
+  fixedTop = 20;
+  fixedBottom = 30;
+}

src/lib/sidenav/sidenav.ts

@@ -14,6 +14,7 @@ import {
 } from '@angular/core';
 import {MdDrawer, MdDrawerContainer, MdDrawerContent} from './drawer';
 import {animate, state, style, transition, trigger} from '@angular/animations';
+import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
 
 
 @Component({
@@ -77,19 +78,28 @@ export class MdSidenavContent extends MdDrawerContent {
 })
 export class MdSidenav extends MdDrawer {
   /** Whether the sidenav is fixed in the viewport. */
-  @Input() fixedInViewport = true;
+  @Input()
+  get fixedInViewport() { return this._fixedInViewport; }
+  set fixedInViewport(value) { this._fixedInViewport = coerceBooleanProperty(value); }
+  private _fixedInViewport = true;
 
   /**
    * The gap between the top of the sidenav and the top of the viewport when the sidenav is in fixed
    * mode.
    */
-  @Input() fixedTopGap = 0;
+  @Input()
+  get fixedTopGap() { return this._fixedTopGap; }
+  set fixedTopGap(value) { this._fixedTopGap = coerceNumberProperty(value); }
+  private _fixedTopGap = 0;
 
   /**
    * The gap between the bottom of the sidenav and the bottom of the viewport when the sidenav is in
    * fixed mode.
    */
-  @Input() fixedBottomGap = 0;
+  @Input()
+  get fixedBottomGap() { return this._fixedBottomGap; }
+  set fixedBottomGap(value) { this._fixedBottomGap = coerceNumberProperty(value); }
+  private _fixedBottomGap = 0;
 }