feat(menu): add animations and ripples

Closes #1671

src/lib/core/style/_menu-common.scss

@@ -11,7 +11,6 @@ $md-menu-overlay-max-width: 280px !default;   // 56 * 5
 $md-menu-item-height: 48px !default;
 $md-menu-font-size: 16px !default;
 $md-menu-side-padding: 16px !default;
-$md-menu-vertical-padding: 8px !default;
 
 @mixin md-menu-base() {
   @include md-elevation(2);
@@ -20,9 +19,6 @@ $md-menu-vertical-padding: 8px !default;
 
   overflow: auto;
   -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
-
-  padding-top: $md-menu-vertical-padding;
-  padding-bottom: $md-menu-vertical-padding;
 }
 
 @mixin md-menu-item-base() {
@@ -43,3 +39,25 @@ $md-menu-vertical-padding: 8px !default;
     cursor: default;
   }
 }
+
+/**
+ * This mixin adds the correct panel transform styles based
+ * on the direction that the menu panel opens.
+ */
+@mixin md-menu-positions() {
+  &.md-menu-after.md-menu-below {
+    transform-origin: left top;
+  }
+
+  &.md-menu-after.md-menu-above {
+    transform-origin: left bottom;
+  }
+
+  &.md-menu-before.md-menu-below {
+    transform-origin: right top;
+  }
+
+  &.md-menu-before.md-menu-above {
+    transform-origin: right bottom;
+  }
+}

src/lib/menu/_menu-theme.scss

@@ -6,7 +6,7 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  .md-menu-panel {
+  .md-menu-content {
     background: md-color($background, 'card');
   }
 

src/lib/menu/menu-animations.ts

@@ -0,0 +1,51 @@
+import{
+  AnimationEntryMetadata,
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/core';
+
+/**
+ * Below are all the animations for the md-menu component.
+ * Animation duration and timing values are based on Material 1.
+ */
+
+
+/**
+ * This animation controls the menu panel's entry and exit from the page.
+ *
+ * When the menu panel is added to the DOM, it scales in and fades in its border.
+ *
+ * When the menu panel is removed from the DOM, it simply fades out after a brief
+ * delay to display the ripple.
+ */
+export const transformMenu: AnimationEntryMetadata = trigger('transformMenu', [
+  state('showing', style({
+    opacity: 1,
+    transform: `scale(1)`
+  })),
+  transition('void => *', [
+    style({
+      opacity: 0,
+      transform: `scale(0)`
+    }),
+    animate(`200ms cubic-bezier(0.25, 0.8, 0.25, 1)`)
+  ]),
+  transition('* => void', [
+    animate('50ms 100ms linear', style({opacity: 0}))
+  ])
+]);
+
+/**
+ * This animation fades in the background color and content of the menu panel
+ * after its containing element is scaled in.
+ */
+export const fadeInItems: AnimationEntryMetadata = trigger('fadeInItems', [
+  state('showing', style({opacity: 1})),
+  transition('void => showing', [
+    style({opacity: 0}),
+    animate(`200ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)`)
+  ])
+]);

src/lib/menu/menu-directive.ts

@@ -12,14 +12,15 @@ import {
   QueryList,
   TemplateRef,
   ViewChild,
-  ViewEncapsulation
+  ViewEncapsulation,
 } from '@angular/core';
 import {MenuPositionX, MenuPositionY} from './menu-positions';
 import {MdMenuInvalidPositionX, MdMenuInvalidPositionY} from './menu-errors';
 import {MdMenuItem} from './menu-item';
 import {ListKeyManager} from '../core/a11y/list-key-manager';
 import {MdMenuPanel} from './menu-panel';
 import {Subscription} from 'rxjs/Subscription';
+import {transformMenu, fadeInItems} from './menu-animations';
 
 @Component({
   moduleId: module.id,
@@ -28,6 +29,10 @@ import {Subscription} from 'rxjs/Subscription';
   templateUrl: 'menu.html',
   styleUrls: ['menu.css'],
   encapsulation: ViewEncapsulation.None,
+  animations: [
+    transformMenu,
+    fadeInItems
+  ],
   exportAs: 'mdMenu'
 })
 export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
@@ -37,7 +42,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
   private _tabSubscription: Subscription;
 
   /** Config object to be passed into the menu's ngClass */
-  _classList: Object;
+  _classList: any = {};
 
   positionX: MenuPositionX = 'after';
   positionY: MenuPositionY = 'below';
@@ -49,6 +54,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
               @Attribute('y-position') posY: MenuPositionY) {
     if (posX) { this._setPositionX(posX); }
     if (posY) { this._setPositionY(posY); }
+    this._setPositionClasses();
   }
 
   // TODO: internal
@@ -77,6 +83,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
       obj[className] = true;
       return obj;
     }, {});
