feat(menu): add animations (#1685)

Author: kara

e2e/components/menu/menu-page.ts

@@ -14,7 +14,7 @@ export class MenuPage {
 
   triggerTwo() { return element(by.id('trigger-two')); }
 
-  body() { return element(by.tagName('body')); }
+  backdrop() { return element(by.css('.md-overlay-backdrop')); }
 
   items(index: number) {
     return element.all(by.css('[md-menu-item]')).get(index);

e2e/components/menu/menu.e2e.ts

@@ -42,21 +42,23 @@ describe('menu', () => {
     expect(page.menu().getText()).toEqual("One\nTwo\nThree\nFour");
     page.expectMenuAlignedWith(page.menu(), 'trigger-two');
 
-    page.body().click();
+    page.backdrop().click();
     page.expectMenuPresent(false);
 
+    // TODO(kara): temporary, remove when #1607 is fixed
+    browser.sleep(250);
     page.trigger().click();
     expect(page.menu().getText()).toEqual("One\nTwo\nThree\nFour");
     page.expectMenuAlignedWith(page.menu(), 'trigger');
 
-    page.body().click();
+    page.backdrop().click();
     page.expectMenuPresent(false);
   });
 
   it('should mirror classes on host to menu template in overlay', () => {
     page.trigger().click();
     page.menu().getAttribute('class').then((classes) => {
-      expect(classes).toEqual('md-menu-panel custom');
+      expect(classes).toContain('md-menu-panel custom');
     });
   });
 
@@ -110,9 +112,10 @@ describe('menu', () => {
       page.pressKey(protractor.Key.TAB);
       page.expectMenuPresent(false);
 
-      page.start().click();
       page.pressKey(protractor.Key.TAB);
       page.pressKey(protractor.Key.ENTER);
+      page.expectMenuPresent(true);
+
       page.pressKey(protractor.Key.chord(protractor.Key.SHIFT, protractor.Key.TAB));
       page.expectMenuPresent(false);
     });

src/e2e-app/e2e-app-module.ts

@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
+import {BrowserModule, AnimationDriver} from '@angular/platform-browser';
 import {RouterModule} from '@angular/router';
 import {SimpleCheckboxes} from './checkbox/checkbox-e2e';
 import {E2EApp, Home} from './e2e-app/e2e-app';
@@ -29,5 +29,8 @@ import {E2E_APP_ROUTES} from './e2e-app/routes';
     Home,
   ],
   bootstrap: [E2EApp],
+  providers: [
+    {provide: AnimationDriver, useValue: AnimationDriver.NOOP}
+  ]
 })
 export class E2eAppModule { }

src/e2e-app/system-config.ts

@@ -15,6 +15,8 @@ System.config({
     '@angular/forms': 'vendor/@angular/forms/bundles/forms.umd.js',
     '@angular/router': 'vendor/@angular/router/bundles/router.umd.js',
     '@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
+    '@angular/platform-browser/testing':
+      'vendor/@angular/platform-browser/bundles/platform-browser-testing.umd.js',
     '@angular/platform-browser-dynamic':
       'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
   },

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() {
@@ -51,3 +47,25 @@ $md-menu-vertical-padding: 8px !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,53 @@
+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.
+ *
+ * TODO(kara): switch to :enter and :leave once Mobile Safari is sorted out.
+ */
+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 => *', [
+    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-trigger.ts

@@ -4,7 +4,6 @@ import {
     Input,
     Output,
     EventEmitter,
-    HostListener,
     ViewContainerRef,
     AfterViewInit,
     OnDestroy,
@@ -33,7 +32,8 @@ import { Subscription } from 'rxjs/Subscription';
   selector: '[md-menu-trigger-for]',
   host: {
     'aria-haspopup': 'true',
-    '(keydown)': '_handleKeydown($event)'
+    '(keydown)': '_handleKeydown($event)',
+    '(click)': 'toggleMenu()'
   },
   exportAs: 'mdMenuTrigger'
 })
@@ -63,7 +63,6 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
 
   get menuOpen(): boolean { return this._menuOpen; }
 
-  @HostListener('click')
   toggleMenu(): void {
     return this._menuOpen ? this.closeMenu() : this.openMenu();
   }

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;
+}