.

terminus-core/src/components/appRoot.pug

@@ -38,7 +38,7 @@ title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appeara
         *ngFor='let tab of app.tabs; trackBy: tab?.id', 
         [active]='tab == app.activeTab',
         [tab]='tab',
-        [class.scrollable]='tab.scrollable',
+        [scrollable]='tab.scrollable',
     )
 
 toaster-container([toasterconfig]="toasterconfig")

terminus-core/src/components/appRoot.ts

@@ -92,7 +92,6 @@ export class AppRootComponent {
             this.docking.dock()
         })
 
-        this.hotkeys.registerHotkeys()
         this.hostApp.secondInstance.subscribe(() => {
             this.onGlobalHotkey()
         })

terminus-core/src/components/tabBody.component.ts

@@ -2,13 +2,21 @@ import { Component, Input, ViewChild, HostBinding, ViewContainerRef } from '@ang
 import { BaseTabComponent } from '../components/baseTab'
 
 @Component({
-  selector: 'tab-body',
-  template: '<ng-template #placeholder></ng-template>',
-  styles: [require('./tabBody.scss')],
+    selector: 'tab-body',
+    template: `
+        <perfect-scrollbar [config]="{ suppressScrollX: true, suppressScrollY: !scrollable}">
+            <ng-template #placeholder></ng-template>
+        </perfect-scrollbar>
+    `,
+    styles: [
+        require('./tabBody.component.scss'),
+        require('./tabBody.deep.component.css'),
+    ],
 })
 export class TabBodyComponent {
     @Input() @HostBinding('class.active') active: boolean
     @Input() tab: BaseTabComponent
+    @Input() scrollable: boolean
     @ViewChild('placeholder', {read: ViewContainerRef}) placeholder: ViewContainerRef
 
     ngAfterViewInit () {

terminus-core/src/components/tabBody.deep.component.css

@@ -0,0 +1,4 @@
+:host /deep/ .ps-content {
+    flex: auto;
+    display: flex;
+}

terminus-core/src/defaultConfigValues.yaml

@@ -6,6 +6,8 @@ appearance:
   theme: 'Standard'
   useNativeFrame: false
 hotkeys:
+  toggle-window:
+    - 'Ctrl+Space'
   close-tab:
     - 'Ctrl-Shift-W'
     - ['Ctrl-A', 'K']

terminus-core/src/index.ts

@@ -4,6 +4,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { FormsModule } from '@angular/forms'
 import { ToasterModule } from 'angular2-toaster'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'
 
 import { AppService } from './services/app'
 import { ConfigService } from './services/config'
@@ -19,7 +20,7 @@ import { TabRecoveryService } from './services/tabRecovery'
 import { ThemesService } from './services/themes'
 
 import { AppRootComponent } from './components/appRoot'
-import { TabBodyComponent } from './components/tabBody'
+import { TabBodyComponent } from './components/tabBody.component'
 import { StartPageComponent } from './components/startPage'
 import { TabHeaderComponent } from './components/tabHeader'
 import { TitleBarComponent } from './components/titleBar'
@@ -29,6 +30,7 @@ import { Theme } from './api/theme'
 
 import { StandardTheme } from './theme'
 
+import 'perfect-scrollbar/dist/css/perfect-scrollbar.css'
 
 const PROVIDERS = [
     AppService,
@@ -55,6 +57,9 @@ const PROVIDERS = [
         FormsModule,
         ToasterModule,
         NgbModule,
+        PerfectScrollbarModule.forRoot({
+            suppressScrollX: true,
+        }),
     ],
     declarations: [
         AppRootComponent,

terminus-core/src/services/config.ts

@@ -12,7 +12,8 @@ export class ConfigProxy {
             if (
                 defaults[key] instanceof Object &&
                 !(defaults[key] instanceof Array) &&
-                Object.keys(defaults[key]).length > 0
+                Object.keys(defaults[key]).length > 0 &&
+                !defaults[key].__nonStructural
             ) {
                 if (!real[key]) {
                     real[key] = {}

terminus-core/src/services/hotkeys.ts

@@ -44,6 +44,10 @@ export class HotkeysService {
             })
         })
         this.hotkeyDescriptions = hotkeyProviders.map(x => x.hotkeys).reduce((a, b) => a.concat(b))
+        this.config.change.subscribe(() => {
+            this.registerGlobalHotkey()
+        })
+        this.registerGlobalHotkey()
     }
 
     pushKeystroke (name, nativeEvent) {
@@ -79,11 +83,18 @@ export class HotkeysService {
         return stringifyKeySequence(this.currentKeystrokes.map((x) => x.event))
     }
 
-    registerHotkeys () {
+    registerGlobalHotkey () {
         this.electron.globalShortcut.unregisterAll()
-        // TODO
-        this.electron.globalShortcut.register('Ctrl+Space', () => {
-            this.globalHotkey.emit()
+        let value = this.config.store.hotkeys['toggle-window']
+        if (typeof value == 'string') {
+            value = [value]
+        }
+        value.forEach(item => {
+            item = (typeof item == 'string') ? [item] : item
+
+            this.electron.globalShortcut.register(item[0].replace(/-/g, '+'), () => {
+                this.globalHotkey.emit()
+            })
         })
     }
 
@@ -163,6 +174,10 @@ export class HotkeysService {
 @Injectable()
 export class AppHotkeyProvider extends HotkeyProvider {
     hotkeys: IHotkeyDescription[] = [
+        {
+            id: 'toggle-window',
+            name: 'Toggle terminal window',
+        },
         {
             id: 'new-tab',
             name: 'New tab',

terminus-core/src/theme.scss

@@ -42,23 +42,34 @@ $input-bg:                       #111;
 $input-bg-disabled:              #333;
 
 $input-color:                    $body-color;
-//$input-border-color:             rgba($black,.15);
+$input-color-placeholder:        #333;
+$input-border-color:             #344;
 //$input-box-shadow:               inset 0 1px 1px rgba($black,.075);
-
 $input-border-radius:            0;
-
 $input-bg-focus:                 $input-bg;
 //$input-border-focus:             lighten($brand-primary, 25%);
 //$input-box-shadow-focus:         $input-box-shadow, rgba($input-border-focus, .6);
 $input-color-focus:              $input-color;
+$input-group-addon-bg:           $input-bg;
+$input-group-addon-border-color: $input-border-color;
 
 $modal-content-bg:               $body-bg;
 $modal-content-border-color:     $body-bg2;
-$modal-header-border-color:      $body-bg2;
-$modal-footer-border-color:      $body-bg2;
+$modal-header-border-color:      transparent;
+$modal-footer-border-color:      transparent;
 
 $popover-bg:                     $body-bg2;
 
+$dropdown-bg:                    $body-bg2;
+$dropdown-link-color:            $body-color;
+$dropdown-link-hover-color:      #333;
+$dropdown-link-hover-bg:         $body-bg3;
+//$dropdown-link-active-color:     $component-active-color;
+//$dropdown-link-active-bg:        $component-active-bg;
+$dropdown-link-disabled-color:   #333;
+$dropdown-header-color:          #333;
+
+
 
 @import '~bootstrap/scss/bootstrap.scss';
 
@@ -300,3 +311,7 @@ ngb-tabset .tab-content {
         margin-left: 5px;
     }
 }
+
+.input-group-addon + .form-control {
+    border-left: none;
+}