feat(plugins): Restore the plugins sidebar view

This commit is contained in:
Ben Gotow 2015-10-03 18:11:29 -07:00
parent c29220365a
commit d0ac42f07f
17 changed files with 115 additions and 103 deletions

View file

@ -59,18 +59,28 @@ class AccountSidebarStore extends NylasStore
# Find root views and add them to the bottom of the list (Drafts, etc.) # Find root views and add them to the bottom of the list (Drafts, etc.)
standardItems = standardCategoryItems standardItems = standardCategoryItems
standardItems.splice(1, 0, starredItem) standardItems.splice(1, 0, starredItem)
standardItems.push(WorkspaceStore.sidebarItems()...)
customSections = {}
for item in WorkspaceStore.sidebarItems()
if item.section
customSections[item.section] ?= []
customSections[item.section].push(item)
else
standardItems.push(item)
@_sections = [] @_sections = []
@_sections.push @_sections.push
label: 'Mailboxes' label: 'Mailboxes'
items: standardItems items: standardItems
type: 'mailboxes'
for section, items of customSections
@_sections.push
label: section
items: items
@_sections.push @_sections.push
label: CategoryStore.categoryLabel() label: CategoryStore.categoryLabel()
items: userCategoryItems items: userCategoryItems
type: 'category'
@trigger() @trigger()

View file

@ -1,5 +1,6 @@
React = require "react" React = require "react"
ActivitySidebar = require "./activity-sidebar" ActivitySidebar = require "./activity-sidebar"
NotificationStore = require './notifications-store'
NotificationsStickyBar = require "./notifications-sticky-bar" NotificationsStickyBar = require "./notifications-sticky-bar"
{ComponentRegistry, WorkspaceStore} = require("nylas-exports") {ComponentRegistry, WorkspaceStore} = require("nylas-exports")

View file

@ -0,0 +1,27 @@
PluginsView = require "./plugins-view"
PluginsTabsView = require "./plugins-tabs-view"
{ComponentRegistry,
WorkspaceStore} = require 'nylas-exports'
module.exports =
activate: (@state={}) ->
WorkspaceStore.defineSheet 'Plugins', {root: true, name: 'Plugins', supportedModes: ['list']},
list: ['RootSidebar', 'Plugins']
@sidebarItem = new WorkspaceStore.SidebarItem
sheet: WorkspaceStore.Sheet.Plugins
id: 'Plugins'
name: 'Plugins'
section: 'Views'
WorkspaceStore.addSidebarItem(@sidebarItem)
ComponentRegistry.register PluginsView,
location: WorkspaceStore.Location.Plugins
deactivate: ->
ComponentRegistry.unregister(PluginsView)
ComponentRegistry.unregister(PluginsTabsView)
WorkspaceStore.undefineSheet('Plugins')

View file

@ -8,6 +8,7 @@ class PackageSet extends React.Component
'emptyText': React.PropTypes.string 'emptyText': React.PropTypes.string
render: -> render: ->
return false unless @props.packages
packages = @props.packages.map (pkg) -> <Package package={pkg} /> packages = @props.packages.map (pkg) -> <Package package={pkg} />
count = <span>({@props.packages.length})</span> count = <span>({@props.packages.length})</span>

View file

@ -1,7 +1,7 @@
React = require 'react' React = require 'react'
_ = require 'underscore' _ = require 'underscore'
SettingsActions = require './settings-actions' PluginsActions = require './plugins-actions'
class Package extends React.Component class Package extends React.Component
@displayName: 'Package' @displayName: 'Package'
@ -16,10 +16,11 @@ class Package extends React.Component
extras = [] extras = []
if @props.package.installed if @props.package.installed
if @props.package.enabled if @props.package.category in ['user' ,'dev']
actions.push <div className="btn btn-small" onClick={@_onDisablePackage}>Disable</div> if @props.package.enabled
else actions.push <div className="btn btn-small" onClick={@_onDisablePackage}>Disable</div>
actions.push <div className="btn btn-small" onClick={@_onEnablePackage}>Enable</div> else
actions.push <div className="btn btn-small" onClick={@_onEnablePackage}>Enable</div>
if @props.package.category is 'user' if @props.package.category is 'user'
actions.push <div className="btn btn-small" onClick={@_onUninstallPackage}>Uninstall</div> actions.push <div className="btn btn-small" onClick={@_onUninstallPackage}>Uninstall</div>
if @props.package.category is 'dev' if @props.package.category is 'dev'
@ -50,21 +51,21 @@ class Package extends React.Component
</div> </div>
_onDisablePackage: => _onDisablePackage: =>
SettingsActions.disablePackage(@props.package) PluginsActions.disablePackage(@props.package)
_onEnablePackage: => _onEnablePackage: =>
SettingsActions.enablePackage(@props.package) PluginsActions.enablePackage(@props.package)
_onUninstallPackage: => _onUninstallPackage: =>
SettingsActions.uninstallPackage(@props.package) PluginsActions.uninstallPackage(@props.package)
_onUpdatePackage: => _onUpdatePackage: =>
SettingsActions.updatePackage(@props.package) PluginsActions.updatePackage(@props.package)
_onInstallPackage: => _onInstallPackage: =>
SettingsActions.installPackage(@props.package) PluginsActions.installPackage(@props.package)
_onShowPackage: => _onShowPackage: =>
SettingsActions.showPackage(@props.package) PluginsActions.showPackage(@props.package)
module.exports = Package module.exports = Package

