bump ng-bootstrap

app/package.json

@@ -21,7 +21,7 @@
     "@angular/forms": "^11.1.1",
     "@angular/platform-browser": "^11.1.1",
     "@angular/platform-browser-dynamic": "^11.1.1",
-    "@ng-bootstrap/ng-bootstrap": "^6.1.0",
+    "@ng-bootstrap/ng-bootstrap": "^7.0.2",
     "@terminus-term/node-pty": "0.10.0-terminus.3",
     "electron-config": "2.0.0",
     "electron-debug": "^3.2.0",

app/yarn.lock

@@ -60,10 +60,12 @@
     update-notifier "^2.2.0"
     yargs "^8.0.2"
 
-"@ng-bootstrap/ng-bootstrap@^6.1.0":
+"@ng-bootstrap/ng-bootstrap@^7.0.2":
-  version "6.2.0"
+  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-6.2.0.tgz#0506d612ca6002bd8fa398d006fa2641013e11d4"
+  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-7.0.0.tgz#3bfa62eb52fdb891b1ce693ea11c39127e2d1ab7"
-  integrity sha512-wqwhnJFyEwvzWQJjXrEt+7oBTSvu2qPbdYvUFYhDVzOJLWB5M7YEhDAkMrfHQJ0pZNBMGr580FqYue+XiURY0Q==
+  integrity sha512-SxUaptGWJmCxM0d2Zy1mx7K7p/YBwGZ69NmmBQVY4BE6p5av0hWrVmv9rzzfBz0rhxU7RPZLor2Jpaoq8Xyl4w==
+  dependencies:
+    tslib "^2.0.0"
 
 "@serialport/binding-abstract@^9.0.7":
   version "9.0.7"

terminus-core/src/theme.paper.scss

@@ -132,8 +132,6 @@ body {
 app-root  {
     &> .content {
         .tab-bar {
-            height: 40px;
-
             .btn-tab-bar {
                 background: transparent;
                 line-height: 42px;
@@ -230,11 +228,10 @@ tab-body {
     background: $content-bg;
 }
 
-settings-tab > ngb-tabset {
+settings-tab > .content {
-    border-right: 1px solid $body-bg;
-
     & > .nav {
         background: rgba(0, 0, 0, 0.25);
+        border-right: 1px solid $body-bg;
 
         & > .nav-item > .nav-link {
             border: none;
@@ -317,10 +314,6 @@ hotkey-input-modal {
     }
 }
 
-ngb-tabset .tab-content {
-    padding-top: 20px;
-}
-
 [ngbradiogroup] > label.active {
     background: $blue;
 }

terminus-core/src/theme.scss

@@ -135,30 +135,6 @@ tab-body {
     background: $content-bg;
 }
 
-settings-tab > ngb-tabset {
-    border-right: 1px solid $body-bg;
-
-    & > .nav {
-        background: rgba(0, 0, 0, 0.25);
-        flex-shrink: 0;
-
-        & > .nav-item > .nav-link {
-            border: none;
-            padding: 10px 50px 10px 20px;
-            font-size: 14px;
-            border-radius: 0;
-
-            &:not(.active) {
-                color: $body-color;
-
-                &:hover {
-                    color: $white;
-                }
-            }
-        }
-    }
-}
-
 multi-hotkey-input {
     .item {
         background: $body-bg2;
@@ -221,10 +197,6 @@ hotkey-input-modal {
     margin-bottom: 2px;
 }
 
-ngb-tabset .tab-content {
-    padding-top: 20px;
-}
-
 [ngbradiogroup] > label.active {
     background: $blue;
 }

terminus-serial/src/components/editConnectionModal.component.pug

@@ -1,8 +1,8 @@
 .modal-body
-    ngb-tabset([activeId]='basic')
+    ul.nav-tabs(ngbNav, #nav='ngbNav')
-        ngb-tab(id='basic')
+        li(ngbNavItem)
-            ng-template(ngbTabTitle) General
+            a(ngbNavLink) General
-            ng-template(ngbTabContent)
+            ng-template(ngbNavContent)
                 .form-group
                     label Name
                     input.form-control(
@@ -90,9 +90,9 @@
                             )
                                 option([ngValue]='mode.key', *ngFor='let mode of newlineModes') {{mode.name}}
 
-        ngb-tab(id='advanced')
+        li(ngbNavItem)
-            ng-template(ngbTabTitle) Advanced
+            a(ngbNavLink) Advanced
-            ng-template(ngbTabContent)
+            ng-template(ngbNavContent)
                 .form-line
                     .header
                         .title Tab color
@@ -150,9 +150,9 @@
                         .title Xany
                     toggle([(ngModel)]='connection.xany')
 
-        ngb-tab(id='scripts')
+        li(ngbNavItem)
-            ng-template(ngbTabTitle) Login scripts
+            a(ngbNavLink) Login scripts
-            ng-template(ngbTabContent)
+            ng-template(ngbNavContent)
                 table(*ngIf='connection.scripts.length > 0')
                     tr
                         th String to expect
@@ -192,6 +192,8 @@
                     i.fas.fa-plus
                     span New item
 
+    div([ngbNavOutlet]='nav')
+
 .modal-footer
     button.btn.btn-outline-primary((click)='save()') Save
     button.btn.btn-outline-danger((click)='cancel()') Cancel

terminus-settings/src/components/settingsTab.component.pug

@@ -1,385 +1,387 @@
 button.btn.btn-outline-warning.btn-block(*ngIf='config.restartRequested', '(click)'='restartApp()') Restart the app to apply changes
 
-ngb-tabset.vertical(type='pills', [activeId]='activeTab')
+.content
-    ngb-tab(id='application')
+    ul.nav-pills(ngbNav, #nav='ngbNav', [activeId]='activeTab', orientation='vertical')
-        ng-template(ngbTabTitle)
+        li(ngbNavItem='application')
-            i.fas.fa-fw.fa-window-maximize.mr-2
+            a(ngbNavLink)
-            | Application
+                i.fas.fa-fw.fa-window-maximize.mr-2
-        ng-template(ngbTabContent)
+                | Application
-            .d-flex.align-items-center.flex-wrap.mb-4
+            ng-template(ngbNavContent)
-                h1.terminus-title.mb-2.mr-2 Terminus
+                .d-flex.align-items-center.flex-wrap.mb-4
-                    sup α
+                    h1.terminus-title.mb-2.mr-2 Terminus
+                        sup α
 
-                .text-muted.mr-auto {{homeBase.appVersion}}
+                    .text-muted.mr-auto {{homeBase.appVersion}}
 
-                div
+                    div
-                    button.btn.btn-secondary.mr-3((click)='homeBase.openGitHub()')
+                        button.btn.btn-secondary.mr-3((click)='homeBase.openGitHub()')
-                        i.fab.fa-github
+                            i.fab.fa-github
-                        span GitHub
+                            span GitHub
 
-                    button.btn.btn-secondary((click)='homeBase.reportBug()')
+                        button.btn.btn-secondary((click)='homeBase.reportBug()')
+                            i.fas.fa-bug
+                            span Report a problem
+
+                .form-line
+                    .header
+                        .title Theme
+                    select.form-control(
+                        [(ngModel)]='config.store.appearance.theme',
+                        (ngModelChange)='saveConfiguration()',
+                    )
+                        option(*ngFor='let theme of themes', [ngValue]='theme.name') {{theme.name}}
+
+                .form-line
+                    .header
+                        .title Tabs location
+                    .btn-group(
+                        [(ngModel)]='config.store.appearance.tabsLocation',
+                        (ngModelChange)='saveConfiguration()',
+                        ngbRadioGroup
+                    )
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='"top"'
+                            )
+                            | Top
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='"bottom"'
+                            )
+                            | Bottom
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='"left"'
+                            )
+                            | Left
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='"right"'
+                            )
+                            | Right
+
+                .form-line
+                    .header
+                        .title Tabs width
+                    .btn-group(
+                        [(ngModel)]='config.store.appearance.flexTabs',
+                        (ngModelChange)='saveConfiguration()',
+                        ngbRadioGroup
+                    )
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='true'
+                            )
+                            | Dynamic
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='false'
+                            )
+                            | Fixed
+
+                .form-line
+                    .header
+                        .title(*ngIf='hostApp.platform !== Platform.macOS') Acrylic background
+                        .title(*ngIf='hostApp.platform === Platform.macOS') Vibrancy
+                        .description Gives the window a blurred transparent background
+
+                    toggle(
+                        [(ngModel)]='config.store.appearance.vibrancy',
+                        (ngModelChange)='saveConfiguration()'
+                    )
+
+                .form-line(*ngIf='config.store.appearance.vibrancy && isFluentVibrancySupported')
+                    .header
+                        .title Background type
+                    .btn-group(
+                        [(ngModel)]='config.store.appearance.vibrancyType',
+                        (ngModelChange)='saveConfiguration()',
+                        ngbRadioGroup
+                    )
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='"blur"'
+                            )
+                            | Blur
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='"fluent"'
+                            )
+                            | Fluent
+
+                .form-line
+                    .header
+                        .title Opacity
+                    input(
+                        type='range',
+                        [(ngModel)]='config.store.appearance.opacity',
+                        (ngModelChange)='saveConfiguration(); (hostApp.platform === Platform.Linux && config.requestRestart())',
+                        min='0.4',
+                        max='1',
+                        step='0.01'
+                    )
+
+                .form-line(*ngIf='hostApp.platform !== Platform.Linux')
+                    .header
+                        .title Shell integration
+                        .description Allows quickly opening a terminal in the selected folder
+                    toggle([ngModel]='isShellIntegrationInstalled', (ngModelChange)='toggleShellIntegration()')
+
+                .form-line
+                    .header
+                        .title Window frame
+                        .description Whether a custom window or an OS native window should be used
+
+                    .btn-group(
+                        [(ngModel)]='config.store.appearance.frame',
+                        (ngModelChange)='saveConfiguration(true)',
+                        ngbRadioGroup
+                    )
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='"native"'
+                            )
+                            | Native
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='"thin"'
+                            )
+                            | Thin
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='"full"'
+                            )
+                            | Full
+
+                .form-line
+                    .header
+                        .title Dock the terminal
+                        .description Snaps the window to a side of the screen
+
+                    .btn-group(
+                        [(ngModel)]='config.store.appearance.dock',
+                        (ngModelChange)='saveConfiguration(); docking.dock()',
+                        ngbRadioGroup
+                    )
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='"off"'
+                            )
+                            | Off
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='"top"'
+                            )
+                            | Top
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='"left"'
+                            )
+                            | Left
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='"right"'
+                            )
+                            | Right
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='"bottom"'
+                            )
+                            | Bottom
+
+                .ml-5.form-line(*ngIf='config.store.appearance.dock != "off"')
+                    .header
+                        .title Display on
+                        .description Snaps the window to a side of the screen
+
+                    div(
+                        [(ngModel)]='config.store.appearance.dockScreen',
+                        (ngModelChange)='saveConfiguration(); docking.dock()',
+                        ngbRadioGroup
+                    )
+                        label.btn.btn-secondary(ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                value='current'
+                            )
+                            | Current
+                        label.btn.btn-secondary(*ngFor='let screen of screens', ngbButtonLabel)
+                            input(
+                                type='radio',
+                                ngbButton,
+                                [value]='screen.id'
+                            )
+                            | {{screen.name}}
+
+                .ml-5.form-line(*ngIf='config.store.appearance.dock != "off"')
+                    .header
+                        .title Dock always on top
+                        .description Keep docked terminal always on top
+                    toggle(
+                        [(ngModel)]='config.store.appearance.dockAlwaysOnTop',
+                        (ngModelChange)='saveConfiguration(); docking.dock()',
+                    )
+
+                .ml-5.form-line(*ngIf='config.store.appearance.dock != "off"')
+                    .header
+                        .title Docked terminal size
+                    input(
+                        type='range',
+                        [(ngModel)]='config.store.appearance.dockFill',
+                        (mouseup)='saveConfiguration(); docking.dock()',
+                        min='0.05',
+                        max='1',
+                        step='0.01'
+                    )
+
+                .ml-5.form-line(*ngIf='config.store.appearance.dock != "off"')
+                    .header
+                        .title Docked terminal space
+                    input(
+                        type='range',
+                        [(ngModel)]='config.store.appearance.dockSpace',
+                        (mouseup)='saveConfiguration(); docking.dock()',
+                        min='0.2',
+                        max='1',
+                        step='0.01'
+                    )
+
+                .ml-5.form-line(*ngIf='config.store.appearance.dock != "off"')
+                    .header
+                        .title Hide dock on blur
+                        .description Hides the docked terminal when you click away.
+                    toggle(
+                        [(ngModel)]='config.store.appearance.dockHideOnBlur',
+                        (ngModelChange)='saveConfiguration(); ',
+                    )
+
+                .form-line
+                    .header
+                        .title Debugging
+
+                    button.btn.btn-secondary((click)='hostApp.openDevTools()')
                         i.fas.fa-bug
