Mailspring/internal_packages/thread-list/lib/thread-buttons.cjsx
dillon 267a719016 fix(toolbar): swap mark-as-unread and archive buttons
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
2015-09-16 17:48:56 -07:00

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}