Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2024-11-11 01:54:40 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix(undo-redo): Fix "undo" button clickability, improve animation

Browse source
This commit is contained in:
Ben Gotow 2015-10-23 15:03:12 -07:00
parent 3e9e6b9faf
commit da3287c100
2 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
internal_packages/undo-redo/lib/undo-redo-component.cjsx
View file

@ -12,6 +12,8 @@ AccountStore} = require 'nylas-exports'
class UndoRedoComponent extends React.Component
@displayName: 'UndoRedoComponent'
@containerRequired: false
constructor: (@props) ->
@state = @_getStateFromStores()
@_timeout = null
@ -53,8 +55,8 @@ class UndoRedoComponent extends React.Component
<TimeoutTransitionGroup
className={names}
leaveTimeout={450}
enterTimeout={250}
leaveTimeout={150}
enterTimeout={150}
transitionName="undo-redo-item">
{inner}
</TimeoutTransitionGroup>
@ -65,7 +67,7 @@ class UndoRedoComponent extends React.Component
<div className="undo-redo-message-wrapper">
{@state.task.description()}
</div>
<div className="undo-redo-action-wrapper" onClick={@_undoTask}>
<div className="undo-redo-action-wrapper" onClick={@_onClick}>
<RetinaImg name="undo-icon@2x.png"
mode={RetinaImg.Mode.ContentPreserve}/>
<span className="undo-redo-action-text">Undo</span>
@ -74,7 +76,7 @@ class UndoRedoComponent extends React.Component
else
[]
_undoTask: =>
_onClick: =>
atom.commands.dispatch(document.querySelector('body'), 'core:undo')
@_hide()

9
internal_packages/undo-redo/stylesheets/undo-redo.less
View file

@ -4,6 +4,7 @@
.undo-redo-manager {
position: absolute;
bottom: 10px;
z-index: 100;
width:100%;
text-align: center;
pointer-events: none;
@ -52,18 +53,22 @@ body.platform-win32 {
.undo-redo-item-enter {
opacity: 0.01;
transition: all .3s ease-out;
transform: translate3d(0, 10px, 0);
transition: all .15s ease-out;
}
.undo-redo-item-enter.undo-redo-item-enter-active {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.undo-redo-item-leave {
opacity: 1;
transition: all .3s ease-in;
transform: translate3d(0, 0, 0);
transition: all .15s ease-in;
}
.undo-redo-item-leave.undo-redo-item-leave-active {
transform: translate3d(0, 10px, 0);
opacity: 0.01;
}