mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-21 15:56:10 +08:00
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
This commit is contained in:
parent
786e9639c3
commit
419eace7e8
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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})
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue