Allow snackbar position on the screen.

Author: josephperrott

src/demo-app/snack-bar/snack-bar-demo.html

@@ -3,6 +3,20 @@ <h1>SnackBar demo</h1>
   <div>
     Message: <md-form-field><input mdInput type="text" [(ngModel)]="message"></md-form-field>
   </div>
+  <div>
+    <div>Position in page: </div>
+    <md-select [(ngModel)]="horizontalPosition">
+      <md-option value="start">Start</md-option>
+      <md-option value="end">End</md-option>
+      <md-option value="left">Left</md-option>
+      <md-option value="right">Right</md-option>
+      <md-option value="center">Center</md-option>
+    </md-select>
+    <md-select [(ngModel)]="verticalPosition">
+      <md-option value="top">Top</md-option>
+      <md-option value="bottom">Bottom</md-option>
+    </md-select>
+  </div>
   <div>
     <md-checkbox [(ngModel)]="action">
       <p *ngIf="!action">Show button on snack bar</p>
@@ -27,7 +41,6 @@ <h1>SnackBar demo</h1>
       </md-form-field>
     </md-checkbox>
   </div>
-
   <p>
     <md-checkbox [(ngModel)]="addExtraClass">Add extra class to container</md-checkbox>
   </p>

src/demo-app/snack-bar/snack-bar-demo.ts

@@ -1,5 +1,11 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {MdSnackBar, MdSnackBarConfig} from '@angular/material';
+import {
+  MdSnackBar,
+  MdSnackBarConfig,
+  MdSnackBarHorizontalPosition,
+  MdSnackBarVerticalPosition,
+  Dir,
+} from '@angular/material';
 
 @Component({
   moduleId: module.id,
@@ -15,13 +21,18 @@ export class SnackBarDemo {
   setAutoHide: boolean = true;
   autoHide: number = 10000;
   addExtraClass: boolean = false;
+  horizontalPosition: MdSnackBarHorizontalPosition = 'center';
+  verticalPosition: MdSnackBarVerticalPosition = 'bottom';
 
-  constructor(public snackBar: MdSnackBar) { }
+  constructor(public snackBar: MdSnackBar, private dir: Dir) { }
 
   open() {
     let config = new MdSnackBarConfig();
+    config.verticalPosition = this.verticalPosition;
+    config.horizontalPosition = this.horizontalPosition;
     config.duration = this.autoHide;
     config.extraClasses = this.addExtraClass ? ['party'] : undefined;
+    config.direction = this.dir.value;
     this.snackBar.open(this.message, this.action ? this.actionButtonLabel : undefined, config);
   }
 }

src/lib/snack-bar/snack-bar-config.ts

@@ -12,6 +12,12 @@ import {Direction} from '@angular/cdk/bidi';
 
 export const MD_SNACK_BAR_DATA = new InjectionToken<any>('MdSnackBarData');
 
+/** Possible values for horizontalPosition on MdSnackBarConfig. */
+export type MdSnackBarHorizontalPosition = 'start' | 'center' | 'end' | 'left' | 'right';
+
+/** Possible values for verticalPosition on MdSnackBarConfig. */
+export type MdSnackBarVerticalPosition = 'top' | 'bottom';
+
 /**
  * Configuration used when opening a snack-bar.
  */
@@ -36,4 +42,10 @@ export class MdSnackBarConfig {
 
   /** Data being injected into the child component. */
   data?: any = null;
+
+  /** The horizontal position to place the snack bar. */
+  horizontalPosition?: MdSnackBarHorizontalPosition = 'center';
+
+  /** The vertical position to place the snack bar. */
+  verticalPosition?: MdSnackBarVerticalPosition = 'bottom';
 }

src/lib/snack-bar/snack-bar-container.scss

@@ -3,18 +3,36 @@
 $mat-snack-bar-padding: 14px 24px !default;
 $mat-snack-bar-min-width: 288px !default;
 $mat-snack-bar-max-width: 568px !default;
+$mat-snack-bar-spacing-margin: 24px !default;
 
 
 .mat-snack-bar-container {
   border-radius: 2px;
   box-sizing: content-box;
   display: block;
+  margin: $mat-snack-bar-spacing-margin;
   max-width: $mat-snack-bar-max-width;
   min-width: $mat-snack-bar-min-width;
   padding: $mat-snack-bar-padding;
-  // Initial transformation is applied to start snack bar out of view.
+  // Initial transformation is applied to start snack bar out of view, below its target position.
   transform: translateY(100%);
 
+  /** 
+   * Removes margin of snack bars which are center positioned horizontally.  This
+   * is done to align snack bars to the edge of the view vertically to match spec.
+   */
+  &.mat-snack-bar-center {
+    margin: 0;
+  }
+
+  /**
+   * To allow for animations from a 'top' vertical position to animate in a downward
+   * direction, set the translation to start the snack bar above the target position.
+   */
+  &.mat-snack-bar-top {
+    transform: translateY(-100%);
+  }
+
   @include cdk-high-contrast {
     border: solid 1px;
   }

src/lib/snack-bar/snack-bar-container.ts

@@ -37,7 +37,7 @@ import {Subject} from 'rxjs/Subject';
 import {MdSnackBarConfig} from './snack-bar-config';
 
 
-export type SnackBarState = 'initial' | 'visible' | 'complete' | 'void';
+export type SnackBarState = 'visible' | 'hidden' | 'void';
 
 // TODO(jelbourn): we can't use constants from animation.ts here because you can't use
 // a text interpolation in anything that is analyzed statically with ngc (for AoT compile).
@@ -58,17 +58,22 @@ export const HIDE_ANIMATION = '195ms cubic-bezier(0.0,0.0,0.2,1)';
   host: {
     'role': 'alert',
     'class': 'mat-snack-bar-container',
-    '[@state]': 'animationState',
+    '[@state]': 'getAnimationState()',
     '(@state.done)': 'onAnimationEnd($event)'
   },
   animations: [
     trigger('state', [
-      state('void', style({transform: 'translateY(100%)'})),
-      state('initial', style({transform: 'translateY(100%)'})),
-      state('visible', style({transform: 'translateY(0%)'})),
-      state('complete', style({transform: 'translateY(100%)'})),
-      transition('visible => complete', animate(HIDE_ANIMATION)),
-      transition('initial => visible, void => visible', animate(SHOW_ANIMATION)),
+      // Animation from top.
+      state('visible-top', style({transform: 'translateY(0%)'})),
+      state('hidden-top', style({transform: 'translateY(-100%)'})),
+      transition('visible-top => hidden-top', animate(HIDE_ANIMATION)),
+      transition('void => visible-top', animate(SHOW_ANIMATION)),
+      // Animation from bottom.
+      state('visible-bottom', style({transform: 'translateY(0%)'})),
+      state('hidden-bottom', style({transform: 'translateY(100%)'})),
+      transition('visible-bottom => hidden-bottom', animate(HIDE_ANIMATION)),
+      transition('void => visible-bottom',
+        animate(SHOW_ANIMATION)),
     ])
   ],
 })
@@ -83,7 +88,7 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy {
   private onEnter: Subject<any> = new Subject();
 
   /** The state of the snack bar animations. */
-  animationState: SnackBarState = 'initial';
+  private _animationState: SnackBarState;
 
   /** The snack bar configuration. */
   snackBarConfig: MdSnackBarConfig;
@@ -95,6 +100,14 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy {
     super();
   }
 
+  /**
+   * Gets the current animation state both combining one of the possibilities from
+   * SnackBarState and the vertical location.
+   */
+  getAnimationState(): string {
+    return `${this._animationState}-${this.snackBarConfig.verticalPosition}`;
+  }
+
   /** Attach a component portal as content to this snack bar container. */
   attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
     if (this._portalHost.hasAttached()) {
@@ -109,6 +122,14 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy {
       }
     }
 
+    if (this.snackBarConfig.horizontalPosition === 'center') {
+      this._renderer.addClass(this._elementRef.nativeElement, 'mat-snack-bar-center');
+    }
+
+    if (this.snackBarConfig.verticalPosition === 'top') {
+      this._renderer.addClass(this._elementRef.nativeElement, 'mat-snack-bar-top');
+    }
+
     return this._portalHost.attachComponentPortal(portal);
   }
 
@@ -119,15 +140,14 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy {
 
   /** Handle end of animations, updating the state of the snackbar. */
   onAnimationEnd(event: AnimationEvent) {
-    if (event.toState === 'void' || event.toState === 'complete') {
+    if (event.toState === 'void' || event.toState.startsWith('hidden')) {
       this._completeExit();
     }
 
-    if (event.toState === 'visible') {
+    if (event.toState.startsWith('visible')) {
       // Note: we shouldn't use `this` inside the zone callback,
       // because it can cause a memory leak.
       const onEnter = this.onEnter;
-
       this._ngZone.run(() => {
         onEnter.next();
         onEnter.complete();
@@ -137,18 +157,18 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy {
 
   /** Begin animation of snack bar entrance into view. */
   enter(): void {
-    this.animationState = 'visible';
+    this._animationState = 'visible';
   }
 
   /** Returns an observable resolving when the enter animation completes.  */
   _onEnter(): Observable<void> {
-    this.animationState = 'visible';
+    this._animationState = 'visible';
     return this.onEnter.asObservable();
   }
 
   /** Begin animation of the snack bar exiting from view. */
   exit(): Observable<void> {
-    this.animationState = 'complete';
+    this._animationState = 'hidden';
     return this._onExit();
   }