diff --git a/ionic/components.wp.scss b/ionic/components.wp.scss
index 5cdf5f81d1..e1e423801f 100644
--- a/ionic/components.wp.scss
+++ b/ionic/components.wp.scss
@@ -27,6 +27,7 @@
"components/select/select.wp",
"components/tabs/tabs.wp",
"components/toggle/toggle.wp",
+ "components/toast/toast.wp",
"components/toolbar/toolbar.wp";
diff --git a/ionic/components/toast/test/basic/index.ts b/ionic/components/toast/test/basic/index.ts
index b6341523ff..27d12585af 100644
--- a/ionic/components/toast/test/basic/index.ts
+++ b/ionic/components/toast/test/basic/index.ts
@@ -43,31 +43,8 @@ class E2EPage {
this.nav.present(toast);
}
-
}
-@Page({
- template: `
-
-
-
-
- Toast
-
-
- Hi, I'm Bob, and I'm a modal.
-
- `
-})
-class ToastPage {
- constructor(private viewCtrl: ViewController) { }
-
- dismiss() {
- this.viewCtrl.dismiss();
- }
-}
-
-
@App({
template: ''
})
diff --git a/ionic/components/toast/toast.ts b/ionic/components/toast/toast.ts
index b7d216b600..5d177c882b 100644
--- a/ionic/components/toast/toast.ts
+++ b/ionic/components/toast/toast.ts
@@ -121,6 +121,7 @@ class ToastCmp {
private hdrId: string;
private id: number;
private created: number;
+ private dismissTimeout: number = undefined;
constructor(
private _nav: NavController,
@@ -158,8 +159,7 @@ class ToastCmp {
}
// if there's a `duration` set, automatically dismiss.
- setTimeout(() => this.dismiss('backdrop'), this.d.duration ? this.d.duration : 3000)
-
+ this.dismissTimeout = setTimeout(() => this.dismiss('backdrop'), this.d.duration ? this.d.duration : 3000)
}
click(button, dismissDelay?) {
@@ -182,6 +182,8 @@ class ToastCmp {
}
dismiss(role): Promise {
+ clearTimeout(this.dismissTimeout);
+ this.dismissTimeout = undefined;
return this._viewCtrl.dismiss(null, role);
}
@@ -254,10 +256,51 @@ class ToastMdSlideOut extends Transition {
}
}
+class ToastWpPopIn extends Transition {
+ constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+ super(opts);
+
+ let ele = enteringView.pageRef().nativeElement;
+ let backdrop = new Animation(ele.querySelector('.backdrop'));
+ let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+
+ wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.3', '1');
+ backdrop.fromTo('opacity', 0, 0);
+
+ this
+ .easing('cubic-bezier(0,0 0.05,1)')
+ .duration(200)
+ .add(backdrop)
+ .add(wrapper);
+ }
+}
+
+class ToastWpPopOut extends Transition {
+ constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+ super(opts);
+
+ let ele = leavingView.pageRef().nativeElement;
+ let backdrop = new Animation(ele.querySelector('.backdrop'));
+ let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+
+ wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '1.3');
+ backdrop.fromTo('opacity', 0, 0);
+
+ this
+ .easing('ease-out')
+ .duration(150)
+ .add(backdrop)
+ .add(wrapper);
+ }
+}
+
+
Transition.register('toast-slide-in', ToastSlideIn);
Transition.register('toast-slide-out', ToastSlideOut);
Transition.register('toast-md-slide-in', ToastMdSlideIn);
Transition.register('toast-md-slide-out', ToastMdSlideOut);
+Transition.register('toast-wp-slide-out', ToastWpPopOut);
+Transition.register('toast-wp-slide-in', ToastWpPopIn);
let toastIds = -1;
diff --git a/ionic/components/toast/toast.wp.scss b/ionic/components/toast/toast.wp.scss
new file mode 100644
index 0000000000..86c82ebcd5
--- /dev/null
+++ b/ionic/components/toast/toast.wp.scss
@@ -0,0 +1,33 @@
+// Windows Phone Toast
+// --------------------------------------------------
+$toast-wp-text-align: left !default;
+$toast-wp-background: rgba(0, 0, 0, 1) !default;
+$toast-wp-border-radius: 0 !default;
+$toast-wp-button-color: #fff !default;
+
+$toast-wp-title-color: #fff !default;
+$toast-wp-title-font-size: 1.4rem !default;
+$toast-wp-title-padding: 1.5rem !default;
+
+.toast-wrapper {
+ background: $toast-wp-background;
+ border-radius: $toast-wp-border-radius;
+ bottom: 0;
+ display: block;
+ left: 0;
+ margin: auto;
+ max-width: $toast-max-width;
+ position: absolute;
+ transform: translate3d(0, 100%, 0);
+ z-index: $z-index-overlay-wrapper;
+}
+
+.toast-message {
+ color: $toast-wp-title-color;
+ font-size: $toast-wp-title-font-size;
+ padding: $toast-wp-title-padding;
+}
+
+.toast-button {
+ color: $toast-wp-button-color;
+}