mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 08:46:07 +08:00
297320df94
Summary: Better error handling in the account settings page and a loading spinner Add Account... replaces "Link External Account", and it works Clean dead code from onboarding pages, remove base class component Always show the account switcher rm dead EdgehillAPI code, AccountStore now manages accounts and credentials in config, not in database Fix specs Test Plan: Run tests Reviewers: dillon, evan Reviewed By: evan Projects: #edgehill Differential Revision: https://phab.nylas.com/D2059
137 lines
4 KiB
CoffeeScript
137 lines
4 KiB
CoffeeScript
React = require 'react'
|
|
{Actions, AccountStore} = require("nylas-exports")
|
|
{ScrollRegion} = require("nylas-component-kit")
|
|
crypto = require 'crypto'
|
|
{RetinaImg} = require 'nylas-component-kit'
|
|
classNames = require 'classnames'
|
|
|
|
class AccountSwitcher extends React.Component
|
|
@displayName: 'AccountSwitcher'
|
|
|
|
constructor: (@props) ->
|
|
@state = @_getStateFromStores()
|
|
@state.showing = false
|
|
|
|
componentDidMount: =>
|
|
@unsubscribers = []
|
|
@unsubscribers.push AccountStore.listen @_onStoreChange
|
|
|
|
componentWillUnmount: =>
|
|
unsubscribe() for unsubscribe in @unsubscribers
|
|
|
|
render: =>
|
|
return false unless @state.account
|
|
<div id="account-switcher" tabIndex={-1} onBlur={@_onBlur} ref="button">
|
|
{@_renderAccount(@state.account, true)}
|
|
{@_renderDropdown()}
|
|
</div>
|
|
|
|
_renderAccount: (account, isPrimaryItem) =>
|
|
classes = classNames
|
|
"account": true
|
|
"item": true
|
|
"dropdown-item-padding": not isPrimaryItem
|
|
"active": account is @state.account
|
|
"bg-color-hover": not isPrimaryItem
|
|
"primary-item": isPrimaryItem
|
|
"account-option": not isPrimaryItem
|
|
|
|
email = account.emailAddress.trim().toLowerCase()
|
|
|
|
if isPrimaryItem
|
|
dropdownClasses = classNames
|
|
"account-switcher-dropdown": true,
|
|
"account-switcher-dropdown-hidden": @state.showing
|
|
|
|
dropdownArrow = <div style={float: 'right', marginTop: -2}>
|
|
<RetinaImg className={dropdownClasses} name="account-switcher-dropdown.png"
|
|
mode={RetinaImg.Mode.ContentPreserve} />
|
|
</div>
|
|
|
|
onClick = @_toggleDropdown
|
|
|
|
else
|
|
onClick = =>
|
|
@_onSwitchAccount account
|
|
|
|
<div className={classes}
|
|
onClick={onClick}
|
|
key={email}>
|
|
<div style={float: 'left'}>
|
|
<div className="gravatar" style={backgroundImage: @_gravatarUrl(email)}></div>
|
|
<RetinaImg name={"ic-settings-account-#{account.provider}@2x.png"}
|
|
style={width: 28, height: 28, marginTop: -10}
|
|
fallback="ic-settings-account-imap.png"
|
|
mode={RetinaImg.Mode.ContentPreserve} />
|
|
</div>
|
|
{dropdownArrow}
|
|
<div className="name" style={lineHeight: "110%"}>
|
|
{email}
|
|
</div>
|
|
<div style={clear: "both"}>
|
|
</div>
|
|
</div>
|
|
|
|
_renderNewAccountOption: =>
|
|
<div className="account item dropdown-item-padding bg-color-hover new-account-option"
|
|
onClick={@_onAddAccount}
|
|
tabIndex={999}>
|
|
<div style={float: 'left'}>
|
|
<RetinaImg name="icon-accounts-addnew.png"
|
|
fallback="ic-settings-account-imap.png"
|
|
mode={RetinaImg.Mode.ContentPreserve}
|
|
style={width: 28, height: 28, marginTop: -10} />
|
|
</div>
|
|
<div className="name" style={lineHeight: "110%", textTransform: 'none'}>
|
|
Add account…
|
|
</div>
|
|
<div style={clear: "both"}>
|
|
</div>
|
|
</div>
|
|
|
|
_renderDropdown: =>
|
|
display = if @state.showing then "block" else "none"
|
|
# display = "block"
|
|
|
|
accounts = @state.accounts.map (a) =>
|
|
@_renderAccount(a)
|
|
|
|
<div style={display: display}
|
|
ref="account-switcher-dropdown"
|
|
className="dropdown dropdown-positioning dropdown-colors">
|
|
{accounts}
|
|
{@_renderNewAccountOption()}
|
|
</div>
|
|
|
|
_toggleDropdown: =>
|
|
@setState showing: !@state.showing
|
|
|
|
_gravatarUrl: (email) =>
|
|
hash = crypto.createHash('md5').update(email, 'utf8').digest('hex')
|
|
"url(http://www.gravatar.com/avatar/#{hash}?d=blank&s=56)"
|
|
|
|
_onStoreChange: =>
|
|
@setState @_getStateFromStores()
|
|
|
|
_onBlur: (e) =>
|
|
target = e.nativeEvent.relatedTarget
|
|
if target? and React.findDOMNode(@refs.button).contains(target)
|
|
return
|
|
@setState(showing: false)
|
|
|
|
_onSwitchAccount: (account) =>
|
|
Actions.selectAccountId(account.id)
|
|
@setState(showing: false)
|
|
|
|
_onAddAccount: =>
|
|
ipc = require('ipc')
|
|
ipc.send('command', 'application:add-account')
|
|
@setState(showing: false)
|
|
|
|
_getStateFromStores: =>
|
|
accounts: AccountStore.items()
|
|
account: AccountStore.current()
|
|
|
|
|
|
module.exports = AccountSwitcher
|