diff --git a/ionic/components/menu/menu-types.scss b/ionic/components/menu/menu-types.scss
index dbbfddae67..5e4f990101 100644
--- a/ionic/components/menu/menu-types.scss
+++ b/ionic/components/menu/menu-types.scss
@@ -35,3 +35,7 @@ ion-menu[type=overlay] {
}
}
}
+
+ion-menu[type=overlay][side=right] {
+ left: 8px;
+}
diff --git a/ionic/components/menu/menu-types.ts b/ionic/components/menu/menu-types.ts
index 360aeb4321..0666a38d12 100644
--- a/ionic/components/menu/menu-types.ts
+++ b/ionic/components/menu/menu-types.ts
@@ -10,7 +10,7 @@ import {Animation} from 'ionic/animations/animation';
*/
export class MenuType {
- constructor(menu: Menu) {
+ constructor() {
this.open = new Animation();
this.close = new Animation();
}
@@ -88,16 +88,17 @@ class MenuRevealType extends MenuType {
let duration = 250;
let openedX = (menu.width() * (menu.side == 'right' ? -1 : 1)) + 'px';
+ let closedX = '0px'
this.open.easing(easing).duration(duration);
this.close.easing(easing).duration(duration);
let contentOpen = new Animation(menu.getContentElement());
- contentOpen.fromTo(TRANSLATE_X, CENTER, openedX);
+ contentOpen.fromTo(TRANSLATE_X, closedX, openedX);
this.open.add(contentOpen);
let contentClose = new Animation(menu.getContentElement());
- contentClose.fromTo(TRANSLATE_X, openedX, CENTER);
+ contentClose.fromTo(TRANSLATE_X, openedX, closedX);
this.close.add(contentClose);
}
}
@@ -117,13 +118,23 @@ class MenuOverlayType extends MenuType {
let duration = 250;
let backdropOpacity = 0.5;
- let closedX = (menu.width() * (menu.side == 'right' ? 1 : -1)) + 'px';
+ let closedX, openedX;
+ if (menu.side == 'right') {
+ // right side
+ closedX = menu.platform.width() + 'px';
+ openedX = (menu.platform.width() - menu.width() - 8) + 'px';
+
+ } else {
+ // left side
+ closedX = -menu.width() + 'px';
+ openedX = '8px';
+ }
this.open.easing(easing).duration(duration);
this.close.easing(easing).duration(duration);
let menuOpen = new Animation(menu.getMenuElement());
- menuOpen.fromTo(TRANSLATE_X, closedX, '8px');
+ menuOpen.fromTo(TRANSLATE_X, closedX, openedX);
this.open.add(menuOpen);
let backdropOpen = new Animation(menu.getBackdropElement());
@@ -131,7 +142,7 @@ class MenuOverlayType extends MenuType {
this.open.add(backdropOpen);
let menuClose = new Animation(menu.getMenuElement());
- menuClose.fromTo(TRANSLATE_X, '8px', closedX);
+ menuClose.fromTo(TRANSLATE_X, openedX, closedX);
this.close.add(menuClose);
let backdropClose = new Animation(menu.getBackdropElement());
@@ -144,4 +155,3 @@ Menu.register('overlay', MenuOverlayType);
const OPACITY = 'opacity';
const TRANSLATE_X = 'translateX';
-const CENTER = '0px';
diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts
index d911b2ed9a..e980069aa4 100644
--- a/ionic/components/menu/menu.ts
+++ b/ionic/components/menu/menu.ts
@@ -4,6 +4,7 @@ import {Ion} from '../ion';
import {IonicApp} from '../app/app';
import {IonicConfig} from '../../config/config';
import {IonicComponent} from '../../config/annotations';
+import {IonicPlatform} from '../../platform/platform';
import * as gestures from './menu-gestures';
@@ -35,10 +36,16 @@ import * as gestures from './menu-gestures';
})
export class Menu extends Ion {
- constructor(app: IonicApp, elementRef: ElementRef, config: IonicConfig) {
+ constructor(
+ app: IonicApp,
+ elementRef: ElementRef,
+ config: IonicConfig,
+ platform: IonicPlatform
+ ) {
super(elementRef, config);
-
this.app = app;
+ this.platform = platform;
+
this.opening = new EventEmitter('opening');
this.isOpen = false;
this._disableTime = 0;
@@ -46,9 +53,9 @@ export class Menu extends Ion {
onInit() {
super.onInit();
- this.contentElement = (this.content instanceof Node) ? this.content : this.content.getNativeElement();
+ this._cntEle = (this.content instanceof Node) ? this.content : this.content.getNativeElement();
- if (!this.contentElement) {
+ if (!this._cntEle) {
return console.error('Menu: must have a [content] element to listen for drag events on. Example:\n\n\n\n');
}
@@ -61,8 +68,8 @@ export class Menu extends Ion {
this._initGesture();
this._initType(this.type);
- this.contentElement.classList.add('menu-content');
- this.contentElement.classList.add('menu-content-' + this.type);
+ this._cntEle.classList.add('menu-content');
+ this._cntEle.classList.add('menu-content-' + this.type);
let self = this;
this.onContentClick = function(ev) {
@@ -161,11 +168,11 @@ export class Menu extends Ion {
this.isOpen = isOpen;
- this.contentElement.classList[isOpen ? 'add' : 'remove']('menu-content-open');
+ this._cntEle.classList[isOpen ? 'add' : 'remove']('menu-content-open');
- this.contentElement.removeEventListener('click', this.onContentClick);
+ this._cntEle.removeEventListener('click', this.onContentClick);
if (isOpen) {
- this.contentElement.addEventListener('click', this.onContentClick);
+ this._cntEle.addEventListener('click', this.onContentClick);
} else {
this.getNativeElement().classList.remove('show-menu');
@@ -220,7 +227,7 @@ export class Menu extends Ion {
* @return {Element} The Menu's associated content element.
*/
getContentElement() {
- return this.contentElement;
+ return this._cntEle;
}
/**
@@ -239,7 +246,7 @@ export class Menu extends Ion {
this.app.unregister(this.id);
this._gesture && this._gesture.destroy();
this._type && this._type.onDestroy();
- this.contentElement = null;
+ this._cntEle = null;
}
}
diff --git a/ionic/components/menu/test/basic/index.ts b/ionic/components/menu/test/basic/index.ts
index 698cec4a47..65952ff9af 100644
--- a/ionic/components/menu/test/basic/index.ts
+++ b/ionic/components/menu/test/basic/index.ts
@@ -36,9 +36,9 @@ class E2EApp {
];
}
- openPage(menu, page) {
+ openPage(page) {
// close the menu when clicking a link from the menu
- menu.close();
+ this.app.getComponent('leftMenu').close();
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
diff --git a/ionic/components/menu/test/basic/main.html b/ionic/components/menu/test/basic/main.html
index 9bdeb5cfd0..4905ae6c36 100644
--- a/ionic/components/menu/test/basic/main.html
+++ b/ionic/components/menu/test/basic/main.html
@@ -1,4 +1,4 @@
-
+
+
+
+