From 80fc25c6a4f976470ec01568e72e31dcec88dfcd Mon Sep 17 00:00:00 2001
From: Guillermo Rauch <rauchg@gmail.com>
Date: Thu, 7 Jul 2016 08:53:23 -0700
Subject: [PATCH] make term configurable

---
 app/hyperterm.js |  5 +++++
 app/term.js      | 52 ++++++++++++++++++++++++------------------------
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/app/hyperterm.js b/app/hyperterm.js
index a0255b11..12641d79 100644
--- a/app/hyperterm.js
+++ b/app/hyperterm.js
@@ -84,6 +84,7 @@ export default class HyperTerm extends Component {
           ref='termWrapper'>{
             this.state.sessions.map((uid, i) => {
               const active = i === this.state.active;
+              const { config } = this.props;
               return <div key={`d${uid}`} className={classes('term', { active })} style={{ width: '100%', height: '100%' }} ref='term'>
                 <Term
                   key={uid}
@@ -91,6 +92,10 @@ export default class HyperTerm extends Component {
                   cols={this.state.cols}
                   rows={this.state.rows}
                   fontSize={this.state.fontSize}
+                  cursorColor={config.cursorColor}
+                  fontFamily={config.fontFamily}
+                  backgroundColor={config.backgroundColor}
+                  colors={config.colors}
                   url={this.state.urls[uid]}
                   onResize={this.onResize}
                   onTitle={this.setTitle.bind(this, uid)}
diff --git a/app/term.js b/app/term.js
index ea8c9f9a..757dae9b 100644
--- a/app/term.js
+++ b/app/term.js
@@ -53,37 +53,21 @@ const fishRegex = /fish: Unknown command '((https?:\/\/)|(\/\/))?([^']+)'/;
 export default class Term extends Component {
 
   componentDidMount () {
+    const { props } = this;
     this.term = new hterm.Terminal();
 
     // the first term that's created has unknown size
     // subsequent new tabs have size
-    if (this.props.cols) {
-      this.term.realizeSize_(this.props.cols, this.props.rows);
+    if (props.cols) {
+      this.term.realizeSize_(props.cols, props.rows);
     }
 
-    this.term.prefs_.set('font-family', "Menlo, 'DejaVu Sans Mono', 'Lucida Console', monospace");
-    this.term.prefs_.set('font-size', this.props.fontSize);
-    this.term.prefs_.set('cursor-color', '#F81CE5');
+    this.term.prefs_.set('font-family', props.fontFamily);
+    this.term.prefs_.set('font-size', props.fontSize);
+    this.term.prefs_.set('cursor-color', props.cursorColor);
     this.term.prefs_.set('enable-clipboard-notice', false);
-    this.term.prefs_.set('background-color', '#000');
-    this.term.prefs_.set('color-palette-overrides', {
-      '0': '#000000',
-      '1': '#ff0000',
-      '2': '#33ff00',
-      '3': '#ffff00',
-      '4': '#0066ff',
-      '5': '#cc00ff',
-      '6': '#00ffff',
-      '7': '#d0d0d0',
-      '8': '#808080',
-      '9': '#ff0000',
-      '10': '#33ff00',
-      '11': '#ffff00',
-      '12': '#0066ff',
-      '13': '#cc00ff',
-      '14': '#00ffff',
-      '15': '#ffffff'
-    });
+    this.term.prefs_.set('background-color', props.backgroundColor);
+    this.term.prefs_.set('color-palette-overrides', props.colors);
 
     this.term.prefs_.set('user-css', URL.createObjectURL(new Blob([`
       .cursor-node[focus="false"] {
@@ -94,10 +78,10 @@ export default class Term extends Component {
     this.term.onTerminalReady = () => {
       const io = this.term.io.push();
       io.onVTKeystroke = io.sendString = (str) => {
-        this.props.onData(str);
+        props.onData(str);
       };
       io.onTerminalResize = (cols, rows) => {
-        this.props.onResize({ cols, rows });
+        props.onResize({ cols, rows });
       };
     };
     this.term.decorate(this.refs.term);
@@ -112,6 +96,22 @@ export default class Term extends Component {
     if (this.props.fontSize !== nextProps.fontSize) {
       this.term.prefs_.set('font-size', nextProps.fontSize);
     }
+
+    if (this.props.backgroundColor !== nextProps.backgroundColor) {
+      this.term.prefs_.set('background-color', nextProps.backgroundColor);
+    }
+
+    if (this.props.fontFamily !== nextProps.fontFamily) {
+      this.term.prefs_.set('font-family', nextProps.fontFamily);
+    }
+
+    if (this.props.cursorColor !== nextProps.cursorColor) {
+      this.term.prefs_.set('cursor-color', nextProps.cursorColor);
+    }
+
+    if (this.props.colors.toString() !== nextProps.colors.toString()) {
+      this.term.prefs_.set('color-palette-overrides', nextProps.colors);
+    }
   }
 
   shouldComponentUpdate (nextProps) {