From 57a1274b6cff4e2c7bd1dddc94fe402ed51f5664 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 24 May 2016 16:00:23 -0400 Subject: [PATCH] feat(popover): modify the animation for each mode add another wrapper div to fix the arrow not animating at the same time. references #5420 --- src/animations/animation.ts | 2 +- src/components/alert/alert.ts | 2 +- src/components/popover/popover.ios.scss | 6 +- src/components/popover/popover.md.scss | 7 +- src/components/popover/popover.scss | 9 ++- src/components/popover/popover.ts | 90 ++++++++++------------ src/components/popover/popover.wp.scss | 6 +- src/components/popover/test/basic/index.ts | 14 ++-- 8 files changed, 68 insertions(+), 68 deletions(-) diff --git a/src/animations/animation.ts b/src/animations/animation.ts index d01c206a3f3..01d46a14cc9 100644 --- a/src/animations/animation.ts +++ b/src/animations/animation.ts @@ -156,7 +156,7 @@ export class Animation { wc: '' }; - // add the will-change property fo transforms or opacity + // add the will-change property for transforms or opacity if (fxProp.trans) { fxProp.wc = CSS.transform; diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts index 94f2aa5c1f5..5ac81ba3a2c 100644 --- a/src/components/alert/alert.ts +++ b/src/components/alert/alert.ts @@ -273,7 +273,7 @@ export class Alert extends ViewController { * | cssClass | `string` | Any additional class for the alert (optional) | * | inputs | `array` | An array of inputs for the alert. See input options. (optional) | * | buttons | `array` | An array of buttons for the alert. See buttons options. (optional) | - * | enableBackdropDismiss | `boolean` | Wheather the alert should be dismissed by tapping the backdrop (optional) | + * | enableBackdropDismiss | `boolean` | Whether the alert should be dismissed by tapping the backdrop (optional) | * * * Input options diff --git a/src/components/popover/popover.ios.scss b/src/components/popover/popover.ios.scss index 7b27dab8752..22cf5e098b4 100644 --- a/src/components/popover/popover.ios.scss +++ b/src/components/popover/popover.ios.scss @@ -10,12 +10,12 @@ $popover-ios-max-height: 90% !default; $popover-ios-border-radius: 10px !default; $popover-ios-text-color: #000 !default; -$popover-ios-background: #f3f3f3 !default; +$popover-ios-background: #fff !default; $popover-ios-item-background: $popover-ios-background !default; $popover-ios-arrow-background: $popover-ios-background !default; -.popover-wrapper { +.popover-content { min-width: $popover-ios-min-width; max-width: $popover-ios-max-width; @@ -26,7 +26,7 @@ $popover-ios-arrow-background: $popover-ios-background !default; background: $popover-ios-background; } -.popover-wrapper .item { +.popover-content .item { background-color: $popover-ios-item-background; } diff --git a/src/components/popover/popover.md.scss b/src/components/popover/popover.md.scss index 8d7888e78d1..e7c7d669ac7 100644 --- a/src/components/popover/popover.md.scss +++ b/src/components/popover/popover.md.scss @@ -8,23 +8,26 @@ $popover-md-min-width: 200px !default; $popover-md-max-width: 270px !default; $popover-md-max-height: 90% !default; $popover-md-border-radius: 2px !default; +$popover-md-box-shadow-color: rgba(0, 0, 0, .3) !default; +$popover-md-box-shadow: 0px 3px 12px 2px $alert-md-box-shadow-color !default; $popover-md-text-color: #000 !default; $popover-md-background: #fafafa !default; $popover-md-item-background: $popover-md-background !default; -.popover-wrapper { +.popover-content { min-width: $popover-md-min-width; max-width: $popover-md-max-width; max-height: $popover-md-max-height; + box-shadow: $popover-md-box-shadow; border-radius: $popover-md-border-radius; color: $popover-md-text-color; background: $popover-md-background; } -.popover-wrapper .item { +.popover-content .item { background-color: $popover-md-item-background; } diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss index 12d89385efc..3163a36a203 100644 --- a/src/components/popover/popover.scss +++ b/src/components/popover/popover.scss @@ -22,9 +22,14 @@ ion-popover { } .popover-wrapper { - position: absolute; + opacity: 0; + z-index: $z-index-overlay-wrapper; +} +.popover-content { + position: absolute; z-index: $z-index-overlay-wrapper; + display: flex; overflow: hidden; @@ -37,8 +42,6 @@ ion-popover { height: $popover-height; max-height: $popover-height; - opacity: 0; - ion-page { display: flex; overflow: auto; diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts index 21258436675..3d2b843cd69 100644 --- a/src/components/popover/popover.ts +++ b/src/components/popover/popover.ts @@ -52,10 +52,11 @@ export class Popover extends ViewController { * |-----------------------|------------|------------------------------------------------------------------------------------------------------------------| * | cssClass |`string` | An additional class for custom styles. | * | showBackdrop |`boolean` | Whether to show the backdrop. Default true. | - * | enableBackdropDismiss |`boolean` | Wheather the popover should be dismissed by tapping the backdrop. Default true. | + * | enableBackdropDismiss |`boolean` | Whether the popover should be dismissed by tapping the backdrop. Default true. | * * - * @param {object} data Any data to pass to the popover view + * @param {object} componentType The Popover + * @param {object} data Any data to pass to the Popover view * @param {object} opts Popover options */ static create(componentType, data = {}, opts: PopoverOptions = {}) { @@ -71,9 +72,11 @@ export class Popover extends ViewController { selector: 'ion-popover', template: '
' + - '
' + '
' + - '
' + + '
' + + '
' + + '
' + + '
' + '
' }) class PopoverCmp { @@ -148,8 +151,8 @@ class PopoverTransition extends Transition { } positionView(nativeEle: HTMLElement, ev) { - // Popover wrapper width and height - let popoverEle = nativeEle.querySelector('.popover-wrapper'); + // Popover content width and height + let popoverEle = nativeEle.querySelector('.popover-content'); let popoverDim = popoverEle.getBoundingClientRect(); let popoverWidth = popoverDim.width; let popoverHeight = popoverDim.height; @@ -216,18 +219,16 @@ class PopoverPopIn extends PopoverTransition { this.positionView(ele, opts.ev); let backdrop = new Animation(ele.querySelector('.backdrop')); - let arrow = new Animation(ele.querySelector('.popover-arrow')); let wrapper = new Animation(ele.querySelector('.popover-wrapper')); - arrow.fromTo('opacity', '0.01', '1'); - wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1'); - backdrop.fromTo('opacity', '0.01', '0.3'); + wrapper.fromTo('opacity', '0.01', '1'); + backdrop.fromTo('opacity', '0.01', '0.1'); this - .easing('ease-in-out') - .duration(200) + .easing('ease') + .duration(100) + .before.addClass('show-page') .add(backdrop) - .add(arrow) .add(wrapper); } } @@ -240,18 +241,15 @@ class PopoverPopOut extends PopoverTransition { let ele = leavingView.pageRef().nativeElement; let backdrop = new Animation(ele.querySelector('.backdrop')); - let arrow = new Animation(ele.querySelector('.popover-arrow')); let wrapper = new Animation(ele.querySelector('.popover-wrapper')); - arrow.fromTo('opacity', '1', '0'); - wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9'); - backdrop.fromTo('opacity', '0.3', '0'); + wrapper.fromTo('opacity', '1', '0'); + backdrop.fromTo('opacity', '0.1', '0'); this - .easing('ease-in-out') - .duration(200) + .easing('ease') + .duration(500) .add(backdrop) - .add(arrow) .add(wrapper); } } @@ -266,19 +264,17 @@ class PopoverMdPopIn extends PopoverTransition { this.positionView(ele, opts.ev); let backdrop = new Animation(ele.querySelector('.backdrop')); - let arrow = new Animation(ele.querySelector('.popover-arrow')); let wrapper = new Animation(ele.querySelector('.popover-wrapper')); - arrow.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1'); - wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1'); - backdrop.fromTo('opacity', '0.01', '0.5'); + wrapper.fromTo('opacity', '0.01', '1'); + backdrop.fromTo('opacity', '0', '0'); this - .easing('ease-in-out') - .duration(200) + .easing('ease') + .duration(100) + .fadeIn() .add(backdrop) - .add(wrapper) - .add(arrow); + .add(wrapper); } } Transition.register('popover-md-pop-in', PopoverMdPopIn); @@ -290,19 +286,17 @@ class PopoverMdPopOut extends PopoverTransition { let ele = leavingView.pageRef().nativeElement; let backdrop = new Animation(ele.querySelector('.backdrop')); - let arrow = new Animation(ele.querySelector('.popover-arrow')); let wrapper = new Animation(ele.querySelector('.popover-wrapper')); - arrow.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9'); - wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9'); - backdrop.fromTo('opacity', '0.5', '0'); + wrapper.fromTo('opacity', '1', '0'); + backdrop.fromTo('opacity', '0', '0'); this - .easing('ease-in-out') - .duration(200) + .easing('ease') + .duration(500) + .fadeIn() .add(backdrop) - .add(wrapper) - .add(arrow); + .add(wrapper); } } Transition.register('popover-md-pop-out', PopoverMdPopOut); @@ -317,19 +311,17 @@ class PopoverWpPopIn extends PopoverTransition { this.positionView(ele, opts.ev); let backdrop = new Animation(ele.querySelector('.backdrop')); - let arrow = new Animation(ele.querySelector('.popover-arrow')); let wrapper = new Animation(ele.querySelector('.popover-wrapper')); - arrow.fromTo('opacity', '0.01', '1').fromTo('scale', '1.3', '1'); - wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.3', '1'); + wrapper.fromTo('opacity', '0.01', '1'); backdrop.fromTo('opacity', '0.01', '0.5'); this - .easing('cubic-bezier(0,0 0.05,1)') - .duration(200) + .easing('ease') + .duration(100) + .fadeIn() .add(backdrop) - .add(wrapper) - .add(arrow); + .add(wrapper); } } Transition.register('popover-wp-pop-in', PopoverWpPopIn); @@ -341,19 +333,17 @@ class PopoverWpPopOut extends PopoverTransition { let ele = leavingView.pageRef().nativeElement; let backdrop = new Animation(ele.querySelector('.backdrop')); - let arrow = new Animation(ele.querySelector('.popover-arrow')); let wrapper = new Animation(ele.querySelector('.popover-wrapper')); - arrow.fromTo('opacity', '1', '0').fromTo('scale', '1', '1.3'); - wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '1.3'); + wrapper.fromTo('opacity', '1', '0'); backdrop.fromTo('opacity', '0.5', '0'); this - .easing('ease-out') - .duration(150) + .easing('ease') + .duration(500) + .fadeIn() .add(backdrop) - .add(wrapper) - .add(arrow); + .add(wrapper); } } Transition.register('popover-wp-pop-out', PopoverWpPopOut); diff --git a/src/components/popover/popover.wp.scss b/src/components/popover/popover.wp.scss index 802c816d9a7..8060d9ccebe 100644 --- a/src/components/popover/popover.wp.scss +++ b/src/components/popover/popover.wp.scss @@ -10,11 +10,11 @@ $popover-wp-max-height: 90% !default; $popover-wp-border-radius: 2px !default; $popover-wp-text-color: #000 !default; -$popover-wp-background: #e6e6e6 !default; +$popover-wp-background: #f2f2f2 !default; $popover-wp-item-background: $popover-wp-background !default; -.popover-wrapper { +.popover-content { min-width: $popover-wp-min-width; max-width: $popover-wp-max-width; @@ -25,6 +25,6 @@ $popover-wp-item-background: $popover-wp-background !default; background: $popover-wp-background; } -.popover-wrapper .item { +.popover-content .item { background-color: $popover-wp-item-background; } diff --git a/src/components/popover/test/basic/index.ts b/src/components/popover/test/basic/index.ts index ffa9bc65ea5..9cea540d017 100644 --- a/src/components/popover/test/basic/index.ts +++ b/src/components/popover/test/basic/index.ts @@ -1,5 +1,5 @@ import {ViewChild, ElementRef} from '@angular/core'; -import {App, Page, Popover, NavController, Content, NavParams} from '../../../../../src'; +import {App, Page, Popover, NavController, Content, NavParams, ViewController} from '../../../../../src'; @Page({ @@ -137,15 +137,19 @@ class PopoverRadioPage { template: ` Ionic - - - - + + + + ` }) class PopoverListPage { + constructor(private viewCtrl: ViewController) {} + close() { + this.viewCtrl.dismiss(); + } }