-                        span Report a problem
+                        span Open DevTools
 
-            .form-line
+                .form-line
-                .header
+                    .header
-                    .title Theme
+                        .title Enable analytics
-                select.form-control(
+                        .description We're only tracking your Terminus and OS versions.
-                    [(ngModel)]='config.store.appearance.theme',
+                    toggle(
-                    (ngModelChange)='saveConfiguration()',
+                        [(ngModel)]='config.store.enableAnalytics',
-                )
+                        (ngModelChange)='saveConfiguration(true)',
-                    option(*ngFor='let theme of themes', [ngValue]='theme.name') {{theme.name}}
+                    )
 
-            .form-line
+                .form-line
-                .header
+                    .header
-                    .title Tabs location
+                        .title Automatic Updates
-                .btn-group(
+                        .description Enable automatic installation of updates when they become available.
-                    [(ngModel)]='config.store.appearance.tabsLocation',
+                    toggle([(ngModel)]='config.store.enableAutomaticUpdates', (ngModelChange)='saveConfiguration()')
-                    (ngModelChange)='saveConfiguration()',
-                    ngbRadioGroup
-                )
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"top"'
-                        )
-                        | Top
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"bottom"'
-                        )
-                        | Bottom
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"left"'
-                        )
-                        | Left
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"right"'
-                        )
-                        | Right
 