View file

@ -4,12 +4,12 @@ Reflux = require 'reflux'
path = require 'path' path = require 'path'
fs = require 'fs-plus' fs = require 'fs-plus'
shell = require 'shell' shell = require 'shell'
SettingsActions = require './settings-actions' PluginsActions = require './plugins-actions'
{APMWrapper} = require 'nylas-exports' {APMWrapper} = require 'nylas-exports'
dialog = require('remote').require('dialog') dialog = require('remote').require('dialog')
module.exports = module.exports =
SettingsPackagesStore = Reflux.createStore PackagesStore = Reflux.createStore
init: -> init: ->
@_apm = new APMWrapper() @_apm = new APMWrapper()
@ -22,8 +22,8 @@ SettingsPackagesStore = Reflux.createStore
@_searchResults = null @_searchResults = null
@_refreshFeatured() @_refreshFeatured()
@listenTo SettingsActions.refreshFeaturedPackages, @_refreshFeatured @listenTo PluginsActions.refreshFeaturedPackages, @_refreshFeatured
@listenTo SettingsActions.refreshInstalledPackages, @_refreshInstalled @listenTo PluginsActions.refreshInstalledPackages, @_refreshInstalled
atom.commands.add 'body', atom.commands.add 'body',
'application:create-package': => @_onCreatePackage() 'application:create-package': => @_onCreatePackage()
@ -31,16 +31,16 @@ SettingsPackagesStore = Reflux.createStore
atom.commands.add 'body', atom.commands.add 'body',
'application:install-package': => @_onInstallPackage() 'application:install-package': => @_onInstallPackage()
@listenTo SettingsActions.createPackage, @_onCreatePackage @listenTo PluginsActions.createPackage, @_onCreatePackage
@listenTo SettingsActions.updatePackage, @_onUpdatePackage @listenTo PluginsActions.updatePackage, @_onUpdatePackage
@listenTo SettingsActions.setGlobalSearchValue, @_onGlobalSearchChange @listenTo PluginsActions.setGlobalSearchValue, @_onGlobalSearchChange
@listenTo SettingsActions.setInstalledSearchValue, @_onInstalledSearchChange @listenTo PluginsActions.setInstalledSearchValue, @_onInstalledSearchChange
@listenTo SettingsActions.showPackage, (pkg) => @listenTo PluginsActions.showPackage, (pkg) =>
dir = atom.packages.resolvePackagePath(pkg.name) dir = atom.packages.resolvePackagePath(pkg.name)
shell.showItemInFolder(dir) if dir shell.showItemInFolder(dir) if dir
@listenTo SettingsActions.installPackage, (pkg) => @listenTo PluginsActions.installPackage, (pkg) =>
@_installing[pkg.name] = true @_installing[pkg.name] = true
@trigger(@) @trigger(@)
@_apm.install pkg, (err) => @_apm.install pkg, (err) =>
@ -52,7 +52,7 @@ SettingsPackagesStore = Reflux.createStore
atom.packages.enablePackage(pkg.name) atom.packages.enablePackage(pkg.name)
@_onPackagesChanged() @_onPackagesChanged()
@listenTo SettingsActions.uninstallPackage, (pkg) => @listenTo PluginsActions.uninstallPackage, (pkg) =>
if atom.packages.isPackageLoaded(pkg.name) if atom.packages.isPackageLoaded(pkg.name)
atom.packages.disablePackage(pkg.name) atom.packages.disablePackage(pkg.name)
atom.packages.unloadPackage(pkg.name) atom.packages.unloadPackage(pkg.name)
@ -60,11 +60,11 @@ SettingsPackagesStore = Reflux.createStore
@_displayMessage("Sorry, an error occurred", err.toString()) if err @_displayMessage("Sorry, an error occurred", err.toString()) if err
@_onPackagesChanged() @_onPackagesChanged()
@listenTo SettingsActions.enablePackage, (pkg) -> @listenTo PluginsActions.enablePackage, (pkg) ->
if atom.packages.isPackageDisabled(pkg.name) if atom.packages.isPackageDisabled(pkg.name)
atom.packages.enablePackage(pkg.name) atom.packages.enablePackage(pkg.name)
@listenTo SettingsActions.disablePackage, (pkg) -> @listenTo PluginsActions.disablePackage, (pkg) ->
unless atom.packages.isPackageDisabled(pkg.name) unless atom.packages.isPackageDisabled(pkg.name)
atom.packages.disablePackage(pkg.name) atom.packages.disablePackage(pkg.name)

