improvements

Author: kara

e2e/components/menu/menu-page.ts

@@ -14,11 +14,9 @@ export class MenuPage {
 
   body() { return element(by.tagName('body')); }
 
-  firstItem() { return element(by.id('one')); }
-
-  secondItem() { return element(by.id('two')); }
-
-  thirdItem() { return element(by.id('three')); }
+  items(index: number) {
+    return element.all(by.css('[md-menu-item]')).get(index);
+  }
 
   textArea() { return element(by.id('text')); }
 

e2e/components/menu/menu.e2e.ts

@@ -1,49 +1,49 @@
 import { MenuPage } from './menu-page';
 
-describe('menu', function () {
+describe('menu', () => {
   let page: MenuPage;
 
   beforeEach(function() {
     page = new MenuPage();
   });
 
-  it('should open menu when the trigger is clicked', function () {
+  it('should open menu when the trigger is clicked', () => {
     page.expectMenuPresent(false);
     page.trigger().click();
 
     page.expectMenuPresent(true);
     expect(page.menu().getText()).toEqual("One\nTwo\nThree");
   });
 
-  it('should close menu when area outside menu is clicked', function () {
+  it('should close menu when area outside menu is clicked', () => {
     page.trigger().click();
     page.body().click();
     page.expectMenuPresent(false);
   });
 
-  it('should close menu when menu item is clicked', function () {
+  it('should close menu when menu item is clicked', () => {
     page.trigger().click();
-    page.firstItem().click();
+    page.items(0).click();
     page.expectMenuPresent(false);
   });
 
-  it('should run click handlers on regular menu items', function() {
+  it('should run click handlers on regular menu items', () => {
     page.trigger().click();
-    page.firstItem().click();
+    page.items(0).click();
     expect(page.getResultText()).toEqual('one');
 
     page.trigger().click();
-    page.secondItem().click();
+    page.items(1).click();
     expect(page.getResultText()).toEqual('two');
   });
 
-  it('should run not run click handlers on disabled menu items', function() {
+  it('should run not run click handlers on disabled menu items', () => {
     page.trigger().click();
-    page.thirdItem().click();
+    page.items(2).click();
     expect(page.getResultText()).toEqual('');
   });
 
-  it('should support multiple triggers opening the same menu', function() {
+  it('should support multiple triggers opening the same menu', () => {
     page.triggerTwo().click();
     expect(page.menu().getText()).toEqual("One\nTwo\nThree");
     page.expectMenuAlignedWith(page.menu(), 'trigger-two');
@@ -68,7 +68,7 @@ describe('menu', function () {
 
   describe('position - ', () => {
 
-    it('should default menu alignment to "after below" when not set', function() {
+    it('should default menu alignment to "after below" when not set', () => {
       page.trigger().click();
 
       // menu.x should equal trigger.x, menu.y should equal trigger.y

src/components/menu/menu-positions.ts

@@ -0,0 +1,4 @@
+
+export type MenuPositionX = 'before' | 'after';
+
+export type MenuPositionY = 'above' | 'below';

src/components/menu/menu.scss

@@ -23,7 +23,7 @@ $md-menu-vertical-padding: 8px !default;
 
   // max height must be 100% of the viewport height + one row height
   max-height: calc(100vh + 48px);
-  overflow: scroll;
+  overflow: auto;
   -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
 
   background: md-color($md-background, 'card');

src/components/menu/menu.ts

@@ -6,11 +6,13 @@ import {
     Attribute,
     Component,
     EventEmitter,
+    Input,
     Output,
     TemplateRef,
     ViewChild,
     ViewEncapsulation
 } from '@angular/core';
+import {MenuPositionX, MenuPositionY} from './menu-positions';
 import {MdMenuInvalidPositionX, MdMenuInvalidPositionY} from './menu-errors';
 
 @Component({
@@ -24,53 +26,54 @@ import {MdMenuInvalidPositionX, MdMenuInvalidPositionY} from './menu-errors';
 })
 export class MdMenu {
   private _showClickCatcher: boolean = false;
+
+  // config object to be passed into the menu's ngClass
   private _classList: Object;
-  positionX: 'before' | 'after' = 'after';
-  positionY: 'above' | 'below' = 'below';
 
-  @Output() close = new EventEmitter;
+  positionX: MenuPositionX = 'after';
+  positionY: MenuPositionY = 'below';
+
   @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
 
-  constructor(@Attribute('x-position') posX: 'before' | 'after',
-              @Attribute('y-position') posY: 'above' | 'below',
-              @Attribute('class') classes: string) {
+  constructor(@Attribute('x-position') posX: MenuPositionX,
+              @Attribute('y-position') posY: MenuPositionY) {
     if (posX) { this._setPositionX(posX); }
     if (posY) { this._setPositionY(posY); }
-    this._mirrorHostClasses(classes);
-  }
-
-  /**
-   * This function toggles the display of the menu's click catcher element.
-   * This element covers the viewport when the menu is open to detect clicks outside the menu.
-   * TODO: internal
-   */
-  _setClickCatcher(bool: boolean): void {
-    this._showClickCatcher = bool;
   }
 
   /**
    * This method takes classes set on the host md-menu element and applies them on the
    * menu template that displays in the overlay container.  Otherwise, it's difficult
    * to style the containing menu from outside the component.
-   * @param classes: list of class names
+   * @param classes list of class names
    */
-  private _mirrorHostClasses(classes: string): void {
-    if (!classes) { return; }
-
+  @Input('class')
+  set classList(classes: string) {
     this._classList = classes.split(' ').reduce((obj: any, className: string) => {
       obj[className] = true;
       return obj;
     }, {});
   }
 
-  private _setPositionX(pos: 'before' | 'after'): void {
+  @Output() close = new EventEmitter;
+
+  /**
+   * This function toggles the display of the menu's click catcher element.
+   * This element covers the viewport when the menu is open to detect clicks outside the menu.
+   * TODO: internal
+   */
+  _setClickCatcher(bool: boolean): void {
+    this._showClickCatcher = bool;
+  }
+
+  private _setPositionX(pos: MenuPositionX): void {
     if ( pos !== 'before' && pos !== 'after') {
       throw new MdMenuInvalidPositionX();
     }
     this.positionX = pos;
   }
 
-  private _setPositionY(pos: 'above' | 'below'): void {
+  private _setPositionY(pos: MenuPositionY): void {
     if ( pos !== 'above' && pos !== 'below') {
       throw new MdMenuInvalidPositionY();
     }

src/core/style/_sidenav-mixins.scss

@@ -1,6 +1,6 @@
 /* This mixin ensures an element spans the whole viewport.*/
 @mixin md-fullscreen {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;

src/e2e-app/menu/menu-e2e.html

@@ -5,9 +5,9 @@
     <button [md-menu-trigger-for]="menu" id="trigger-two">TRIGGER 2</button>
 
     <md-menu #menu="mdMenu" class="custom">
-      <button md-menu-item id="one" (click)="selected='one'">One</button>
-      <button md-menu-item id="two" (click)="selected='two'">Two</button>
-      <button md-menu-item id="three" (click)="selected='three'" disabled>Three</button>
+      <button md-menu-item (click)="selected='one'">One</button>
+      <button md-menu-item (click)="selected='two'">Two</button>
+      <button md-menu-item (click)="selected='three'" disabled>Three</button>
     </md-menu>
 
     <button [md-menu-trigger-for]="beforeMenu" id="before-t">