Skip to content

Commit aebb394

Browse files
committed
improvements
1 parent 6e0356d commit aebb394

File tree

5 files changed

+42
-40
lines changed

5 files changed

+42
-40
lines changed

e2e/components/menu/menu-page.ts

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,9 @@ export class MenuPage {
1414

1515
body() { return element(by.tagName('body')); }
1616

17-
firstItem() { return element(by.id('one')); }
18-
19-
secondItem() { return element(by.id('two')); }
20-
21-
thirdItem() { return element(by.id('three')); }
17+
items(index: number) {
18+
return element.all(by.css('[md-menu-item]')).get(index);
19+
}
2220

2321
textArea() { return element(by.id('text')); }
2422

e2e/components/menu/menu.e2e.ts

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,49 @@
11
import { MenuPage } from './menu-page';
22

3-
describe('menu', function () {
3+
describe('menu', () => {
44
let page: MenuPage;
55

66
beforeEach(function() {
77
page = new MenuPage();
88
});
99

10-
it('should open menu when the trigger is clicked', function () {
10+
it('should open menu when the trigger is clicked', () => {
1111
page.expectMenuPresent(false);
1212
page.trigger().click();
1313

1414
page.expectMenuPresent(true);
1515
expect(page.menu().getText()).toEqual("One\nTwo\nThree");
1616
});
1717

18-
it('should close menu when area outside menu is clicked', function () {
18+
it('should close menu when area outside menu is clicked', () => {
1919
page.trigger().click();
2020
page.body().click();
2121
page.expectMenuPresent(false);
2222
});
2323

24-
it('should close menu when menu item is clicked', function () {
24+
it('should close menu when menu item is clicked', () => {
2525
page.trigger().click();
26-
page.firstItem().click();
26+
page.items(0).click();
2727
page.expectMenuPresent(false);
2828
});
2929

30-
it('should run click handlers on regular menu items', function() {
30+
it('should run click handlers on regular menu items', () => {
3131
page.trigger().click();
32-
page.firstItem().click();
32+
page.items(0).click();
3333
expect(page.getResultText()).toEqual('one');
3434

3535
page.trigger().click();
36-
page.secondItem().click();
36+
page.items(1).click();
3737
expect(page.getResultText()).toEqual('two');
3838
});
3939

40-
it('should run not run click handlers on disabled menu items', function() {
40+
it('should run not run click handlers on disabled menu items', () => {
4141
page.trigger().click();
42-
page.thirdItem().click();
42+
page.items(2).click();
4343
expect(page.getResultText()).toEqual('');
4444
});
4545

46-
it('should support multiple triggers opening the same menu', function() {
46+
it('should support multiple triggers opening the same menu', () => {
4747
page.triggerTwo().click();
4848
expect(page.menu().getText()).toEqual("One\nTwo\nThree");
4949
page.expectMenuAlignedWith(page.menu(), 'trigger-two');
@@ -68,7 +68,7 @@ describe('menu', function () {
6868

6969
describe('position - ', () => {
7070

71-
it('should default menu alignment to "after below" when not set', function() {
71+
it('should default menu alignment to "after below" when not set', () => {
7272
page.trigger().click();
7373

7474
// menu.x should equal trigger.x, menu.y should equal trigger.y

src/components/menu/menu-positions.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
export type MenuPositionX = 'before' | 'after';
3+
4+
export type MenuPositionY = 'above' | 'below';

src/components/menu/menu.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ $md-menu-vertical-padding: 8px !default;
2323

2424
// max height must be 100% of the viewport height + one row height
2525
max-height: calc(100vh + 48px);
26-
overflow: scroll;
26+
overflow: auto;
2727
-webkit-overflow-scrolling: touch; // for momentum scroll on mobile
2828

2929
background: md-color($md-background, 'card');

src/components/menu/menu.ts

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ import {
66
Attribute,
77
Component,
88
EventEmitter,
9+
Input,
910
Output,
1011
TemplateRef,
1112
ViewChild,
1213
ViewEncapsulation
1314
} from '@angular/core';
15+
import {MenuPositionX, MenuPositionY} from './menu-positions';
1416
import {MdMenuInvalidPositionX, MdMenuInvalidPositionY} from './menu-errors';
1517

1618
@Component({
@@ -25,52 +27,50 @@ import {MdMenuInvalidPositionX, MdMenuInvalidPositionY} from './menu-errors';
2527
export class MdMenu {
2628
private _showClickCatcher: boolean = false;
2729
private _classList: Object;
28-
positionX: 'before' | 'after' = 'after';
29-
positionY: 'above' | 'below' = 'below';
30+
positionX: MenuPositionX = 'after';
31+
positionY: MenuPositionY = 'below';
3032

31-
@Output() close = new EventEmitter;
3233
@ViewChild(TemplateRef) templateRef: TemplateRef<any>;
3334

34-
constructor(@Attribute('x-position') posX: 'before' | 'after',
35-
@Attribute('y-position') posY: 'above' | 'below',
36-
@Attribute('class') classes: string) {
35+
constructor(@Attribute('x-position') posX: MenuPositionX,
36+
@Attribute('y-position') posY: MenuPositionY) {
3737
if (posX) { this._setPositionX(posX); }
3838
if (posY) { this._setPositionY(posY); }
39-
this._mirrorHostClasses(classes);
40-
}
41-
42-
/**
43-
* This function toggles the display of the menu's click catcher element.
44-
* This element covers the viewport when the menu is open to detect clicks outside the menu.
45-
* TODO: internal
46-
*/
47-
_setClickCatcher(bool: boolean): void {
48-
this._showClickCatcher = bool;
4939
}
5040

5141
/**
5242
* This method takes classes set on the host md-menu element and applies them on the
5343
* menu template that displays in the overlay container. Otherwise, it's difficult
5444
* to style the containing menu from outside the component.
55-
* @param classes: list of class names
45+
* @param classes list of class names
5646
*/
57-
private _mirrorHostClasses(classes: string): void {
58-
if (!classes) { return; }
59-
47+
@Input('class')
48+
set classList(classes: string) {
6049
this._classList = classes.split(' ').reduce((obj: any, className: string) => {
6150
obj[className] = true;
6251
return obj;
6352
}, {});
6453
}
6554

66-
private _setPositionX(pos: 'before' | 'after'): void {
55+
@Output() close = new EventEmitter;
56+
57+
/**
58+
* This function toggles the display of the menu's click catcher element.
59+
* This element covers the viewport when the menu is open to detect clicks outside the menu.
60+
* TODO: internal
61+
*/
62+
_setClickCatcher(bool: boolean): void {
63+
this._showClickCatcher = bool;
64+
}
65+
66+
private _setPositionX(pos: MenuPositionX): void {
6767
if ( pos !== 'before' && pos !== 'after') {
6868
throw new MdMenuInvalidPositionX();
6969
}
7070
this.positionX = pos;
7171
}
7272

73-
private _setPositionY(pos: 'above' | 'below'): void {
73+
private _setPositionY(pos: MenuPositionY): void {
7474
if ( pos !== 'above' && pos !== 'below') {
7575
throw new MdMenuInvalidPositionY();
7676
}

0 commit comments

Comments
 (0)