Skip to content

Commit 7fcf511

Browse files
karajelbourn
kara
authored and
jelbourn
committed
feat(menu): add animations (#1685)
1 parent b697823 commit 7fcf511

File tree

15 files changed

+240
-33
lines changed

15 files changed

+240
-33
lines changed

‎e2e/components/menu/menu-page.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export class MenuPage {
1414

1515
triggerTwo() { return element(by.id('trigger-two')); }
1616

17-
body() { return element(by.tagName('body')); }
17+
backdrop() { return element(by.css('.md-overlay-backdrop')); }
1818

1919
items(index: number) {
2020
return element.all(by.css('[md-menu-item]')).get(index);

‎e2e/components/menu/menu.e2e.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,21 +42,23 @@ describe('menu', () => {
4242
expect(page.menu().getText()).toEqual("One\nTwo\nThree\nFour");
4343
page.expectMenuAlignedWith(page.menu(), 'trigger-two');
4444

45-
page.body().click();
45+
page.backdrop().click();
4646
page.expectMenuPresent(false);
4747

48+
// TODO(kara): temporary, remove when #1607 is fixed
49+
browser.sleep(250);
4850
page.trigger().click();
4951
expect(page.menu().getText()).toEqual("One\nTwo\nThree\nFour");
5052
page.expectMenuAlignedWith(page.menu(), 'trigger');
5153

52-
page.body().click();
54+
page.backdrop().click();
5355
page.expectMenuPresent(false);
5456
});
5557

5658
it('should mirror classes on host to menu template in overlay', () => {
5759
page.trigger().click();
5860
page.menu().getAttribute('class').then((classes) => {
59-
expect(classes).toEqual('md-menu-panel custom');
61+
expect(classes).toContain('md-menu-panel custom');
6062
});
6163
});
6264

@@ -110,9 +112,10 @@ describe('menu', () => {
110112
page.pressKey(protractor.Key.TAB);
111113
page.expectMenuPresent(false);
112114

113-
page.start().click();
114115
page.pressKey(protractor.Key.TAB);
115116
page.pressKey(protractor.Key.ENTER);
117+
page.expectMenuPresent(true);
118+
116119
page.pressKey(protractor.Key.chord(protractor.Key.SHIFT, protractor.Key.TAB));
117120
page.expectMenuPresent(false);
118121
});

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {NgModule} from '@angular/core';
2-
import {BrowserModule} from '@angular/platform-browser';
2+
import {BrowserModule, AnimationDriver} from '@angular/platform-browser';
33
import {RouterModule} from '@angular/router';
44
import {SimpleCheckboxes} from './checkbox/checkbox-e2e';
55
import {E2EApp, Home} from './e2e-app/e2e-app';
@@ -29,5 +29,8 @@ import {E2E_APP_ROUTES} from './e2e-app/routes';
2929
Home,
3030
],
3131
bootstrap: [E2EApp],
32+
providers: [
33+
{provide: AnimationDriver, useValue: AnimationDriver.NOOP}
34+
]
3235
})
3336
export class E2eAppModule { }

‎src/e2e-app/system-config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ System.config({
1515
'@angular/forms': 'vendor/@angular/forms/bundles/forms.umd.js',
1616
'@angular/router': 'vendor/@angular/router/bundles/router.umd.js',
1717
'@angular/platform-browser': 'vendor/@angular/platform-browser/bundles/platform-browser.umd.js',
18+
'@angular/platform-browser/testing':
19+
'vendor/@angular/platform-browser/bundles/platform-browser-testing.umd.js',
1820
'@angular/platform-browser-dynamic':
1921
'vendor/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
2022
},

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

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ $md-menu-overlay-max-width: 280px !default; // 56 * 5
1111
$md-menu-item-height: 48px !default;
1212
$md-menu-font-size: 16px !default;
1313
$md-menu-side-padding: 16px !default;
14-
$md-menu-vertical-padding: 8px !default;
1514

1615
@mixin md-menu-base() {
1716
@include md-elevation(2);
@@ -20,9 +19,6 @@ $md-menu-vertical-padding: 8px !default;
2019

2120
overflow: auto;
2221
-webkit-overflow-scrolling: touch; // for momentum scroll on mobile
23-
24-
padding-top: $md-menu-vertical-padding;
25-
padding-bottom: $md-menu-vertical-padding;
2622
}
2723

2824
@mixin md-menu-item-base() {
@@ -51,3 +47,25 @@ $md-menu-vertical-padding: 8px !default;
5147
}
5248
}
5349
}
50+
51+
/**
52+
* This mixin adds the correct panel transform styles based
53+
* on the direction that the menu panel opens.
54+
*/
55+
@mixin md-menu-positions() {
56+
&.md-menu-after.md-menu-below {
57+
transform-origin: left top;
58+
}
59+
60+
&.md-menu-after.md-menu-above {
61+
transform-origin: left bottom;
62+
}
63+
64+
&.md-menu-before.md-menu-below {
65+
transform-origin: right top;
66+
}
67+
68+
&.md-menu-before.md-menu-above {
69+
transform-origin: right bottom;
70+
}
71+
}

‎src/lib/menu/_menu-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
$background: map-get($theme, background);
77
$foreground: map-get($theme, foreground);
88

9-
.md-menu-panel {
9+
.md-menu-content {
1010
background: md-color($background, 'card');
1111
}
1212

‎src/lib/menu/menu-animations.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import{
2+
AnimationEntryMetadata,
3+
trigger,
4+
state,
5+
style,
6+
animate,
7+
transition
8+
} from '@angular/core';
9+
10+
/**
11+
* Below are all the animations for the md-menu component.
12+
* Animation duration and timing values are based on Material 1.
13+
*/
14+
15+
16+
/**
17+
* This animation controls the menu panel's entry and exit from the page.
18+
*
19+
* When the menu panel is added to the DOM, it scales in and fades in its border.
20+
*
21+
* When the menu panel is removed from the DOM, it simply fades out after a brief
22+
* delay to display the ripple.
23+
*
24+
* TODO(kara): switch to :enter and :leave once Mobile Safari is sorted out.
25+
*/
26+
export const transformMenu: AnimationEntryMetadata = trigger('transformMenu', [
27+
state('showing', style({
28+
opacity: 1,
29+
transform: `scale(1)`
30+
})),
31+
transition('void => *', [
32+
style({
33+
opacity: 0,
34+
transform: `scale(0)`
35+
}),
36+
animate(`200ms cubic-bezier(0.25, 0.8, 0.25, 1)`)
37+
]),
38+
transition('* => void', [
39+
animate('50ms 100ms linear', style({opacity: 0}))
40+
])
41+
]);
42+
43+
/**
44+
* This animation fades in the background color and content of the menu panel
45+
* after its containing element is scaled in.
46+
*/
47+
export const fadeInItems: AnimationEntryMetadata = trigger('fadeInItems', [
48+
state('showing', style({opacity: 1})),
49+
transition('void => *', [
50+
style({opacity: 0}),
51+
animate(`200ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)`)
52+
])
53+
]);

‎src/lib/menu/menu-directive.ts‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,15 @@ import {
1212
QueryList,
1313
TemplateRef,
1414
ViewChild,
15-
ViewEncapsulation
15+
ViewEncapsulation,
1616
} from '@angular/core';
1717
import {MenuPositionX, MenuPositionY} from './menu-positions';
1818
import {MdMenuInvalidPositionX, MdMenuInvalidPositionY} from './menu-errors';
1919
import {MdMenuItem} from './menu-item';
2020
import {ListKeyManager} from '../core/a11y/list-key-manager';
2121
import {MdMenuPanel} from './menu-panel';
2222
import {Subscription} from 'rxjs/Subscription';
23+
import {transformMenu, fadeInItems} from './menu-animations';
2324

2425
@Component({
2526
moduleId: module.id,
@@ -28,6 +29,10 @@ import {Subscription} from 'rxjs/Subscription';
2829
templateUrl: 'menu.html',
2930
styleUrls: ['menu.css'],
3031
encapsulation: ViewEncapsulation.None,
32+
animations: [
33+
transformMenu,
34+
fadeInItems
35+
],
3136
exportAs: 'mdMenu'
3237
})
3338
export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
@@ -37,7 +42,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
3742
private _tabSubscription: Subscription;
3843

3944
/** Config object to be passed into the menu's ngClass */
40-
_classList: Object;
45+
_classList: any = {};
4146

4247
positionX: MenuPositionX = 'after';
4348
positionY: MenuPositionY = 'below';
@@ -49,6 +54,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
4954
@Attribute('y-position') posY: MenuPositionY) {
5055
if (posX) { this._setPositionX(posX); }
5156
if (posY) { this._setPositionY(posY); }
57+
this._setPositionClasses();
5258
}
5359