View file

@ -4,11 +4,11 @@ _ = require "underscore"
classNames = require 'classnames' classNames = require 'classnames'
Tabs = require './tabs' Tabs = require './tabs'
SettingsActions = require './settings-actions' TabsStore = require './tabs-store'
SettingsStore = require './settings-store' PluginsActions = require './plugins-actions'
class SettingsTabs extends React.Component class PluginsTabs extends React.Component
@displayName: 'SettingsTabs' @displayName: 'PluginsTabs'
@propTypes: @propTypes:
'onChange': React.PropTypes.Func 'onChange': React.PropTypes.Func
@ -22,7 +22,7 @@ class SettingsTabs extends React.Component
@state = @_getStateFromStores() @state = @_getStateFromStores()
render: -> render: ->
<ul className="settings-view-tabs"> <ul className="plugins-view-tabs">
{@_renderItems()} {@_renderItems()}
</ul> </ul>
@ -31,20 +31,20 @@ class SettingsTabs extends React.Component
classes = classNames classes = classNames
'tab': true 'tab': true
'active': idx is @state.tabIndex 'active': idx is @state.tabIndex
<li key={key} className={classes} onClick={ => SettingsActions.selectTabIndex(idx)}>{name}</li> <li key={key} className={classes} onClick={ => PluginsActions.selectTabIndex(idx)}>{name}</li>
componentDidMount: => componentDidMount: =>
@_unsubscribers = [] @_unsubscribers = []
@_unsubscribers.push SettingsStore.listen(@_onChange) @_unsubscribers.push TabsStore.listen(@_onChange)
componentWillUnmount: => componentWillUnmount: =>
unsubscribe() for unsubscribe in @_unsubscribers unsubscribe() for unsubscribe in @_unsubscribers
_getStateFromStores: => _getStateFromStores: =>
tabIndex: SettingsStore.tabIndex() tabIndex: TabsStore.tabIndex()
_onChange: => _onChange: =>
@setState(@_getStateFromStores()) @setState(@_getStateFromStores())
module.exports = SettingsTabs module.exports = PluginsTabs

View file

@ -3,33 +3,32 @@ _ = require "underscore"
{Flexbox} = require 'nylas-component-kit' {Flexbox} = require 'nylas-component-kit'
classNames = require 'classnames' classNames = require 'classnames'
SettingsStore = require './settings-store' TabsStore = require './tabs-store'
Tabs = require './tabs' Tabs = require './tabs'
class SettingsView extends React.Component class PluginsView extends React.Component
@displayName: 'SettingsView' @displayName: 'PluginsView'
constructor: (@props) -> constructor: (@props) ->
@state = @_getStateFromStores() @state = @_getStateFromStores()
render: => render: =>
SettingsTabComponent = Tabs[@state.tabIndex].component PluginsTabComponent = Tabs[@state.tabIndex].component
<div className="settings-view"> <div className="plugins-view">
<SettingsTabComponent /> <PluginsTabComponent />
</div> </div>
componentDidMount: => componentDidMount: =>
@_unsubscribers = [] @_unsubscribers = []
@_unsubscribers.push SettingsStore.listen(@_onChange) @_unsubscribers.push TabsStore.listen(@_onChange)
componentWillUnmount: => componentWillUnmount: =>
unsubscribe() for unsubscribe in @_unsubscribers unsubscribe() for unsubscribe in @_unsubscribers
_getStateFromStores: => _getStateFromStores: =>
tabIndex: SettingsStore.tabIndex() tabIndex: TabsStore.tabIndex()
_onChange: => _onChange: =>
@setState(@_getStateFromStores()) @setState(@_getStateFromStores())
module.exports = PluginsView
module.exports = SettingsView

