font size improvements (#57)

* font size improvements
- fixed keyboard shortcut registering (listeners were being called twice)
- now saving fontSize in the state of Hyperterm
- Term now accepts fontSize as a prop and internally sets it
- added font size indicator on change (next to rows x cols)

* linting

* removed font size shortcuts from Hyperterm component, still in electron

* only show font size indicator when it has changed

* clean up fontSizeIndicatorTimeout on unmount, changeFontSize 2nd arg is now an options object

app/css/hyperterm.css

@@ -44,8 +44,6 @@ header {
 }
 
 .resize-indicator {
-  background: rgba(255, 255, 255, .2);
-  padding: 6px 14px;
   color: #fff;
   font: 11px Menlo;
   position: fixed;
@@ -53,6 +51,13 @@ header {
   right: 20px;
   opacity: 0;
   transition: opacity 150ms ease-in;
+  display: flex;
+}
+
+.resize-indicator > div {
+  background: rgba(255, 255, 255, .2);
+  padding: 6px 14px;
+  margin-left: 10px;
 }
 
 .resize-indicator.showing {

app/hyperterm.js

@@ -22,8 +22,10 @@ export default class HyperTerm extends Component {
       activeMarkers: [],
       mac: /Mac/.test(navigator.userAgent),
       resizeIndicatorShowing: false,
+      fontSizeIndicatorShowing: false,
       updateVersion: null,
-      updateNote: null
+      updateNote: null,
+      fontSize: 12
     };
 
     // we set this to true when the first tab
@@ -77,6 +79,7 @@ export default class HyperTerm extends Component {
                   ref={`term-${uid}`}
                   cols={this.state.cols}
                   rows={this.state.rows}
+                  fontSize={this.state.fontSize}
                   url={this.state.urls[uid]}
                   onResize={this.onResize}
                   onTitle={this.setTitle.bind(this, uid)}
@@ -89,7 +92,8 @@ export default class HyperTerm extends Component {
         }</div>
       </div>
       <div className={classes('resize-indicator', { showing: this.state.resizeIndicatorShowing })}>
-        { this.state.cols }x{ this.state.rows }
+        {this.state.fontSizeIndicatorShowing && <div>{ this.state.fontSize }px</div>}
+        <div>{ this.state.cols }x{ this.state.rows }</div>
       </div>
       <div className={classes('update-indicator', { showing: null !== this.state.updateVersion })}>
         Update available (<b>{ this.state.updateVersion }</b>).
@@ -269,30 +273,28 @@ export default class HyperTerm extends Component {
     }
   }
 
-  changeFontSize (value) {
-    const uid = this.state.sessions[this.state.active];
-    const term = this.refs[`term-${uid}`];
-    if (term) {
-      const size = term.term.prefs_.get('font-size');
-      term.term.prefs_.set('font-size', size + value);
-    }
+  changeFontSize (value, { relative = false } = {}) {
+    this.setState({
+      fontSize: relative ? this.state.fontSize + value : value,
+      fontSizeIndicatorShowing: true
+    });
+
+    clearTimeout(this.fontSizeIndicatorTimeout);
+    this.fontSizeIndicatorTimeout = setTimeout(() => {
+      this.setState({ fontSizeIndicatorShowing: false });
+    }, 1500);
   }
 
   resetFontSize () {
-    const uid = this.state.sessions[this.state.active];
-    const term = this.refs[`term-${uid}`];
-    if (term) {
-      // TODO: once we have preferences, we need to read from it
-      term.term.prefs_.set('font-size', 12);
-    }
+    this.changeFontSize(12);
   }
 
   increaseFontSize () {
-    this.changeFontSize(1);
+    this.changeFontSize(1, { relative: true });
   }
 
   decreaseFontSize () {
-    this.changeFontSize(-1);
+    this.changeFontSize(-1, { relative: true });
   }
 
   onSessionExit ({ uid }) {
@@ -373,9 +375,6 @@ export default class HyperTerm extends Component {
       keys.bind('command+shift+]', this.moveRight);
       keys.bind('command+alt+left', this.moveLeft);
       keys.bind('command+alt+right', this.moveRight);
-      keys.bind('command+=', this.increaseFontSize);
-      keys.bind('command+-', this.decreaseFontSize);
-      keys.bind('command+0', this.resetFontSize);
 
       this.keys = keys;
     }
@@ -456,6 +455,7 @@ export default class HyperTerm extends Component {
   componentWillUnmount () {
     this.rpc.destroy();
     clearTimeout(this.resizeIndicatorTimeout);
+    clearTimeout(this.fontSizeIndicatorTimeout);
     if (this.keys) this.keys.reset();
     delete this.clicks;
     clearTimeout(this.clickTimer);

app/term.js

@@ -62,7 +62,7 @@ export default class Term extends Component {
     }
 
     this.term.prefs_.set('font-family', "Menlo, 'DejaVu Sans Mono', 'Lucida Console', monospace");
-    this.term.prefs_.set('font-size', 11);
+    this.term.prefs_.set('font-size', this.props.fontSize);
     this.term.prefs_.set('cursor-color', '#F81CE5');
     this.term.prefs_.set('enable-clipboard-notice', false);
     this.term.prefs_.set('background-color', '#000');
@@ -90,6 +90,12 @@ export default class Term extends Component {
     return this.term.document_;
   }
 
+  componentWillReceiveProps (nextProps) {
+    if (this.props.fontSize !== nextProps.fontSize) {
+      this.term.prefs_.set('font-size', nextProps.fontSize);
+    }
+  }
+
   shouldComponentUpdate (nextProps) {
     if (this.props.url !== nextProps.url) {
       // when the url prop changes, we make sure