javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
fix animation and darken iOS background a bit.

closes #5582
This commit is contained in:
Brandy Carney
2016-04-21 14:21:22 -04:00
parent 9d3e008520
commit 02645322eb
4 changed files with 30 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
ionic/components/toast/test/basic/index.ts
View File

@ -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() {

2
ionic/components/toast/test/basic/main.html
View File

@ -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>

2
ionic/components/toast/toast.ios.scss
View File

@ -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;

18
ionic/components/toast/toast.ts
View File

@ -66,12 +66,12 @@ export class Toast extends ViewController {
constructor(opts: ToastOptions = {}) {
opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : true;
console.log(opts.enableBackdropDismiss);
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);
}