.

app/src/app.module.ts

@@ -19,16 +19,16 @@ import { DockingService } from 'services/docking'
 
 import { AppComponent } from 'components/app'
 import { CheckboxComponent } from 'components/checkbox'
-import { HotkeyInputComponent } from 'components/hotkeyInput'
-import { HotkeyDisplayComponent } from 'components/hotkeyDisplay'
-import { HotkeyHintComponent } from 'components/hotkeyHint'
-import { HotkeyInputModalComponent } from 'components/hotkeyInputModal'
-import { SettingsPaneComponent } from 'components/settingsPane'
 import { TabBodyComponent } from 'components/tabBody'
 import { TabHeaderComponent } from 'components/tabHeader'
 import { TerminalTabComponent } from 'components/terminalTab'
+import { TitleBarComponent } from 'components/titleBar'
 
 
+let plugins = [
+    require('./settings').default,
+]
+
 @NgModule({
     imports: [
         BrowserModule,
@@ -36,7 +36,7 @@ import { TerminalTabComponent } from 'components/terminalTab'
         FormsModule,
         ToasterModule,
         NgbModule.forRoot(),
-    ],
+    ].concat(plugins),
     providers: [
         ConfigService,
         DockingService,
@@ -51,21 +51,15 @@ import { TerminalTabComponent } from 'components/terminalTab'
         SessionsService,
     ],
     entryComponents: [
-        HotkeyInputModalComponent,
-        SettingsPaneComponent,
         TerminalTabComponent,
     ],
     declarations: [
         AppComponent,
         CheckboxComponent,
-        HotkeyDisplayComponent,
-        HotkeyHintComponent,
-        HotkeyInputComponent,
-        HotkeyInputModalComponent,
-        SettingsPaneComponent,
         TabBodyComponent,
         TabHeaderComponent,
         TerminalTabComponent,
+        TitleBarComponent,
     ],
     bootstrap: [
         AppComponent,

app/src/components/app.less

@@ -29,42 +29,9 @@
     background: @body-bg;
 }
 
-@titlebar-height: 30px;
 @tabs-height: 40px;
 @tab-border-radius: 4px;
 
-.titlebar {
-    flex: 0 0 @titlebar-height;
-    display: flex;
-    height: @titlebar-height;
-    background: @title-bg;
-
-    .title {
-        flex: auto;
-        padding-left: 15px;
-        line-height: @titlebar-height;
-        -webkit-app-region: drag;
-    }
-
-    button {
-        border: none;
-        box-shadow: none;
-        border-radius: 0;
-        font-size: 8px;
-        width: 40px;
-        padding: 0;
-        line-height: @titlebar-height;
-        text-align: center;
-
-        &:not(:hover):not(:active) {
-            background: transparent;
-        }
-    }
-
-    .btn-close {
-        font-size: 12px;
-    }
-}
 
 :host > .spacer {
     flex: 0 0 5px;

app/src/components/app.pug

@@ -1,11 +1,4 @@
-.titlebar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appearance.dock == "off"')
-    .title((dblclick)='hostApp.toggleMaximize()') Term
-    button.btn.btn-secondary.btn-minimize((click)='hostApp.minimize()')
-        i.fa.fa-window-minimize
-    button.btn.btn-secondary.btn-maximize((click)='hostApp.toggleMaximize()')
-        i.fa.fa-window-maximize
-    button.btn.btn-secondary.btn-close((click)='hostApp.quit()')
-        i.fa.fa-close
+title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appearance.dock == "off"')
 
 .spacer 
 
@@ -32,10 +25,9 @@
         [model]='tab',
         [class.scrollable]='tab.scrollable',
     )
-        //-terminal(*ngIf='tab.type == "terminal"', [session]='tab.session', '[(title)]'='tab.name')
-        //-settings-pane(*ngIf='tab.type == "settings"')
 
-hotkey-hint
+// TODO
+//hotkey-hint
 
 toaster-container([toasterconfig]="toasterconfig")
 template(ngbModalContainer)

app/src/components/app.ts

@@ -9,8 +9,9 @@ import { QuitterService } from 'services/quitter'
 import { ConfigService } from 'services/config'
 import { DockingService } from 'services/docking'
 import { SessionsService } from 'services/sessions'
+import { PluginDispatcherService } from 'services/pluginDispatcher'
 
-import { Tab, SettingsTab, TerminalTab } from 'models/tab'
+import { Tab, TerminalTab } from 'models/tab'
 
 import 'angular2-toaster/lib/toaster.css'
 import 'global.less'
@@ -53,6 +54,7 @@ export class AppComponent {
         public hostApp: HostAppService,
         public hotkeys: HotkeysService,
         public config: ConfigService,
+        private pluginDispatcher: PluginDispatcherService,
         log: LogService,
         _quitter: QuitterService,
     ) {
@@ -214,6 +216,7 @@ export class AppComponent {
     }
 
     showSettings() {
+        const SettingsTab = this.pluginDispatcher.temp
         let settingsTab = this.tabs.find((x) => x instanceof SettingsTab)
         if (!settingsTab) {
             settingsTab = new SettingsTab()

app/src/components/titleBar.pug

@@ -0,0 +1,7 @@
+.title((dblclick)='hostApp.toggleMaximize()') Term
+button.btn.btn-secondary.btn-minimize((click)='hostApp.minimize()')
+    i.fa.fa-window-minimize
+button.btn.btn-secondary.btn-maximize((click)='hostApp.toggleMaximize()')
+    i.fa.fa-window-maximize
+button.btn.btn-secondary.btn-close((click)='hostApp.quit()')
+    i.fa.fa-close

app/src/components/titleBar.scss

@@ -0,0 +1,35 @@
+@import '~variables.scss';
+
+$titlebar-height: 30px;
+
+:host {
+    flex: 0 0 $titlebar-height;
+    display: flex;
+
+    .title {
+        flex: auto;
+        padding-left: 15px;
+        line-height: $titlebar-height;
+        -webkit-app-region: drag;
+    }
+
+    button {
+        flex: none;
+        border: none;
+        box-shadow: none;
+        border-radius: 0;
+        font-size: 8px;
+        width: 40px;
+        padding: 0;
+        line-height: $titlebar-height;
+        text-align: center;
+
+        &:not(:hover):not(:active) {
+            background: transparent;
+        }
+    }
+
+    .btn-close {
+        font-size: 12px;
+    }
+}

app/src/components/titleBar.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core'
+import { HostAppService } from 'services/hostApp'
+
+@Component({
+  selector: 'title-bar',
+  template: require('./titleBar.pug'),
+  styles: [require('./titleBar.scss')],
+})
+export class TitleBarComponent {
+    constructor (public hostApp: HostAppService) {
+    }
+}

app/src/models/tab.ts

@@ -2,7 +2,7 @@ import { EventEmitter } from '@angular/core'
 import { BaseTabComponent } from 'components/baseTab'
 import { Session } from 'services/sessions'
 
-declare type ComponentType<T extends Tab> = new (...args: any[]) => BaseTabComponent<T>
+export declare type ComponentType<T extends Tab> = new (...args: any[]) => BaseTabComponent<T>
 
 export class Tab {
     id: number
@@ -24,23 +24,6 @@ export class Tab {
     getComponentType (): ComponentType<Tab> {
         return null
     }
-
-    destroy (): void { }
-}
-
-
-import { SettingsPaneComponent } from 'components/settingsPane'
-
-export class SettingsTab extends Tab {
-    constructor () {
-        super()
-        this.title = 'Settings'
-        this.scrollable = true
-    }
-
-    getComponentType (): ComponentType<SettingsTab> {
-        return SettingsPaneComponent
-    }
 }
 
 
@@ -54,6 +37,4 @@ export class TerminalTab extends Tab {
     getComponentType (): ComponentType<TerminalTab> {
         return TerminalTabComponent
     }
-
-    onFocus (): void { }
 }

app/src/services/pluginDispatcher.ts

@@ -6,7 +6,8 @@ import { ElectronService } from 'services/electron'
 @Injectable()
 export class PluginDispatcherService {
     plugins = []
-
+    temp: any
+    
     constructor (
         private config: ConfigService,
         private electron: ElectronService,

app/src/settings/components/settingsPane.pug

@@ -27,11 +27,11 @@ ngb-tabset(type='tabs')
                         | Custom
                 small.form-text.text-muted Whether a custom window or an OS native window should be used
 
-            .form-group
-                label Dock the terminal
-                br
-                .row
-                    .col.col-auto
+            .row
+                .col.col-auto
+                    .form-group
+                        label Dock the terminal
+                        br
                         div(
                             '[(ngModel)]'='config.store.appearance.dock'
                             '(ngModelChange)'='config.save(); docking.dock()'
@@ -67,7 +67,31 @@ ngb-tabset(type='tabs')
                                     [value]='"bottom"'
                                 )
                                 | Bottom
-                    .col
+
+                    .form-group(*ngIf='config.store.appearance.dock != "off"')
+                        label Display on
+                        br
+                        div(
+                            '[(ngModel)]'='config.store.appearance.dockScreen'
+                            '(ngModelChange)'='config.save(); docking.dock()'
+                            ngbRadioGroup
+                        )
+                            label.btn.btn-secondary
+                                input(
+                                    type='radio',
+                                    [value]='"current"'
+                                )
+                                | Current
+                            label.btn.btn-secondary(*ngFor='let screen of docking.getScreens()')
+                                input(
+                                    type='radio',
+                                    [value]='screen.id'
+                                )
+                                | {{screen.name}}
+                .col.col-auto
+                    .form-group(*ngIf='config.store.appearance.dock != "off"')
+                        label Docked terminal size
+                        br
                         input(
                             type='range',
                             '[(ngModel)]'='config.store.appearance.dockFill',
@@ -76,25 +100,6 @@ ngb-tabset(type='tabs')
                             max='1',
                             step='0.01'
                         )
-                br
-                div(
-                    *ngIf='config.store.appearance.dock != "off"',
-                    '[(ngModel)]'='config.store.appearance.dockScreen'
-                    '(ngModelChange)'='config.save(); docking.dock()'
-                    ngbRadioGroup
-                )
-                    label.btn.btn-secondary
-                        input(
-                            type='radio',
-                            [value]='"current"'
-                        )
-                        | Current
-                    label.btn.btn-secondary(*ngFor='let screen of docking.getScreens()')
-                        input(
-                            type='radio',
-                            [value]='screen.id'
-                        )
-                        | {{screen.name}}
 
     ngb-tab
         template(ngbTabTitle)

app/src/settings/components/settingsPane.ts

@@ -10,7 +10,7 @@ import 'rxjs/add/operator/distinctUntilChanged'
 const childProcessPromise = nodeRequire('child-process-promise')
 
 import { BaseTabComponent } from 'components/baseTab'
-import { SettingsTab } from 'models/tab'
+import { SettingsTab } from '../tab'
 
 
 @Component({

app/src/settings/index.ts

@@ -0,0 +1,42 @@
+import { BrowserModule } from '@angular/platform-browser'
+import { NgModule } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+
+import { HotkeyInputComponent } from './components/hotkeyInput'
+import { HotkeyDisplayComponent } from './components/hotkeyDisplay'
+import { HotkeyHintComponent } from './components/hotkeyHint'
+import { HotkeyInputModalComponent } from './components/hotkeyInputModal'
+import { SettingsPaneComponent } from './components/settingsPane'
+import { PluginDispatcherService } from 'services/pluginDispatcher'
+
+import { SettingsTab } from './tab'
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        FormsModule,
+        NgbModule,
+    ],
+    providers: [
+    ],
+    entryComponents: [
+        HotkeyInputModalComponent,
+        SettingsPaneComponent,
+    ],
+    declarations: [
+        HotkeyDisplayComponent,
+        HotkeyHintComponent,
+        HotkeyInputComponent,
+        HotkeyInputModalComponent,
+        SettingsPaneComponent,
+    ],
+})
+class SettingsModule {
+    constructor (pluginDispatcher: PluginDispatcherService) {
+        pluginDispatcher.temp = SettingsTab
+    }
+}
+
+
+export default SettingsModule

app/src/settings/tab.ts

@@ -0,0 +1,14 @@
+import { Tab, ComponentType } from '../models/tab'
+import { SettingsPaneComponent } from './components/settingsPane'
+
+export class SettingsTab extends Tab {
+    constructor () {
+        super()
+        this.title = 'Settings'
+        this.scrollable = true
+    }
+
+    getComponentType (): ComponentType<SettingsTab> {
+        return SettingsPaneComponent
+    }
+}

app/src/theme.scss

@@ -65,6 +65,18 @@ ngb-tabset .tab-content {
 }
 
 $tab-border-radius: 5px;
+$button-hover-bg: rgba(0, 0, 0, .25);
+$button-active-bg: rgba(0, 0, 0, .5);
+
+title-bar {
+    background: $body-bg2;
+
+    button {
+        &:hover { background: $button-hover-bg !important; }
+        &:active { background: $button-active-bg !important; }
+    }
+}
+
 
 .tabs tab-header {
     background: $body-bg;
@@ -80,13 +92,8 @@ $tab-border-radius: 5px;
             border: none;
             transition: 0.25s all;
 
-            &:hover {
-                background: rgba(0, 0, 0, .25) !important;
-            }
-
-            &:active {
-                background: rgba(0, 0, 0, .5) !important;
-            }
+            &:hover { background: $button-hover-bg !important; }
+            &:active { background: $button-active-bg !important; }
         }
     }
 

tslint.json

@@ -10,8 +10,10 @@
         "no-eval": true,
         "no-invalid-this": true,
         "no-shadowed-variable": true,
+        "no-undef": true,
         "no-unused-expression": true,
         "no-unused-new": true,
+        "no-unused-variable": true,
         "no-use-before-declare": true,
         "no-var-keyword": true,
         "new-parens": true

webpack.config.js

@@ -43,22 +43,22 @@ module.exports = {
             {
               test: /\.less$/,
               loader: "style-loader!css-loader!less-loader",
-              exclude: [/app\/src\/components\//],
+              exclude: [/app\/.*components\//],
             },
             {
               test: /\.less$/,
               loader: "to-string-loader!css-loader!less-loader",
-              include: [/app\/src\/components\//],
+              include: [/app\/.*components\//],
             },
             {
               test: /\.scss$/,
               use: ['style-loader', 'css-loader', 'sass-loader'],
-              exclude: [/app\/src\/components\//],
+              exclude: [/app\/.*components\//],
             },
             {
               test: /\.scss$/,
               use: ['to-string-loader', 'css-loader', 'sass-loader'],
-              include: [/app\/src\/components\//],
+              include: [/app\/.*components\//],
             },
             {
               test: /\.(png|svg)$/,