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..14ff9d3315 100644
--- a/demos/component-docs/index.ts
+++ b/demos/component-docs/index.ts
@@ -1,30 +1,48 @@
-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, 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({
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: 'Tabs' };
+ this.demoModal = DemoModal;
- 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);
+ }
}
});
});
@@ -44,7 +62,7 @@ class MainPage {
{ text: 'Move' }
],
destructiveText: 'Delete',
- titleText: 'Modify your album',
+ titleText: 'You Opened Action Sheet',
cancelText: 'Cancel',
cancel: function() {
console.log('Canceled');
@@ -70,30 +88,45 @@ 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(this.demoModal, {
+ handle: 'my-awesome-modal',
+ enterAnimation: 'my-fade-in',
+ 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: ''
})
@@ -103,4 +136,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 fcc6813dfa..0a42ef51b9 100644
--- a/demos/component-docs/main.html
+++ b/demos/component-docs/main.html
@@ -1,5 +1,4 @@
-
{{ component.title }}
@@ -7,8 +6,8 @@
+
diff --git a/demos/component-docs/modal.html b/demos/component-docs/modal.html
new file mode 100644
index 0000000000..dc34228232
--- /dev/null
+++ b/demos/component-docs/modal.html
@@ -0,0 +1 @@
+TODO
diff --git a/demos/component-docs/modal.ts b/demos/component-docs/modal.ts
new file mode 100644
index 0000000000..94089f578e
--- /dev/null
+++ b/demos/component-docs/modal.ts
@@ -0,0 +1,46 @@
+import {App, IonicApp, Modal, NavController, IonicView, Events} from 'ionic/ionic';
+import * as helpers from 'helpers';
+
+@IonicView({
+ templateUrl: 'modal.html'
+})
+class ModalFirstPage {
+
+ constructor(
+ nav: NavController,
+ modal: Modal,
+ events: Events
+ ) {
+ this.nav = nav;
+ this.modal = modal;
+ window.onmessage = (e) => {
+ zone.run(() => {
+ if (e.data) {
+ var data = JSON.parse(e.data);
+ var componentTitle = helpers.toTitleCase(data.hash.replace('-', ' '));
+ events.publish('page:locationChange', { componentName: componentTitle });
+ this.closeModal();
+ }
+ });
+ };
+ }
+
+ closeModal() {
+ let modal = this.modal.get();
+ if (modal) {
+ modal.close();
+ }
+ }
+
+}
+
+@IonicView({
+ template: ''
+})
+export class DemoModal {
+ constructor() {
+ this.rootView = ModalFirstPage;
+ }
+}
+
+
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
diff --git a/ionic/components/icon/modes/ios.scss b/ionic/components/icon/modes/ios.scss
index 64a8de114c..e4cec48e57 100644
--- a/ionic/components/icon/modes/ios.scss
+++ b/ionic/components/icon/modes/ios.scss
@@ -3,10 +3,10 @@
// --------------------------------------------------
-$icon-forward-ios-background-svg: "" !default;
+$icon-detail-push-background-svg: "" !default;
-@mixin ios-icon-forward($fg-color) {
- $svg: str-replace($icon-forward-ios-background-svg, 'fg-color', $fg-color);
+@mixin ios-detail-push-icon($fg-color) {
+ $svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
@include svg-background-image($svg);
}
diff --git a/ionic/components/icon/test/basic/main.html b/ionic/components/icon/test/basic/main.html
index 9aecc23dac..d674a97f18 100644
--- a/ionic/components/icon/test/basic/main.html
+++ b/ionic/components/icon/test/basic/main.html
@@ -77,9 +77,9 @@
-
+
- ion-item w/ [forward-icon] attr. text text text text text text
+ ion-item w/ [detail-push] attr. text text text text text text
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index f3e10ad330..855325dbd0 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -20,7 +20,7 @@ $item-ios-padding-icon-bottom: 10px !default;
$item-ios-avatar-size: 3.6rem !default;
$item-ios-thumbnail-size: 5.6rem !default;
$item-ios-note-color: darken($item-ios-border-color, 10%) !default;
-$item-ios-forward-icon-color: $item-ios-border-color !default;
+$item-ios-detail-push-color: $item-ios-border-color !default;
$item-ios-divider-bg: #f5f5f5 !default;
$item-ios-divider-color: #222 !default;
@@ -174,10 +174,10 @@ button.item {
.list,
.card {
- button[ion-item]:not([no-forward-icon]),
- a[ion-item]:not([no-forward-icon]),
- [forward-icon] {
- @include ios-icon-forward($item-ios-forward-icon-color);
+ button[ion-item]:not([detail-none]),
+ a[ion-item]:not([detail-push]),
+ [detail-push] {
+ @include ios-detail-push-icon($item-ios-detail-push-color);
background-repeat: no-repeat;
background-position: right ($item-ios-padding-right - 2) center;
background-size: 14px 14px;
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index c5aeef0abf..384836a2ef 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -23,7 +23,7 @@ $item-md-body-text-line-height: 1.5 !default;
$item-md-avatar-size: 4rem !default;
$item-md-thumbnail-size: 8rem !default;
$item-md-note-color: darken($item-md-border-color, 10%) !default;
-$item-md-forward-icon-color: $item-md-border-color !default;
+$item-md-detail-push-color: $item-md-border-color !default;
$item-md-divider-bg: #fff !default;
$item-md-divider-color: #222 !default;
diff --git a/ionic/components/item/test/icons/main.html b/ionic/components/item/test/icons/main.html
index 895c224360..e23e172f74 100644
--- a/ionic/components/item/test/icons/main.html
+++ b/ionic/components/item/test/icons/main.html
@@ -2,16 +2,16 @@
-
- ion-item [forward-icon] attr
+
+ ion-item [detail-push] attr
- a[ion-item] w/ forward icon
+ a[ion-item] w/ push detail
@@ -34,10 +34,9 @@
button[ion-item] w/ left side icon
-
-