feat(popover): fix MD animations and start from the right side

references #5420

Author: brandyscarney

src/components/popover/popover.md.scss

@@ -3,14 +3,14 @@
 // Material Design Popover
 // --------------------------------------------------
 
-$popover-md-width:                     200px !default;
+$popover-md-width:                     250px !default;
 $popover-md-max-height:                90% !default;
 
 $popover-md-border-radius:             2px !default;
 $popover-md-text-color:                #000 !default;
 $popover-md-background:                #fafafa !default;
 $popover-md-box-shadow-color:          rgba(0, 0, 0, .3) !default;
-$popover-md-box-shadow:                0 3px 12px 2px $alert-md-box-shadow-color !default;
+$popover-md-box-shadow:                0 3px 12px 2px $popover-md-box-shadow-color !default;
 
 $popover-md-item-background:           $popover-md-background !default;
 
@@ -24,6 +24,8 @@ $popover-md-item-background:           $popover-md-background !default;
   min-height: 0;
   max-height: $popover-md-max-height;
 
+  transform-origin: top left;  
+
   border-radius: $popover-md-border-radius;
   color: $popover-md-text-color;
   background: $popover-md-background;

src/components/popover/popover.ts

@@ -242,6 +242,9 @@ class PopoverTransition extends Transition {
 
 
   positionView(nativeEle: HTMLElement, ev) {
+    let originY = 'top';
+    let originX = 'left';
+
     // Popover content width and height
     let popoverEle = <HTMLElement>nativeEle.querySelector('.popover-content');
     let popoverDim = popoverEle.getBoundingClientRect();
@@ -289,6 +292,7 @@ class PopoverTransition extends Transition {
       popoverCSS.left = POPOVER_BODY_PADDING;
     } else if (popoverWidth + POPOVER_BODY_PADDING + popoverCSS.left > bodyWidth) {
       popoverCSS.left = bodyWidth - popoverWidth - POPOVER_BODY_PADDING;
+      originX = 'right';
     }
 
     // If the popover when popped down stretches past bottom of screen,
@@ -297,6 +301,7 @@ class PopoverTransition extends Transition {
       arrowCSS.top = targetTop - (arrowHeight + 1);
       popoverCSS.top = targetTop - popoverHeight - (arrowHeight - 1);
       nativeEle.className = nativeEle.className + ' popover-bottom';
+      originY = 'bottom';
     // If there isn't room for it to pop up above the target cut it off
     } else if (targetTop + targetHeight + popoverHeight > bodyHeight) {
       popoverEle.style.bottom = POPOVER_BODY_PADDING + '%';
@@ -307,6 +312,8 @@ class PopoverTransition extends Transition {
 
     popoverEle.style.top = popoverCSS.top + 'px';
     popoverEle.style.left = popoverCSS.left + 'px';
+
+    popoverEle.style.transformOrigin = originY + " " + originX;
   }
 }
 
@@ -370,12 +377,11 @@ class PopoverMdPopIn extends PopoverTransition {
     let content = new Animation(ele.querySelector('.popover-content'));
     let viewport = new Animation(ele.querySelector('.popover-viewport'));
 
-    content.fromTo('maxWidth', '0%', '90%');
-    content.fromTo('maxHeight', '0%', '90%');
+    content.fromTo('scale', '0', '1');
     viewport.fromTo('opacity', '0', '1');
 
     this
-      .easing('ease')
+      .easing('cubic-bezier(.55,0,.55,.2)')
       .duration(500)
       .add(content)
       .add(viewport);