diff --git a/demos/aside/index.ts b/demos/aside/index.ts index 126d3a0ffa..9229b217de 100644 --- a/demos/aside/index.ts +++ b/demos/aside/index.ts @@ -24,9 +24,9 @@ class E2EApp { ]; } - openPage(aside, page) { - // close the menu when clicking a link from the aside - aside.close(); + 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 diff --git a/demos/aside/main.html b/demos/aside/main.html index 4126d006dd..9d00a71b6a 100644 --- a/demos/aside/main.html +++ b/demos/aside/main.html @@ -1,4 +1,4 @@ - + Left Menu @@ -8,18 +8,18 @@ - - - + diff --git a/demos/aside/page1.html b/demos/aside/page1.html index d5a69c1e30..3158b757ec 100644 --- a/demos/aside/page1.html +++ b/demos/aside/page1.html @@ -1,12 +1,12 @@ - - Aside + Menu @@ -17,7 +17,7 @@

Page 1

- +

diff --git a/demos/aside/page2.html b/demos/aside/page2.html index 3a27780659..5e7decd736 100644 --- a/demos/aside/page2.html +++ b/demos/aside/page2.html @@ -1,12 +1,12 @@ - - Aside + Menu @@ -16,7 +16,7 @@

Page 2

- +

diff --git a/demos/material/index.ts b/demos/material/index.ts index 1f58f8dda4..e36909fc09 100644 --- a/demos/material/index.ts +++ b/demos/material/index.ts @@ -5,7 +5,7 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic'; @IonicView({ template: '' + 'Heading' + - '' + '' + @@ -81,14 +81,14 @@ export class FirstPage { @App({ template: ` - + Menu Your Profile Playlists Artists - + `, routes: [ { diff --git a/demos/music/main.html b/demos/music/main.html index f922c4b94c..9c7b8fb682 100644 --- a/demos/music/main.html +++ b/demos/music/main.html @@ -1,6 +1,6 @@ - + Search @@ -21,7 +21,7 @@ Settings - + diff --git a/demos/native/main.html b/demos/native/main.html index 88ddb818de..644fd40127 100644 --- a/demos/native/main.html +++ b/demos/native/main.html @@ -1,12 +1,12 @@ - + Plugins - + {{p.title}} - + diff --git a/demos/native/pages/battery.ts b/demos/native/pages/battery.ts index 50632e5cd1..127b4a44f1 100644 --- a/demos/native/pages/battery.ts +++ b/demos/native/pages/battery.ts @@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic'; @IonicView({ template: ` - Battery diff --git a/demos/native/pages/camera.ts b/demos/native/pages/camera.ts index 2ec0970cac..28f8f48d37 100644 --- a/demos/native/pages/camera.ts +++ b/demos/native/pages/camera.ts @@ -5,7 +5,7 @@ import {Camera} from 'ionic/ionic'; @IonicView({ template: ` - Camera @@ -18,7 +18,7 @@ import {Camera} from 'ionic/ionic'; }) export class CameraPage { constructor() { - + } getPicture() { Camera.getPicture({ diff --git a/demos/native/pages/contacts.ts b/demos/native/pages/contacts.ts index ac3215b544..0902c911e2 100644 --- a/demos/native/pages/contacts.ts +++ b/demos/native/pages/contacts.ts @@ -5,7 +5,7 @@ import {Contacts} from 'ionic/ionic'; @IonicView({ template: ` - Contacts diff --git a/demos/native/pages/device-motion.ts b/demos/native/pages/device-motion.ts index 87ca4e2f95..192e63dee3 100644 --- a/demos/native/pages/device-motion.ts +++ b/demos/native/pages/device-motion.ts @@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic'; @IonicView({ template: ` - Device Motion diff --git a/demos/native/pages/device.ts b/demos/native/pages/device.ts index 518f2f2b49..b8704ef6e8 100644 --- a/demos/native/pages/device.ts +++ b/demos/native/pages/device.ts @@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic'; @IonicView({ template: ` - Vibration diff --git a/demos/native/pages/geolocation.ts b/demos/native/pages/geolocation.ts index 7a55a74686..3ca6a6a10c 100644 --- a/demos/native/pages/geolocation.ts +++ b/demos/native/pages/geolocation.ts @@ -5,7 +5,7 @@ import {Geolocation} from 'ionic/ionic'; @IonicView({ template: ` - Vibration diff --git a/demos/native/pages/vibration.ts b/demos/native/pages/vibration.ts index 7747bfe8f8..af3e79327c 100644 --- a/demos/native/pages/vibration.ts +++ b/demos/native/pages/vibration.ts @@ -5,7 +5,7 @@ import {Vibration} from 'ionic/ionic'; @IonicView({ template: ` - Vibration diff --git a/demos/sink/index.ts b/demos/sink/index.ts index aea31a0d36..5c439bae6b 100644 --- a/demos/sink/index.ts +++ b/demos/sink/index.ts @@ -12,7 +12,7 @@ import {SearchBarPage} from './pages/search-bar' import {TableSearchPage} from './pages/table-search' import {IconsPage} from './pages/ionicons' import {TabsPage} from './pages/tabs' -import {AsidePage} from './pages/aside' +import {MenuPage} from './pages/menu' import {AnimationPage} from './pages/animation' import {SlidePage} from './pages/slides' import {ActionMenuPage} from './pages/action-menu' @@ -57,8 +57,8 @@ import {ModalPage} from './pages/modal' path: '/icons', component: IconsPage }, { - path: '/aside', - component: AsidePage + path: '/menu', + component: MenuPage }, { path: '/animation', component: AnimationPage @@ -89,15 +89,15 @@ class MyApp { { title: 'Search Bar', component: SearchBarPage }, { title: 'Table Search', component: TableSearchPage }, { title: 'Icons', component: IconsPage }, - { title: 'Aside', component: AsidePage }, + { title: 'Menu', component: MenuPage }, { title: 'Animation', component: AnimationPage }, { title: 'Slides', component: SlidePage}, { title: 'Action Menu', component: ActionMenuPage }, ]; } - openPage(aside, component) { - aside.close(); + openPage(menu, component) { + menu.close(); let nav = this.app.getComponent('myNav'); nav.setItems([component.component]); diff --git a/demos/sink/main.html b/demos/sink/main.html index 3448f1076e..0f1faf849a 100644 --- a/demos/sink/main.html +++ b/demos/sink/main.html @@ -1,13 +1,13 @@ - + Ionic 2.0 - + {{c.title}} - + diff --git a/demos/sink/pages/aside.ts b/demos/sink/pages/aside.ts index 5c310d381e..530747e349 100644 --- a/demos/sink/pages/aside.ts +++ b/demos/sink/pages/aside.ts @@ -5,13 +5,12 @@ import {SinkPage} from '../sink-page'; @IonicView({ template: ` - Aside + Menu -

Aside

+

Menu

- Asides, also known as side menus or "hamburger" menus (mmmmm), are menus that slide - or swipe in to show menus or information. + Menus slide or swipe in to show more information.

Try it! Just swipe from the left edge of the screen to the right to expose @@ -26,7 +25,7 @@ import {SinkPage} from '../sink-page'; ` }) -export class AsidePage extends SinkPage { +export class MenuPage extends SinkPage { constructor(app: IonicApp) { super(app); } diff --git a/demos/sink/sink-page.ts b/demos/sink/sink-page.ts index 5bc8e62c44..64f28484d1 100644 --- a/demos/sink/sink-page.ts +++ b/demos/sink/sink-page.ts @@ -6,7 +6,7 @@ export class SinkPage { this.app = app; } toggleMenu() { - let aside = this.app.getComponent('mainMenu'); - aside.toggle(); + let menu = this.app.getComponent('mainMenu'); + menu.toggle(); } } diff --git a/ionic/components.ts b/ionic/components.ts index 38ed246e94..ab4f4320c9 100644 --- a/ionic/components.ts +++ b/ionic/components.ts @@ -2,17 +2,17 @@ export * from 'ionic/components/app/app' export * from 'ionic/components/app/id' export * from 'ionic/components/action-menu/action-menu' -export * from 'ionic/components/aside/aside' -export * from 'ionic/components/aside/extensions/types' -export * from 'ionic/components/aside/aside-toggle' export * from 'ionic/components/button/button' export * from 'ionic/components/card/card' export * from 'ionic/components/checkbox/checkbox' export * from 'ionic/components/content/content' +export * from 'ionic/components/form/input' export * from 'ionic/components/icon/icon' export * from 'ionic/components/item/item' export * from 'ionic/components/item/item-group' -export * from 'ionic/components/form/input' +export * from 'ionic/components/menu/menu' +export * from 'ionic/components/menu/extensions/types' +export * from 'ionic/components/menu/menu-toggle' export * from 'ionic/components/text-input/text-input' export * from 'ionic/components/text-input/label' export * from 'ionic/components/list/list' diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index 91c76322d8..0ffc9cbd2c 100644 --- a/ionic/components/app/structure.scss +++ b/ionic/components/app/structure.scss @@ -3,8 +3,8 @@ // -------------------------------------------------- // Grouped by elements which would be siblings -$z-index-aside-overlay: 80 !default; -$z-index-aside-backdrop: 79 !default; +$z-index-menu-overlay: 80 !default; +$z-index-menu-backdrop: 79 !default; $z-index-overlay: 1000 !default; $z-index-click-block: 9999 !default; diff --git a/ionic/components/aside/aside.scss b/ionic/components/aside/aside.scss deleted file mode 100644 index dd4ec8e087..0000000000 --- a/ionic/components/aside/aside.scss +++ /dev/null @@ -1,57 +0,0 @@ - -// Aside -// -------------------------------------------------- - -$aside-width: 304px !default; -$aside-small-width: $aside-width - 40px !default; - -$aside-background: $background-color !default; -$aside-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25) !default; - - -ion-aside { - position: absolute; - top: 0; - right: auto; - bottom: 0; - left: 0; - - width: $aside-width; - - display: flex; - flex-direction: column; - - background: $aside-background; -} - -ion-aside[side=right] { - right: 0; - left: auto; -} - -ion-aside backdrop { - z-index: -1; - display: none; -} - -.aside-content { - transform: translate3d(0px, 0px, 0px); -} - -.aside-content-open ion-pane, -.aside-content-open ion-content, -.aside-content-open .toolbar { - // the containing element itself should be clickable but - // everything inside of it should not clickable when aside is open - pointer-events: none; -} - - -@media (max-width: 340px) { - - ion-aside { - width: $aside-small-width; - } - -} - diff --git a/ionic/components/aside/extensions/gestures.ts b/ionic/components/aside/extensions/gestures.ts deleted file mode 100644 index 10951b35f3..0000000000 --- a/ionic/components/aside/extensions/gestures.ts +++ /dev/null @@ -1,100 +0,0 @@ -import {Aside} from '../aside'; -import {SlideEdgeGesture} from 'ionic/gestures/slide-edge-gesture'; - - -class AsideGenericGestureHandler extends SlideEdgeGesture { - constructor(aside: Aside, targetElement, threshold) { - super(targetElement, { - direction: (aside.side === 'left' || aside.side === 'right') ? 'x' : 'y', - edge: aside.side, - threshold: threshold - }); - - this.aside = aside; - this.listen(); - } - - // Set CSS, then wait one frame for it to apply before sliding starts - onSlideBeforeStart(slide, ev) { - this.aside.setProgressStart(); - } - - onSlide(slide, ev) { - this.aside.setProgess(slide.distance / slide.max); - } - - onSlideEnd(slide, ev) { - let shouldComplete = (Math.abs(ev.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5); - this.aside.setProgressFinish(shouldComplete); - } - - getElementStartPos(slide, ev) { - return this.aside.isOpen ? slide.max : slide.min; - } - - getSlideBoundaries() { - return { - min: 0, - max: this.aside.width() - }; - } -} - - -export class AsideContentGesture extends AsideGenericGestureHandler { - constructor(aside: Aside) { - super(aside, aside.getContentElement(), 75); - } - canStart(ev) { - return this.aside.isOpen ? true : super.canStart(ev); - } -} - -export class LeftAsideGesture extends AsideContentGesture { - constructor(aside: Aside) { - super(aside); - } -} - -export class RightAsideGesture extends LeftAsideGesture { - constructor(aside: Aside) { - super(aside); - } - getElementStartPos(slide, ev) { - return this.aside.isOpen ? slide.min : slide.max; - } - getSlideBoundaries() { - return { - min: -this.aside.width(), - max: 0 - }; - } - -} - -/* - Not supported right now -export class TopAsideGesture extends AsideGesture { - onSlide(slide, ev) { - this.aside.setTransform(slide.distance); - } - getSlideBoundaries() { - return { - min: 0, - max: this.aside.height() - }; - } -} - -export class BottomAsideGesture extends TopAsideGesture { - getElementStartPos(slide, ev) { - return this.aside.isOpen ? slide.min : slide.max; - } - getSlideBoundaries() { - return { - min: -this.aside.height(), - max: 0 - }; - } -} -*/ diff --git a/ionic/components/aside/test/basic/e2e.ts b/ionic/components/aside/test/basic/e2e.ts deleted file mode 100644 index 7ff367a2a8..0000000000 --- a/ionic/components/aside/test/basic/e2e.ts +++ /dev/null @@ -1,9 +0,0 @@ - -it('should toggle open aside', function() { - element(by.css('#e2eContentToggleAside')).click(); -}); - - -it('should close aside', function() { - element(by.css('#e2eCloseMenu')).click(); -}); diff --git a/ionic/components/menu/extensions/gestures.ts b/ionic/components/menu/extensions/gestures.ts new file mode 100644 index 0000000000..f6db5728fd --- /dev/null +++ b/ionic/components/menu/extensions/gestures.ts @@ -0,0 +1,73 @@ +import {Menu} from '../menu'; +import {SlideEdgeGesture} from 'ionic/gestures/slide-edge-gesture'; + + +class MenuGenericGestureHandler extends SlideEdgeGesture { + constructor(menu: Menu, targetElement, threshold) { + super(targetElement, { + direction: (menu.side === 'left' || menu.side === 'right') ? 'x' : 'y', + edge: menu.side, + threshold: threshold + }); + + this.menu = menu; + this.listen(); + } + + // Set CSS, then wait one frame for it to apply before sliding starts + onSlideBeforeStart(slide, ev) { + this.menu.setProgressStart(); + } + + onSlide(slide, ev) { + this.menu.setProgess(slide.distance / slide.max); + } + + onSlideEnd(slide, ev) { + let shouldComplete = (Math.abs(ev.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5); + this.menu.setProgressFinish(shouldComplete); + } + + getElementStartPos(slide, ev) { + return this.menu.isOpen ? slide.max : slide.min; + } + + getSlideBoundaries() { + return { + min: 0, + max: this.menu.width() + }; + } +} + + +export class MenuContentGesture extends MenuGenericGestureHandler { + constructor(menu: Menu) { + super(menu, menu.getContentElement(), 75); + } + canStart(ev) { + return this.menu.isOpen ? true : super.canStart(ev); + } +} + +export class LeftMenuGesture extends MenuContentGesture { + constructor(menu: Menu) { + super(menu); + } +} + +export class RightMenuGesture extends LeftMenuGesture { + constructor(menu: Menu) { + super(menu); + } + getElementStartPos(slide, ev) { + return this.menu.isOpen ? slide.min : slide.max; + } + getSlideBoundaries() { + return { + min: -this.menu.width(), + max: 0 + }; + } + +} diff --git a/ionic/components/aside/extensions/types.scss b/ionic/components/menu/extensions/types.scss similarity index 50% rename from ionic/components/aside/extensions/types.scss rename to ionic/components/menu/extensions/types.scss index c9e34144ab..d16eebf8ed 100644 --- a/ionic/components/aside/extensions/types.scss +++ b/ionic/components/menu/extensions/types.scss @@ -1,31 +1,31 @@ -// Aside Reveal +// Menu Reveal // -------------------------------------------------- -// The content slides over to reveal the aside underneath. -// The aside menu itself, which is under the content, does not move. +// The content slides over to reveal the menu underneath. +// The menu itself, which is under the content, does not move. -ion-aside[type=reveal] { +ion-menu[type=reveal] { transform: translate3d(-9999px, 0px, 0px); - &.show-aside { + &.show-menu { transform: translate3d(0px, 0px, 0px); } } -.aside-content-reveal { - box-shadow: $aside-shadow; +.menu-content-reveal { + box-shadow: $menu-shadow; } -// Aside Overlay +// Menu Overlay // -------------------------------------------------- -// The aside menu slides over the content. The content -// itself, which is under the aside, does not move. +// The menu slides over the content. The content +// itself, which is under the menu, does not move. -ion-aside[type=overlay] { - z-index: $z-index-aside-overlay; - box-shadow: $aside-shadow; +ion-menu[type=overlay] { + z-index: $z-index-menu-overlay; + box-shadow: $menu-shadow; transform: translate3d(-9999px, 0px, 0px); backdrop { diff --git a/ionic/components/aside/extensions/types.ts b/ionic/components/menu/extensions/types.ts similarity index 64% rename from ionic/components/aside/extensions/types.ts rename to ionic/components/menu/extensions/types.ts index 3fe81c0343..e2baee20d3 100644 --- a/ionic/components/aside/extensions/types.ts +++ b/ionic/components/menu/extensions/types.ts @@ -1,16 +1,16 @@ -import {Aside} from '../aside'; +import {Menu} from '../menu'; import {Animation} from 'ionic/animations/animation'; /** - * Aside Type + * Menu Type * Base class which is extended by the various types. Each * type will provide their own animations for open and close - * and registers itself with Aside. + * and registers itself with Menu. */ -export class AsideType { +export class MenuType { - constructor(aside: Aside) { + constructor(menu: Menu) { this.open = new Animation(); this.close = new Animation(); } @@ -76,70 +76,70 @@ export class AsideType { /** - * Aside Reveal Type - * The content slides over to reveal the aside underneath. - * The aside menu itself, which is under the content, does not move. + * Menu Reveal Type + * The content slides over to reveal the menu underneath. + * The menu itself, which is under the content, does not move. */ -class AsideRevealType extends AsideType { - constructor(aside) { +class MenuRevealType extends MenuType { + constructor(menu) { super(); let easing = 'ease'; let duration = 250; - let openedX = (aside.width() * (aside.side == 'right' ? -1 : 1)) + 'px'; + let openedX = (menu.width() * (menu.side == 'right' ? -1 : 1)) + 'px'; this.open.easing(easing).duration(duration); this.close.easing(easing).duration(duration); - let contentOpen = new Animation(aside.getContentElement()); + let contentOpen = new Animation(menu.getContentElement()); contentOpen.fromTo(TRANSLATE_X, CENTER, openedX); this.open.add(contentOpen); - let contentClose = new Animation(aside.getContentElement()); + let contentClose = new Animation(menu.getContentElement()); contentClose.fromTo(TRANSLATE_X, openedX, CENTER); this.close.add(contentClose); } } -Aside.register('reveal', AsideRevealType); +Menu.register('reveal', MenuRevealType); /** - * Aside Overlay Type - * The aside menu slides over the content. The content - * itself, which is under the aside, does not move. + * Menu Overlay Type + * The menu slides over the content. The content + * itself, which is under the menu, does not move. */ -class AsideOverlayType extends AsideType { - constructor(aside) { +class MenuOverlayType extends MenuType { + constructor(menu) { super(); let easing = 'ease'; let duration = 250; let backdropOpacity = 0.5; - let closedX = (aside.width() * (aside.side == 'right' ? 1 : -1)) + 'px'; + let closedX = (menu.width() * (menu.side == 'right' ? 1 : -1)) + 'px'; this.open.easing(easing).duration(duration); this.close.easing(easing).duration(duration); - let asideOpen = new Animation(aside.getAsideElement()); - asideOpen.fromTo(TRANSLATE_X, closedX, CENTER); - this.open.add(asideOpen); + let menuOpen = new Animation(menu.getMenuElement()); + menuOpen.fromTo(TRANSLATE_X, closedX, CENTER); + this.open.add(menuOpen); - let backdropOpen = new Animation(aside.getBackdropElement()); + let backdropOpen = new Animation(menu.getBackdropElement()); backdropOpen.fromTo(OPACITY, 0.01, backdropOpacity); this.open.add(backdropOpen); - let asideClose = new Animation(aside.getAsideElement()); - asideClose.fromTo(TRANSLATE_X, CENTER, closedX); - this.close.add(asideClose); + let menuClose = new Animation(menu.getMenuElement()); + menuClose.fromTo(TRANSLATE_X, CENTER, closedX); + this.close.add(menuClose); - let backdropClose = new Animation(aside.getBackdropElement()); + let backdropClose = new Animation(menu.getBackdropElement()); backdropClose.fromTo(OPACITY, backdropOpacity, 0.01); this.close.add(backdropClose); } } -Aside.register('overlay', AsideOverlayType); +Menu.register('overlay', MenuOverlayType); const OPACITY = 'opacity'; diff --git a/ionic/components/aside/aside-toggle.ts b/ionic/components/menu/menu-toggle.ts similarity index 60% rename from ionic/components/aside/aside-toggle.ts rename to ionic/components/menu/menu-toggle.ts index 600260348c..c2b2087a63 100644 --- a/ionic/components/aside/aside-toggle.ts +++ b/ionic/components/menu/menu-toggle.ts @@ -6,30 +6,30 @@ import {IonicApp} from '../app/app'; * TODO */ @Directive({ - selector: '[aside-toggle]', + selector: '[menu-toggle]', properties: [ - 'asideToggle' + 'menuToggle' ], host: { '(click)': 'toggle($event)' } }) -export class AsideToggle { +export class MenuToggle { constructor(private app: IonicApp) {} onInit() { - let toggleTarget = this.asideToggle; - // Get the component with this toggleTarget tag, or use "menu" if none - this.aside = this.app.getComponent(toggleTarget || 'menu'); + this.menu = this.app.getComponent(this.menuToggle || 'menu'); } /** * TODO * @param {TODO} event TODO */ - toggle(event) { - this.aside && this.aside.toggle(); + toggle(ev) { + this.menu && this.menu.toggle(); + ev.preventDefault(); + ev.stopPropagation(); } } diff --git a/ionic/components/menu/menu.scss b/ionic/components/menu/menu.scss new file mode 100644 index 0000000000..7ba53d2fce --- /dev/null +++ b/ionic/components/menu/menu.scss @@ -0,0 +1,57 @@ + +// Menu +// -------------------------------------------------- + +$menu-width: 304px !default; +$menu-small-width: $menu-width - 40px !default; + +$menu-background: $background-color !default; +$menu-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25) !default; + + +ion-menu { + position: absolute; + top: 0; + right: auto; + bottom: 0; + left: 0; + + width: $menu-width; + + display: flex; + flex-direction: column; + + background: $menu-background; +} + +ion-menu[side=right] { + right: 0; + left: auto; +} + +ion-menu backdrop { + z-index: -1; + display: none; +} + +.menu-content { + transform: translate3d(0px, 0px, 0px); +} + +.menu-content-open ion-pane, +.menu-content-open ion-content, +.menu-content-open .toolbar { + // the containing element itself should be clickable but + // everything inside of it should not clickable when menu is open + pointer-events: none; +} + + +@media (max-width: 340px) { + + ion-menu { + width: $menu-small-width; + } + +} + diff --git a/ionic/components/aside/aside.ts b/ionic/components/menu/menu.ts similarity index 65% rename from ionic/components/aside/aside.ts rename to ionic/components/menu/menu.ts index 47551c6058..c13b8dd136 100644 --- a/ionic/components/aside/aside.ts +++ b/ionic/components/menu/menu.ts @@ -8,12 +8,13 @@ import * as gestures from './extensions/gestures'; /** - * Aside is a side-menu navigation that can be dragged out or toggled to show. Aside supports two - * display styles currently: overlay, and reveal. Overlay is the tradtional Android drawer style, and Reveal - * is the traditional iOS style. By default, Aside will adjust to the correct style for the platform. + * Menu is a side-menu navigation that can be dragged out or toggled to show. + * Menu supports two display styles currently: overlay, and reveal. Overlay + * is the tradtional Android drawer style, and Reveal is the traditional iOS + * style. By default, Menu will adjust to the correct style for the platform. */ @IonicComponent({ - selector: 'ion-aside', + selector: 'ion-menu', properties: [ 'content', 'dragThreshold', @@ -30,9 +31,9 @@ import * as gestures from './extensions/gestures'; }) @View({ template: '', - directives: [forwardRef(() => AsideBackdrop)] + directives: [forwardRef(() => MenuBackdrop)] }) -export class Aside extends Ion { +export class Menu extends Ion { constructor(app: IonicApp, elementRef: ElementRef, config: IonicConfig) { super(elementRef, config); @@ -48,7 +49,7 @@ export class Aside extends Ion { this.contentElement = (this.content instanceof Node) ? this.content : this.content.getNativeElement(); if (!this.contentElement) { - return console.error('Aside: must have a [content] element to listen for drag events on. Example:\n\n\n\n'); + return console.error('Menu: must have a [content] element to listen for drag events on. Example:\n\n\n\n'); } if (!this.id) { @@ -59,8 +60,8 @@ export class Aside extends Ion { this._initGesture(); this._initType(this.type); - this.contentElement.classList.add('aside-content'); - this.contentElement.classList.add('aside-content-' + this.type); + this.contentElement.classList.add('menu-content'); + this.contentElement.classList.add('menu-content-' + this.type); let self = this; this.onContentClick = function(ev) { @@ -73,37 +74,37 @@ export class Aside extends Ion { _initGesture() { switch(this.side) { case 'right': - this._gesture = new gestures.RightAsideGesture(this); + this._gesture = new gestures.RightMenuGesture(this); break; case 'left': - this._gesture = new gestures.LeftAsideGesture(this); + this._gesture = new gestures.LeftMenuGesture(this); break; } } _initType(type) { - type = type && type.trim().toLowerCase() || FALLBACK_ASIDE_TYPE; + type = type && type.trim().toLowerCase() || FALLBACK_MENU_TYPE; - let asideTypeCls = asideTypes[type]; + let menuTypeCls = menuTypes[type]; - if (!asideTypeCls) { - type = FALLBACK_ASIDE_TYPE; - asideTypeCls = asideTypes[type]; + if (!menuTypeCls) { + type = FALLBACK_MENU_TYPE; + menuTypeCls = menuTypes[type]; } - this._type = new asideTypeCls(this); + this._type = new menuTypeCls(this); this.type = type; } /** - * Sets the state of the Aside to open or not. - * @param {boolean} isOpen If the Aside is open or not. + * Sets the state of the Menu to open or not. + * @param {boolean} isOpen If the Menu is open or not. * @return {Promise} TODO */ setOpen(shouldOpen) { // _isDisabled is used to prevent unwanted opening/closing after swiping open/close - // or swiping open the menu while pressing down on the aside-toggle button + // or swiping open the menu while pressing down on the menu-toggle button if (shouldOpen === this.isOpen || this._isDisabled()) { return Promise.resolve(); } @@ -116,7 +117,7 @@ export class Aside extends Ion { } setProgressStart() { - // user started swiping the aside open/close + // user started swiping the menu open/close if (this._isDisabled()) return; this._before(); @@ -139,9 +140,9 @@ export class Aside extends Ion { } _before() { - // this places the aside into the correct location before it animates in + // this places the menu into the correct location before it animates in // this css class doesn't actually kick off any animations - this.getNativeElement().classList.add('show-aside'); + this.getNativeElement().classList.add('show-menu'); this.getBackdropElement().classList.add('show-backdrop'); this._disable(); @@ -152,14 +153,14 @@ export class Aside extends Ion { this._disable(); this.isOpen = isOpen; - this.contentElement.classList[isOpen ? 'add' : 'remove']('aside-content-open'); + this.contentElement.classList[isOpen ? 'add' : 'remove']('menu-content-open'); this.contentElement.removeEventListener('click', this.onContentClick); if (isOpen) { this.contentElement.addEventListener('click', this.onContentClick); } else { - this.getNativeElement().classList.remove('show-aside'); + this.getNativeElement().classList.remove('show-menu'); this.getBackdropElement().classList.remove('show-backdrop'); } @@ -168,7 +169,7 @@ export class Aside extends Ion { _disable() { // used to prevent unwanted opening/closing after swiping open/close - // or swiping open the menu while pressing down on the aside-toggle + // or swiping open the menu while pressing down on the menu-toggle this._disableTime = Date.now(); } @@ -202,15 +203,15 @@ export class Aside extends Ion { /** * TODO - * @return {Element} The Aside element. + * @return {Element} The Menu element. */ - getAsideElement() { + getMenuElement() { return this.getNativeElement(); } /** * TODO - * @return {Element} The Aside's associated content element. + * @return {Element} The Menu's associated content element. */ getContentElement() { return this.contentElement; @@ -218,14 +219,14 @@ export class Aside extends Ion { /** * TODO - * @return {Element} The Aside's associated content element. + * @return {Element} The Menu's backdrop element. */ getBackdropElement() { return this.backdrop.elementRef.nativeElement; } static register(name, cls) { - asideTypes[name] = cls; + menuTypes[name] = cls; } onDestroy() { @@ -236,8 +237,8 @@ export class Aside extends Ion { } -let asideTypes = {}; -const FALLBACK_ASIDE_TYPE = 'reveal'; +let menuTypes = {}; +const FALLBACK_MENU_TYPE = 'reveal'; /** @@ -249,15 +250,15 @@ const FALLBACK_ASIDE_TYPE = 'reveal'; '(click)': 'clicked($event)' } }) -class AsideBackdrop { +class MenuBackdrop { /** * TODO - * @param {Aside} aside TODO + * @param {Menu} menu TODO */ - constructor(@Host() aside: Aside, elementRef: ElementRef) { - this.aside = aside; + constructor(@Host() menu: Menu, elementRef: ElementRef) { + this.menu = menu; this.elementRef = elementRef; - aside.backdrop = this; + menu.backdrop = this; } /** @@ -267,7 +268,7 @@ class AsideBackdrop { clicked(ev) { ev.preventDefault(); ev.stopPropagation(); - this.aside.close(); + this.menu.close(); } } diff --git a/ionic/components/menu/test/basic/e2e.ts b/ionic/components/menu/test/basic/e2e.ts new file mode 100644 index 0000000000..38740de98c --- /dev/null +++ b/ionic/components/menu/test/basic/e2e.ts @@ -0,0 +1,9 @@ + +it('should toggle open menu', function() { + element(by.css('#e2eContentToggleMenu')).click(); +}); + + +it('should close menu', function() { + element(by.css('#e2eCloseMenu')).click(); +}); diff --git a/ionic/components/aside/test/basic/index.ts b/ionic/components/menu/test/basic/index.ts similarity index 85% rename from ionic/components/aside/test/basic/index.ts rename to ionic/components/menu/test/basic/index.ts index 126d3a0ffa..9229b217de 100644 --- a/ionic/components/aside/test/basic/index.ts +++ b/ionic/components/menu/test/basic/index.ts @@ -24,9 +24,9 @@ class E2EApp { ]; } - openPage(aside, page) { - // close the menu when clicking a link from the aside - aside.close(); + 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 diff --git a/ionic/components/aside/test/basic/main.html b/ionic/components/menu/test/basic/main.html similarity index 60% rename from ionic/components/aside/test/basic/main.html rename to ionic/components/menu/test/basic/main.html index 4126d006dd..9d00a71b6a 100644 --- a/ionic/components/aside/test/basic/main.html +++ b/ionic/components/menu/test/basic/main.html @@ -1,4 +1,4 @@ - + Left Menu @@ -8,18 +8,18 @@ - - - + diff --git a/ionic/components/aside/test/basic/page1.html b/ionic/components/menu/test/basic/page1.html similarity index 64% rename from ionic/components/aside/test/basic/page1.html rename to ionic/components/menu/test/basic/page1.html index 46beb7ad27..46e06967e2 100644 --- a/ionic/components/aside/test/basic/page1.html +++ b/ionic/components/menu/test/basic/page1.html @@ -1,12 +1,12 @@ - - Aside + Menu @@ -17,7 +17,7 @@

Page 1

- +

diff --git a/ionic/components/aside/test/basic/page2.html b/ionic/components/menu/test/basic/page2.html similarity index 58% rename from ionic/components/aside/test/basic/page2.html rename to ionic/components/menu/test/basic/page2.html index 3a27780659..5e7decd736 100644 --- a/ionic/components/aside/test/basic/page2.html +++ b/ionic/components/menu/test/basic/page2.html @@ -1,12 +1,12 @@ - - Aside + Menu @@ -16,7 +16,7 @@

Page 2

- +

diff --git a/ionic/components/aside/test/overlay/index.ts b/ionic/components/menu/test/overlay/index.ts similarity index 81% rename from ionic/components/aside/test/overlay/index.ts rename to ionic/components/menu/test/overlay/index.ts index 6deed6d8fb..2cd3123259 100644 --- a/ionic/components/aside/test/overlay/index.ts +++ b/ionic/components/menu/test/overlay/index.ts @@ -15,9 +15,9 @@ class E2EApp { this.rootView = Page1; } - openPage(aside, page) { - // close the menu when clicking a link from the aside - aside.close(); + 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 diff --git a/ionic/components/aside/test/reveal/main.html b/ionic/components/menu/test/overlay/main.html similarity index 63% rename from ionic/components/aside/test/reveal/main.html rename to ionic/components/menu/test/overlay/main.html index cc405257f2..b647501a92 100644 --- a/ionic/components/aside/test/reveal/main.html +++ b/ionic/components/menu/test/overlay/main.html @@ -1,4 +1,4 @@ - + Left Menu @@ -8,17 +8,17 @@ - - + - + --> diff --git a/ionic/components/aside/test/reveal/page1.html b/ionic/components/menu/test/overlay/page1.html similarity index 59% rename from ionic/components/aside/test/reveal/page1.html rename to ionic/components/menu/test/overlay/page1.html index 0badd4d282..99eb7dacf7 100644 --- a/ionic/components/aside/test/reveal/page1.html +++ b/ionic/components/menu/test/overlay/page1.html @@ -1,12 +1,12 @@ - - Reveal Aside + Overlay Menu @@ -17,11 +17,11 @@

Content

- +

- +

diff --git a/ionic/components/aside/test/reveal/index.ts b/ionic/components/menu/test/reveal/index.ts similarity index 81% rename from ionic/components/aside/test/reveal/index.ts rename to ionic/components/menu/test/reveal/index.ts index 6deed6d8fb..2cd3123259 100644 --- a/ionic/components/aside/test/reveal/index.ts +++ b/ionic/components/menu/test/reveal/index.ts @@ -15,9 +15,9 @@ class E2EApp { this.rootView = Page1; } - openPage(aside, page) { - // close the menu when clicking a link from the aside - aside.close(); + 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 diff --git a/ionic/components/aside/test/overlay/main.html b/ionic/components/menu/test/reveal/main.html similarity index 62% rename from ionic/components/aside/test/overlay/main.html rename to ionic/components/menu/test/reveal/main.html index 4270906307..1276e8c199 100644 --- a/ionic/components/aside/test/overlay/main.html +++ b/ionic/components/menu/test/reveal/main.html @@ -1,4 +1,4 @@ - + Left Menu @@ -8,17 +8,17 @@ - - + - + --> diff --git a/ionic/components/aside/test/overlay/page1.html b/ionic/components/menu/test/reveal/page1.html similarity index 58% rename from ionic/components/aside/test/overlay/page1.html rename to ionic/components/menu/test/reveal/page1.html index 43fdd15629..fb6bab465a 100644 --- a/ionic/components/aside/test/overlay/page1.html +++ b/ionic/components/menu/test/reveal/page1.html @@ -1,12 +1,12 @@ - - Overlay Aside + Reveal Menu @@ -17,11 +17,11 @@

Content

- +

- +

diff --git a/ionic/components/nav-bar/nav-bar.ts b/ionic/components/nav-bar/nav-bar.ts index ac5bf7d7ad..9510c50494 100644 --- a/ionic/components/nav-bar/nav-bar.ts +++ b/ionic/components/nav-bar/nav-bar.ts @@ -26,7 +26,7 @@ import {ViewItem} from '../view/view-item'; - +
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss index 1c6bb9de58..4b73ad8f6e 100644 --- a/ionic/components/toolbar/modes/ios.scss +++ b/ionic/components/toolbar/modes/ios.scss @@ -4,7 +4,7 @@ $toolbar-order-ios: ( back-button: 10, - aside-toggle: 20, + menu-toggle: 20, primary: 30, title: 40, secondary: 50 @@ -33,8 +33,8 @@ $toolbar-ios-title-font-size: 1.7rem !default; order: map-get($toolbar-order-ios, secondary); } - [aside-toggle] { - order: map-get($toolbar-order-ios, 'aside-toggle'); + [menu-toggle] { + order: map-get($toolbar-order-ios, 'menu-toggle'); } ion-title { diff --git a/ionic/components/toolbar/modes/material.scss b/ionic/components/toolbar/modes/material.scss index 0293ee6b5d..6e4104a93c 100644 --- a/ionic/components/toolbar/modes/material.scss +++ b/ionic/components/toolbar/modes/material.scss @@ -46,14 +46,14 @@ $toolbar-md-button-font-size: 1.4rem !default; min-width: 28px; } - button[aside-toggle], - [aside-toggle].activated { + button[menu-toggle], + [menu-toggle].activated { margin: -$toolbar-padding 0 -$toolbar-padding -$toolbar-padding; padding-bottom: $toolbar-padding / 2; height: $toolbar-md-height; } - [aside-toggle] icon { + [menu-toggle] icon { padding: 0 33px 0 20px; } diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html index 8689291128..16a1592018 100644 --- a/ionic/components/toolbar/test/scenarios/main.html +++ b/ionic/components/toolbar/test/scenarios/main.html @@ -1,9 +1,9 @@ - - aside-toggle left. This is the title that never ends. It just goes on and on my friend. + menu-toggle left. This is the title that never ends. It just goes on and on my friend. diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss index 7e4f00a6d8..3616230dfb 100644 --- a/ionic/components/toolbar/toolbar.scss +++ b/ionic/components/toolbar/toolbar.scss @@ -6,7 +6,7 @@ $toolbar-padding: 4px !default; $toolbar-order: ( backButton: 10, - aside-toggle: 20, + menu-toggle: 20, title: 30, primary: 40, secondary: 50 @@ -78,15 +78,15 @@ ion-title { color: $toolbar-text-color; } -.toolbar [aside-toggle] { +.toolbar [menu-toggle] { margin: 0; padding: 0; min-width: 48px; - order: map-get($toolbar-order, 'aside-toggle'); + order: map-get($toolbar-order, 'menu-toggle'); box-shadow: none; } -.toolbar [aside-toggle] icon { +.toolbar [menu-toggle] icon { padding: 0 12px; } diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts index 159aa7cc44..c9ccaaee6a 100644 --- a/ionic/components/toolbar/toolbar.ts +++ b/ionic/components/toolbar/toolbar.ts @@ -110,7 +110,7 @@ export class ToolbarBase extends Ion { @View({ template: `
- +
diff --git a/ionic/config/annotations.ts b/ionic/config/annotations.ts index c56b0cf1a5..240285b846 100644 --- a/ionic/config/annotations.ts +++ b/ionic/config/annotations.ts @@ -4,7 +4,7 @@ import * as util from 'ionic/util'; import {IonicConfig} from './config'; import {ionicBootstrap} from '../components/app/app'; import { - Aside, AsideToggle, Button, Content, Scroll, Refresher, + Menu, MenuToggle, Button, Content, Scroll, Refresher, Slides, Slide, SlideLazy, Tabs, Tab, Card, List, ListHeader, Item, ItemGroup, ItemGroupTitle, @@ -34,8 +34,8 @@ export const IonicDirectives = [ NgStyle, // Content - forwardRef(() => Aside), - forwardRef(() => AsideToggle), + forwardRef(() => Menu), + forwardRef(() => MenuToggle), forwardRef(() => Button), forwardRef(() => Content), diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss index 17341676b6..7eecc8d944 100644 --- a/ionic/ionic.core.scss +++ b/ionic/ionic.core.scss @@ -16,8 +16,6 @@ @import "components/toolbar/toolbar", "components/action-menu/action-menu", - "components/aside/aside", - "components/aside/extensions/types", "components/badge/badge", "components/button/button", "components/button/button-clear", @@ -35,6 +33,8 @@ "components/text-input/label", "components/list/list", "components/card/card", + "components/menu/menu", + "components/menu/extensions/types", "components/modal/modal", "components/nav-bar/nav-bar", "components/popup/popup",