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

internal_packages/message-list/lib/message-toolbar-items.cjsx

@@ -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 key="injected" matching={role: "message:Toolbar"} exposedProps={thread: @state.thread}/>
-      <InjectedComponentSet matching={role: "message:Toolbar"}
-                            exposedProps={thread: @state.thread}/>
-    </div>
 
   componentDidMount: =>
     @_unsubscribers = []

internal_packages/onboarding/lib/token-auth-page.cjsx

@@ -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>

src/components/timeout-transition-group.cjsx

@@ -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, animationDuration)
-        @animationTimeout = setTimeout(endListener, @props.enterTimeout)
-      else if animationType == 'leave'
-        @animationTimeout = setTimeout(endListener, @props.leaveTimeout)
 
     addClass(node, className)
 
     # Need to do this to actually trigger a transition.
-    @queueClass activeClassName
+    @queueClass(activeClassName)
     return
 
   queueClass: (className) =>

src/sheet-container.cjsx

@@ -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>

src/sheet-toolbar.cjsx

@@ -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
+    <Flexbox className="item-container" direction="row">
-      className="item-container"
-      component={Flexbox}
-      direction="row"
-      leaveTimeout={125}
-      enterTimeout={125}
-      transitionName="sheet-toolbar">
       {elements}
       <ToolbarSpacer key="spacer-50" order={-50}/>
       <ToolbarSpacer key="spacer+50" order={50}/>
-    </TimeoutTransitionGroup>
+    </Flexbox>
 
   recomputeLayout: =>
     # Yes this really happens - do not remove!

static/workspace.less

@@ -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;
 }