feat(popover): Add subtle ease-in animation when opening popover

- Closes popover on window resize:
  - Re rendering popover on window resize will be a bit more tricky because
    the FixedPopover only receives an origin rect. The one who
    dispatches the action has the responsability of re dispatching when
    the window resizes
- Fixes tiny behavior in send later popover

internal_packages/send-later/lib/send-later-popover.jsx

@@ -1,6 +1,6 @@
 /** @babel */
 import React, {Component, PropTypes} from 'react'
-import {DateUtils} from 'nylas-exports'
+import {Actions, DateUtils} from 'nylas-exports'
 import {Menu, DateInput} from 'nylas-component-kit'
 
 const {DATE_FORMAT_SHORT, DATE_FORMAT_LONG} = DateUtils
@@ -25,6 +25,10 @@ class SendLaterPopover extends Component {
     onCancelSendLater: PropTypes.func.isRequired,
   };
 
+  onEscape() {
+    Actions.closePopover()
+  }
+
   onSelectMenuOption = (optionKey)=> {
     const date = SendLaterOptions[optionKey]();
     this.selectDate(date, optionKey);
@@ -79,8 +83,7 @@ class SendLaterPopover extends Component {
     }
 
     return (
-      <div
-        className="send-later">
+      <div className="send-later">
         <Menu
           ref="menu"
           items={Object.keys(SendLaterOptions)}
@@ -89,6 +92,7 @@ class SendLaterPopover extends Component {
           defaultSelectedIndex={-1}
           headerComponents={headerComponents}
           footerComponents={footerComponents}
+          onEscape={this.onEscape}
           onSelect={this.onSelectMenuOption} />
       </div>
     );

src/components/fixed-popover.jsx

@@ -55,6 +55,7 @@ class FixedPopover extends Component {
   }
 
   componentDidMount() {
+    window.addEventListener('resize', this.onWindowResize)
     this.focusElementWithTabIndex();
     _.defer(this.onPopoverRendered)
   }
@@ -76,6 +77,14 @@ class FixedPopover extends Component {
     _.defer(this.onPopoverRendered)
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.onWindowResize)
+  }
+
+  onWindowResize() {
+    Actions.closePopover()
+  }
+
   onPopoverRendered = ()=> {
     const {direction} = this.state
     const currentRect = this.getCurrentRect()
@@ -277,7 +286,16 @@ class FixedPopover extends Component {
       break;
     }
 
-    popoverStyle.visibility = visible ? 'visible' : 'hidden';
+    const visibilityProps = {}
+    if (visible) {
+      visibilityProps.visibility = 'visible';
+      visibilityProps.opacity = 1;
+    } else {
+      visibilityProps.visibility = 'hidden';
+      visibilityProps.opacity = 0;
+    }
+    popoverStyle = _.extend({}, popoverStyle, visibilityProps)
+    pointerStyle = _.extend({}, pointerStyle, visibilityProps)
 
     // Set the zoom directly on the style element. Otherwise it won't work with
     // mask image of our shadow pointer element. This is probably a Chrome bug
@@ -292,7 +310,6 @@ class FixedPopover extends Component {
     if (!originRect) {
       return <span />;
     }
-
     const blurTrapStyle = {top: originRect.top, left: originRect.left, height: originRect.height, width: originRect.width}
     const {containerStyle, popoverStyle, pointerStyle} = (
       this.computePopoverStyles({originRect, direction, offset, visible})

static/components/fixed-popover.less

@@ -80,6 +80,10 @@
     -webkit-mask-image: url('images/tooltip/tooltip-bg-pointer-shadow@2x.png');
     background-color: fade(@black, 22%);
   }
+
+  .fixed-popover,.fixed-popover-pointer,.fixed-popover-pointer.shadow {
+    transition: opacity 200ms ease-in-out;
+  }
 }
 
 body.platform-win32 {