javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(modal): cleaned up scss for modal/inset-modal, added functionality to pass animation to vie

Browse Source 
cleaned up scss for modal/inset-modal, added functionality to pass animation to view-contro
This commit is contained in:
Dan Bucholtz
2016-05-31 17:09:08 -05:00
parent f6f16340e2
commit 9a86e4bdf8
6 changed files with 16 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/modal/modal.ios.scss
View File

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

5
src/components/modal/modal.md.scss
View File

@@ -4,8 +4,3 @@
// --------------------------------------------------
$modal-md-background-color: $background-md-color !default;
.modal-wrapper {
background-color: $modal-md-background-color;
}

2
src/components/modal/modal.scss
View File

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

27
src/components/modal/modal.ts
View File

@@ -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 = <HTMLElement> ele.querySelector('ion-page');
page.classList.add('show-page');
// auto-add page css className created from component JS class name
let cssClassName = pascalCaseToDashCase((<Modal>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 = <HTMLElement> ele.querySelector('ion-page');
page.classList.add('show-page');
// auto-add page css className created from component JS class name
let cssClassName = pascalCaseToDashCase((<Modal>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

5
src/components/modal/modal.wp.scss
View File

@@ -4,8 +4,3 @@
// --------------------------------------------------
$modal-wp-background-color: $background-wp-color !default;
.modal-wrapper {
background-color: $modal-wp-background-color;
}

7
src/components/nav/view-controller.ts
View File

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