From 1e427443adb18ddf616ce12a913f221ac918665d Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 30 Dec 2015 20:38:27 -0600 Subject: [PATCH] chore(): fix overlay demos/tests --- CHANGELOG.md | 316 +++++++++++-------- ionic/components/item/test/sliding/index.ts | 50 ++- ionic/components/menu/test/basic/index.ts | 21 +- ionic/components/menu/test/basic/page1.html | 2 +- ionic/components/modal/test/basic/index.ts | 44 +-- ionic/components/nav/nav-router.ts | 2 +- ionic/components/tabs/tab.ts | 13 +- ionic/components/tabs/test/advanced/index.ts | 15 +- 8 files changed, 271 insertions(+), 192 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dcc7ff8502..db321b6284 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -72,21 +72,22 @@ import {Popup} from 'ionic/ionic'; @Page(...) class MyPage { -constructor(popup: Popup) { - this.popup = popup; -} -doConfirm() { - this.popup.confirm({ - title: "Use this lightsaber?", - subTitle: "You can't exchange lightsabers", - template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?", - cancelText: "Disagree", - okText: "Agree" - }).then((result, ev) => { - console.log('Confirmed!', result); - }, () => { - console.error('Not confirmed!'); - }); + constructor(popup: Popup) { + this.popup = popup; + } + doConfirm() { + this.popup.confirm({ + title: "Use this lightsaber?", + subTitle: "You can't exchange lightsabers", + template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?", + cancelText: "Disagree", + okText: "Agree" + }).then((result, ev) => { + console.log('Confirmed!', result); + }, () => { + console.error('Not confirmed!'); + }); + } } ``` @@ -97,31 +98,32 @@ import {Alert, NavController} from 'ionic/ionic'; @Page(...) class MyPage { -constructor(nav: NavController) { - this.nav = nav; -} -doConfirm() { - let alert = Alert.create({ - title: "Use this lightsaber?", - subTitle: "You can't exchange lightsabers", - body: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?", - buttons: [ - { - text: 'Disagree', - handler: () => { - console.log('Disagreed :('); + constructor(nav: NavController) { + this.nav = nav; + } + doConfirm() { + let alert = Alert.create({ + title: "Use this lightsaber?", + subTitle: "You can't exchange lightsabers", + body: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?", + buttons: [ + { + text: 'Disagree', + handler: () => { + 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(...) class MyPage { -constructor(popup: Popup) { - this.popup = popup; + constructor(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: @@ -158,36 +162,37 @@ import {Alert, NavController} from 'ionic/ionic'; @Page(...) class MyPage { -constructor(nav: NavController) { - this.nav = nav; -} -doConfirm() { - let alert = Alert.create({ - title: "New Album", - body: "Enter a name for this new album you're so keen on adding", - inputs: [ - { - name: 'album', - placeholder: 'Album Name' - } - ], - buttons: [ - { - text: 'Cancel', - handler: data => { - console.log('Canceled!', data); + constructor(nav: NavController) { + this.nav = nav; + } + doConfirm() { + let alert = Alert.create({ + title: "New Album", + body: "Enter a name for this new album you're so keen on adding", + inputs: [ + { + name: 'album', + placeholder: 'Album Name' } - }, - { - text: 'Ok', - handler: data => { - console.log('Submitted', data); + ], + buttons: [ + { + text: 'Cancel', + 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(...) class MyPage { -constructor(actionSheet: ActionSheet) { - this.actionSheet = actionSheet; -} -doActionMenu() { - this.actionSheet.open({ - buttons: [ - { text: 'Archive' } - ], - titleText: 'Modify your album', - cancelText: 'Cancel', - cancel: function() { - console.log('Canceled clicked'); - }, - destructiveText: 'Delete', - destructiveButtonClicked: () => { - console.log('Delete clicked'); - }, - buttonClicked: function(index) { - if (index == 0) { - console.log('Archive clicked'); + constructor(actionSheet: ActionSheet) { + this.actionSheet = actionSheet; + } + doActionSheet() { + this.actionSheet.open({ + buttons: [ + { text: 'Archive' } + ], + titleText: 'Modify your album', + cancelText: 'Cancel', + cancel: function() { + console.log('Canceled clicked'); + }, + destructiveText: 'Delete', + destructiveButtonClicked: () => { + console.log('Delete clicked'); + }, + buttonClicked: function(index) { + if (index == 0) { + console.log('Archive clicked'); + } + return true; } - return true; - } - }).then(actionSheetRef => { - this.actionSheetRef = actionSheetRef; - }); + }).then(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: ``` -import {Alert, NavController} from 'ionic/ionic'; +import {Modal, NavController} from 'ionic/ionic'; @Page(...) class MyPage { -constructor(nav: NavController) { - this.nav = nav; -} -doActionMenu(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); + constructor(nav: NavController) { + this.nav = nav; + } + presentModal() { + let modal = Modal.create(EditUser, { userId: 8675309 }); + this.nav.present(modal); + } } ``` diff --git a/ionic/components/item/test/sliding/index.ts b/ionic/components/item/test/sliding/index.ts index cd1f45a908..6b8723c9b7 100644 --- a/ionic/components/item/test/sliding/index.ts +++ b/ionic/components/item/test/sliding/index.ts @@ -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' }) -class E2EApp { - constructor(private app: IonicApp, private popup: Popup) { +class E2EPage { + constructor(private app: IonicApp, private nav: NavController) { this.items = []; for (let x = 0; x < 20; x++) { this.items.push(x); @@ -21,32 +21,54 @@ class E2EApp { didClick(item) { console.log('Clicked, ion-item'); - this.popup.alert({ - title: 'Clicked ion-item!' + let alert = Alert.create({ + title: 'Clicked ion-item!', + buttons: ['Ok'] }); + this.nav.present(alert); } archive(item) { console.log('Archive, ion-item-options button', item); - this.popup.alert({ - title: 'Archived!' - }).then(() => { - item.close(); + let alert = Alert.create({ + title: 'Archived!', + buttons: [{ + text: 'Ok', + handler: () => { + item.close(); + } + }] }); + this.nav.present(alert); } del(item) { console.log('Delete ion-item-options button', item); - this.popup.alert({ - title: 'Deleted!' - }).then(() => { - item.close(); + let alert = Alert.create({ + title: 'Deleted!', + buttons: [{ + text: 'Ok', + handler: () => { + item.close(); + } + }] }); + this.nav.present(alert); } reload() { window.location.reload(); } } + + +@App({ + template: '' +}) +class E2EApp { + constructor() { + this.root = E2EPage; + } +} diff --git a/ionic/components/menu/test/basic/index.ts b/ionic/components/menu/test/basic/index.ts index efa57bcee2..2cad458b9e 100644 --- a/ionic/components/menu/test/basic/index.ts +++ b/ionic/components/menu/test/basic/index.ts @@ -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 { - constructor(popup: Popup) { - this.popup = popup; + constructor(nav: NavController) { + this.nav = nav; } - openPopup() { - this.popup.alert({ + presentAlert() { + let alert = Alert.create({ title: "New Friend!", - template: "Your friend, Obi wan Kenobi, just accepted your friend request!", - cssClass: 'my-alert' + body: "Your friend, Obi wan Kenobi, just accepted your friend request!", + cssClass: 'my-alert', + buttons: ['Ok'] }); - console.log('openPopup'); + this.nav.present(alert); } } diff --git a/ionic/components/menu/test/basic/page1.html b/ionic/components/menu/test/basic/page1.html index 4f83c16b60..ab07ea9b11 100644 --- a/ionic/components/menu/test/basic/page1.html +++ b/ionic/components/menu/test/basic/page1.html @@ -48,7 +48,7 @@

- +

diff --git a/ionic/components/modal/test/basic/index.ts b/ionic/components/modal/test/basic/index.ts index 365667d879..4caf62acba 100644 --- a/ionic/components/modal/test/basic/index.ts +++ b/ionic/components/modal/test/basic/index.ts @@ -198,28 +198,32 @@ class ModalFirstPage { } openActionSheet() { - this.actionSheet.open({ + let actionSheet = ActionSheet.create({ buttons: [ - { text: 'Share This' }, - { text: 'Move' } - ], - destructiveText: 'Delete', - titleText: 'Modify your album', - cancelText: 'Cancel', - cancel: function() { - console.log('Canceled'); - }, - destructiveButtonClicked: () => { - console.log('Destructive clicked'); - }, - buttonClicked: function(index) { - console.log('Button clicked', index); - if(index == 1) { return false; } - return true; - } - }).then(actionSheetRef => { - this.actionSheetRef = actionSheetRef; + { + text: 'Destructive', + style: 'destructive', + handler: () => { + console.log('Destructive clicked'); + } + }, + { + text: 'Archive', + handler: () => { + console.log('Archive clicked'); + } + }, + { + text: 'Cancel', + style: 'cancel', + handler: () => { + console.log('cancel this clicked'); + } + } + ] }); + + this.nav.present(actionSheet); } } diff --git a/ionic/components/nav/nav-router.ts b/ionic/components/nav/nav-router.ts index b070111571..0e6b1dad34 100644 --- a/ionic/components/nav/nav-router.ts +++ b/ionic/components/nav/nav-router.ts @@ -82,7 +82,7 @@ export class NavRouter extends RouterOutlet { if (pathRecognizer) { // 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 let instruction = new ResolvedInstruction(componentInstruction, null); diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index f6ca1a1676..158ca6370b 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -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. - * You can use the `(select)` event to call a method on your class. + * In other cases, you may not want to navigate to a new component, but just + * 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 * @@ -63,15 +64,15 @@ import {Tabs} from './tabs'; * * ```ts * export class Tabs { - * constructor(modal: Modal){ - * this.modal = modal; + * constructor(nav: NavController){ + * this.nav = nav; * } * 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 diff --git a/ionic/components/tabs/test/advanced/index.ts b/ionic/components/tabs/test/advanced/index.ts index 7d4ebb0771..a0747f10af 100644 --- a/ionic/components/tabs/test/advanced/index.ts +++ b/ionic/components/tabs/test/advanced/index.ts @@ -1,6 +1,6 @@ import {RouteConfig, Location} from 'angular2/router'; -import {App, Page, NavController, Modal} from 'ionic/ionic'; +import {App, Page, NavController, Modal, ViewController} from 'ionic/ionic'; @Page({ @@ -42,18 +42,22 @@ class SignIn { Chat Modal -

+

` }) -class ChatPage {} +class ChatPage { + constructor(viewCtrl: ViewController) { + this.viewCtrl = viewCtrl; + } +} @Page({ templateUrl: './tabs.html' }) class TabsPage { - constructor(private modal: Modal) { + constructor(private nav: NavController) { this.tab1Root = Tab1Page1 this.tab2Root = Tab2Page1 this.tab3Root = Tab3Page1 @@ -61,7 +65,8 @@ class TabsPage { chat() { console.log('Chat clicked!'); - this.modal.open(ChatPage); + let modal = Modal.create(ChatPage); + this.nav.present(modal); } onTabChange() {