mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-21 07:46:06 +08:00
fix(multiselect-bar): Do not render components inside action bar when it's hidden
This commit is contained in:
parent
344d938c24
commit
7dfeabf7c9
|
@ -20,6 +20,10 @@ class MailLabel extends React.Component
|
|||
label: React.PropTypes.object.isRequired
|
||||
onRemove: React.PropTypes.function
|
||||
|
||||
shouldComponentUpdate: (nextProps, nextState) ->
|
||||
return false if nextProps.label.id is @props.label.id
|
||||
true
|
||||
|
||||
render: ->
|
||||
classname = 'mail-label'
|
||||
content = @props.label.displayName
|
||||
|
|
|
@ -1,12 +1,13 @@
|
|||
React = require "react/addons"
|
||||
classNames = require 'classnames'
|
||||
_ = require 'underscore'
|
||||
|
||||
{Utils,
|
||||
Actions,
|
||||
WorkspaceStore} = require "nylas-exports"
|
||||
InjectedComponentSet = require './injected-component-set'
|
||||
TimeoutTransitionGroup = require './timeout-transition-group'
|
||||
RetinaImg = require './retina-img'
|
||||
Flexbox = require './flexbox'
|
||||
|
||||
###
|
||||
Public: MultiselectActionBar is a simple component that can be placed in a {Sheet} Toolbar.
|
||||
|
@ -80,19 +81,31 @@ class MultiselectActionBar extends React.Component
|
|||
not Utils.isEqualReact(nextState, @state)
|
||||
|
||||
render: =>
|
||||
<div className={@_classSet()}><div className="absolute"><div className="inner">
|
||||
{@_renderActions()}
|
||||
<TimeoutTransitionGroup
|
||||
className={"selection-bar"}
|
||||
transitionName="selection-bar-absolute"
|
||||
component="div"
|
||||
leaveTimeout={200}
|
||||
enterTimeout={200}>
|
||||
{ if @state.items.length > 0 then @_renderBar() else [] }
|
||||
</TimeoutTransitionGroup>
|
||||
|
||||
<div className="centered">
|
||||
{@_label()}
|
||||
_renderBar: =>
|
||||
<div className="absolute" key="absolute">
|
||||
<div className="inner">
|
||||
{@_renderActions()}
|
||||
|
||||
<div className="centered">
|
||||
{@_label()}
|
||||
</div>
|
||||
|
||||
<button style={order:100}
|
||||
className="btn btn-toolbar"
|
||||
onClick={@_onClearSelection}>
|
||||
Clear Selection
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button style={order:100}
|
||||
className="btn btn-toolbar"
|
||||
onClick={@_onClearSelection}>
|
||||
Clear Selection
|
||||
</button>
|
||||
</div></div></div>
|
||||
</div>
|
||||
|
||||
_renderActions: =>
|
||||
return <div></div> unless @state.view
|
||||
|
@ -107,11 +120,6 @@ class MultiselectActionBar extends React.Component
|
|||
else
|
||||
""
|
||||
|
||||
_classSet: =>
|
||||
classNames
|
||||
"selection-bar": true
|
||||
"enabled": @state.items.length > 0
|
||||
|
||||
_getStateFromStores: (props) =>
|
||||
props ?= @props
|
||||
view = props.dataStore.view()
|
||||
|
|
|
@ -1,5 +1,33 @@
|
|||
@import "ui-variables";
|
||||
|
||||
.selection-bar-absolute-enter {
|
||||
opacity: 0;
|
||||
.inner {
|
||||
top: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-bar-absolute-enter.selection-bar-absolute-enter-active {
|
||||
opacity: 1;
|
||||
.inner {
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-bar-absolute-leave {
|
||||
opacity: 1;
|
||||
.inner {
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-bar-absolute-leave.selection-bar-absolute-leave-active {
|
||||
opacity: 0;
|
||||
.inner {
|
||||
top: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sheet-toolbar .selection-bar {
|
||||
// This item sits in the toolbar and takes up all the remaining
|
||||
// space from the toolbar-spacer divs, but flex-shrink means that
|
||||
|
@ -24,17 +52,14 @@
|
|||
border-left:1px solid @border-color-divider;
|
||||
border-right:1px solid @border-color-divider;
|
||||
background-color: @background-primary;
|
||||
opacity:0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
pointer-events: none;
|
||||
|
||||
.inner {
|
||||
top: -100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
display:flex;
|
||||
transition: top 0.2s ease-in-out;
|
||||
-webkit-app-region: no-drag;
|
||||
transition: top 0.2s ease-in-out;
|
||||
|
||||
.centered {
|
||||
flex: 1;
|
||||
|
@ -45,25 +70,7 @@
|
|||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .absolute is positioned full-width over all the other items in the toolbar.
|
||||
// when .enabled, it transitions to opacity:1, hiding other items beneath it.
|
||||
|
||||
// .inner contains the actual buttons and animates *down* while the opacity animation
|
||||
// is running. This means the items beneath fade out as the new ones slide in.
|
||||
|
||||
&.enabled {
|
||||
.absolute {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
.inner {
|
||||
top:0;
|
||||
.centered {
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue