From 400d70e9df3e7869c13a37e757c3b292b011b7f1 Mon Sep 17 00:00:00 2001 From: Mike Date: Thu, 21 Jul 2016 13:24:00 -0600 Subject: [PATCH] Allow the `color` config to be an object (#193) * Allow the `color` config to be an object It only covers the ANSI 16 as named colors, but allows for an array to be used if the full color palette wants to be overridden. * Better handling for array color configs vs. object configs --- app/lib/components/term.js | 5 ++-- app/lib/reducers/ui.js | 51 +++++++++++++++++++++++--------------- app/lib/utils/colors.js | 31 +++++++++++++++++++++++ config-default.js | 41 +++++++++++++++--------------- 4 files changed, 86 insertions(+), 42 deletions(-) create mode 100644 app/lib/utils/colors.js diff --git a/app/lib/components/term.js b/app/lib/components/term.js index 2d733cf9..ee692932 100644 --- a/app/lib/components/term.js +++ b/app/lib/components/term.js @@ -3,6 +3,7 @@ import React from 'react'; import Color from 'color'; import hterm from '../hterm'; import Component from '../component'; +import { getColorList } from '../utils/colors' export default class Term extends Component { @@ -31,7 +32,7 @@ export default class Term extends Component { this.term.prefs_.set('enable-clipboard-notice', false); this.term.prefs_.set('foreground-color', props.foregroundColor); this.term.prefs_.set('background-color', props.backgroundColor); - this.term.prefs_.set('color-palette-overrides', props.colors); + this.term.prefs_.set('color-palette-overrides', getColorList(props.colors)); this.term.prefs_.set('user-css', this.getStylesheet(props.customCSS)); this.term.prefs_.set('scrollbar-visible', false); this.term.prefs_.set('receive-encoding', 'raw'); @@ -186,7 +187,7 @@ export default class Term extends Component { } if (this.props.colors !== nextProps.colors) { - this.term.prefs_.set('color-palette-overrides', nextProps.colors); + this.term.prefs_.set('color-palette-overrides', getColorList(nextProps.colors)); } if (this.props.customCSS !== nextProps.customCSS) { diff --git a/app/lib/reducers/ui.js b/app/lib/reducers/ui.js index 770f874a..c93900e9 100644 --- a/app/lib/reducers/ui.js +++ b/app/lib/reducers/ui.js @@ -16,6 +16,7 @@ import { SESSION_SET_CWD } from '../constants/sessions'; import { UPDATE_AVAILABLE } from '../constants/updater'; +import { values } from '../utils/object'; // TODO: populate `config-default.js` from this :) const initial = Immutable({ @@ -33,24 +34,24 @@ const initial = Immutable({ termCSS: '', openAt: {}, resizeAt: 0, - colors: [ - '#000000', - '#ff0000', - '#33ff00', - '#ffff00', - '#0066ff', - '#cc00ff', - '#00ffff', - '#d0d0d0', - '#808080', - '#ff0000', - '#33ff00', - '#ffff00', - '#0066ff', - '#cc00ff', - '#00ffff', - '#ffffff' - ], + colors: { + black: '#000000', + red: '#ff0000', + green: '#33ff00', + yellow: '#ffff00', + blue: '#0066ff', + magenta: '#cc00ff', + cyan: '#00ffff', + white: '#d0d0d0', + lightBlack: '#808080', + lightRed: '#ff0000', + lightGreen: '#33ff00', + lightYellow: '#ffff00', + lightBlue: '#0066ff', + lightMagenta: '#cc00ff', + lightCyan: '#00ffff', + lightWhite: '#ffffff' + }, activityMarkers: {}, notifications: { font: false, @@ -117,8 +118,18 @@ const reducer = (state = initial, action) => { } if (null != config.colors) { - if (state.colors.toString() !== config.colors.toString()) { - ret.colors = config.colors; + if (Array.isArray(config.colors)) { + const stateColors = Array.isArray(state.colors) + ? state.colors + : values(state.colors); + + if (stateColors.toString() !== config.colors.toString()) { + ret.colors = config.colors; + } + } else { + if (JSON.stringify(state.colors) !== JSON.stringify(config.colors) { + ret.colors = config.colors; + } } } diff --git a/app/lib/utils/colors.js b/app/lib/utils/colors.js new file mode 100644 index 00000000..54b0df0d --- /dev/null +++ b/app/lib/utils/colors.js @@ -0,0 +1,31 @@ +const colorList = [ + 'black', + 'red', + 'green', + 'yellow', + 'blue', + 'magenta', + 'cyan', + 'white', + 'lightBlack', + 'lightRed', + 'lightGreen', + 'lightYellow', + 'lightBlue', + 'lightMagenta', + 'lightCyan', + 'lightWhite', + 'colorCubes', + 'grayscale' +] + +export function getColorList (colors) { + // For backwards compatibility, return early if it's already an array + if (Array.isArray(colors)) { + return colors; + } + + return colorList.map((colorName) => { + return colors[colorName] + }) +} diff --git a/config-default.js b/config-default.js index 72bec07d..2c59ff8a 100644 --- a/config-default.js +++ b/config-default.js @@ -27,26 +27,27 @@ module.exports = { // custom padding (css format, i.e.: `top right bottom left`) padding: '12px 14px', - // some color overrides. see http://bit.ly/29k1iU2 for - // the full list - colors: [ - '#000000', - '#ff0000', - '#33ff00', - '#ffff00', - '#0066ff', - '#cc00ff', - '#00ffff', - '#d0d0d0', - '#808080', - '#ff0000', - '#33ff00', - '#ffff00', - '#0066ff', - '#cc00ff', - '#00ffff', - '#ffffff' - ], + // the full list. if you're going to provide the full color palette, + // including the 6 x 6 color cubes and the grayscale map, just provide + // an array here instead of a color map object + colors: { + black: '#000000', + red: '#ff0000', + green: '#33ff00', + yellow: '#ffff00', + blue: '#0066ff', + magenta: '#cc00ff', + cyan: '#00ffff', + white: '#d0d0d0', + lightBlack: '#808080', + lightRed: '#ff0000', + lightGreen: '#33ff00', + lightYellow: '#ffff00', + lightBlue: '#0066ff', + lightMagenta: '#cc00ff', + lightCyan: '#00ffff', + lightWhite: '#ffffff' + }, // the shell to run when spawning a new session (i.e. /usr/local/bin/fish) // if left empty, your system's login shell will be used by default