-            .form-line
+                .form-line
-                .header
+                    .header
-                    .title Tabs width
+                        .title Custom CSS
-                .btn-group(
+                    textarea.form-control(
-                    [(ngModel)]='config.store.appearance.flexTabs',
+                        [(ngModel)]='config.store.appearance.css',
-                    (ngModelChange)='saveConfiguration()',
+                        (ngModelChange)='saveConfiguration()',
-                    ngbRadioGroup
+                    )
-                )
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='true'
-                        )
-                        | Dynamic
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='false'
-                        )
-                        | Fixed
 
-            .form-line
+        li(ngbNavItem='hotkeys')
-                .header
+            a(ngbNavLink)
-                    .title(*ngIf='hostApp.platform !== Platform.macOS') Acrylic background
+                i.fas.fa-fw.fa-keyboard.mr-2
-                    .title(*ngIf='hostApp.platform === Platform.macOS') Vibrancy
+                | Hotkeys
-                    .description Gives the window a blurred transparent background
+            ng-template(ngbNavContent)
+                h3.mb-3 Hotkeys
 
-                toggle(
+                .input-group.mb-4
-                    [(ngModel)]='config.store.appearance.vibrancy',
+                    .input-group-prepend
-                    (ngModelChange)='saveConfiguration()'
+                        .input-group-text
-                )
+                            i.fas.fa-fw.fa-search
+                    input.form-control(type='search', placeholder='Search hotkeys', [(ngModel)]='hotkeyFilter')
 
-            .form-line(*ngIf='config.store.appearance.vibrancy && isFluentVibrancySupported')
+                .form-group
-                .header
+                    table.hotkeys-table
-                    .title Background type
+                        tr
-                .btn-group(
+                            th Name
-                    [(ngModel)]='config.store.appearance.vibrancyType',
+                            th ID
-                    (ngModelChange)='saveConfiguration()',
+                            th Hotkey
-                    ngbRadioGroup
+                        ng-container(*ngFor='let hotkey of hotkeyDescriptions')
-                )
+                            tr(*ngIf='!hotkeyFilter || hotkeyFilterFn(hotkey, hotkeyFilter)')
-                    label.btn.btn-secondary(ngbButtonLabel)
+                                td {{hotkey.name}}
-                        input(
+                                td {{hotkey.id}}
-                            type='radio',
+                                td.pr-5
-                            ngbButton,
+                                    multi-hotkey-input(
-                            [value]='"blur"'
+                                        [model]='getHotkey(hotkey.id) || []',
-                        )
+                                        (modelChange)='setHotkey(hotkey.id, $event); saveConfiguration(); docking.dock()'
-                        | Blur
+                                    )
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"fluent"'
-                        )
-                        | Fluent
 
-            .form-line
+        li(*ngFor='let provider of settingsProviders', [ngbNavItem]='provider.id')
-                .header
+            a(ngbNavLink)
-                    .title Opacity
+                i(class='fas fa-fw mr-2 fa-{{provider.icon || "puzzle-piece"}}')
-                input(
+                | {{provider.title}}
-                    type='range',
+            ng-template(ngbNavContent)
-                    [(ngModel)]='config.store.appearance.opacity',
+                settings-tab-body([provider]='provider')
-                    (ngModelChange)='saveConfiguration(); (hostApp.platform === Platform.Linux && config.requestRestart())',
-                    min='0.4',
-                    max='1',
-                    step='0.01'
-                )
 
-            .form-line(*ngIf='hostApp.platform !== Platform.Linux')
+        li(ngbNavItem='config-file')
-                .header
+            a(ngbNavLink)
-                    .title Shell integration
+                i.fas.fa-fw.fa-code.mr-2
-                    .description Allows quickly opening a terminal in the selected folder
+                | Config file
-                toggle([ngModel]='isShellIntegrationInstalled', (ngModelChange)='toggleShellIntegration()')
+            ng-template.test(ngbNavContent)
+                .d-flex.flex-column.w-100.h-100
+                    .h-100.d-flex
+                        .w-100.d-flex.flex-column
+                            h3 Config File
+                            textarea.form-control.h-100(
+                                [(ngModel)]='configFile'
+                            )
+                        .w-100.d-flex.flex-column
+                            h3 Defaults
+                            textarea.form-control.h-100(
+                                [(ngModel)]='configDefaults',
+                                readonly
+                            )
+                    .mt-2.mb-2.d-flex
+                        button.btn.btn-primary((click)='saveConfigFile()', *ngIf='isConfigFileValid()')
+                            i.fas.fa-check.mr-2
+                            | Save and apply
+                        button.btn.btn-primary(disabled, *ngIf='!isConfigFileValid()')
+                            i.fas.fa-exclamation-triangle.mr-2
+                            | Invalid syntax
+                        button.btn.btn-secondary.ml-auto((click)='showConfigFile()')
+                            i.fas.fa-external-link-square-alt.mr-2
+                            | Show config file
 
