chore(popup): Added md mode animation's for popup and added to config

Removed the background from the md scss file. References #183
This commit is contained in:
Brandy Carney
2015-10-01 13:29:47 -04:00
parent cb023e795b
commit 43505407b3
3 changed files with 25 additions and 9 deletions

View File

@ -3,7 +3,6 @@
// --------------------------------------------------
$popup-md-max-width: 280px !default;
$popup-md-background: rgba(0,0,0,0.5) !default;
$popup-md-border-radius: 2px !default;
$popup-md-background-color: #fafafa !default;
$popup-md-box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.4) !default;
@ -24,8 +23,6 @@ $popup-md-prompt-input-margin-bottom: 5px !default;
ion-popup {
background: $popup-md-background;
popup-wrapper {
max-width: $popup-md-max-width;
border-radius: $popup-md-border-radius;

View File

@ -4,7 +4,6 @@ import {FORM_DIRECTIVES, NgControl, NgControlGroup,
import {Overlay} from '../overlay/overlay';
import {Animation} from '../../animations/animation';
import {Ion} from '../ion';
import {IonInput} from '../form/input';
import * as util from 'ionic/util';
@ -58,9 +57,10 @@ export class Popup extends Overlay {
*/
popup(context, opts={}) {
return new Promise((resolve, reject)=> {
let config = this.config;
let defaults = {
enterAnimation: 'popup-pop-in',
leaveAnimation: 'popup-pop-out',
enterAnimation: config.setting('popupPopIn'),
leaveAnimation: config.setting('popupPopOut'),
};
context.promiseResolve = resolve;
@ -204,7 +204,7 @@ const OVERLAY_TYPE = 'popup';
'<backdrop (click)="_cancel($event)" tappable disable-activated></backdrop>' +
'<popup-wrapper>' +
'<div class="popup-head">' +
'<h2 class="popup-title" [inner-html]="title"></h2>' +
'<h2 class="popup-title" [inner-html]="title" *ng-if="title"></h2>' +
'<h3 class="popup-sub-title" [inner-html]="subTitle" *ng-if="subTitle"></h3>' +
'</div>' +
'<div class="popup-body">' +
@ -281,7 +281,6 @@ class PopupAnimation extends Animation {
class PopupPopIn extends PopupAnimation {
constructor(element) {
super(element);
this.wrapper.fromTo('opacity', '0', '1')
this.wrapper.fromTo('scale', '1.1', '1');
@ -290,7 +289,6 @@ class PopupPopIn extends PopupAnimation {
}
Animation.register('popup-pop-in', PopupPopIn);
class PopupPopOut extends PopupAnimation {
constructor(element) {
super(element);
@ -301,3 +299,19 @@ class PopupPopOut extends PopupAnimation {
}
}
Animation.register('popup-pop-out', PopupPopOut);
class PopupMdPopIn extends PopupPopIn {
constructor(element) {
super(element);
this.backdrop.fromTo('opacity', '0', '0.5')
}
}
Animation.register('popup-md-pop-in', PopupMdPopIn);
class PopupMdPopOut extends PopupPopOut {
constructor(element) {
super(element);
this.backdrop.fromTo('opacity', '0.5', '0')
}
}
Animation.register('popup-md-pop-out', PopupMdPopOut);

View File

@ -21,6 +21,8 @@ IonicConfig.modeConfig('ios', {
tabBarPlacement: 'bottom',
viewTransition: 'ios',
popupPopIn: 'popup-pop-in',
popupPopOut: 'popup-pop-out',
});
@ -43,6 +45,9 @@ IonicConfig.modeConfig('md', {
tabBarPlacement: 'top',
viewTransition: 'md',
popupPopIn: 'popup-md-pop-in',
popupPopOut: 'popup-md-pop-out',
type: 'overlay',
mdRipple: true,
});