feat(toast): display the toast even on page change unless dismissOnPageChange is passed

fix animation and darken iOS background a bit.

closes #5582

Author: brandyscarney

ionic/components/toast/test/basic/index.ts

@@ -1,5 +1,19 @@
 import {App, Page, Toast, NavController} from 'ionic-angular';
 
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Another Page</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <p>This is another page to show that the toast stays.</p>
+    </ion-content>
+  `
+})
+class AnotherPage {
+
+}
+
 @Page({
   templateUrl: 'main.html'
 })
@@ -19,6 +33,10 @@ class E2EPage {
     });
 
     this.nav.present(toast);
+
+    setTimeout(() => {
+      this.nav.push(AnotherPage);
+    }, 1000);
   }
 
   showLongToast() {

ionic/components/toast/test/basic/main.html

@@ -3,7 +3,7 @@
 </ion-navbar>
 
 <ion-content padding>
-  <button block (click)="showToast()">Show Toast</button>
+  <button block (click)="showToast()">Show Toast and Navigate</button>
   <button block (click)="showLongToast()">Show Long Toast</button>
   <br />
   <button block (click)="showDismissDurationToast()">Custom (1.5s) Duration</button>

ionic/components/toast/toast.ios.scss

@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 $toast-ios-text-align:                            left !default;
-$toast-ios-background:                            rgba(0, 0, 0, .7) !default;
+$toast-ios-background:                            rgba(0, 0, 0, .9) !default;
 $toast-ios-border-radius:                         .65rem !default;
 
 $toast-ios-title-color:                           #fff !default;

ionic/components/toast/toast.ts

@@ -66,12 +66,12 @@ export class Toast extends ViewController {
 
   constructor(opts: ToastOptions = {}) {
     opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : true;
-    console.log(opts.enableBackdropDismiss);
-    super(ToastCmp, opts);
-
+    opts.dismissOnPageChange = isPresent(opts.dismissOnPageChange) ? !!opts.dismissOnPageChange : false;
 
+    super(ToastCmp, opts);
     this.viewType = 'toast';
-    this.isOverlay = false;
+    this.isOverlay = true;
+    this.usePortal = true;
 
     // by default, toasts should not fire lifecycle events of other views
     // for example, when an toast enters, the current active view should
@@ -108,6 +108,7 @@ export class Toast extends ViewController {
    *  | showCloseButton       | `boolean` | false           | Whether or not to show a button to close the toast.                                                           |
    *  | closeButtonText       | `string`  | "Close"         | Text to display in the close button.                                                                          |
    *  | enableBackdropDismiss | `boolean` | true            | Whether the toast should be dismissed by tapping the backdrop.                                                |
+   *  | dismissOnPageChange   | `boolean` | false           | Whether to dismiss the toast when navigating to a new page.                                                   |
    *
    * @param {object} opts Toast options. See the above table for available options.
    */
@@ -226,6 +227,7 @@ export interface ToastOptions {
   showCloseButton?: boolean;
   closeButtonText?: string;
   enableBackdropDismiss?: boolean;
+  dismissOnPageChange?: boolean;
 }
 
 class ToastSlideIn extends Transition {
@@ -235,7 +237,7 @@ class ToastSlideIn extends Transition {
     let ele = enteringView.pageRef().nativeElement;
     let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
 
-    wrapper.fromTo('translateY', '100%', '0%');
+    wrapper.fromTo('translateY', '120%', '0%');
     this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(wrapper);
   }
 }
@@ -247,7 +249,7 @@ class ToastSlideOut extends Transition {
     let ele = leavingView.pageRef().nativeElement;
     let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
 
-    wrapper.fromTo('translateY', '0%', '100%');
+    wrapper.fromTo('translateY', '0%', '120%');
     this.easing('cubic-bezier(.36,.66,.04,1)').duration(300).add(wrapper);
   }
 }
@@ -261,7 +263,7 @@ class ToastMdSlideIn extends Transition {
     let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
 
     backdrop.fromTo('opacity', 0, 0);
-    wrapper.fromTo('translateY', '100%', '0%');
+    wrapper.fromTo('translateY', '120%', '0%');
     this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(backdrop).add(wrapper);
   }
 }
@@ -274,7 +276,7 @@ class ToastMdSlideOut extends Transition {
     let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
     let backdrop = new Animation(ele.querySelector('.backdrop'));
 
-    wrapper.fromTo('translateY', '0%', '100%');
+    wrapper.fromTo('translateY', '0%', '120%');
     backdrop.fromTo('opacity', 0, 0);
     this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(backdrop).add(wrapper);
   }