-            .form-line
+    div([ngbNavOutlet]='nav')
-                .header
-                    .title Window frame
-                    .description Whether a custom window or an OS native window should be used
-
-                .btn-group(
-                    [(ngModel)]='config.store.appearance.frame',
-                    (ngModelChange)='saveConfiguration(true)',
-                    ngbRadioGroup
-                )
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"native"'
-                        )
-                        | Native
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"thin"'
-                        )
-                        | Thin
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"full"'
-                        )
-                        | Full
-
-            .form-line
-                .header
-                    .title Dock the terminal
-                    .description Snaps the window to a side of the screen
-
-                .btn-group(
-                    [(ngModel)]='config.store.appearance.dock',
-                    (ngModelChange)='saveConfiguration(); docking.dock()',
-                    ngbRadioGroup
-                )
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"off"'
-                        )
-                        | Off
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"top"'
-                        )
-                        | Top
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"left"'
-                        )
-                        | Left
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"right"'
-                        )
-                        | Right
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='"bottom"'
-                        )
-                        | Bottom
-
-            .ml-5.form-line(*ngIf='config.store.appearance.dock != "off"')
-                .header
-                    .title Display on
-                    .description Snaps the window to a side of the screen
-
-                div(
-                    [(ngModel)]='config.store.appearance.dockScreen',
-                    (ngModelChange)='saveConfiguration(); docking.dock()',
-                    ngbRadioGroup
-                )
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            value='current'
-                        )
-                        | Current
-                    label.btn.btn-secondary(*ngFor='let screen of screens', ngbButtonLabel)
-                        input(
-                            type='radio',
-                            ngbButton,
-                            [value]='screen.id'
-                        )
-                        | {{screen.name}}
-
-            .ml-5.form-line(*ngIf='config.store.appearance.dock != "off"')
-                .header
-                    .title Dock always on top
-                    .description Keep docked terminal always on top
-                toggle(
-                    [(ngModel)]='config.store.appearance.dockAlwaysOnTop',
-                    (ngModelChange)='saveConfiguration(); docking.dock()',
-                )
-
-            .ml-5.form-line(*ngIf='config.store.appearance.dock != "off"')
-                .header
-                    .title Docked terminal size
-                input(
-                    type='range',
-                    [(ngModel)]='config.store.appearance.dockFill',
-                    (mouseup)='saveConfiguration(); docking.dock()',
-                    min='0.05',
-                    max='1',
-                    step='0.01'
-                )
-
-            .ml-5.form-line(*ngIf='config.store.appearance.dock != "off"')
-                .header
-                    .title Docked terminal space
-                input(
-                    type='range',
-                    [(ngModel)]='config.store.appearance.dockSpace',
-                    (mouseup)='saveConfiguration(); docking.dock()',
-                    min='0.2',
-                    max='1',
-                    step='0.01'
-                )
-
-            .ml-5.form-line(*ngIf='config.store.appearance.dock != "off"')
-                .header
-                    .title Hide dock on blur
-                    .description Hides the docked terminal when you click away.
-                toggle(
-                    [(ngModel)]='config.store.appearance.dockHideOnBlur',
-                    (ngModelChange)='saveConfiguration(); ',
-                )
-
-            .form-line
-                .header
-                    .title Debugging
-
-                button.btn.btn-secondary((click)='hostApp.openDevTools()')
-                    i.fas.fa-bug
-                    span Open DevTools
-
-            .form-line
-                .header
-                    .title Enable analytics
-                    .description We're only tracking your Terminus and OS versions.
-                toggle(
-                    [(ngModel)]='config.store.enableAnalytics',
-                    (ngModelChange)='saveConfiguration(true)',
-                )
-
-            .form-line
-                .header
-                    .title Automatic Updates
-                    .description Enable automatic installation of updates when they become available.
-                toggle([(ngModel)]='config.store.enableAutomaticUpdates', (ngModelChange)='saveConfiguration()')
-
-            .form-line
-                .header
-                    .title Custom CSS
-                textarea.form-control(
-                    [(ngModel)]='config.store.appearance.css',
-                    (ngModelChange)='saveConfiguration()',
-                )
-
-    ngb-tab(id='hotkeys')
-        ng-template(ngbTabTitle)
-            i.fas.fa-fw.fa-keyboard.mr-2
-            | Hotkeys
-        ng-template(ngbTabContent)
-            h3.mb-3 Hotkeys
-
-            .input-group.mb-4
-                .input-group-prepend
-                    .input-group-text
-                        i.fas.fa-fw.fa-search
-                input.form-control(type='search', placeholder='Search hotkeys', [(ngModel)]='hotkeyFilter')
-
-            .form-group
-                table.hotkeys-table
-                    tr
-                        th Name
-                        th ID
-                        th Hotkey
-                    ng-container(*ngFor='let hotkey of hotkeyDescriptions')
-                        tr(*ngIf='!hotkeyFilter || hotkeyFilterFn(hotkey, hotkeyFilter)')
-                            td {{hotkey.name}}
-                            td {{hotkey.id}}
-                            td.pr-5
-                                multi-hotkey-input(
-                                    [model]='getHotkey(hotkey.id) || []',
-                                    (modelChange)='setHotkey(hotkey.id, $event); saveConfiguration(); docking.dock()'
-                                )
-
-    ngb-tab(*ngFor='let provider of settingsProviders', [id]='provider.id')
-        ng-template(ngbTabTitle)
-            i(class='fas fa-fw mr-2 fa-{{provider.icon || "puzzle-piece"}}')
-            | {{provider.title}}
-        ng-template(ngbTabContent)
-            settings-tab-body([provider]='provider')
-
-
-    ngb-tab(id='config-file')
-        ng-template(ngbTabTitle)
-            i.fas.fa-fw.fa-code.mr-2
-            | Config file
-        ng-template.test(ngbTabContent)
-            .d-flex.flex-column.w-100.h-100
-                .h-100.d-flex
-                    .w-100.d-flex.flex-column
-                        h3 Config File
-                        textarea.form-control.h-100(
-                            [(ngModel)]='configFile'
-                        )
-                    .w-100.d-flex.flex-column
-                        h3 Defaults
-                        textarea.form-control.h-100(
-                            [(ngModel)]='configDefaults',
-                            readonly
-                        )
-                .mt-2.mb-2.d-flex
-                    button.btn.btn-primary((click)='saveConfigFile()', *ngIf='isConfigFileValid()')
-                        i.fas.fa-check.mr-2
-                        | Save and apply
-                    button.btn.btn-primary(disabled, *ngIf='!isConfigFileValid()')
-                        i.fas.fa-exclamation-triangle.mr-2
-                        | Invalid syntax
-                    button.btn.btn-secondary.ml-auto((click)='showConfigFile()')
-                        i.fas.fa-external-link-square-alt.mr-2
-                        | Show config file

