mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-14 05:41:05 +08:00
d7d5ed2832
Summary: This diff: - Improves the styling of the tabs in the preferences sidebar. - Adds an optional param to section cofnig that puts an "account" submenu beneath the tab item. - Renames preferences "sections" => "tabs", and renames the PreferencesSectionStore to PreferencesUIStore. I think we should include "UI" in more of our stores, and I think "tabs" is a good idea because it's unambigious—there's no way you could confuse it for a "section" of the NylasEnv.config tree or think it deals with actually saving prefs. Test Plan: Inspect visually Reviewers: evan, juan Reviewed By: evan Differential Revision: https://phab.nylas.com/D2296
131 lines
3.9 KiB
CoffeeScript
131 lines
3.9 KiB
CoffeeScript
React = require 'react'
|
|
{Actions, AccountStore} = require("nylas-exports")
|
|
crypto = require 'crypto'
|
|
{RetinaImg} = require 'nylas-component-kit'
|
|
classNames = require 'classnames'
|
|
|
|
class AccountSwitcher extends React.Component
|
|
@displayName: 'AccountSwitcher'
|
|
|
|
@containerRequired: false
|
|
@containerStyles:
|
|
minWidth: 165
|
|
maxWidth: 210
|
|
|
|
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
|
|
|
|
classnames = ""
|
|
classnames += "open" if @state.showing
|
|
|
|
<div id="account-switcher"
|
|
tabIndex={-1}
|
|
onBlur={@_onBlur}
|
|
ref="button"
|
|
className={classnames}>
|
|
{@_renderPrimaryItem()}
|
|
{@_renderDropdown()}
|
|
</div>
|
|
|
|
_renderPrimaryItem: =>
|
|
<div className="item primary-item" onClick={@_toggleDropdown}>
|
|
{@_renderGravatarForAccount(@state.account)}
|
|
<div style={float: 'right', marginTop: -2}>
|
|
<RetinaImg className="toggle"
|
|
name="account-switcher-dropdown.png"
|
|
mode={RetinaImg.Mode.ContentDark} />
|
|
</div>
|
|
<div className="name" style={lineHeight: "110%"}>
|
|
{@state.account.emailAddress.trim().toLowerCase()}
|
|
</div>
|
|
<div style={clear: "both"}></div>
|
|
</div>
|
|
|
|
_renderAccount: (account) =>
|
|
email = account.emailAddress.trim().toLowerCase()
|
|
classes = classNames
|
|
"active": account is @state.account
|
|
"item": true
|
|
"secondary-item": true
|
|
|
|
<div className={classes} onClick={ => @_onSwitchAccount(account)} key={email}>
|
|
{@_renderGravatarForAccount(account)}
|
|
<div className="name" style={lineHeight: "110%"}>{email}</div>
|
|
<div style={clear: "both"}></div>
|
|
</div>
|
|
|
|
_renderNewAccountOption: =>
|
|
<div className="item secondary-item new-account-option"
|
|
onClick={@_onManageAccounts}
|
|
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'}>
|
|
Manage accounts…
|
|
</div>
|
|
<div style={clear: "both"}></div>
|
|
</div>
|
|
|
|
_renderDropdown: =>
|
|
<div className="dropdown">
|
|
<div className="inner">
|
|
{@state.accounts.map(@_renderAccount)}
|
|
{@_renderNewAccountOption()}
|
|
</div>
|
|
</div>
|
|
|
|
_renderGravatarForAccount: (account) =>
|
|
email = account.emailAddress.trim().toLowerCase()
|
|
hash = crypto.createHash('md5').update(email, 'utf8').digest('hex')
|
|
url = "url(http://www.gravatar.com/avatar/#{hash}?d=blank&s=56)"
|
|
|
|
<div style={float: 'left', position: "relative"}>
|
|
<div className="gravatar" style={backgroundImage:url}></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>
|
|
|
|
_toggleDropdown: =>
|
|
@setState showing: !@state.showing
|
|
|
|
_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)
|
|
|
|
_onManageAccounts: =>
|
|
Actions.switchPreferencesTab('Accounts')
|
|
Actions.openPreferences()
|
|
|
|
@setState(showing: false)
|
|
|
|
_getStateFromStores: =>
|
|
accounts: AccountStore.items()
|
|
account: AccountStore.current()
|
|
|
|
module.exports = AccountSwitcher
|