.

app/src/components/appRoot.ts

@@ -88,42 +88,45 @@ export class AppRootComponent {
             }
         })
 
-        this.hotkeys.registerHotkeys()
-        this.hotkeys.globalHotkey.subscribe(() => {
-            this.hostApp.toggleWindow()
-        })
-
         this.docking.dock()
         this.hostApp.shown.subscribe(() => {
             this.docking.dock()
         })
 
+        this.hotkeys.registerHotkeys()
         this.hostApp.secondInstance.subscribe(() => {
-            if (this.electron.app.window.isFocused()) {
-                // focused
-                this.electron.app.window.hide()
-            } else {
-                if (!this.electron.app.window.isVisible()) {
-                    // unfocused, invisible
-                    this.electron.app.window.show()
-                } else {
-                    if (this.config.full().appearance.dock == 'off') {
-                        // not docked, visible
-                        setTimeout(() => {
-                            this.electron.app.window.focus()
-                        })
-                    } else {
-                        // docked, visible
-                        this.electron.app.window.hide()
-                    }
-                }
-            }
-            this.docking.dock()
+            this.onGlobalHotkey()
+        })
+        this.hotkeys.globalHotkey.subscribe(() => {
+            this.onGlobalHotkey()
         })
 
         this.app.restoreTabs()
     }
 
