diff --git a/ionic/components/menu/menu-types.scss b/ionic/components/menu/menu-types.scss index ddc992395a..22057d2112 100644 --- a/ionic/components/menu/menu-types.scss +++ b/ionic/components/menu/menu-types.scss @@ -12,6 +12,9 @@ ion-menu[type=reveal].show-menu { box-shadow: $menu-shadow; } +.menu-content-push { + box-shadow: $menu-shadow; +} // Menu Overlay @@ -40,3 +43,7 @@ ion-menu[type=overlay] { ion-menu[type=overlay][side=right] { left: 8px; } + +ion-menu[type=push][side=right] { + left: 0px; +} diff --git a/ionic/components/menu/menu-types.ts b/ionic/components/menu/menu-types.ts index c24195a540..e0b2f9de54 100644 --- a/ionic/components/menu/menu-types.ts +++ b/ionic/components/menu/menu-types.ts @@ -104,6 +104,54 @@ class MenuRevealType extends MenuType { } Menu.register('reveal', MenuRevealType); +/** + * Menu Push Type + * The content slides over to reveal the menu underneath. + * The menu itself also slides over to reveal its bad self. + */ +class MenuPushType extends MenuType { + constructor(menu) { + super(); + + let easing = 'ease'; + let duration = 250; + + let contentClosedX, contentOpenedX, menuClosedX, menuOpenedX; + + if (menu.side == 'right') { + contentOpenedX = -menu.width() + 'px'; + contentClosedX = '0px'; + menuOpenedX = (menu.platform.width() - menu.width()) + 'px'; + menuClosedX = menu.platform.width() + 'px'; + } else { + contentOpenedX = menu.width() + 'px'; + contentClosedX = '0px'; + menuOpenedX = '0px'; + menuClosedX = -menu.width() + 'px'; + } + // left side + + this.open.easing(easing).duration(duration); + this.close.easing(easing).duration(duration); + + let menuOpen = new Animation(menu.getMenuElement()); + menuOpen.fromTo(TRANSLATE_X, menuClosedX, menuOpenedX); + this.open.add(menuOpen); + + let contentOpen = new Animation(menu.getContentElement()); + contentOpen.fromTo(TRANSLATE_X, contentClosedX, contentOpenedX); + this.open.add(contentOpen); + + let menuClose = new Animation(menu.getMenuElement()); + menuClose.fromTo(TRANSLATE_X, menuOpenedX, menuClosedX); + this.close.add(menuClose); + + let contentClose = new Animation(menu.getContentElement()); + contentClose.fromTo(TRANSLATE_X, contentOpenedX, contentClosedX); + this.close.add(contentClose); + } +} +Menu.register('push', MenuPushType); /** * Menu Overlay Type diff --git a/ionic/components/menu/menu.scss b/ionic/components/menu/menu.scss index 43e3821b2b..6f602e6b9e 100644 --- a/ionic/components/menu/menu.scss +++ b/ionic/components/menu/menu.scss @@ -56,4 +56,3 @@ ion-menu backdrop { } } - diff --git a/ionic/components/menu/test/basic/main.html b/ionic/components/menu/test/basic/main.html index 0c4af2d548..b4ad3eceee 100644 --- a/ionic/components/menu/test/basic/main.html +++ b/ionic/components/menu/test/basic/main.html @@ -1,4 +1,4 @@ - + Left Menu diff --git a/ionic/components/menu/test/push/index.ts b/ionic/components/menu/test/push/index.ts new file mode 100644 index 0000000000..849c7cbed5 --- /dev/null +++ b/ionic/components/menu/test/push/index.ts @@ -0,0 +1,27 @@ +import {App, IonicApp, Page} from 'ionic/ionic'; + + +@Page({templateUrl: 'page1.html'}) +class Page1 {} + + +@App({ + templateUrl: 'main.html' +}) +class E2EApp { + + constructor(app: IonicApp) { + this.app = app; + this.rootView = Page1; + } + + openPage(menu, page) { + // close the menu when clicking a link from the menu + menu.close(); + + // Reset the content nav to have just this page + // we wouldn't want the back button to show in this scenario + let nav = this.app.getComponent('nav'); + nav.setRoot(page.component); + } +} diff --git a/ionic/components/menu/test/push/main.html b/ionic/components/menu/test/push/main.html new file mode 100644 index 0000000000..9cfcdf9387 --- /dev/null +++ b/ionic/components/menu/test/push/main.html @@ -0,0 +1,41 @@ + + + + Left Menu + + + + + + + + + + + + + + + + + + diff --git a/ionic/components/menu/test/push/page1.html b/ionic/components/menu/test/push/page1.html new file mode 100644 index 0000000000..fb8ffbadd8 --- /dev/null +++ b/ionic/components/menu/test/push/page1.html @@ -0,0 +1,29 @@ + + + + + + + + + Push Menu + + + + + + + +

Content

+ +

+ +

+ +

+ +

+ + + +