mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-09-08 21:55:54 +08:00
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:
parent
531118ac5c
commit
f7c6ae0774
6 changed files with 32 additions and 25 deletions
|
@ -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 = []
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) =>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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!
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue