javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

rename aside to menu

Browse Source
This commit is contained in:
Adam Bradley
2015-09-11 21:40:58 -05:00
parent d0ac44da83
commit 0039647515
48 changed files with 337 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demos/aside/index.ts
View File

@ -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

8
demos/aside/main.html
View File

@ -1,4 +1,4 @@
<ion-aside #aside [content]="content" id="menu">
<ion-menu #menu [content]="content" id="menu">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
@ -8,18 +8,18 @@
<ion-list>
<button ion-item *ng-for="#p of pages" (click)="openPage(aside, p)">
<button ion-item *ng-for="#p of pages" (click)="openPage(menu, p)">
{{p.title}}
</button>
<button ion-item aside-toggle="menu" id="e2eCloseMenu">
<button ion-item menu-toggle="menu" id="e2eCloseMenu">
Close Menu
</button>
</ion-list>
</ion-content>
</ion-aside>
</ion-menu>
<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

6
demos/aside/page1.html
View File

@ -1,12 +1,12 @@
<ion-navbar *navbar>
<button aside-toggle id="e2eHeaderToggleAside">
<button menu-toggle id="e2eHeaderToggleMenu">
<icon menu></icon>
</button>
<ion-title>
Aside
Menu
</ion-title>
</ion-navbar>
@ -17,7 +17,7 @@
<h3>Page 1</h3>
<p>
<button id="e2eContentToggleAside" aside-toggle>Toggle Aside</button>
<button id="e2eContentToggleMenu" menu-toggle>Toggle Menu</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

6
demos/aside/page2.html
View File

@ -1,12 +1,12 @@
<ion-navbar *navbar>
<button aside-toggle id="e2eHeaderToggleAside">
<button menu-toggle id="e2eHeaderToggleMenu">
<icon menu></icon>
</button>
<ion-title>
Aside
Menu
</ion-title>
</ion-navbar>
@ -16,7 +16,7 @@
<h3>Page 2</h3>
<p>
<button aside-toggle id="e2eContentToggleAside">Toggle Aside</button>
<button menu-toggle id="e2eContentToggleMenu">Toggle Menu</button>
</p>
</ion-content>

6
demos/material/index.ts
View File

