From 9a86e4bdf89669aac5800fb9f7c0e0d087772fc3 Mon Sep 17 00:00:00 2001 From: Dan Bucholtz Date: Tue, 31 May 2016 17:09:08 -0500 Subject: [PATCH] refactor(modal): cleaned up scss for modal/inset-modal, added functionality to pass animation to vie cleaned up scss for modal/inset-modal, added functionality to pass animation to view-contro --- src/components/modal/modal.ios.scss | 5 ----- src/components/modal/modal.md.scss | 5 ----- src/components/modal/modal.scss | 2 ++ src/components/modal/modal.ts | 27 ++++++++++----------------- src/components/modal/modal.wp.scss | 5 ----- src/components/nav/view-controller.ts | 7 ++++--- 6 files changed, 16 insertions(+), 35 deletions(-) diff --git a/src/components/modal/modal.ios.scss b/src/components/modal/modal.ios.scss index cbdd55e7fc..2b85a9a162 100644 --- a/src/components/modal/modal.ios.scss +++ b/src/components/modal/modal.ios.scss @@ -5,8 +5,3 @@ $modal-ios-background-color: $background-ios-color !default; $modal-ios-border-radius: 5px !default; - - -.modal-wrapper { - background-color: $modal-ios-background-color; -} diff --git a/src/components/modal/modal.md.scss b/src/components/modal/modal.md.scss index 479bc69f33..809a36c16c 100644 --- a/src/components/modal/modal.md.scss +++ b/src/components/modal/modal.md.scss @@ -4,8 +4,3 @@ // -------------------------------------------------- $modal-md-background-color: $background-md-color !default; - - -.modal-wrapper { - background-color: $modal-md-background-color; -} diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss index 1a598f9fe0..2ad26a3aa8 100644 --- a/src/components/modal/modal.scss +++ b/src/components/modal/modal.scss @@ -31,6 +31,8 @@ $modal-inset-height-large: 600px !default; z-index: 10; height: 100%; + // hidden by default to prevent flickers, the animation will show it + transform: translate3d(0, 100%, 0); @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) { position: absolute; diff --git a/src/components/modal/modal.ts b/src/components/modal/modal.ts index 63a87b5b81..5aae33a68d 100644 --- a/src/components/modal/modal.ts +++ b/src/components/modal/modal.ts @@ -189,20 +189,17 @@ class ModalSlideIn extends Transition { backdrop.fromTo('opacity', 0.01, 0.4); let wrapper = new Animation(ele.querySelector('.modal-wrapper')); let page = ele.querySelector('ion-page'); - page.classList.add('show-page'); // auto-add page css className created from component JS class name let cssClassName = pascalCaseToDashCase((enteringView).modalViewType); page.classList.add(cssClassName); wrapper.fromTo('translateY', '100%', '0%'); - this - .element(enteringView.pageRef()) - .easing('cubic-bezier(0.36,0.66,0.04,1)') - .duration(400) - .before.addClass('show-page') - .add(backdrop) - .add(wrapper); + + const DURATION = 400; + const EASING = 'cubic-bezier(0.36,0.66,0.04,1)'; + this.element(enteringView.pageRef()).easing(EASING).duration(DURATION).add(backdrop).add(wrapper); + this.element(new ElementRef(page)).easing(EASING).duration(DURATION).before.addClass('show-page'); if (enteringView.hasNavbar()) { // entering page has a navbar @@ -253,20 +250,16 @@ class ModalMDSlideIn extends Transition { let wrapper = new Animation(ele.querySelector('.modal-wrapper')); wrapper.fromTo('translateY', '40px', '0px'); let page = ele.querySelector('ion-page'); - page.classList.add('show-page'); + // auto-add page css className created from component JS class name let cssClassName = pascalCaseToDashCase((enteringView).modalViewType); page.classList.add(cssClassName); - this - .element(enteringView.pageRef()) - .easing('cubic-bezier(0.36,0.66,0.04,1)') - .duration(280) - .fadeIn() - .before.addClass('show-page') - .add(backdrop) - .add(wrapper); + const DURATION = 280; + const EASING = 'cubic-bezier(0.36,0.66,0.04,1)'; + this.element(enteringView.pageRef()).easing(EASING).duration(DURATION).fadeIn().add(backdrop).add(wrapper); + this.element(new ElementRef(page)).easing(EASING).duration(DURATION).before.addClass('show-page'); if (enteringView.hasNavbar()) { // entering page has a navbar diff --git a/src/components/modal/modal.wp.scss b/src/components/modal/modal.wp.scss index bc5fd33694..b0837f7a18 100644 --- a/src/components/modal/modal.wp.scss +++ b/src/components/modal/modal.wp.scss @@ -4,8 +4,3 @@ // -------------------------------------------------- $modal-wp-background-color: $background-wp-color !default; - - -.modal-wrapper { - background-color: $modal-wp-background-color; -} diff --git a/src/components/nav/view-controller.ts b/src/components/nav/view-controller.ts index 5365970817..baa6a24054 100644 --- a/src/components/nav/view-controller.ts +++ b/src/components/nav/view-controller.ts @@ -3,7 +3,7 @@ import {Output, EventEmitter, Type, TemplateRef, ViewContainerRef, ElementRef, R import {Navbar} from '../navbar/navbar'; import {NavController, NavOptions} from './nav-controller'; import {NavParams} from './nav-params'; -import {isPresent} from '../../util/util'; +import {isPresent, merge} from '../../util/util'; /** @@ -125,8 +125,9 @@ export class ViewController { this._onDismiss = callback; } - dismiss(data?: any, role?: any) { - return this._nav.remove(this._nav.indexOf(this), 1, this._leavingOpts).then(() => { + dismiss(data?: any, role?: any, navOptions: NavOptions = {}) { + let options = merge({}, this._leavingOpts, navOptions); + return this._nav.remove(this._nav.indexOf(this), 1, options).then(() => { this._onDismiss && this._onDismiss(data, role); return data; });