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

@@ -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) {

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;
+            }
           }
         }
 

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]
+  })
+}

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