add back margins on content

Author: mmalerba

src/lib/sidenav/drawer-transitions.scss

@@ -6,7 +6,7 @@
     transition: {
       duration: $swift-ease-out-duration;
       timing-function: $swift-ease-out-timing-function;
-      property: transform, margin-left, margin-right;
+      property: margin-left, margin-right;
     }
   }
 

src/lib/sidenav/drawer.ts

@@ -22,7 +22,7 @@ import {
   NgZone,
   OnDestroy,
   Inject,
-  ChangeDetectorRef, ContentChild,
+  ChangeDetectorRef, ContentChild, forwardRef,
 } from '@angular/core';
 import {animate, state, style, transition, trigger, AnimationEvent} from '@angular/animations';
 import {Directionality, coerceBooleanProperty} from '../core';
@@ -55,11 +55,28 @@ export class MdDrawerToggleResult {
   template: '<ng-content></ng-content>',
   host: {
     'class': 'mat-drawer-content',
+    '[style.marginLeft.px]': '_margins.left',
+    '[style.marginRight.px]': '_margins.right',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MdDrawerContent {}
+export class MdDrawerContent implements AfterContentInit {
+  /** Margins to be applied to the content. */
+  _margins: {left: number, right: number} = {left: 0, right: 0};
+
+  constructor(
+      private _changeDetectorRef: ChangeDetectorRef,
+      @Inject(forwardRef(() => MdDrawerContainer)) private _container: MdDrawerContainer) {
+  }
+
+  ngAfterContentInit() {
+    this._container._contentMargins.subscribe((margins) => {
+      this._margins = margins;
+      this._changeDetectorRef.markForCheck();
+    });
+  }
+}
 
 
 /**
@@ -364,8 +381,7 @@ export class MdDrawerContainer implements AfterContentInit {
   private _left: MdDrawer | null;
   private _right: MdDrawer | null;
 
-  /** Inline styles to be applied to the container. */
-  _styles: { marginLeft: string; marginRight: string; transform: string; };
+  _contentMargins = new Subject<{left: number, right: number}>();
 
   constructor(@Optional() private _dir: Directionality, private _element: ElementRef,
               private _renderer: Renderer2, private _ngZone: NgZone,
@@ -408,7 +424,7 @@ export class MdDrawerContainer implements AfterContentInit {
       // Set the transition class on the container so that the animations occur. This should not
       // be set initially because animations should only be triggered via a change in state.
       this._renderer.addClass(this._element.nativeElement, 'mat-drawer-transition');
-      this._updateStyles();
+      this._updateContentMargins();
       this._changeDetectorRef.markForCheck();
     });
 
@@ -435,8 +451,10 @@ export class MdDrawerContainer implements AfterContentInit {
   /** Subscribes to changes in drawer mode so we can run change detection. */
   private _watchDrawerMode(drawer: MdDrawer): void {
     if (drawer) {
-      takeUntil.call(drawer._modeChanged, this._drawers.changes).subscribe(
-          () => this._changeDetectorRef.markForCheck());
+      takeUntil.call(drawer._modeChanged, this._drawers.changes).subscribe(() => {
+        this._updateContentMargins();
+        this._changeDetectorRef.markForCheck()
+      });
     }
   }
 
@@ -502,29 +520,33 @@ export class MdDrawerContainer implements AfterContentInit {
   }
 
   /**
-   * Return the width of the drawer, if it's in the proper mode and opened.
-   * This may relayout the view, so do not call this often.
-   * @param drawer
-   * @param mode
+   * Recalculates and updates the inline styles for the content. Note that this should be used
+   * sparingly, because it causes a reflow.
    */
-  private _getDrawerEffectiveWidth(drawer: MdDrawer, mode: string): number {
-    return (this._isDrawerOpen(drawer) && drawer.mode == mode) ? drawer._width : 0;
-  }
+  private _updateContentMargins() {
+    let left = 0;
+    let right = 0;
+
+    if (this._left && this._left.opened) {
+      if (this._left.mode == 'side') {
+        left += this._left._width;
+      } else if (this._left.mode == 'push') {
+        let width = this._left._width;
+        left += width;
+        right -= width;
+      }
+    }
 
-  /**
-   * Recalculates and updates the inline styles. Note that this
-   * should be used sparingly, because it causes a reflow.
-   */
-  private _updateStyles() {
-    const marginLeft = this._left ? this._getDrawerEffectiveWidth(this._left, 'side') : 0;
-    const marginRight = this._right ? this._getDrawerEffectiveWidth(this._right, 'side') : 0;
-    const leftWidth = this._left ? this._getDrawerEffectiveWidth(this._left, 'push') : 0;
-    const rightWidth = this._right ? this._getDrawerEffectiveWidth(this._right, 'push') : 0;
-
-    this._styles = {
-      marginLeft: `${marginLeft}px`,
-      marginRight: `${marginRight}px`,
-      transform: `translate3d(${leftWidth - rightWidth}px, 0, 0)`
-    };
+    if (this._right && this._right.opened) {
+      if (this._right.mode == 'side') {
+        right += this._right._width;
+      } else if (this._right.mode == 'push') {
+        let width = this._right._width;
+        right += width;
+        left -= width;
+      }
+    }
+
+    this._contentMargins.next({left, right});
   }
 }

src/lib/sidenav/sidenav.ts

@@ -7,12 +7,12 @@
  */
 
 import {
-  ChangeDetectionStrategy,
+  ChangeDetectionStrategy, ChangeDetectorRef,
   Component, ContentChild,
-  ContentChildren,
+  ContentChildren, forwardRef, Inject, Input,
   ViewEncapsulation
 } from '@angular/core';
-import {MdDrawer, MdDrawerContainer} from './drawer';
+import {MdDrawer, MdDrawerContainer, MdDrawerContent} from './drawer';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 
 
@@ -22,11 +22,19 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
   template: '<ng-content></ng-content>',
   host: {
     'class': 'mat-drawer-content mat-sidenav-content',
+    '[style.marginLeft.px]': '_margins.left',
+    '[style.marginRight.px]': '_margins.right',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MdSidenavContent {}
+export class MdSidenavContent extends MdDrawerContent {
+  constructor(
+      changeDetectorRef: ChangeDetectorRef,
+      @Inject(forwardRef(() => MdSidenavContainer)) container: MdSidenavContainer) {
+    super(changeDetectorRef, container);
+  }
+}
 
 
 @Component({
@@ -49,6 +57,7 @@ export class MdSidenavContent {}
   ],
   host: {
     'class': 'mat-drawer mat-sidenav',
+    'tabIndex': '-1',
     '[@transform]': '_animationState',
     '(@transform.start)': '_onAnimationStart()',
     '(@transform.done)': '_onAnimationEnd($event)',
@@ -59,12 +68,29 @@ export class MdSidenavContent {}
     '[class.mat-drawer-over]': 'mode === "over"',
     '[class.mat-drawer-push]': 'mode === "push"',
     '[class.mat-drawer-side]': 'mode === "side"',
-    'tabIndex': '-1',
+    '[class.mat-app-sidenav-fixed]': 'fixedInViewport',
+    '[style.top.px]': 'fixedInViewport ? fixedTopGap : null',
+    '[style.bottom.px]': 'fixedInViewport ? fixedBottomGap : null',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MdSidenav extends MdDrawer {}
+export class MdSidenav extends MdDrawer {
+  /** Whether the sidenav is fixed in the viewport. */
+  @Input() 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;
+
+  /**
+   * The gap between the bottom of the sidenav and the bottom of the viewport when the sidenav is in
+   * fixed mode.
+   */
+  @Input() fixedBottomGap = 0;
+}
 
 
 @Component({