From 06496321e9a38ea30f5c8cdb8d5c7f61354ac9f3 Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Fri, 2 Oct 2015 12:11:13 -0500 Subject: [PATCH 1/5] docs(demos): update content --- demos/component-docs/app.css | 1 + demos/component-docs/index.ts | 4 ++-- demos/component-docs/main.html | 19 +++++++++++++++---- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/demos/component-docs/app.css b/demos/component-docs/app.css index f5f9d0ccbe..ba08367d9a 100644 --- a/demos/component-docs/app.css +++ b/demos/component-docs/app.css @@ -1,5 +1,6 @@ body { cursor: url('http://ionicframework.com/img/finger.png'), auto; + overflow: hidden; } section.hidden { diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts index e9d12d79d8..45f1342ebd 100644 --- a/demos/component-docs/index.ts +++ b/demos/component-docs/index.ts @@ -16,7 +16,7 @@ class MainPage { this.actionSheet = actionSheet; this.navDetailsPage = NavigationDetailsPage; - this.component = { title: 'Tabs' }; + this.component = { title: 'Action Sheets' }; this.setupAnimations(); @@ -44,7 +44,7 @@ class MainPage { { text: 'Move' } ], destructiveText: 'Delete', - titleText: 'Modify your album', + titleText: 'You Opened Action Sheet', cancelText: 'Cancel', cancel: function() { console.log('Canceled'); diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html index fcc6813dfa..6be668ea00 100644 --- a/demos/component-docs/main.html +++ b/demos/component-docs/main.html @@ -7,9 +7,9 @@ -
+
@@ -175,7 +175,7 @@ - + @@ -208,6 +208,11 @@ Charms + + + Herbology + + @@ -219,12 +224,18 @@ - Invisibility Cloak + Cloak of Invisibility Call Ron +
Sure
+ + + + + Study Potions
Maybe later
 From 760cfcf9ef3f78f844a894bb02d7471a58b36451 Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Tue, 6 Oct 2015 08:40:25 -0500 Subject: [PATCH 2/5] docs(demos): tabs, nav, button demos --- demos/component-docs/index.ts | 68 +++++++------ demos/component-docs/main.html | 139 ++++++++++++++++++--------- demos/component-docs/navigation.html | 16 +-- demos/component-docs/tabs.html | 12 +++ demos/component-docs/tabs.ts | 35 +++++++ 5 files changed, 185 insertions(+), 85 deletions(-) create mode 100644 demos/component-docs/tabs.html create mode 100644 demos/component-docs/tabs.ts diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts index 45f1342ebd..3308a6985e 100644 --- a/demos/component-docs/index.ts +++ b/demos/component-docs/index.ts @@ -1,30 +1,54 @@ -import {App, IonicApp, ActionSheet, Animation, NavController, NavParams} from 'ionic/ionic'; -import {IonicView, IonicConfig, Events} from 'ionic/ionic'; +import {App, IonicApp, ActionSheet, NavController, NavParams} from 'ionic/ionic'; +import {Modal, IonicView, IonicConfig, Events} from 'ionic/ionic'; import {NgZone} from 'angular2/angular2'; import {NavigationDetailsPage} from 'navigation'; +import {TabsPage} from 'tabs'; + import * as helpers from 'helpers'; +@IonicView({ + template: '
My Modal
' +}) +class DemoModal extends Modal { + constructor() { + super(); + } +} + + @IonicView({ templateUrl: 'main.html' }) -class MainPage { +export class MainPage { - constructor(app: IonicApp, nav: NavController, actionSheet: ActionSheet, zone: NgZone, params: NavParams, events: Events) { + component: any = { title: 'Action Sheets' }; + + constructor(app: IonicApp, + nav: NavController, + actionSheet: ActionSheet, + zone: NgZone, + params: NavParams, + modal: Modal, + events: Events) + { this.params = params; this.nav = nav; + this.modal = modal; this.actionSheet = actionSheet; - this.navDetailsPage = NavigationDetailsPage; - this.component = { title: 'Action Sheets' }; - this.setupAnimations(); + if (params.data.location) { this.component.title = params.data.location; } + else if (window.location.hash) { this.component.title = window.location.hash; } window.addEventListener('message', (e) => { zone.run(() => { if (e.data) { var data = JSON.parse(e.data); this.component.title = helpers.toTitleCase(data.hash.replace('-', ' ')); + if (this.component.title === 'Tabs') { + this.nav.setRoot(TabsPage); + } } }); }); @@ -70,26 +94,16 @@ class MainPage { this.nav.push(NavigationDetailsPage, {name: item}); } - // ************************** - // Animations - // ************************** - setupAnimations() { - this.animation = new Animation(); - this.animation - .duration(2000) - var ionitronSpin = new Animation(document.querySelector('#ionitron')); - ionitronSpin - .from('transform', 'rotate(0deg)') - .to('transform', 'rotate(360deg)') - - this.animation.add(ionitronSpin); - } - play() { - this.animation.play(); - } - pause() { - this.animation.pause(); + // ************************** + // Modal + // ************************** + openModal() { + this.modal.open(DemoModal, { + enterAnimation: 'my-fade-in', + leaveAnimation: 'my-fade-out', + handle: 'my-awesome-modal' + }); } } @@ -103,4 +117,4 @@ class DemoApp { this.rootPage = MainPage; } -} \ No newline at end of file +} diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html index 6be668ea00..37d5df78ca 100644 --- a/demos/component-docs/main.html +++ b/demos/component-docs/main.html @@ -1,5 +1,4 @@ - {{ component.title }} @@ -9,7 +8,7 @@
@@ -32,6 +31,30 @@
+

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +
+ +
+

@@ -54,6 +77,54 @@
+
+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +
+ +
+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +
+
@@ -175,7 +246,7 @@ - + @@ -208,11 +279,6 @@ Charms - - - Herbology - - @@ -224,18 +290,12 @@ - Cloak of Invisibility + Invisibility Cloak Call Ron -
Sure
- - - - - Study Potions
Maybe later
 @@ -251,35 +311,30 @@
@@ -304,12 +359,8 @@
-
- - - - - +
+ diff --git a/demos/component-docs/navigation.html b/demos/component-docs/navigation.html index a0fa477680..5d734ef310 100644 --- a/demos/component-docs/navigation.html +++ b/demos/component-docs/navigation.html @@ -3,18 +3,6 @@ {{ selection.title }} - - - - - - - {{ selection.title }} - - - - {{ selection.content }} - - - + +{{ selection.content }} \ No newline at end of file diff --git a/demos/component-docs/tabs.html b/demos/component-docs/tabs.html new file mode 100644 index 0000000000..c6566ddd7f --- /dev/null +++ b/demos/component-docs/tabs.html @@ -0,0 +1,12 @@ + + Tabs + + + + + + + + + + diff --git a/demos/component-docs/tabs.ts b/demos/component-docs/tabs.ts new file mode 100644 index 0000000000..357ab55d72 --- /dev/null +++ b/demos/component-docs/tabs.ts @@ -0,0 +1,35 @@ +import {NavController, NavParams} from 'ionic/ionic'; +import {IonicView, ViewController, Events} from 'ionic/ionic'; +import {MainPage} from 'index'; +import * as helpers from 'helpers'; + +@IonicView({ + template: 'Hello 1', +}) +class TabOneCtrl { + constructor(nav: NavController, view: ViewController) { + this.nav = nav; + this.view = view; + } +} + +@IonicView({ + templateUrl: 'tabs.html' +}) +export class TabsPage { + constructor(nav: NavController, params: NavParams, events: Events) { + this.nav = nav; + this.TabOneRoot = TabOneCtrl; + window.onmessage = (e) => { + zone.run(() => { + if (e.data) { + var data = JSON.parse(e.data); + var componentTitle = helpers.toTitleCase(data.hash.replace('-', ' ')); + this.nav.setRoot(MainPage, {location: componentTitle}); + events.publish('page:locationChange', { componentName: componentTitle }); + } + }); + }; + + } +} \ No newline at end of file From 8f5398ab82413c29302295283949cdf1ff3b8dc0 Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Tue, 6 Oct 2015 09:21:18 -0500 Subject: [PATCH 3/5] docs(demos): button sizes --- demos/component-docs/main.html | 52 ++++++++++++++++++++++++++++++++-- 1 file changed, 50 insertions(+), 2 deletions(-) diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html index 37d5df78ca..e7039e0bda 100644 --- a/demos/component-docs/main.html +++ b/demos/component-docs/main.html @@ -7,7 +7,7 @@
-
@@ -101,7 +101,7 @@
-
+

@@ -125,6 +125,54 @@

+
+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +
+ +
+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +
+
From e955c3a88ab7a5ef5e7eee7f7d2b66cee18f4ccd Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Tue, 6 Oct 2015 10:43:49 -0500 Subject: [PATCH 4/5] docs(demos): modal demo outline --- demos/component-docs/index.ts | 43 +++++++++++++++++++++--------- demos/component-docs/main.html | 8 ++++-- demos/component-docs/modal.html | 1 + demos/component-docs/modal.ts | 46 +++++++++++++++++++++++++++++++++ 4 files changed, 84 insertions(+), 14 deletions(-) create mode 100644 demos/component-docs/modal.html create mode 100644 demos/component-docs/modal.ts diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts index 3308a6985e..14ff9d3315 100644 --- a/demos/component-docs/index.ts +++ b/demos/component-docs/index.ts @@ -1,20 +1,13 @@ import {App, IonicApp, ActionSheet, NavController, NavParams} from 'ionic/ionic'; -import {Modal, IonicView, IonicConfig, Events} from 'ionic/ionic'; +import {Modal, IonicView, IonicConfig, Events, Animation} from 'ionic/ionic'; import {NgZone} from 'angular2/angular2'; import {NavigationDetailsPage} from 'navigation'; import {TabsPage} from 'tabs'; +import {DemoModal} from 'modal'; import * as helpers from 'helpers'; -@IonicView({ - template: '
My Modal
' -}) -class DemoModal extends Modal { - constructor() { - super(); - } -} @IonicView({ @@ -37,6 +30,7 @@ export class MainPage { this.modal = modal; this.actionSheet = actionSheet; this.navDetailsPage = NavigationDetailsPage; + this.demoModal = DemoModal; if (params.data.location) { this.component.title = params.data.location; } else if (window.location.hash) { this.component.title = window.location.hash; } @@ -99,15 +93,40 @@ export class MainPage { // Modal // ************************** openModal() { - this.modal.open(DemoModal, { + this.modal.open(this.demoModal, { + handle: 'my-awesome-modal', enterAnimation: 'my-fade-in', - leaveAnimation: 'my-fade-out', - handle: 'my-awesome-modal' + leaveAnimation: 'my-fade-out' }); } } +class FadeIn extends Animation { + constructor(element) { + super(element); + this + .easing('ease') + .duration(450) + .fadeIn(); + } +} + +Animation.register('my-fade-in', FadeIn); + +class FadeOut extends Animation { + constructor(element) { + super(element); + this + .easing('ease') + .duration(250) + .fadeOut(); + } +} + +Animation.register('my-fade-out', FadeOut); + + @App({ template: '' }) diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html index e7039e0bda..0a42ef51b9 100644 --- a/demos/component-docs/main.html +++ b/demos/component-docs/main.html @@ -354,8 +354,12 @@ -
- TODO + +
+ +