mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 00:36:50 +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
48 lines
1.3 KiB
CoffeeScript
48 lines
1.3 KiB
CoffeeScript
React = require 'react'
|
|
_ = require 'underscore'
|
|
{RetinaImg,
|
|
Flexbox,
|
|
ConfigPropContainer,
|
|
ScrollRegion} = require 'nylas-component-kit'
|
|
{PreferencesUIStore} = require 'nylas-exports'
|
|
|
|
PreferencesSidebar = require './preferences-sidebar'
|
|
|
|
class PreferencesRoot extends React.Component
|
|
@displayName: 'PreferencesRoot'
|
|
@containerRequired: false
|
|
|
|
constructor: (@props) ->
|
|
@state = @getStateFromStores()
|
|
|
|
componentDidMount: =>
|
|
@unlisteners = []
|
|
@unlisteners.push PreferencesUIStore.listen =>
|
|
@setState(@getStateFromStores())
|
|
|
|
componentWillUnmount: =>
|
|
unlisten() for unlisten in @unlisteners
|
|
|
|
getStateFromStores: =>
|
|
tabs: PreferencesUIStore.tabs()
|
|
selection: PreferencesUIStore.selection()
|
|
|
|
render: =>
|
|
tabId = @state.selection.get('tabId')
|
|
tab = @state.tabs.find (s) => s.tabId is tabId
|
|
|
|
if tab
|
|
bodyElement = <tab.component accountId={@state.selection.get('accountId')} />
|
|
else
|
|
bodyElement = <div></div>
|
|
|
|
<Flexbox direction="row" className="preferences-wrap">
|
|
<PreferencesSidebar tabs={@state.tabs}
|
|
selection={@state.selection} />
|
|
<ScrollRegion className="preferences-content">
|
|
<ConfigPropContainer>{bodyElement}</ConfigPropContainer>
|
|
</ScrollRegion>
|
|
</Flexbox>
|
|
|
|
module.exports = PreferencesRoot
|