diff --git a/app/package.json b/app/package.json index 5fd86614..ecee7f12 100644 --- a/app/package.json +++ b/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", diff --git a/app/yarn.lock b/app/yarn.lock index ab1e9057..431cfbcb 100644 --- a/app/yarn.lock +++ b/app/yarn.lock @@ -60,10 +60,12 @@ update-notifier "^2.2.0" yargs "^8.0.2" -"@ng-bootstrap/ng-bootstrap@^6.1.0": - version "6.2.0" - resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-6.2.0.tgz#0506d612ca6002bd8fa398d006fa2641013e11d4" - integrity sha512-wqwhnJFyEwvzWQJjXrEt+7oBTSvu2qPbdYvUFYhDVzOJLWB5M7YEhDAkMrfHQJ0pZNBMGr580FqYue+XiURY0Q== +"@ng-bootstrap/ng-bootstrap@^7.0.2": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-7.0.0.tgz#3bfa62eb52fdb891b1ce693ea11c39127e2d1ab7" + integrity sha512-SxUaptGWJmCxM0d2Zy1mx7K7p/YBwGZ69NmmBQVY4BE6p5av0hWrVmv9rzzfBz0rhxU7RPZLor2Jpaoq8Xyl4w== + dependencies: + tslib "^2.0.0" "@serialport/binding-abstract@^9.0.7": version "9.0.7" diff --git a/terminus-core/src/theme.paper.scss b/terminus-core/src/theme.paper.scss index 5fb59ae9..c3eecd78 100644 --- a/terminus-core/src/theme.paper.scss +++ b/terminus-core/src/theme.paper.scss @@ -108,7 +108,7 @@ window-controls { button:hover { background: rgba($black, 0.125); - + svg { fill: $black; } @@ -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 { - border-right: 1px solid $body-bg; - +settings-tab > .content { & > .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; } diff --git a/terminus-core/src/theme.scss b/terminus-core/src/theme.scss index 4c81d439..104abcfe 100644 --- a/terminus-core/src/theme.scss +++ b/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; } diff --git a/terminus-serial/src/components/editConnectionModal.component.pug b/terminus-serial/src/components/editConnectionModal.component.pug index 405de4d0..6b219897 100644 --- a/terminus-serial/src/components/editConnectionModal.component.pug +++ b/terminus-serial/src/components/editConnectionModal.component.pug @@ -1,8 +1,8 @@ .modal-body - ngb-tabset([activeId]='basic') - ngb-tab(id='basic') - ng-template(ngbTabTitle) General - ng-template(ngbTabContent) + ul.nav-tabs(ngbNav, #nav='ngbNav') + li(ngbNavItem) + a(ngbNavLink) General + 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') - ng-template(ngbTabTitle) Advanced - ng-template(ngbTabContent) + li(ngbNavItem) + a(ngbNavLink) Advanced + ng-template(ngbNavContent) .form-line .header .title Tab color @@ -150,9 +150,9 @@ .title Xany toggle([(ngModel)]='connection.xany') - ngb-tab(id='scripts') - ng-template(ngbTabTitle) Login scripts - ng-template(ngbTabContent) + li(ngbNavItem) + a(ngbNavLink) Login scripts + 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 diff --git a/terminus-settings/src/components/settingsTab.component.pug b/terminus-settings/src/components/settingsTab.component.pug index ecb6a4b7..6d1e2611 100644 --- a/terminus-settings/src/components/settingsTab.component.pug +++ b/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') - ngb-tab(id='application') - ng-template(ngbTabTitle) - i.fas.fa-fw.fa-window-maximize.mr-2 - | Application - ng-template(ngbTabContent) - .d-flex.align-items-center.flex-wrap.mb-4 - h1.terminus-title.mb-2.mr-2 Terminus - sup α +.content + ul.nav-pills(ngbNav, #nav='ngbNav', [activeId]='activeTab', orientation='vertical') + li(ngbNavItem='application') + a(ngbNavLink) + i.fas.fa-fw.fa-window-maximize.mr-2 + | Application + ng-template(ngbNavContent) + .d-flex.align-items-center.flex-wrap.mb-4 + h1.terminus-title.mb-2.mr-2 Terminus + sup α - .text-muted.mr-auto {{homeBase.appVersion}} + .text-muted.mr-auto {{homeBase.appVersion}} - div - button.btn.btn-secondary.mr-3((click)='homeBase.openGitHub()') - i.fab.fa-github - span GitHub + div + button.btn.btn-secondary.mr-3((click)='homeBase.openGitHub()') + i.fab.fa-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 - .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 Enable analytics + .description We're only tracking your Terminus and OS versions. + toggle( + [(ngModel)]='config.store.enableAnalytics', + (ngModelChange)='saveConfiguration(true)', + ) - .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 Automatic Updates + .description Enable automatic installation of updates when they become available. + toggle([(ngModel)]='config.store.enableAutomaticUpdates', (ngModelChange)='saveConfiguration()') - .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 Custom CSS + textarea.form-control( + [(ngModel)]='config.store.appearance.css', + (ngModelChange)='saveConfiguration()', + ) - .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 + li(ngbNavItem='hotkeys') + a(ngbNavLink) + i.fas.fa-fw.fa-keyboard.mr-2 + | Hotkeys + ng-template(ngbNavContent) + h3.mb-3 Hotkeys - toggle( - [(ngModel)]='config.store.appearance.vibrancy', - (ngModelChange)='saveConfiguration()' - ) + .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-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-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()' + ) - .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' - ) + li(*ngFor='let provider of settingsProviders', [ngbNavItem]='provider.id') + a(ngbNavLink) + i(class='fas fa-fw mr-2 fa-{{provider.icon || "puzzle-piece"}}') + | {{provider.title}} + ng-template(ngbNavContent) + settings-tab-body([provider]='provider') - .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()') + li(ngbNavItem='config-file') + a(ngbNavLink) + i.fas.fa-fw.fa-code.mr-2 + | Config file + 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 - .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 + div([ngbNavOutlet]='nav') diff --git a/terminus-settings/src/components/settingsTab.component.scss b/terminus-settings/src/components/settingsTab.component.scss index 2c78f46e..6acae1be 100644 --- a/terminus-settings/src/components/settingsTab.component.scss +++ b/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; diff --git a/terminus-settings/src/components/settingsTab.component.ts b/terminus-settings/src/components/settingsTab.component.ts index 5922fa5e..379c2121 100644 --- a/terminus-settings/src/components/settingsTab.component.ts +++ b/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 { diff --git a/terminus-settings/src/components/settingsTab.deep.component.css b/terminus-settings/src/components/settingsTab.deep.component.css deleted file mode 100644 index 0ce43181..00000000 --- a/terminus-settings/src/components/settingsTab.deep.component.css +++ /dev/null @@ -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; -} diff --git a/terminus-ssh/src/components/editConnectionModal.component.pug b/terminus-ssh/src/components/editConnectionModal.component.pug index a74fea91..357a1ec7 100644 --- a/terminus-ssh/src/components/editConnectionModal.component.pug +++ b/terminus-ssh/src/components/editConnectionModal.component.pug @@ -1,8 +1,8 @@ .modal-body - ngb-tabset([activeId]='basic') - ngb-tab(id='basic') - ng-template(ngbTabTitle) General - ng-template(ngbTabContent) + ul.nav-tabs(ngbNav, #nav='ngbNav') + li(ngbNavItem) + a(ngbNavLink) General + 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') - ng-template(ngbTabTitle) Advanced - ng-template(ngbTabContent) + li(ngbNavItem) + a(ngbNavLink) Advanced + 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') - ng-template(ngbTabTitle) Ciphers - ng-template(ngbTabContent) + li(ngbNavItem) + a(ngbNavLink) Ciphers + 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]') - - ngb-tab(id='scripts') - ng-template(ngbTabTitle) Login scripts - ng-template(ngbTabContent) + li(ngbNavItem) + a(ngbNavLink) Login scripts + ng-template(ngbNavContent) 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