.

app/defaultConfigStructure.yaml

@@ -0,0 +1,2 @@
+appearance: { }
+hotkeys: { }

app/defaultConfigValues.yaml

@@ -1,3 +1,6 @@
+appearance:
+  font: monospace
+  fontSize: 14
 hotkeys:
   new-tab:
     - ['Ctrl-A', 'C']

app/src/components/app.less

@@ -1,6 +1,7 @@
 @import "~variables.less";
 @import "~mixins.less";
 
+@title-bg: #0f151b;
 
 :host {
     display: flex;
@@ -20,7 +21,7 @@
 
 .titlebar {
     height: @titlebar-height;
-    background: #141c23;
+    background: @title-bg;
     flex: none;
     display: flex;
     flex-direction: row;
@@ -79,7 +80,7 @@
         text-transform: uppercase;
         font-weight: bold;
         color: #888;
-        background: #141c23;
+        background: @title-bg;
     }
 
     &.active-tab-0 .btn-new-tab {
@@ -108,7 +109,7 @@
             flex-direction: row;
             flex: auto;
             min-width: 0;
-            background: #141c23;
+            background: @title-bg;
             transition: 0.25s all;
 
             div.index {
@@ -181,7 +182,7 @@
         }
 
         &.active {
-            background: #141c23;
+            background: @title-bg;
 
             .content-wrapper {
                 //border-bottom: 2px solid #69bbea;

app/src/components/settingsPane.pug

@@ -4,8 +4,21 @@ ngb-tabset(type='tabs')
             | General
         template(ngbTabContent)
             .form-group
-                label Font
-                input.form-control(type='text', [ngbTypeahead]='fontAutocomplete', '[(ngModel)]'='font')
+                label.control-label Font
+                input.form-control(
+                    type='text',
+                    [ngbTypeahead]='fontAutocomplete',
+                    '[(ngModel)]'='config.store.appearance.font',
+                    '(ngModelChange)'='config.save()',
+                )
+            .form-group
+                label.control-label Font size
+                input.form-control(
+                    type='number',
+                    '[(ngModel)]'='config.store.appearance.fontSize',
+                    '(ngModelChange)'='config.save()',
+                )
+
     ngb-tab
         template(ngbTabTitle)
             | Hotkeys

app/src/components/settingsPane.ts

@@ -55,7 +55,7 @@ export class SettingsPaneComponent {
           .map(list => Array.from(new Set(list)))
     }
 
-    ngOnDestroy() {
+    ngOnDestroy () {
         this.config.save()
     }
 }

app/src/components/terminal.ts

@@ -1,7 +1,8 @@
+import { Subscription } from 'rxjs'
 import { Component, NgZone, Input, Output, EventEmitter, ElementRef } from '@angular/core'
+
 import { ConfigService } from 'services/config'
 import { PluginDispatcherService } from 'services/pluginDispatcher'
-
 import { Session } from 'services/sessions'
 
 const hterm = require('hterm-commonjs')
@@ -22,8 +23,8 @@ hterm.hterm.VT.ESC['k'] = function(parseState) {
 }
 
 hterm.hterm.defaultStorage = new hterm.lib.Storage.Memory()
-const pmgr = new hterm.hterm.PreferenceManager('default')
-pmgr.set('user-css', dataurl.convert({
+const preferenceManager = new hterm.hterm.PreferenceManager('default')
+preferenceManager.set('user-css', dataurl.convert({
     data: `
         a {
             cursor: pointer;
@@ -36,11 +37,12 @@ pmgr.set('user-css', dataurl.convert({
     mimetype: 'text/css',
     charset: 'utf8',
 }))
-pmgr.set('font-size', 12)
-pmgr.set('background-color', '#1D272D')
-pmgr.set('color-palette-overrides', {
+preferenceManager.set('font-size', 12)
+preferenceManager.set('background-color', '#1D272D')
+preferenceManager.set('color-palette-overrides', {
     0: '#1D272D',
 })
+
 const oldDecorate = hterm.hterm.ScrollPort.prototype.decorate
 hterm.hterm.ScrollPort.prototype.decorate = function (...args) {
     oldDecorate.bind(this)(...args)
@@ -58,6 +60,7 @@ export class TerminalComponent {
     title: string
     @Output() titleChange = new EventEmitter()
     terminal: any
+    configSubscription: Subscription
 
     constructor(
         private zone: NgZone,
@@ -65,6 +68,9 @@ export class TerminalComponent {
         public config: ConfigService,
         private pluginDispatcher: PluginDispatcherService,
     ) {
+        this.configSubscription = config.change.subscribe(() => {
+            this.configure()
+        })
     }
 
     ngOnInit () {
@@ -99,10 +105,16 @@ export class TerminalComponent {
             this.session.releaseInitialDataBuffer()
         }
         this.terminal.decorate(this.elementRef.nativeElement)
+        this.configure()
         this.pluginDispatcher.emit('postTerminalInit', { terminal: this.terminal })
     }
 
+    configure () {
+        preferenceManager.set('font-family', this.config.full().appearance.font)
+        preferenceManager.set('font-size', this.config.full().appearance.fontSize)
+    }
+
     ngOnDestroy () {
-        ;
+        this.configSubscription.unsubscribe()
     }
 }

app/src/global.less

@@ -35,10 +35,6 @@ body {
     }
 }
 
-.form-control {
-    -webkit-user-select: initial;
-}
-
 .window-resizer {
     -webkit-app-region: no-drag;
     position: fixed;
@@ -132,7 +128,7 @@ ngb-tabset {
     }
 
     >.tab-content {
-        padding: 10px;
+        padding: 10px 0;
     }
 }
 
@@ -175,3 +171,25 @@ ngb-typeahead-window {
 .list-group-item {
     .list-group-item-style();
 }
+
+label.control-label {
+    background: rgba(0, 0, 0, .25);
+    color: #ccc;
+    font-size: 10px;
+    display: block;
+    margin: 0;
+    padding: 5px 10px 0;
+}
+
+.form-control {
+    -webkit-user-select: initial;
+    background: rgba(0, 0, 0, .25);
+    display: block;
+    margin: 0 0 5px;
+    width: 100%;
+    border: none;
+    height: 30px;
+    line-height: 30px;
+    color: #eee;
+    padding: 0 10px;
+}

app/src/plugin.hyperlinks.ts

@@ -59,10 +59,10 @@ export default class HyperlinksPlugin {
     }
 
     insertLinks (screen) {
-        const traverse = (element) => {
-            Array.from(element.childNodes).forEach((node) => {
+        const traverse = (parentNode: Node) => {
+            Array.from(parentNode.childNodes).forEach((node) => {
                 if (node.nodeName == '#text') {
-                    element.replaceChild(this.urlizeNode(node), node)
+                    parentNode.replaceChild(this.urlizeNode(node), node)
                 } else if (node.nodeName != 'A') {
                     traverse(node)
                 }

app/src/services/config.ts

@@ -1,12 +1,20 @@
 import * as yaml from 'js-yaml'
 import * as path from 'path'
 import * as fs from 'fs'
-import { Injectable } from '@angular/core'
+import { EventEmitter, Injectable } from '@angular/core'
 import { ElectronService } from 'services/electron'
 
-const defaultConfig : IConfigData = require('../../defaultConfig.yaml')
+const configMerge = (a, b) => require('deepmerge')(a, b, { arrayMerge: (_d, s) => s })
+const defaultConfigValues : IConfigData = require('../../defaultConfigValues.yaml')
+const defaultConfigStructure : IConfigData = require('../../defaultConfigStructure.yaml')
+
+export interface IAppearanceData {
+    font: string
+    fontSize: number
+}
 
 export interface IConfigData {
+    appearance?: IAppearanceData
     hotkeys?: any
 }
 
@@ -20,21 +28,27 @@ export class ConfigService {
     }
 
     private path: string
-    private store: IConfigData
+    store: IConfigData
+    change = new EventEmitter()
 
     load () {
         if (fs.existsSync(this.path)) {
-            this.store = yaml.safeLoad(fs.readFileSync(this.path, 'utf8'))
+            this.store = configMerge(defaultConfigStructure, yaml.safeLoad(fs.readFileSync(this.path, 'utf8')))
         } else {
-            this.store = {}
+            this.store = Object.assign({}, defaultConfigStructure)
         }
     }
 
     save () {
         fs.writeFileSync(this.path, yaml.safeDump(this.store), 'utf8')
+        this.emitChange()
     }
 
     full () : IConfigData {
-        return Object.assign({}, defaultConfig, this.store)
+        return configMerge(defaultConfigValues, this.store)
+    }
+
+    emitChange () {
+        this.change.emit()
     }
 }

app/src/services/hotkeys.ts

@@ -110,7 +110,9 @@ export class HotkeysService {
         ]
         events.forEach((event) => {
             document.addEventListener(event.name, (nativeEvent) => {
-                this.emitNativeEvent(event.name, nativeEvent)
+                if (document.querySelectorAll(':focus').length == 0) {
+                    this.emitNativeEvent(event.name, nativeEvent)
+                }
             })
 
             let oldHandler = hterm.hterm.Keyboard.prototype[event.htermHandler]