Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-01-01 13:14:16 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat(account-sidebar): mail activity box now transitions in and out. fixes T3519.

Browse source 
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
This commit is contained in:
dillon 2015-09-14 11:04:24 -07:00
parent c03a63b9ea
commit 00839e37aa
2 changed files with 32 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
internal_packages/notifications/lib/activity-sidebar.cjsx
View file

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

22
internal_packages/notifications/stylesheets/notifications.less
View file

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