mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 08:16:09 +08:00
281e458d39
Summary:
Adds the new Account preferences page. This consists of two major React components,
PreferencesAccountList and PreferencesAccountDetails, both of which use EditableList.
I added a bunch of fixes and updated the API for EditableList, plus a bit of
refactoring for PreferencesAccount component, and a bunch of CSS so its a big diff.
The detailed changelog:
Updates to EditableList:
- Fix bug updating selection state when arrows pressed to move selection
- Add new props:
- allowEmptySelection to allow the list to have no selection
- createInputProps to pass aditional props to the createInput
- Add scroll region for list items
- Update styles and refactor render methods
Other Updates:
- Updates Account model to hold aliases and a label
- Adds getter for label to default to email
- Update accountswitcher to display label, update styles and spec
- Refactor PreferencesAccounts component:
- Splits it into smaller components,
- Removes unused code
- Splits preferences styelsheets into smaller separate stylesheet for
account page. Adds some updates and fixes (scroll-region padding)
- Update AccountStore to be able to perform updates on an account.
- Adds new Action to update account, and an action to remove account to
be consistent with Action usage
- Adds components for Account list and Aliases list using EditableList
Test Plan: - All specs pass, but need to write new tests!
Reviewers: bengotow, evan
Reviewed By: bengotow
Differential Revision: https://phab.nylas.com/D2332
50 lines
1.5 KiB
CoffeeScript
50 lines
1.5 KiB
CoffeeScript
React = require 'react'
|
|
_ = require 'underscore'
|
|
|
|
{AccountStore} = require 'nylas-exports'
|
|
{Menu, ButtonDropdown} = require 'nylas-component-kit'
|
|
|
|
class AccountContactField extends React.Component
|
|
@displayName: 'AccountContactField'
|
|
|
|
@propTypes:
|
|
value: React.PropTypes.object
|
|
account: React.PropTypes.object,
|
|
onChange: React.PropTypes.func.isRequired
|
|
|
|
render: =>
|
|
<div className="composer-participant-field">
|
|
<div className="composer-field-label">{"From:"}</div>
|
|
{@_renderFromPicker()}
|
|
</div>
|
|
|
|
_renderFromPicker: ->
|
|
if @props.account? && @props.value?
|
|
label = @props.value.toString()
|
|
if @props.account.aliases.length is 0
|
|
return @_renderAccountSpan(label)
|
|
return <ButtonDropdown
|
|
ref="dropdown"
|
|
bordered={false}
|
|
primaryItem={<span>{label}</span>}
|
|
menu={@_renderAliasesMenu(@props.account)}/>
|
|
else
|
|
return @_renderAccountSpan("Please select an account")
|
|
|
|
_renderAliasesMenu: (account) =>
|
|
<Menu
|
|
items={[account.me().toString()].concat account.aliases}
|
|
itemKey={ (alias) -> alias }
|
|
itemContent={ (alias) -> alias }
|
|
onSelect={@_onChooseAlias.bind(@, account)} />
|
|
|
|
_renderAccountSpan: (label) ->
|
|
<span className="from-picker" style={position: "relative", top: 6, left: "0.5em"}>{label}</span>
|
|
|
|
_onChooseAlias: (account, alias) =>
|
|
@props.onChange(account.meUsingAlias(alias))
|
|
@refs.dropdown.toggleDropdown()
|
|
|
|
|
|
module.exports = AccountContactField
|