From 00839e37aa13db802f2817586bbff654bd355d28 Mon Sep 17 00:00:00 2001
From: dillon <dillon@nylas.com>
Date: Mon, 14 Sep 2015 11:04:24 -0700
Subject: [PATCH] feat(account-sidebar): mail activity box now transitions in
 and out. fixes T3519.

Test Plan: tested manually, all tests still green

Reviewers: evan, bengotow

Reviewed By: bengotow

Maniphest Tasks: T3572, T3519

Differential Revision: https://phab.nylas.com/D2014
---
 .../notifications/lib/activity-sidebar.cjsx   | 20 +++++++++++++----
 .../stylesheets/notifications.less            | 22 ++++++++++++++-----
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/internal_packages/notifications/lib/activity-sidebar.cjsx b/internal_packages/notifications/lib/activity-sidebar.cjsx
index 47efa997c..80a160118 100644
--- a/internal_packages/notifications/lib/activity-sidebar.cjsx
+++ b/internal_packages/notifications/lib/activity-sidebar.cjsx
@@ -36,15 +36,27 @@ class ActivitySidebar extends React.Component
 
     names = classNames
       "sidebar-activity": true
-      "sidebar-activity-empty": items.length is 0
       "sidebar-activity-error": error?
 
+    wrapperClass = "sidebar-activity-transition-wrapper "
+
+    if items.length is 0
+      wrapperClass += "sidebar-activity-empty"
+    else
+      inside = <TimeoutTransitionGroup
+        className={names}
+        leaveTimeout={625}
+        enterTimeout={125}
+        transitionName="activity-opacity">
+        {items}
+      </TimeoutTransitionGroup>
+
     <TimeoutTransitionGroup
-      className={names}
+      className={wrapperClass}
       leaveTimeout={625}
       enterTimeout={125}
-      transitionName="activity-item">
-      {items}
+      transitionName="activity-opacity">
+        {inside}
     </TimeoutTransitionGroup>
 
   _renderSyncActivityItem: =>
diff --git a/internal_packages/notifications/stylesheets/notifications.less b/internal_packages/notifications/stylesheets/notifications.less
index 19f475b17..ac06a4917 100644
--- a/internal_packages/notifications/stylesheets/notifications.less
+++ b/internal_packages/notifications/stylesheets/notifications.less
@@ -1,10 +1,20 @@
 @import "ui-variables";
 @import "ui-mixins";
 
+.sidebar-activity-transition-wrapper {
+  order: 2;
+
+  &.sidebar-activity-empty {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}
+
 .sidebar-activity {
+  display: block;
   width: 100%;
   bottom: 0;
-  order:2;
   background: @background-off-primary;
   font-size: @font-size-small;
   color: @text-color-subtle;
@@ -41,7 +51,7 @@
         background-color: @background-color-info;
       }
     }
-    // TODO: Necessary for Chromium 42 to render `activity-item-leave` animation
+    // TODO: Necessary for Chromium 42 to render `activity-opacity-leave` animation
     // properly. Removing position relative causes the div to remain visible
     position:relative;
     opacity: 1;
@@ -56,22 +66,22 @@
   }
 }
 
-.activity-item-enter {
+.activity-opacity-enter {
   opacity:0;
   transition: opacity .125s ease-out;
 }
 
-.activity-item-enter.activity-item-enter-active {
+.activity-opacity-enter.activity-opacity-enter-active {
   opacity:1;
 }
 
-.activity-item-leave {
+.activity-opacity-leave {
   opacity:1;
   transition: opacity .125s ease-in;
   transition-delay: 0.5s;
 }
 
-.activity-item-leave.activity-item-leave-active {
+.activity-opacity-leave.activity-opacity-leave-active {
   transition-delay: 0.5s;
   opacity:0;
 }