Allow snackbar position to be set to left or center.

Author: josephperrott

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

@@ -3,6 +3,13 @@ <h1>SnackBar demo</h1>
   <div>
     Message: <md-input-container><input mdInput type="text" [(ngModel)]="message"></md-input-container>
   </div>
+  <div>
+    <span>Position in page: </span>
+    <md-radio-group [(ngModel)]="position">
+      <md-radio-button value="left">Left</md-radio-button>
+      <md-radio-button value="center">Center</md-radio-button>
+    </md-radio-group>
+  </div>
   <div>
     <md-checkbox [(ngModel)]="action">
       <p *ngIf="!action">Show button on snack bar</p>
@@ -27,7 +34,6 @@ <h1>SnackBar demo</h1>
       </md-input-container>
     </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

@@ -15,12 +15,14 @@ export class SnackBarDemo {
   setAutoHide: boolean = true;
   autoHide: number = 10000;
   addExtraClass: boolean = false;
+  position: 'center' | 'left' = 'center';
 
   constructor(public snackBar: MdSnackBar) { }
 
   open() {
     let config = new MdSnackBarConfig();
-    config.duration = this.autoHide;
+    config.position = this.position;
+    config.duration = this.setAutoHide ? this.autoHide : 0;
     config.extraClasses = this.addExtraClass ? ['party'] : null;
     this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
   }

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

@@ -19,4 +19,7 @@ export class MdSnackBarConfig {
 
   /** Extra CSS classes to be added to the snack bar container. */
   extraClasses?: string[];
+
+  /** The position to place the snack bar in the view, either 'left' or 'center'.  */
+  position?: string = 'center';
 }

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

@@ -54,7 +54,7 @@ export class MdSnackBar {
    */
   openFromComponent<T>(component: ComponentType<T>, config?: MdSnackBarConfig): MdSnackBarRef<T> {
     config = _applyConfigDefaults(config);
-    let overlayRef = this._createOverlay();
+    let overlayRef = this._createOverlay(config);
     let snackBarContainer = this._attachSnackBarContainer(overlayRef, config);
     let snackBarRef = this._attachSnackbarContent(component, snackBarContainer, overlayRef);
 
@@ -140,11 +140,17 @@ export class MdSnackBar {
   /**
    * Creates a new overlay and places it in the correct location.
    */
-  private _createOverlay(): OverlayRef {
+  private _createOverlay(config: MdSnackBarConfig): OverlayRef {
     let state = new OverlayState();
-    state.positionStrategy = this._overlay.position().global()
+    if (config.position === 'left') {
+      state.positionStrategy = this._overlay.position().global()
+        .left('24px')
+        .bottom('24px');
+    } else {
+      state.positionStrategy = this._overlay.position().global()
         .centerHorizontally()
         .bottom('0');
+    }
     return this._overlay.create(state);
   }
 }