From f575a2dabc40cc49b60a2c59ff716a9bf6c14b65 Mon Sep 17 00:00:00 2001 From: Juan Tejada Date: Tue, 15 Dec 2015 09:54:59 -0800 Subject: [PATCH] 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 --- .../lib/tabs/workspace-section.cjsx | 49 ++++++++++++++----- internal_packages/ui-dark/package.json | 1 + internal_packages/ui-light/package.json | 1 + src/package.coffee | 1 + src/theme-manager.coffee | 18 +++++++ src/theme-package.coffee | 2 +- 6 files changed, 60 insertions(+), 12 deletions(-) diff --git a/internal_packages/preferences/lib/tabs/workspace-section.cjsx b/internal_packages/preferences/lib/tabs/workspace-section.cjsx index 8ce84a284..730c8543f 100644 --- a/internal_packages/preferences/lib/tabs/workspace-section.cjsx +++ b/internal_packages/preferences/lib/tabs/workspace-section.cjsx @@ -91,6 +91,43 @@ class AppearanceModeOption extends React.Component
{label}
+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: => +
+ Select theme: + +
+ class WorkspaceSection extends React.Component @displayName: 'WorkspaceSection' @propTypes: @@ -117,21 +154,11 @@ class WorkspaceSection extends React.Component keyPath="core.workspace.showUnreadForAllCategories" config={@props.config} /> -
- - -
+

Layout

- _onToggleDark: (event) => - @props.config.toggleContains('core.themes', 'ui-dark') - event.target.blur() - module.exports = WorkspaceSection diff --git a/internal_packages/ui-dark/package.json b/internal_packages/ui-dark/package.json index 9a5d17eb5..8b4668e34 100644 --- a/internal_packages/ui-dark/package.json +++ b/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", diff --git a/internal_packages/ui-light/package.json b/internal_packages/ui-light/package.json index 58c1180b1..703193acb 100644 --- a/internal_packages/ui-light/package.json +++ b/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", diff --git a/src/package.coffee b/src/package.coffee index c56f096ee..91f975662 100644 --- a/src/package.coffee +++ b/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 diff --git a/src/theme-manager.coffee b/src/theme-manager.coffee index c3469087f..6e5011dae 100644 --- a/src/theme-manager.coffee +++ b/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 ### diff --git a/src/theme-package.coffee b/src/theme-package.coffee index f55dbe745..246a7abba 100644 --- a/src/theme-package.coffee +++ b/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)