terminus-settings/src/components/settingsTab.component.scss

@@ -1,15 +1,40 @@
 :host {
     display: flex;
-    flex-direction: column;
     flex: auto;
+    flex-direction: column;
 
     >.btn-block {
         margin: 20px;
         width: auto;
         flex: none;
     }
+
+    > .content {
+        display: flex;
+        min-height: 0;
+        flex: 1 0 0;
+
+        > .nav {
+            padding: 20px 10px;
+        }
+
+        > .tab-content {
+            flex: auto;
+            padding: 20px 30px;
+            overflow-y: auto;
+
+            > .tab-pane {
+                height: 100%;
+            }
+        }
+    }
+
+    &.pad-window-controls > .content > .nav {
+        padding-top: 40px;
+    }
 }
 
+
 .hotkeys-table {
     margin-top: 30px;
 

terminus-settings/src/components/settingsTab.component.ts

@@ -27,7 +27,6 @@ import { SettingsTabProvider } from '../api'
     template: require('./settingsTab.component.pug'),
     styles: [
         require('./settingsTab.component.scss'),
-        require('./settingsTab.deep.component.css'),
     ],
 })
 export class SettingsTabComponent extends BaseTabComponent {

terminus-settings/src/components/settingsTab.deep.component.css

@@ -1,28 +0,0 @@
-:host /deep/ ngb-tabset {
-    flex: auto;
-    display: flex;
-    height: 100%;
-}
-
-:host /deep/ ngb-tabset > .nav {
-    display: block;
-    overflow-y: auto;
-}
-
-:host /deep/ ngb-tabset > .tab-content {
-    padding: 15px 30px;
-    margin: 0;
-    overflow-y: auto;
-    height: 100%;
-    flex: auto;
-    display: flex;
-    position: relative;
-}
-
-:host /deep/ ngb-tabset > .tab-content > .tab-pane {
-    width: 100%;
-}
-
-:host.pad-window-controls /deep/ ngb-tabset > .nav {
-    padding-top: 40px;
-}

terminus-ssh/src/components/editConnectionModal.component.pug

@@ -1,8 +1,8 @@
 .modal-body
-    ngb-tabset([activeId]='basic')
+    ul.nav-tabs(ngbNav, #nav='ngbNav')
-        ngb-tab(id='basic')
+        li(ngbNavItem)
-            ng-template(ngbTabTitle) General
+            a(ngbNavLink) General
-            ng-template(ngbTabContent)
+            ng-template(ngbNavContent)
                 .form-group
                     label Name
                     input.form-control(
@@ -96,9 +96,9 @@
                             button.btn.btn-secondary((click)='selectPrivateKey()')
                                 i.fas.fa-folder-open
 
-        ngb-tab(id='advanced')
+        li(ngbNavItem)
-            ng-template(ngbTabTitle) Advanced
+            a(ngbNavLink) Advanced
-            ng-template(ngbTabContent)
+            ng-template(ngbNavContent)
                 .form-line
                     .header
                         .title Jump host
@@ -113,7 +113,7 @@
 
                 .form-line
                     .header
-                        .title Agent Forwarding
+                        .title Agent forwarding
                     toggle([(ngModel)]='connection.agentForward')
 
                 .form-line
@@ -165,9 +165,9 @@
                         [(ngModel)]='connection.readyTimeout',
                     )
 
-        ngb-tab(id='ciphers')
+        li(ngbNavItem)
-            ng-template(ngbTabTitle) Ciphers
+            a(ngbNavLink) Ciphers
-            ng-template(ngbTabContent)
+            ng-template(ngbNavContent)
                 .form-line.align-items-start
                     .header
                         .title Ciphers
@@ -196,10 +196,9 @@
                         div(*ngFor='let alg of supportedAlgorithms.serverHostKey')
                             checkbox([text]='alg', [(ngModel)]='algorithms.serverHostKey[alg]')
 
-
+        li(ngbNavItem)
-        ngb-tab(id='scripts')
+            a(ngbNavLink) Login scripts
-            ng-template(ngbTabTitle) Login scripts
+            ng-template(ngbNavContent)
-            ng-template(ngbTabContent)
                 table(*ngIf='connection.scripts.length > 0')
                     tr
                         th String to expect
@@ -239,6 +238,8 @@
                     i.fas.fa-plus
                     span New item
 
+    div([ngbNavOutlet]='nav')
+
 .modal-footer
     button.btn.btn-outline-primary((click)='save()') Save
     button.btn.btn-outline-danger((click)='cancel()') Cancel