+    this._setPositionClasses();
   }
 
   @Output() close = new EventEmitter<void>();
@@ -91,11 +98,12 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
     this.items.first.focus();
     this._keyManager.focusedItemIndex = 0;
   }
+
   /**
    * This emits a close event to which the trigger is subscribed. When emitted, the
    * trigger will close the menu.
    */
-  private _emitCloseEvent(): void {
+  _emitCloseEvent(): void {
     this.close.emit();
   }
 
@@ -112,4 +120,16 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
     }
     this.positionY = pos;
   }
+
+  /**
+   * It's necessary to set position-based classes to ensure the menu panel animation
+   * folds out from the correct direction.
+   */
+  private _setPositionClasses() {
+    this._classList['md-menu-before'] = this.positionX == 'before';
+    this._classList['md-menu-after'] = this.positionX == 'after';
+    this._classList['md-menu-above'] = this.positionY == 'above';
+    this._classList['md-menu-below'] = this.positionY == 'below';
+  }
+
 }

src/lib/menu/menu-item.html

@@ -0,0 +1,4 @@
+<ng-content></ng-content>
+<div class="md-menu-ripple" *ngIf="!disabled" md-ripple md-ripple-background-color="rgba(0,0,0,0)"
+     [md-ripple-trigger]="_getHostElement()">
+</div>

src/lib/menu/menu-item.ts

@@ -1,17 +1,19 @@
-import {Directive, ElementRef, Input, HostBinding, Renderer} from '@angular/core';
+import {Component, ElementRef, Input, HostBinding, Renderer} from '@angular/core';
 import {MdFocusable} from '../core/a11y/list-key-manager';
 
 /**
  * This directive is intended to be used inside an md-menu tag.
  * It exists mostly to set the role attribute.
  */
-@Directive({
+@Component({
+  moduleId: module.id,
   selector: '[md-menu-item]',
   host: {
     'role': 'menuitem',
     '(click)': '_checkDisabled($event)',
     'tabindex': '-1'
   },
+  templateUrl: 'menu-item.html',
   exportAs: 'mdMenuItem'
 })
 export class MdMenuItem implements MdFocusable {
@@ -36,12 +38,14 @@ export class MdMenuItem implements MdFocusable {
 
   @HostBinding('attr.aria-disabled')
   get isAriaDisabled(): string {
-    return String(this.disabled);
+    return String(!!this.disabled);
+  }
+
+
+  _getHostElement(): HTMLElement {
+    return this._elementRef.nativeElement;
   }
 
-  /**
-   * TODO: internal
-   */
   _checkDisabled(event: Event) {
     if (this.disabled) {
       event.preventDefault();

src/lib/menu/menu.html

@@ -1,7 +1,9 @@
 <template>
-  <div class="md-menu-panel" [ngClass]="_classList"
-      (click)="_emitCloseEvent()" (keydown)="_keyManager.onKeydown($event)">
-    <ng-content></ng-content>
+  <div class="md-menu-panel" [ngClass]="_classList" (keydown)="_keyManager.onKeydown($event)"
+    (click)="_emitCloseEvent()" [@transformMenu]="'showing'">
+    <div class="md-menu-content" [@fadeInItems]="'showing'">
+      <ng-content></ng-content>
+    </div>
   </div>
 </template>
 

src/lib/menu/menu.scss

@@ -5,18 +5,35 @@
 @import '../core/style/sidenav-common';
 @import '../core/style/menu-common';
 
+$md-menu-vertical-padding: 8px !default;
+
 .md-menu-panel {
   @include md-menu-base();
+  @include md-menu-positions();
 
   // max height must be 100% of the viewport height + one row height
   max-height: calc(100vh + 48px);
 }
 
+.md-menu-content {
+  padding-top: $md-menu-vertical-padding;
+  padding-bottom: $md-menu-vertical-padding;
+}
+
 [md-menu-item] {
   @include md-button-reset();
   @include md-menu-item-base();
+  position: relative;
 }
 
 button[md-menu-item] {
   width: 100%;
 }
+
+.md-menu-ripple {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}