fix(toolbars): Cross disolve toolbar items on a one-off basis

Summary:
This diff removes the timeout transition group from the sheet-toolbar, which was causing toolbar items to fade when columns were opened / closed and they were moved from column to column.

Instead, I'm just animating the message toolbar items, which are one of the few sets of toolbar items that really should fade, and do so as an entire set.

I've also renamed the "sheet-toolbar" animation to "opacity-125ms". I think it'd be cool to create a standard set of these animations, but I didn't see any others it would make sense to create generic names for yet. (The others have weird timings or are bound up inside packages).

Resolves Github #90

Test Plan: No new tests

Reviewers: evan

Reviewed By: evan

Differential Revision: https://phab.nylas.com/D2159
This commit is contained in:
Ben Gotow 2015-10-21 10:34:14 -07:00
parent 531118ac5c
commit f7c6ae0774
6 changed files with 32 additions and 25 deletions

View file

@ -9,6 +9,7 @@ classNames = require 'classnames'
{Menu,
Popover,
RetinaImg,
TimeoutTransitionGroup,
InjectedComponentSet} = require 'nylas-component-kit'
class MessageToolbarItems extends React.Component
@ -19,11 +20,17 @@ class MessageToolbarItems extends React.Component
thread: FocusedContentStore.focused('thread')
render: =>
<TimeoutTransitionGroup
className="message-toolbar-items"
leaveTimeout={125}
enterTimeout={125}
transitionName="opacity-125ms">
{@_renderContents()}
</TimeoutTransitionGroup>
_renderContents: =>
return false unless @state.thread
<div className="message-toolbar-items">
<InjectedComponentSet matching={role: "message:Toolbar"}
exposedProps={thread: @state.thread}/>
</div>
<InjectedComponentSet key="injected" matching={role: "message:Toolbar"} exposedProps={thread: @state.thread}/>
componentDidMount: =>
@_unsubscribers = []

View file

@ -36,7 +36,7 @@ class TokenAuthPage extends React.Component
render: =>
if @state.tokenAuthEnabled is "unknown"
<div className="page token-auth">
<TimeoutTransitionGroup leaveTimeout={125} enterTimeout={125} transitionName="alpha-fade">
<TimeoutTransitionGroup leaveTimeout={150} enterTimeout={150} transitionName="alpha-fade">
{@_renderWaitingForTokenAuthAnswer()}
</TimeoutTransitionGroup>
</div>

View file

@ -53,7 +53,7 @@ Example:
<TimeoutTransitionGroup
leaveTimeout={125}
enterTimeout={125}
transitionName="sheet-toolbar">
transitionName="opacity-125ms">
{toolbarElements[1..-1]}
</TimeoutTransitionGroup>
```
@ -63,6 +63,16 @@ Section: Component Kit
class TimeoutTransitionGroupChild extends React.Component
transition: (animationType, finishCallback) =>
animationDuration = 0
if animationType is 'enter'
animationDuration = @props.enterTimeout
else if animationType is 'leave'
animationDuration = @props.leaveTimeout
if animationDuration is 0
finishCallback()
return
node = React.findDOMNode(@)
return unless node
className = @props.name + '-' + animationType
@ -98,15 +108,12 @@ class TimeoutTransitionGroupChild extends React.Component
if !animationSupported()
endListener()
else
if animationType == 'enter'
@animationTimeout = setTimeout(endListener, @props.enterTimeout)
else if animationType == 'leave'
@animationTimeout = setTimeout(endListener, @props.leaveTimeout)
@animationTimeout = setTimeout(endListener, animationDuration)
addClass(node, className)
# Need to do this to actually trigger a transition.
@queueClass activeClassName
@queueClass(activeClassName)
return
queueClass: (className) =>

View file

@ -69,7 +69,7 @@ class SheetContainer extends React.Component
{toolbarElements[0]}
<TimeoutTransitionGroup leaveTimeout={125}
enterTimeout={125}
transitionName="sheet-toolbar">
transitionName="opacity-125ms">
{toolbarElements[1..-1]}
</TimeoutTransitionGroup>
</div>

View file

@ -3,7 +3,6 @@ Sheet = require './sheet'
Flexbox = require './components/flexbox'
RetinaImg = require './components/retina-img'
Utils = require './flux/models/utils'
TimeoutTransitionGroup = require './components/timeout-transition-group'
_str = require 'underscore.string'
_ = require 'underscore'
@ -164,17 +163,11 @@ class Toolbar extends React.Component
elements = components.map (component) =>
<component key={component.displayName} {...@props} />
<TimeoutTransitionGroup
className="item-container"
component={Flexbox}
direction="row"
leaveTimeout={125}
enterTimeout={125}
transitionName="sheet-toolbar">
<Flexbox className="item-container" direction="row">
{elements}
<ToolbarSpacer key="spacer-50" order={-50}/>
<ToolbarSpacer key="spacer+50" order={50}/>
</TimeoutTransitionGroup>
</Flexbox>
recomputeLayout: =>
# Yes this really happens - do not remove!

View file

@ -243,21 +243,21 @@ body.is-blurred {
}
}
.sheet-toolbar-enter {
.opacity-125ms-enter {
opacity:0;
transition: opacity .125s ease-out;
}
.sheet-toolbar-enter.sheet-toolbar-enter-active {
.opacity-125ms-enter.opacity-125ms-enter-active {
opacity:1;
}
.sheet-toolbar-leave {
.opacity-125ms-leave {
opacity:1;
transition: opacity .125s ease-in;
}
.sheet-toolbar-leave.sheet-toolbar-leave-active {
.opacity-125ms-leave.opacity-125ms-leave-active {
opacity:0;
}