View file

@ -1,8 +1,8 @@
React = require 'react' React = require 'react'
_ = require "underscore" _ = require "underscore"
PackageSet = require './package-set' PackageSet = require './package-set'
SettingsPackagesStore = require './settings-packages-store' PackagesStore = require './packages-store'
SettingsActions = require './settings-actions' PluginsActions = require './plugins-actions'
{Spinner, EventedIFrame, Flexbox} = require 'nylas-component-kit' {Spinner, EventedIFrame, Flexbox} = require 'nylas-component-kit'
classNames = require 'classnames' classNames = require 'classnames'
@ -46,24 +46,24 @@ class TabExplore extends React.Component
componentDidMount: => componentDidMount: =>
@_unsubscribers = [] @_unsubscribers = []
@_unsubscribers.push SettingsPackagesStore.listen(@_onChange) @_unsubscribers.push PackagesStore.listen(@_onChange)
# Trigger a refresh of the featured packages # Trigger a refresh of the featured packages
SettingsActions.refreshFeaturedPackages() PluginsActions.refreshFeaturedPackages()
componentWillUnmount: => componentWillUnmount: =>
unsubscribe() for unsubscribe in @_unsubscribers unsubscribe() for unsubscribe in @_unsubscribers
_getStateFromStores: => _getStateFromStores: =>
featured: SettingsPackagesStore.featured() featured: PackagesStore.featured()
search: SettingsPackagesStore.globalSearchValue() search: PackagesStore.globalSearchValue()
searchResults: SettingsPackagesStore.searchResults() searchResults: PackagesStore.searchResults()
_onChange: => _onChange: =>
@setState(@_getStateFromStores()) @setState(@_getStateFromStores())
_onSearchChange: (event) => _onSearchChange: (event) =>
SettingsActions.setGlobalSearchValue(event.target.value) PluginsActions.setGlobalSearchValue(event.target.value)
module.exports = TabExplore module.exports = TabExplore

View file