@ -5,7 +5,7 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
@IonicView({
template: '<ion-navbar *navbar primary>' +
'<ion-title>Heading</ion-title>' +
'<button aside-toggle="menu">' +
'<button menu-toggle="menu">' +
'<icon menu></icon>' +
'</button>' +
'<ion-nav-items secondary>' +
@ -81,14 +81,14 @@ export class FirstPage {
@App({
template: `<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,500' rel='stylesheet' type='text/css'>
<ion-aside id="menu" side="left" [content]="content">
<ion-menu id="menu" side="left" [content]="content">
<ion-toolbar primary><ion-title>Menu</ion-title></ion-toolbar>
<ion-list>
<ion-item>Your Profile</ion-item>
<ion-item>Playlists</ion-item>
<ion-item>Artists</ion-item>
</ion-list>
</ion-aside>
</ion-menu>
<ion-nav #content></ion-nav>`,
routes: [
{

4
demos/music/main.html
View File

@ -1,6 +1,6 @@
<ion-view>
<ion-aside id="menu" side="left" [content]="content" (opening)="onMenuOpening($event, amt)">
<ion-menu id="menu" side="left" [content]="content" (opening)="onMenuOpening($event, amt)">
<ion-list inset [parallax]="menuOpenAmount">
<ion-item>
Search
@ -21,7 +21,7 @@
Settings
</ion-item>
</ion-list>
</ion-aside>
</ion-menu>
<ion-nav #content [root]="rootView"></ion-nav>

6
demos/native/main.html
View File

@ -1,12 +1,12 @@
<ion-aside #aside [content]="content" id="mainMenu">
<ion-menu #menu [content]="content" id="mainMenu">
<ion-toolbar><ion-title>Plugins</ion-title></ion-toolbar>
<ion-content>
<ion-list>
<ion-item *ng-for="#p of plugins" (click)="openPage(aside, p)">
<ion-item *ng-for="#p of plugins" (click)="openPage(menu, p)">
<span>{{p.title}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-aside>
</ion-menu>
<ion-nav #content swipe-back-enabled="false" [root]="firstPage"></ion-nav>

2
demos/native/pages/battery.ts
View File

@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<button menu-toggle>
<icon menu></icon>
</button>
<ion-title>Battery</ion-title>

4
demos/native/pages/camera.ts
View File

@ -5,7 +5,7 @@ import {Camera} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<button menu-toggle>
<icon menu></icon>
</button>
<ion-title>Camera</ion-title>
@ -18,7 +18,7 @@ import {Camera} from 'ionic/ionic';
})
export class CameraPage {
constructor() {
}
getPicture() {
Camera.getPicture({

2
demos/native/pages/contacts.ts
View File

@ -5,7 +5,7 @@ import {Contacts} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<button menu-toggle>
<icon menu></icon>
</button>
<ion-title>Contacts</ion-title>

2
demos/native/pages/device-motion.ts
View File

@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<button menu-toggle>
<icon menu></icon>
</button>
<ion-title>Device Motion</ion-title>

2
demos/native/pages/device.ts
View File

@ -4,7 +4,7 @@ import {IonicView} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<button menu-toggle>
<icon menu></icon>
</button>
<ion-title>Vibration</ion-title>

2
demos/native/pages/geolocation.ts
View File

@ -5,7 +5,7 @@ import {Geolocation} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<button menu-toggle>
<icon menu></icon>
</button>
<ion-title>Vibration</ion-title>

2
demos/native/pages/vibration.ts
View File

@ -5,7 +5,7 @@ import {Vibration} from 'ionic/ionic';
@IonicView({
template: `
<ion-navbar *navbar>
<button aside-toggle>
<button menu-toggle>
<icon menu></icon>
</button>
<ion-title>Vibration</ion-title>

12
demos/sink/index.ts
View File

@ -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]);

6
demos/sink/main.html
View File

@ -1,13 +1,13 @@
<ion-aside #aside [content]="content" id="mainMenu">
<ion-menu #menu [content]="content" id="mainMenu">
<ion-toolbar><ion-title>Ionic 2.0</ion-title></ion-toolbar>
<ion-content>
<ion-list>
<ion-item *ng-for="#c of components" (click)="openPage(aside, c)">
<ion-item *ng-for="#c of components" (click)="openPage(menu, c)">
<span>{{c.title}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-aside>
</ion-menu>
<ion-nav #content swipe-back-enabled="false"></ion-nav>

9
demos/sink/pages/aside.ts
View File

@ -5,13 +5,12 @@ import {SinkPage} from '../sink-page';
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Aside</ion-title></ion-navbar>
<ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Menu</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Aside</h2>
<h2>Menu</h2>
<p>
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.
</p>
<p>
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';
</ion-content>
`
})
export class AsidePage extends SinkPage {
export class MenuPage extends SinkPage {
constructor(app: IonicApp) {
super(app);
}

4
demos/sink/sink-page.ts
View File

@ -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();
}
}

8
ionic/components.ts
View File

@ -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'

4
ionic/components/app/structure.scss
View File

@ -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;

57
ionic/components/aside/aside.scss
View File

@ -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;
}
}

100
ionic/components/aside/extensions/gestures.ts
View File

@ -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
};
}
}
*/

9
ionic/components/aside/test/basic/e2e.ts
View File

@ -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();
});

73
ionic/components/menu/extensions/gestures.ts Normal file
View File

@ -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
};
}
}

26
ionic/components/aside/extensions/types.scss → ionic/components/menu/extensions/types.scss
View File

@ -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 {

58
ionic/components/aside/extensions/types.ts → ionic/components/menu/extensions/types.ts
View File

@ -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';

16
ionic/components/aside/aside-toggle.ts → ionic/components/menu/menu-toggle.ts
View File

@ -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();
}
}

57
ionic/components/menu/menu.scss Normal file
View File

@ -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;
}
}

79
ionic/components/aside/aside.ts → ionic/components/menu/menu.ts
View File

@ -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: '<ng-content></ng-content><backdrop tappable></backdrop>',
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<ion-aside [content]="content"></ion-aside>\n\n<ion-content #content></ion-content>');
return console.error('Menu: must have a [content] element to listen for drag events on. Example:\n\n<ion-menu [content]="content"></ion-menu>\n\n<ion-content #content></ion-content>');
}
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();
}
}

9
ionic/components/menu/test/basic/e2e.ts Normal file
View File

@ -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();
});

6
ionic/components/aside/test/basic/index.ts → ionic/components/menu/test/basic/index.ts
View File

@ -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

8
ionic/components/aside/test/basic/main.html → ionic/components/menu/test/basic/main.html
View File

@ -1,4 +1,4 @@
<ion-aside #aside [content]="content" id="menu">
<ion-menu #menu [content]="content" id="menu">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
@ -8,18 +8,18 @@
<ion-list>
<button ion-item *ng-for="#p of pages" (click)="openPage(aside, p)">
<button ion-item *ng-for="#p of pages" (click)="openPage(menu, p)">
{{p.title}}
</button>
<button ion-item aside-toggle="menu" id="e2eCloseMenu">
<button ion-item menu-toggle="menu" id="e2eCloseMenu">
Close Menu
</button>
</ion-list>
</ion-content>
</ion-aside>
</ion-menu>
<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

6
ionic/components/aside/test/basic/page1.html → ionic/components/menu/test/basic/page1.html
View File

@ -1,12 +1,12 @@
<ion-navbar *navbar>
<button aside-toggle id="e2eHeaderToggleAside">
<button menu-toggle id="e2eHeaderToggleMenu">
<icon menu></icon>
</button>
<ion-title>
Aside
Menu
</ion-title>
</ion-navbar>
@ -17,7 +17,7 @@
<h3>Page 1</h3>
<p>
<button id="e2eContentToggleAside" aside-toggle>Toggle Aside</button>
<button id="e2eContentToggleMenu" menu-toggle>Toggle Menu</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

6
ionic/components/aside/test/basic/page2.html → ionic/components/menu/test/basic/page2.html
View File

@ -1,12 +1,12 @@
<ion-navbar *navbar>
<button aside-toggle id="e2eHeaderToggleAside">
<button menu-toggle id="e2eHeaderToggleMenu">
<icon menu></icon>
</button>
<ion-title>
Aside
Menu
</ion-title>
</ion-navbar>
@ -16,7 +16,7 @@
<h3>Page 2</h3>
<p>
<button aside-toggle id="e2eContentToggleAside">Toggle Aside</button>
<button menu-toggle id="e2eContentToggleMenu">Toggle Menu</button>
</p>
</ion-content>

6
ionic/components/aside/test/overlay/index.ts → ionic/components/menu/test/overlay/index.ts
View File

@ -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

12
ionic/components/aside/test/reveal/main.html → ionic/components/menu/test/overlay/main.html
View File

@ -1,4 +1,4 @@
<ion-aside [content]="content" id="leftMenu" type="reveal" side="left">
<ion-menu [content]="content" id="leftMenu" type="overlay" side="left">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
@ -8,17 +8,17 @@
<ion-list>
<button ion-item aside-toggle="leftMenu">
<button ion-item menu-toggle="leftMenu">
Close Left Menu
</button>
</ion-list>
</ion-content>
</ion-aside>
</ion-menu>
<!-- <ion-aside [content]="content" id="rightMenu" type="reveal" side="right">
<!-- <ion-menu [content]="content" id="rightMenu" type="reveal" side="right">
<ion-toolbar secondary>
<ion-title>Right Menu</ion-title>
@ -28,14 +28,14 @@
<ion-list>
<button ion-item aside-toggle="rightMenu">
<button ion-item menu-toggle="rightMenu">
Close Right Menu
</button>
</ion-list>
</ion-content>
</ion-aside> -->
</ion-menu> -->
<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

8
ionic/components/aside/test/reveal/page1.html → ionic/components/menu/test/overlay/page1.html
View File

