feat(theme-selector): Add theme selector to preferences page

Summary:
- Adds a couple of helper methods to theme manager and updates how
a theme package is enabled to be consistent with how we actually want to
activate themes.
- Adds small select component to choose a theme or install a new one.

Test Plan: - Manual

Reviewers: evan, bengotow

Reviewed By: bengotow

Differential Revision: https://phab.nylas.com/D2355

internal_packages/preferences/lib/tabs/workspace-section.cjsx

@@ -91,6 +91,43 @@ class AppearanceModeOption extends React.Component
       <div>{label}</div>
     </div>
 
+class ThemeSelector extends React.Component
+  constructor: (@props) ->
+    @_themeManager = NylasEnv.themes
+    @state = @_getState()
+
+  componentDidMount: =>
+    @disposable = @_themeManager.onDidChangeActiveThemes =>
+      @setState @_getState()
+
+  componentWillUnmount: ->
+    @disposable.dispose()
+
+  _getState: =>
+    themes: @_themeManager.getLoadedThemes()
+    activeTheme: @_themeManager.getActiveTheme().name
+
+  _setActiveTheme: (theme) =>
+    @setState activeTheme: theme
+    @_themeManager.setActiveTheme theme
+
+  _onChangeTheme: (event) =>
+    value = event.target.value
+    if value is 'install'
+      NylasEnv.commands.dispatch document.body, 'application:install-package'
+    else
+      @_setActiveTheme(value)
+
+  render: =>
+    <div className="item">
+      <span>Select theme: </span>
+      <select value={@state.activeTheme} onChange={@_onChangeTheme}>
+        {@state.themes.map (theme) ->
+          <option key={theme.name} value={theme.name}>{theme.displayName}</option>}
+        <option value="install">Install a theme...</option>
+      </select>
+    </div>
+
 class WorkspaceSection extends React.Component
   @displayName: 'WorkspaceSection'
   @propTypes:
@@ -117,21 +154,11 @@ class WorkspaceSection extends React.Component
         keyPath="core.workspace.showUnreadForAllCategories"
         config={@props.config} />
 
-      <div className="item">
-        <input type="checkbox"
-               id="dark"
-               checked={@props.config.contains('core.themes','ui-dark')}
-               onChange={@_onToggleDark} />
-        <label htmlFor="dark">Use dark color scheme</label>
-      </div>
+      <ThemeSelector />
 
       <h2>Layout</h2>
 
       <AppearanceModeSwitch config={@props.config} />
     </section>
 
-  _onToggleDark: (event) =>
-    @props.config.toggleContains('core.themes', 'ui-dark')
-    event.target.blur()
-
 module.exports = WorkspaceSection

internal_packages/ui-dark/package.json

@@ -1,5 +1,6 @@
 {
   "name": "ui-dark",
+  "displayName": "Dark",
   "theme": "ui",
   "version": "0.1.0",
   "description": "The Dark N1 Client Theme",

internal_packages/ui-light/package.json

@@ -1,5 +1,6 @@
 {
   "name": "ui-light",
+  "displayName": "Light",
   "theme": "ui",
   "version": "0.1.0",
   "description": "The N1 Client Theme",

src/package.coffee

@@ -75,6 +75,7 @@ class Package
     @metadata ?= Package.loadMetadata(@path)
     @bundledPackage = Package.isBundledPackagePath(@path)
     @name = @metadata?.name ? path.basename(@path)
+    @displayName = @metadata?.displayName || @name
     ModuleCache.add(@path, @metadata)
     @reset()
     @declaresNewDatabaseObjects = false

src/theme-manager.coffee

@@ -30,6 +30,8 @@ class ThemeManager
     stylesElement.onDidRemoveStyleElement @styleElementRemoved.bind(this)
     stylesElement.onDidUpdateStyleElement @styleElementUpdated.bind(this)
 
+  baseThemeName: -> 'ui-light'
+
   watchCoreStyles: ->
     console.log('Watching /static and /internal_packages for LESS changes')
     watchStylesIn = (folder) =>
@@ -176,6 +178,11 @@ class ThemeManager
   getActiveThemes: ->
     pack for pack in @packageManager.getActivePackages() when pack.isTheme()
 
+  getActiveTheme: ->
+    # The first element in the array returned by `getActiveNames` themes will
+    # actually be the active theme
+    @getActiveThemes()[0]
+
   activatePackages: -> @activateThemes()
 
   ###
@@ -215,6 +222,17 @@ class ThemeManager
     Grim.deprecate("Use `NylasEnv.config.set('core.themes', arrayOfThemeNames)` instead")
     NylasEnv.config.set('core.themes', enabledThemeNames)
 
+  # Set the active theme.
+  # Because of how theme-manager works, we always need to set the
+  # base theme first, and the newly activated theme after it to override the
+  # styles. We don't want to have more than 1 theme active at a time, so the
+  # array of active themes should always be of size 2.
+  #
+  # * `theme` {string} - the theme to activate
+  setActiveTheme: (theme) ->
+    base = @baseThemeName()
+    NylasEnv.config.set('core.themes', _.uniq [base, theme])
+
   ###
   Section: Private
   ###

src/theme-package.coffee

@@ -8,7 +8,7 @@ class ThemePackage extends Package
   getStyleSheetPriority: -> 1
 
   enable: ->
-    NylasEnv.config.unshiftAtKeyPath('core.themes', @name)
+    NylasEnv.themes.setActiveTheme(@name)
 
   disable: ->
     NylasEnv.config.removeAtKeyPath('core.themes', @name)