mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-14 13:44:41 +08:00
267a719016
Summary: fixes T3628 problem - mark-as-read button was in most prominent location - archive button is most used button, but unfortunately in less prominent location - user is annoyed at inconvenient real estate allocation Test Plan: tested manually for regressions. all previous tests still green. Reviewers: bengotow Maniphest Tasks: T3628 Differential Revision: https://phab.nylas.com/D2033
161 lines
4.2 KiB
CoffeeScript
161 lines
4.2 KiB
CoffeeScript
React = require "react/addons"
|
|
classNames = require 'classnames'
|
|
ThreadListStore = require './thread-list-store'
|
|
{RetinaImg} = require 'nylas-component-kit'
|
|
{Actions, FocusedContentStore} = require "nylas-exports"
|
|
|
|
class ThreadBulkArchiveButton extends React.Component
|
|
@displayName: 'ThreadBulkArchiveButton'
|
|
@containerRequired: false
|
|
|
|
@propTypes:
|
|
selection: React.PropTypes.object.isRequired
|
|
|
|
render: ->
|
|
<button style={order:-106}
|
|
className="btn btn-toolbar"
|
|
data-tooltip="Archive"
|
|
onClick={@_onArchive}>
|
|
<RetinaImg name="toolbar-archive.png" mode={RetinaImg.Mode.ContentIsMask} />
|
|
</button>
|
|
|
|
_onArchive: =>
|
|
Actions.archiveSelection()
|
|
|
|
|
|
class ThreadBulkStarButton extends React.Component
|
|
@displayName: 'ThreadBulkStarButton'
|
|
@containerRequired: false
|
|
|
|
@propTypes:
|
|
selection: React.PropTypes.object.isRequired
|
|
|
|
render: ->
|
|
<button style={order:-104}
|
|
className="btn btn-toolbar"
|
|
data-tooltip="Star"
|
|
onClick={@_onStar}>
|
|
<RetinaImg name="toolbar-star.png" mode={RetinaImg.Mode.ContentIsMask} />
|
|
</button>
|
|
|
|
_onStar: =>
|
|
Actions.toggleStarSelection()
|
|
|
|
|
|
class ThreadBulkToggleUnreadButton extends React.Component
|
|
@displayName: 'ThreadBulkToggleUnreadButton'
|
|
@containerRequired: false
|
|
|
|
@propTypes:
|
|
selection: React.PropTypes.object.isRequired
|
|
|
|
constructor: ->
|
|
@state = @_getStateFromStores()
|
|
super
|
|
|
|
componentDidMount: =>
|
|
@unsubscribers = []
|
|
@unsubscribers.push ThreadListStore.listen @_onStoreChange
|
|
|
|
componentWillUnmount: =>
|
|
unsubscribe() for unsubscribe in @unsubscribers
|
|
|
|
render: =>
|
|
fragment = if @state.canMarkUnread then "unread" else "read"
|
|
|
|
<button style={order:-105}
|
|
className="btn btn-toolbar"
|
|
data-tooltip="Mark as #{fragment}"
|
|
onClick={@_onClick}>
|
|
<RetinaImg name="icon-toolbar-markas#{fragment}@2x.png"
|
|
mode={RetinaImg.Mode.ContentIsMask} />
|
|
</button>
|
|
|
|
_onClick: =>
|
|
Actions.toggleUnreadSelection()
|
|
|
|
_onStoreChange: =>
|
|
@setState @_getStateFromStores()
|
|
|
|
_getStateFromStores: =>
|
|
selections = ThreadListStore.view().selection.items()
|
|
canMarkUnread: not selections.every (s) -> s.unread is true
|
|
|
|
|
|
|
|
ThreadNavButtonMixin =
|
|
getInitialState: ->
|
|
@_getStateFromStores()
|
|
|
|
componentDidMount: ->
|
|
@_unsubscribe = ThreadListStore.listen @_onStoreChange
|
|
@_unsubscribe_focus = FocusedContentStore.listen @_onStoreChange
|
|
|
|
isFirstThread: ->
|
|
selectedId = FocusedContentStore.focusedId('thread')
|
|
ThreadListStore.view().get(0)?.id is selectedId
|
|
|
|
isLastThread: ->
|
|
selectedId = FocusedContentStore.focusedId('thread')
|
|
|
|
lastIndex = ThreadListStore.view().count() - 1
|
|
ThreadListStore.view().get(lastIndex)?.id is selectedId
|
|
|
|
componentWillUnmount: ->
|
|
@_unsubscribe()
|
|
@_unsubscribe_focus()
|
|
|
|
_onStoreChange: ->
|
|
@setState @_getStateFromStores()
|
|
|
|
|
|
DownButton = React.createClass
|
|
displayName: 'DownButton'
|
|
mixins: [ThreadNavButtonMixin]
|
|
|
|
render: ->
|
|
<div className={@_classSet()} onClick={@_onClick}>
|
|
<RetinaImg name="toolbar-down-arrow.png" mode={RetinaImg.Mode.ContentIsMask} />
|
|
</div>
|
|
|
|
_classSet: ->
|
|
classNames
|
|
"btn-icon": true
|
|
"message-toolbar-arrow": true
|
|
"down": true
|
|
"disabled": @state.disabled
|
|
|
|
_onClick: ->
|
|
return if @state.disabled
|
|
atom.commands.dispatch(document.body, 'core:next-item')
|
|
|
|
_getStateFromStores: ->
|
|
disabled: @isLastThread()
|
|
|
|
UpButton = React.createClass
|
|
displayName: 'UpButton'
|
|
mixins: [ThreadNavButtonMixin]
|
|
|
|
render: ->
|
|
<div className={@_classSet()} onClick={@_onClick}>
|
|
<RetinaImg name="toolbar-up-arrow.png" mode={RetinaImg.Mode.ContentIsMask} />
|
|
</div>
|
|
|
|
_classSet: ->
|
|
classNames
|
|
"btn-icon": true
|
|
"message-toolbar-arrow": true
|
|
"up": true
|
|
"disabled": @state.disabled
|
|
|
|
_onClick: ->
|
|
return if @state.disabled
|
|
atom.commands.dispatch(document.body, 'core:previous-item')
|
|
|
|
_getStateFromStores: ->
|
|
disabled: @isFirstThread()
|
|
|
|
UpButton.containerRequired = false
|
|
DownButton.containerRequired = false
|
|
|
|
module.exports = {DownButton, UpButton, ThreadBulkArchiveButton, ThreadBulkStarButton, ThreadBulkToggleUnreadButton}
|