5460
// TODO: internal
@@ -77,6 +83,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
7783
obj[className] = true;
7884
return obj;
7985
}, {});
86+
this._setPositionClasses();
8087
}
8188

8289
@Output() close = new EventEmitter<void>();
@@ -91,11 +98,12 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
9198
this.items.first.focus();
9299
this._keyManager.focusedItemIndex = 0;
93100
}
101+
94102
/**
95103
* This emits a close event to which the trigger is subscribed. When emitted, the
96104
* trigger will close the menu.
97105
*/
98-
private _emitCloseEvent(): void {
106+
_emitCloseEvent(): void {
99107
this.close.emit();
100108
}
101109

@@ -112,4 +120,16 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
112120
}
113121
this.positionY = pos;
114122
}
123+
124+
/**
125+
* It's necessary to set position-based classes to ensure the menu panel animation
126+
* folds out from the correct direction.
127+
*/
128+
private _setPositionClasses() {
129+
this._classList['md-menu-before'] = this.positionX == 'before';
130+
this._classList['md-menu-after'] = this.positionX == 'after';
131+
this._classList['md-menu-above'] = this.positionY == 'above';
132+
this._classList['md-menu-below'] = this.positionY == 'below';
133+
}
134+
115135
}

‎src/lib/menu/menu-item.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<ng-content></ng-content>
2+
<div class="md-menu-ripple" *ngIf="!disabled" md-ripple md-ripple-background-color="rgba(0,0,0,0)"
3+
[md-ripple-trigger]="_getHostElement()">
4+
</div>

‎src/lib/menu/menu-item.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
import {Directive, ElementRef, Input, HostBinding, Renderer} from '@angular/core';
1+
import {Component, ElementRef, Input, HostBinding, Renderer} from '@angular/core';
22
import {MdFocusable} from '../core/a11y/list-key-manager';
33

44
/**
55
* This directive is intended to be used inside an md-menu tag.
66
* It exists mostly to set the role attribute.
77
*/
8-
@Directive({
8+
@Component({
9+
moduleId: module.id,
910
selector: '[md-menu-item]',
1011
host: {
1112
'role': 'menuitem',
1213
'(click)': '_checkDisabled($event)',
1314
'tabindex': '-1'
1415
},
16+
templateUrl: 'menu-item.html',
1517
exportAs: 'mdMenuItem'
1618
})
1719
export class MdMenuItem implements MdFocusable {
@@ -36,12 +38,14 @@ export class MdMenuItem implements MdFocusable {
3638

3739
@HostBinding('attr.aria-disabled')
3840
get isAriaDisabled(): string {
39-
return String(this.disabled);
41+
return String(!!this.disabled);
42+
}
43+
44+
45+
_getHostElement(): HTMLElement {
46+
return this._elementRef.nativeElement;
4047
}
4148

42-
/**
43-
* TODO: internal
44-
*/
4549
_checkDisabled(event: Event) {
4650
if (this.disabled) {
4751
event.preventDefault();

0 commit comments

Comments
 (0)