@ -1,12 +1,12 @@
<ion-navbar *navbar>
<button aside-toggle="leftMenu">
<button menu-toggle="leftMenu">
<icon menu></icon>
</button>
<ion-title>
Reveal Aside
Overlay Menu
</ion-title>
</ion-navbar>
@ -17,11 +17,11 @@
<h3>Content</h3>
<p>
<button aside-toggle="leftMenu">Toggle Left Aside</button>
<button menu-toggle="leftMenu">Toggle Left Menu</button>
</p>
<p>
<button aside-toggle="rightMenu">Toggle Right Aside</button>
<button menu-toggle="rightMenu">Toggle Right Menu</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

6
ionic/components/aside/test/reveal/index.ts → ionic/components/menu/test/reveal/index.ts
View File

@ -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

12
ionic/components/aside/test/overlay/main.html → ionic/components/menu/test/reveal/main.html
View File

@ -1,4 +1,4 @@
<ion-aside [content]="content" id="leftMenu" type="overlay" side="left">
<ion-menu [content]="content" id="leftMenu" type="reveal" side="left">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
@ -8,17 +8,17 @@
<ion-list>
<button ion-item aside-toggle="leftMenu">
<button ion-item menu-toggle="leftMenu">
Close Left Menu
</button>
</ion-list>
</ion-content>
</ion-aside>
</ion-menu>
<!-- <ion-aside [content]="content" id="rightMenu" type="reveal" side="right">
<!-- <ion-menu [content]="content" id="rightMenu" type="reveal" side="right">
<ion-toolbar secondary>
<ion-title>Right Menu</ion-title>
@ -28,14 +28,14 @@
<ion-list>
<button ion-item aside-toggle="rightMenu">
<button ion-item menu-toggle="rightMenu">
Close Right Menu
</button>
</ion-list>
</ion-content>
</ion-aside> -->
</ion-menu> -->
<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

8
ionic/components/aside/test/overlay/page1.html → ionic/components/menu/test/reveal/page1.html
View File

@ -1,12 +1,12 @@
<ion-navbar *navbar>
<button aside-toggle="leftMenu">
<button menu-toggle="leftMenu">
<icon menu></icon>
</button>
<ion-title>
Overlay Aside
Reveal Menu
</ion-title>
</ion-navbar>
@ -17,11 +17,11 @@
<h3>Content</h3>
<p>
<button aside-toggle="leftMenu">Toggle Left Aside</button>
<button menu-toggle="leftMenu">Toggle Left Menu</button>
</p>
<p>
<button aside-toggle="rightMenu">Toggle Right Aside</button>
<button menu-toggle="rightMenu">Toggle Right Menu</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>

2
ionic/components/nav-bar/nav-bar.ts
View File

@ -26,7 +26,7 @@ import {ViewItem} from '../view/view-item';
<span class="back-title" [text-content]="bbText"></span>
</span>
</button>
<ng-content select="[aside-toggle]"></ng-content>
<ng-content select="[menu-toggle]"></ng-content>
<div class="toolbar-title">
<div class="toolbar-inner-title">
<ng-content select="ion-title"></ng-content>

6
ionic/components/toolbar/modes/ios.scss
View File

@ -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 {

6
ionic/components/toolbar/modes/material.scss
View File

@ -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;
}

4
ionic/components/toolbar/test/scenarios/main.html
View File

@ -1,9 +1,9 @@
<ion-toolbar>
<button aside-toggle>
<button menu-toggle>
<icon menu></icon>
</button>
<ion-title>aside-toggle left. This is the title that never ends. It just goes on and on my friend.</ion-title>
<ion-title>menu-toggle left. This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar>

8
ionic/components/toolbar/toolbar.scss
View File

@ -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;
}

2
ionic/components/toolbar/toolbar.ts
View File

@ -110,7 +110,7 @@ export class ToolbarBase extends Ion {
@View({
template: `
<div class="toolbar-inner">
<ng-content select="[aside-toggle]"></ng-content>
<ng-content select="[menu-toggle]"></ng-content>
<div class="toolbar-title">
<div class="toolbar-inner-title">
<ng-content select="ion-title"></ng-content>

6
ionic/config/annotations.ts
View File

@ -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),

4
ionic/ionic.core.scss
View File

@ -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",