+    onGlobalHotkey () {
+        if (this.electron.app.window.isFocused()) {
+            // focused
+            this.electron.app.window.hide()
+        } else {
+            if (!this.electron.app.window.isVisible()) {
+                // unfocused, invisible
+                this.electron.app.window.show()
+            } else {
+                if (this.config.full().appearance.dock == 'off') {
+                    // not docked, visible
+                    setTimeout(() => {
+                        this.electron.app.window.focus()
+                    })
+                } else {
+                    // docked, visible
+                    this.electron.app.window.hide()
+                }
+            }
+        }
+        this.docking.dock()
+    }
+
     getToolbarButtons (aboveZero: boolean): IToolbarButton[] {
         let buttons: IToolbarButton[] = []
         this.toolbarButtonProviders.forEach((provider) => {

app/src/services/hotkeys.ts

@@ -36,7 +36,7 @@ export class HotkeysService {
         let events = ['keydown', 'keyup']
         events.forEach((event) => {
             document.addEventListener(event, (nativeEvent) => {
-                if (document.querySelectorAll(':focus').length == 0) {
+                if (document.querySelectorAll('input:focus').length == 0) {
                     this.pushKeystroke(event, nativeEvent)
                     this.processKeystrokes()
                     this.emitKeyEvent(nativeEvent)
@@ -52,16 +52,16 @@ export class HotkeysService {
     }
 
     processKeystrokes () {
-        this.zone.run(() => {
-            if (this.isEnabled()) {
+        if (this.isEnabled()) {
+            this.zone.run(() => {
                 let matched = this.getCurrentFullyMatchedHotkey()
                 if (matched) {
                     console.log('Matched hotkey', matched)
                     this.matchedHotkey.emit(matched)
                     this.clearCurrentKeystrokes()
                 }
-            }
-        })
+            })
+        }
     }
 
     emitKeyEvent (nativeEvent) {
@@ -82,7 +82,7 @@ export class HotkeysService {
     registerHotkeys () {
         this.electron.globalShortcut.unregisterAll()
         // TODO
-        this.electron.globalShortcut.register('PrintScreen', () => {
+        this.electron.globalShortcut.register('Ctrl+Space', () => {
             this.globalHotkey.emit()
         })
     }

app/src/services/hotkeys.util.ts

@@ -50,7 +50,11 @@ export function stringifyKeySequence(events: NativeKeyEvent[]): string[] {
                 // TODO make this optional?
                 continue
             }
-            itemKeys.push(event.key)
+            if (event.key.length == 1) {
+                itemKeys.push(event.key.toUpperCase())
+            } else {
+                itemKeys.push(event.key)
+            }
             items.push(itemKeys.join('-'))
         }
     }

app/src/settings/components/hotkeyInputModal.less

@@ -1,23 +0,0 @@
-:host {
-    >.modal-body {
-        padding: 30px 20px !important;
-    }
-
-    .input {
-        background: #111;
-        font-size: 24px;
-        line-height: 24px;
-        height: 50px;
-    }
-
-    .timeout {
-        background: #111;
-        height: 5px;
-        margin: 0 0 15px;
-
-        div {
-            height: 5px;
-            background: #666;
-        }
-    }
-}

app/src/settings/components/hotkeyInputModal.pug

@@ -1,8 +1,12 @@
-div.modal-body
-    label Press the key now
+.modal-header
+    h5 Press the key now
+
+.modal-body
     .input
-        hotkey-display([model]='value', [animate]='true')
+        .stroke(*ngFor='let stroke of value', [@animateKey]='true') {{stroke}}
 
     .timeout
         div([style.width]='timeoutProgress + "%"')
-    a.btn.btn-default.pull-right((click)='close()') Cancel
+
+.modal-footer
+    button.btn.btn-outline-primary((click)='close()') Cancel

app/src/settings/components/hotkeyInputModal.scss

@@ -0,0 +1,22 @@
+:host {
+    >.modal-body {
+        padding: 0 !important;
+    }
+
+    .input {
+        display: flex;
+
+        .stroke {
+            flex: none;
+        }
+    }
+
+    .timeout {
+        height: 5px;
+        margin: 0 0 15px;
+
+        div {
+            height: 5px;
+        }
+    }
+}

app/src/settings/components/hotkeyInputModal.ts

@@ -1,15 +1,39 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, trigger, transition, style, animate } from '@angular/core'
 import { HotkeysService } from 'services/hotkeys'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subscription } from 'rxjs'
 
-const INPUT_TIMEOUT = 2000
+const INPUT_TIMEOUT = 1000
 
 
 @Component({
   selector: 'hotkey-input-modal',
   template: require('./hotkeyInputModal.pug'),
-  styles: [require('./hotkeyInputModal.less')],
+  styles: [require('./hotkeyInputModal.scss')],
+  animations: [
+      trigger('animateKey', [
+          transition(':enter', [
+              style({
+                  transform: 'translateX(25px)',
+                  opacity: '0',
+              }),
+              animate('250ms ease-out', style({
+                  transform: 'translateX(0)',
+                  opacity: '1',
+              }))
+          ]),
+          transition(':leave', [
+              style({
+                  transform: 'translateX(0)',
+                  opacity: '1',
+              }),
+              animate('250ms ease-in', style({
+                  transform: 'translateX(25px)',
+                  opacity: '0',
+              }))
+          ])
+      ])
+  ]
 })
 export class HotkeyInputModalComponent {
     private keySubscription: Subscription
@@ -24,9 +48,11 @@ export class HotkeyInputModalComponent {
         public hotkeys: HotkeysService,
     ) {
         this.hotkeys.clearCurrentKeystrokes()
-        this.keySubscription = hotkeys.key.subscribe(() => {
+        this.keySubscription = hotkeys.key.subscribe((event) => {
             this.lastKeyEvent = performance.now()
             this.value = this.hotkeys.getCurrentKeystrokes()
+            event.preventDefault()
+            event.stopPropagation()
         })
     }
 
@@ -39,8 +65,8 @@ export class HotkeyInputModalComponent {
             if (!this.lastKeyEvent) {
                 return
             }
-            this.timeoutProgress = (performance.now() - this.lastKeyEvent) * 100 / INPUT_TIMEOUT
-            if (this.timeoutProgress >= 100) {
+            this.timeoutProgress = Math.min(100, (performance.now() - this.lastKeyEvent) * 100 / INPUT_TIMEOUT)
+            if (this.timeoutProgress == 100) {
                 this.modalInstance.close(this.value)
             }
         }, 25)

app/src/settings/components/multiHotkeyInput.ts

@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core'
-import { ModalService } from 'services/modal'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { HotkeyInputModalComponent } from './hotkeyInputModal'
 
 
@@ -11,7 +11,7 @@ import { HotkeyInputModalComponent } from './hotkeyInputModal'
 })
 export class MultiHotkeyInputComponent {
     constructor (
-        private modal: ModalService,
+        private ngbModal: NgbModal,
     ) { }
 
     ngOnInit () {
@@ -25,15 +25,16 @@ export class MultiHotkeyInputComponent {
     }
 
     editItem (item) {
-        this.modal.open(HotkeyInputModalComponent).result.then((value: string[]) => {
-            Object.assign(item, value)
+        this.ngbModal.open(HotkeyInputModalComponent).result.then((value: string[]) => {
+            this.model[this.model.findIndex(x => x === item)] = value
+            this.model = this.model.slice()
             this.modelChange.emit(this.model)
         })
     }
 
     addItem () {
-        this.modal.open(HotkeyInputModalComponent).result.then((value: string[]) => {
-            this.model.push(value)
+        this.ngbModal.open(HotkeyInputModalComponent).result.then((value: string[]) => {
+            this.model = this.model.concat([value])
             this.modelChange.emit(this.model)
         })
     }

app/src/settings/components/settingsPane.pug

@@ -11,7 +11,7 @@ ngb-tabset.vertical(type='tabs')
             | Application
         template(ngbTabContent)
             .row
-                .col.col-sm-6
+                .col.col-lg-6
                     .form-group
                         label Show tabs
                         br
@@ -32,13 +32,13 @@ ngb-tabset.vertical(type='tabs')
                                     [value]='false'
                                 )
                                 | At the bottom
-                .col.col-sm-6
+                .col.col-lg-6
                     .form-group
                         label Window frame
                         br
                         div(
                             '[(ngModel)]'='config.store.appearance.useNativeFrame'
-                            '(ngModelChange)'='config.save(); requestRestart()'
+                            '(ngModelChange)'='config.save(); config.requestRestart()'
                             ngbRadioGroup
                         )
                             label.btn.btn-secondary

app/src/settings/components/settingsPane.scss

@@ -1,9 +1,12 @@
 :host {
     display: flex;
+    flex-direction: column;
     flex: auto;
 
     >.btn-block {
-        margin-bottom: 20px;
+        margin: 20px;
+        width: auto;
+        flex: none;
     }
 
     >.modal-body {

app/src/terminal/components/settings.pug

@@ -1,5 +1,5 @@
 .row
-    .col-sm-6
+    .col-lg-6
         .form-group
             label Preview
             .appearance-preview(
@@ -8,7 +8,7 @@
             )
                 .text john@doe-pc$ ls
                 .text foo bar
-    .col-sm-6
+    .col-lg-6
         .form-group
             label Font
             input.form-control(

app/src/theme.scss

@@ -47,6 +47,11 @@ $input-bg-focus:                 $input-bg;
 //$input-box-shadow-focus:         $input-box-shadow, rgba($input-border-focus, .6);
 $input-color-focus:              $input-color;
 
+$modal-content-bg:               $body-bg;
+$modal-content-border-color:     $body-bg2;
+$modal-header-border-color:      $body-bg2;
+$modal-footer-border-color:      $body-bg2;
+
 
 @import '~bootstrap/scss/bootstrap.scss';
 
@@ -238,3 +243,29 @@ multi-hotkey-input {
         &:active { background: darken($body-bg3, 15%); }
     }
 }
+
+hotkey-input-modal {
+    .input {
+        background: $input-bg;
+        padding: 10px;
+        font-size: 24px;
+        line-height: 27px;
+        height: 55px;
+
+        .stroke {
+            background: $body-bg3;
+            border: 1px solid $blue;
+            border-radius: 3px;
+            margin-right: 10px;
+            padding: 3px 10px;
+        }
+    }
+
+    .timeout {
+        background: $input-bg;
+
+        div {
+            background: $blue;
+        }
+    }
+}