@ -1,8 +1,8 @@
React = require 'react' React = require 'react'
_ = require "underscore" _ = require "underscore"
PackageSet = require './package-set' PackageSet = require './package-set'
SettingsPackagesStore = require './settings-packages-store' PackagesStore = require './packages-store'
SettingsActions = require './settings-actions' PluginsActions = require './plugins-actions'
{Spinner, EventedIFrame, Flexbox} = require 'nylas-component-kit' {Spinner, EventedIFrame, Flexbox} = require 'nylas-component-kit'
classNames = require 'classnames' classNames = require 'classnames'
@ -26,41 +26,41 @@ class TabInstalled extends React.Component
placeholder="Search Installed Packages"/> placeholder="Search Installed Packages"/>
<PackageSet <PackageSet
packages={@state.packages.user} packages={@state.packages.user}
title="Community" title="Installed"
emptyText={searchEmpty ? "You don't have any community packages installed"} /> emptyText={searchEmpty ? "You don't have any packages installed in ~/.nylas/packages."} />
<PackageSet
title="Core"
packages={@state.packages.core} />
<PackageSet <PackageSet
title="Development" title="Development"
packages={@state.packages.dev} packages={@state.packages.dev}
emptyText={searchEmpty ? "You don't have any packages in ~/.nylas/dev/packages"} /> emptyText={searchEmpty ? <span>You don't have any packages installed in ~/.nylas/dev/packages. These packages are only loaded when you run the app with debug flags enabled (via the Developer menu).<br/><br/>Learn more about building packages at <a href='https://nylas.github.io/N1/docs'>https://nylas.github.io/N1/docs</a></span>} />
<div className="new-package"> <div className="new-package">
<div className="btn btn-large" onClick={@_onCreatePackage}>Create New Package...</div> <div className="btn btn-large" onClick={@_onCreatePackage}>Create New Package...</div>
</div> </div>
<PackageSet
title="Core"
packages={@state.packages.core} />
</div> </div>
</div> </div>
componentDidMount: => componentDidMount: =>
@_unsubscribers = [] @_unsubscribers = []
@_unsubscribers.push SettingsPackagesStore.listen(@_onChange) @_unsubscribers.push PackagesStore.listen(@_onChange)
SettingsActions.refreshInstalledPackages() PluginsActions.refreshInstalledPackages()
componentWillUnmount: => componentWillUnmount: =>
unsubscribe() for unsubscribe in @_unsubscribers unsubscribe() for unsubscribe in @_unsubscribers
_getStateFromStores: => _getStateFromStores: =>
packages: SettingsPackagesStore.installed() packages: PackagesStore.installed()
search: SettingsPackagesStore.installedSearchValue() search: PackagesStore.installedSearchValue()
_onChange: => _onChange: =>
@setState(@_getStateFromStores()) @setState(@_getStateFromStores())
_onCreatePackage: => _onCreatePackage: =>
SettingsActions.createPackage() PluginsActions.createPackage()
_onSearchChange: (event) => _onSearchChange: (event) =>
SettingsActions.setInstalledSearchValue(event.target.value) PluginsActions.setInstalledSearchValue(event.target.value)
module.exports = TabInstalled module.exports = TabInstalled

View file

@ -2,14 +2,14 @@ _ = require 'underscore'
ipc = require 'ipc' ipc = require 'ipc'
Reflux = require 'reflux' Reflux = require 'reflux'
SettingsActions = require './settings-actions' PluginsActions = require './plugins-actions'
module.exports = module.exports =
SettingsStore = Reflux.createStore TabsStore = Reflux.createStore
init: -> init: ->
@_tabIndex = 0 @_tabIndex = 0
@listenTo(SettingsActions.selectTabIndex, @_onTabIndexChanged) @listenTo(PluginsActions.selectTabIndex, @_onTabIndexChanged)
# Getters # Getters

View file

@ -1,9 +1,4 @@
module.exports = [{ module.exports = [{
key: 'explore'
name: 'Explore'
icon: 'tbd'
component: require './tab-explore'
},{
key: 'installed' key: 'installed'
name: 'Installed' name: 'Installed'
icon: 'tbd' icon: 'tbd'

View file

@ -1,8 +1,8 @@
{ {
"name": "settings", "name": "plugins",
"version": "0.1.0", "version": "0.1.0",
"main": "./lib/main", "main": "./lib/main",
"description": "Settings", "description": "Plugins",
"license": "Proprietary", "license": "Proprietary",
"private": true, "private": true,
"engines": { "engines": {

View file

@ -1,7 +1,7 @@
@import "ui-variables"; @import "ui-variables";
@import "ui-mixins"; @import "ui-mixins";
.settings-view-tabs { .plugins-view-tabs {
color: @text-color-subtle; color: @text-color-subtle;
list-style-type: none; list-style-type: none;
padding-left:0; padding-left:0;
@ -21,7 +21,7 @@
} }
} }
.settings-view { .plugins-view {
background: @background-off-primary; background: @background-off-primary;
position: absolute; position: absolute;
width:100%; width:100%;

View file

@ -1,22 +0,0 @@
SettingsView = require "./settings-view"
SettingsTabsView = require "./settings-tabs-view"
{ComponentRegistry,
WorkspaceStore} = require 'nylas-exports'
module.exports =
activate: (@state={}) ->
WorkspaceStore.defineSheet 'Settings', {root: true, supportedModes: ['list']},
list: ['RootSidebar', 'SettingsSidebar', 'Settings']
ComponentRegistry.register SettingsTabsView,
location: WorkspaceStore.Location.SettingsSidebar
ComponentRegistry.register SettingsView,
location: WorkspaceStore.Location.Settings
deactivate: ->
ComponentRegistry.unregister(SettingsView)
ComponentRegistry.unregister(SettingsTabsView)
WorkspaceStore.undefineSheet('Settings')

View file

@ -8,7 +8,7 @@ Location = {}
SidebarItems = {} SidebarItems = {}
class WorkspaceSidebarItem class WorkspaceSidebarItem
constructor: ({@id, @component, @name, @sheet, @mailViewFilter}) -> constructor: ({@id, @component, @name, @sheet, @mailViewFilter, @section}) ->
if not @sheet and not @mailViewFilter and not @component if not @sheet and not @mailViewFilter and not @component
throw new Error("WorkspaceSidebarItem: You must provide either a sheet \ throw new Error("WorkspaceSidebarItem: You must provide either a sheet \
component, or a mailViewFilter for the sidebar item named #{@name}") component, or a mailViewFilter for the sidebar item named #{@name}")