feat(popover): modify the animation for each mode

add another wrapper div to fix the arrow not animating at the same time. references #5420
ionic-team · May 24, 2016 · 57a1274 · 57a1274
1 parent ff1680c
commit 57a1274
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 68 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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:
     '<div disable-activated class="backdrop" (click)="bdClick()" [class.hide-backdrop]="!d.showBackdrop"></div>' +
-    '<div class="popover-arrow"></div>' +
     '<div class="popover-wrapper">' +
-      '<div #viewport></div>' +
+      '<div class="popover-arrow"></div>' +
+      '<div class="popover-content">' +
+        '<div #viewport></div>' +
+      '</div>' +
     '</div>'
 })
 class PopoverCmp {
@@ -148,8 +151,8 @@ class PopoverTransition extends Transition {
   }
 
   positionView(nativeEle: HTMLElement, ev) {
-    // Popover wrapper width and height
-    let popoverEle = <HTMLElement>nativeEle.querySelector('.popover-wrapper');
+    // Popover content width and height
+    let popoverEle = <HTMLElement>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
@@ -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
@@ -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: `
     <ion-list>
       <ion-list-header>Ionic</ion-list-header>
-      <button ion-item>Learn Ionic</button>
-      <button ion-item>Documentation</button>
-      <button ion-item>Showcase</button>
-      <button ion-item>GitHub Repo</button>
+      <button ion-item (click)="close()">Learn Ionic</button>
+      <button ion-item (click)="close()">Documentation</button>
+      <button ion-item (click)="close()">Showcase</button>
+      <button ion-item (click)="close()">GitHub Repo</button>
     </ion-list>
   `
 })
 class PopoverListPage {
+  constructor(private viewCtrl: ViewController) {}
 
+  close() {
+    this.viewCtrl.dismiss();
+  }
 }