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

chore(): fix overlay demos/tests

Browse Source
This commit is contained in:
Adam Bradley
2015-12-30 20:38:27 -06:00
parent b1f3e684ea
commit 1e427443ad
8 changed files with 271 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
CHANGELOG.md
View File

@ -72,21 +72,22 @@ import {Popup} from 'ionic/ionic';
@Page(...) @Page(...)
class MyPage { class MyPage {
constructor(popup: Popup) { constructor(popup: Popup) {
this.popup = popup; this.popup = popup;
} }
doConfirm() { doConfirm() {
this.popup.confirm({ this.popup.confirm({
title: "Use this lightsaber?", title: "Use this lightsaber?",
subTitle: "You can't exchange lightsabers", subTitle: "You can't exchange lightsabers",
template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?", template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
cancelText: "Disagree", cancelText: "Disagree",
okText: "Agree" okText: "Agree"
}).then((result, ev) => { }).then((result, ev) => {
console.log('Confirmed!', result); console.log('Confirmed!', result);
}, () => { }, () => {
console.error('Not confirmed!'); console.error('Not confirmed!');
}); });
}
} }
``` ```
@ -97,31 +98,32 @@ import {Alert, NavController} from 'ionic/ionic';
@Page(...) @Page(...)
class MyPage { class MyPage {
constructor(nav: NavController) { constructor(nav: NavController) {
this.nav = nav; this.nav = nav;
} }
doConfirm() { doConfirm() {
let alert = Alert.create({ let alert = Alert.create({
title: "Use this lightsaber?", title: "Use this lightsaber?",
subTitle: "You can't exchange lightsabers", subTitle: "You can't exchange lightsabers",
body: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?", body: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
buttons: [ buttons: [
{ {
text: 'Disagree', text: 'Disagree',
handler: () => { handler: () => {
console.log('Disagreed :('); console.log('Disagreed :(');
}
},
{
text: 'Agree',
handler: () => {
console.log('Agreed!');
}
} }
}, ]
{ });
text: 'Agree',
handler: () => {
console.log('Agreed!');
}
}
]
});
this.nav.present(alert); this.nav.present(alert);
}
} }
``` ```
@ -134,21 +136,23 @@ import {Popup} from 'ionic/ionic';
@Page(...) @Page(...)
class MyPage { class MyPage {
constructor(popup: Popup) { constructor(popup: Popup) {
this.popup = popup; this.popup = popup;
}
doPrompt() {
this.popup.prompt({
title: "New Album",
template: "Enter a name for this new album you're so keen on adding",
inputPlaceholder: "Album Name",
okText: "Save",
okType: "secondary"
}).then((name) => {
console.log('Name entered:', name);
}, () => {
console.error('Prompt closed');
});
}
} }
doPrompt() {
this.popup.prompt({
title: "New Album",
template: "Enter a name for this new album you're so keen on adding",
inputPlaceholder: "Album Name",
okText: "Save",
okType: "secondary"
}).then((name) => {
console.log('Name entered:', name);
}, () => {
console.error('Prompt closed');
});
``` ```
Now: Now:
@ -158,36 +162,37 @@ import {Alert, NavController} from 'ionic/ionic';
@Page(...) @Page(...)
class MyPage { class MyPage {
constructor(nav: NavController) { constructor(nav: NavController) {
this.nav = nav; this.nav = nav;
} }
doConfirm() { doConfirm() {
let alert = Alert.create({ let alert = Alert.create({
title: "New Album", title: "New Album",
body: "Enter a name for this new album you're so keen on adding", body: "Enter a name for this new album you're so keen on adding",
inputs: [ inputs: [
{ {
name: 'album', name: 'album',
placeholder: 'Album Name' placeholder: 'Album Name'
}
],
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Canceled!', data);
} }
}, ],
{ buttons: [
text: 'Ok', {
handler: data => { text: 'Cancel',
console.log('Submitted', data); handler: data => {
console.log('Canceled!', data);
}
},
{
text: 'Ok',
handler: data => {
console.log('Submitted', data);
}
} }
} ]
] });
});
this.nav.present(alert); this.nav.present(alert);
}
} }
``` ```
@ -200,33 +205,96 @@ import {ActionSheet} from 'ionic/ionic';
@Page(...) @Page(...)
class MyPage { class MyPage {
constructor(actionSheet: ActionSheet) { constructor(actionSheet: ActionSheet) {
this.actionSheet = actionSheet; this.actionSheet = actionSheet;
} }
doActionMenu() { doActionSheet() {
this.actionSheet.open({ this.actionSheet.open({
buttons: [ buttons: [
{ text: 'Archive' } { text: 'Archive' }
], ],
titleText: 'Modify your album', titleText: 'Modify your album',
cancelText: 'Cancel', cancelText: 'Cancel',
cancel: function() { cancel: function() {
console.log('Canceled clicked'); console.log('Canceled clicked');
}, },
destructiveText: 'Delete', destructiveText: 'Delete',
destructiveButtonClicked: () => { destructiveButtonClicked: () => {
console.log('Delete clicked'); console.log('Delete clicked');
}, },
buttonClicked: function(index) { buttonClicked: function(index) {
if (index == 0) { if (index == 0) {
console.log('Archive clicked'); console.log('Archive clicked');
}
return true;
} }
return true;
}
}).then(actionSheetRef => { }).then(actionSheetRef => {
this.actionSheetRef = actionSheetRef; this.actionSheetRef = actionSheetRef;
}); });
}
}
```
Now:
```
import {ActionSheet, NavController} from 'ionic/ionic';
@Page(...)
class MyPage {
constructor(nav: NavController) {
this.nav = nav;
}
doActionSheet(ev) {
let actionSheet = ActionSheet.create({
title: 'Modify your album',
buttons: [
{
text: 'Delete',
style: 'destructive',
handler: () => {
console.log('Delete clicked');
}
},
{
text: 'Archive',
handler: () => {
console.log('Archive clicked');
}
},
{
text: 'Cancel',
style: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
]
});
this.nav.present(actionSheet);
}
}
```
##### Modal Refactor
Was:
```
import {Modal} from 'ionic/ionic';
@Page(...)
class MyApp {
constructor(modal: Modal) {
this.modal = modal;
}
openContactModal() {
this.modal.open(EditUser, { userId: 8675309 });
}
} }
``` ```
@ -234,41 +302,17 @@ doActionMenu() {
Now: Now:
``` ```
import {Alert, NavController} from 'ionic/ionic'; import {Modal, NavController} from 'ionic/ionic';
@Page(...) @Page(...)
class MyPage { class MyPage {
constructor(nav: NavController) { constructor(nav: NavController) {
this.nav = nav; this.nav = nav;
} }
doActionMenu(ev) { presentModal() {
let actionSheet = ActionSheet.create({ let modal = Modal.create(EditUser, { userId: 8675309 });
title: 'Modify your album', this.nav.present(modal);
buttons: [ }
{
text: 'Delete',
style: 'destructive',
handler: () => {
console.log('Delete clicked');
}
},
{
text: 'Archive',
handler: () => {
console.log('Archive clicked');
}
},
{
text: 'Cancel',
style: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
]
});
this.nav.present(actionSheet);
} }
``` ```

50
ionic/components/item/test/sliding/index.ts
View File

@ -1,11 +1,11 @@
import {App, IonicApp, Popup} from 'ionic/ionic'; import {App, Page, IonicApp, Alert, NavController} from 'ionic/ionic';
@App({ @Page({
templateUrl: 'main.html' templateUrl: 'main.html'
}) })
class E2EApp { class E2EPage {
constructor(private app: IonicApp, private popup: Popup) { constructor(private app: IonicApp, private nav: NavController) {
this.items = []; this.items = [];
for (let x = 0; x < 20; x++) { for (let x = 0; x < 20; x++) {
this.items.push(x); this.items.push(x);
@ -21,32 +21,54 @@ class E2EApp {
didClick(item) { didClick(item) {
console.log('Clicked, ion-item'); console.log('Clicked, ion-item');
this.popup.alert({ let alert = Alert.create({
title: 'Clicked ion-item!' title: 'Clicked ion-item!',
buttons: ['Ok']
}); });
this.nav.present(alert);
} }
archive(item) { archive(item) {
console.log('Archive, ion-item-options button', item); console.log('Archive, ion-item-options button', item);
this.popup.alert({ let alert = Alert.create({
title: 'Archived!' title: 'Archived!',
}).then(() => { buttons: [{
item.close(); text: 'Ok',
handler: () => {
item.close();
}
}]
}); });
this.nav.present(alert);
} }
del(item) { del(item) {
console.log('Delete ion-item-options button', item); console.log('Delete ion-item-options button', item);
this.popup.alert({ let alert = Alert.create({
title: 'Deleted!' title: 'Deleted!',
}).then(() => { buttons: [{
item.close(); text: 'Ok',
handler: () => {
item.close();
}
}]
}); });
this.nav.present(alert);
} }
reload() { reload() {
window.location.reload(); window.location.reload();
} }
} }
@App({
template: '<ion-nav [root]="root"></ion-nav>'
})
class E2EApp {
constructor() {
this.root = E2EPage;
}
}

21
ionic/components/menu/test/basic/index.ts
View File

@ -1,18 +1,21 @@
import {App, IonicApp, Page, NavController, Popup} from 'ionic/ionic'; import {App, IonicApp, Page, NavController, Alert} from 'ionic/ionic';
@Page({templateUrl: 'page1.html'}) @Page({
templateUrl: 'page1.html'
})
class Page1 { class Page1 {
constructor(popup: Popup) { constructor(nav: NavController) {
this.popup = popup; this.nav = nav;
} }
openPopup() { presentAlert() {
this.popup.alert({ let alert = Alert.create({
title: "New Friend!", title: "New Friend!",
template: "Your friend, Obi wan Kenobi, just accepted your friend request!", body: "Your friend, Obi wan Kenobi, just accepted your friend request!",
cssClass: 'my-alert' cssClass: 'my-alert',
buttons: ['Ok']
}); });
console.log('openPopup'); this.nav.present(alert);
} }
} }

2
ionic/components/menu/test/basic/page1.html
View File

@ -48,7 +48,7 @@
</ion-card> </ion-card>
<p> <p>
<button (click)="openPopup()">Open popup</button> <button (click)="presentAlert()">Open alert</button>
</p> </p>
</ion-content> </ion-content>

44
ionic/components/modal/test/basic/index.ts
View File

@ -198,28 +198,32 @@ class ModalFirstPage {
} }
openActionSheet() { openActionSheet() {
this.actionSheet.open({ let actionSheet = ActionSheet.create({
buttons: [ buttons: [
{ text: 'Share This' }, {
{ text: 'Move' } text: 'Destructive',
], style: 'destructive',
destructiveText: 'Delete', handler: () => {
titleText: 'Modify your album', console.log('Destructive clicked');
cancelText: 'Cancel', }
cancel: function() { },
console.log('Canceled'); {
}, text: 'Archive',
destructiveButtonClicked: () => { handler: () => {
console.log('Destructive clicked'); console.log('Archive clicked');
}, }
buttonClicked: function(index) { },
console.log('Button clicked', index); {
if(index == 1) { return false; } text: 'Cancel',
return true; style: 'cancel',
} handler: () => {
}).then(actionSheetRef => { console.log('cancel this clicked');
this.actionSheetRef = actionSheetRef; }
}
]
}); });
this.nav.present(actionSheet);
} }
} }

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

@ -82,7 +82,7 @@ export class NavRouter extends RouterOutlet {
if (pathRecognizer) { if (pathRecognizer) {
// generate a componentInstruction from the view's PathRecognizer and params // generate a componentInstruction from the view's PathRecognizer and params
let componentInstruction = pathRecognizer.generate(viewCtrl.params.data); let componentInstruction = pathRecognizer.generate(viewCtrl.data);
// create a ResolvedInstruction from the componentInstruction // create a ResolvedInstruction from the componentInstruction
let instruction = new ResolvedInstruction(componentInstruction, null); let instruction = new ResolvedInstruction(componentInstruction, null);

13
ionic/components/tabs/tab.ts
View File

@ -52,8 +52,9 @@ import {Tabs} from './tabs';
* } * }
* ``` * ```
* *
* In other cases, you may not want to navigate to a new component, but just call a method. * In other cases, you may not want to navigate to a new component, but just
* You can use the `(select)` event to call a method on your class. * call a method. You can use the `(select)` event to call a method on your
* class. Below is an example of presenting a modal from one of the tabs.
* *
* ```html * ```html
* <ion-tabs preloadTabs="false"> * <ion-tabs preloadTabs="false">
@ -63,15 +64,15 @@ import {Tabs} from './tabs';
* *
* ```ts * ```ts
* export class Tabs { * export class Tabs {
* constructor(modal: Modal){ * constructor(nav: NavController){
* this.modal = modal; * this.nav = nav;
* } * }
* chat() { * chat() {
* this.modal.open(ChatPage); * let modal = Modal.create(ChatPage);
* this.nav.present(modal);
* } * }
* } * }
* ``` * ```
* In this case, when we tap on the tab, we'll open a modal instead of loading a new component.
* *
* *
* @property {any} [root] - set the root page for this tab * @property {any} [root] - set the root page for this tab

15
ionic/components/tabs/test/advanced/index.ts
View File

@ -1,6 +1,6 @@
import {RouteConfig, Location} from 'angular2/router'; import {RouteConfig, Location} from 'angular2/router';
import {App, Page, NavController, Modal} from 'ionic/ionic'; import {App, Page, NavController, Modal, ViewController} from 'ionic/ionic';
@Page({ @Page({
@ -42,18 +42,22 @@ class SignIn {
<ion-title>Chat Modal</ion-title> <ion-title>Chat Modal</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-content padding> <ion-content padding>
<p><button (click)="close()">Close Modal</button></p> <p><button (click)="viewCtrl.dismiss()">Close Modal</button></p>
</ion-content> </ion-content>
` `
}) })
class ChatPage {} class ChatPage {
constructor(viewCtrl: ViewController) {
this.viewCtrl = viewCtrl;
}
}
@Page({ @Page({
templateUrl: './tabs.html' templateUrl: './tabs.html'
}) })
class TabsPage { class TabsPage {
constructor(private modal: Modal) { constructor(private nav: NavController) {
this.tab1Root = Tab1Page1 this.tab1Root = Tab1Page1
this.tab2Root = Tab2Page1 this.tab2Root = Tab2Page1
this.tab3Root = Tab3Page1 this.tab3Root = Tab3Page1
@ -61,7 +65,8 @@ class TabsPage {
chat() { chat() {
console.log('Chat clicked!'); console.log('Chat clicked!');
this.modal.open(ChatPage); let modal = Modal.create(ChatPage);
this.nav.present(modal);
} }
onTabChange() { onTabChange() {