From f0e96b5f8b52f99fa46c558b9f817aa7a56b0fa8 Mon Sep 17 00:00:00 2001 From: Eugene Pankov Date: Sun, 24 Oct 2021 22:50:21 +0200 Subject: [PATCH] settings UI tweaks --- app/src/global.scss | 4 + .../components/shellSettingsTab.component.ts | 4 +- .../pluginsSettingsTab.component.ts | 4 +- tabby-settings/src/api.ts | 2 + .../configSyncSettingsTab.component.ts | 4 +- .../profilesSettingsTab.component.ts | 4 +- .../src/components/settingsTab.component.pug | 138 ++++++++------- .../src/components/settingsTab.component.scss | 6 +- .../src/components/settingsTab.component.ts | 2 +- .../components/vaultSettingsTab.component.ts | 4 +- .../components/windowSettingsTab.component.ts | 4 +- tabby-settings/src/settings.ts | 3 +- .../components/sshSettingsTab.component.ts | 4 +- .../appearanceSettingsTab.component.pug | 167 +++++++++--------- .../colorSchemeSettingsTab.component.ts | 4 +- .../terminalSettingsTab.component.ts | 4 +- 16 files changed, 200 insertions(+), 158 deletions(-) diff --git a/app/src/global.scss b/app/src/global.scss index db49bca8..edfb32cc 100644 --- a/app/src/global.scss +++ b/app/src/global.scss @@ -163,6 +163,10 @@ ngb-typeahead-window { margin: -7px 0; } +.content-box { + max-width: 600px; +} + // Windows high contrast mode @media screen and (forced-colors: active) { diff --git a/tabby-local/src/components/shellSettingsTab.component.ts b/tabby-local/src/components/shellSettingsTab.component.ts index 940af1be..624aed7c 100644 --- a/tabby-local/src/components/shellSettingsTab.component.ts +++ b/tabby-local/src/components/shellSettingsTab.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core' +import { Component, HostBinding } from '@angular/core' import { WIN_BUILD_CONPTY_SUPPORTED, WIN_BUILD_CONPTY_STABLE, isWindowsBuild, ConfigService } from 'tabby-core' /** @hidden */ @@ -9,6 +9,8 @@ export class ShellSettingsTabComponent { isConPTYAvailable: boolean isConPTYStable: boolean + @HostBinding('class.content-box') true + constructor ( public config: ConfigService, ) { diff --git a/tabby-plugin-manager/src/components/pluginsSettingsTab.component.ts b/tabby-plugin-manager/src/components/pluginsSettingsTab.component.ts index b55b0066..7ec6102e 100644 --- a/tabby-plugin-manager/src/components/pluginsSettingsTab.component.ts +++ b/tabby-plugin-manager/src/components/pluginsSettingsTab.component.ts @@ -2,7 +2,7 @@ import { BehaviorSubject, Observable, debounceTime, distinctUntilChanged, first, tap, flatMap, map } from 'rxjs' import semverGt from 'semver/functions/gt' -import { Component, Input } from '@angular/core' +import { Component, HostBinding, Input } from '@angular/core' import { ConfigService, PlatformService, PluginInfo } from 'tabby-core' import { PluginManagerService } from '../services/pluginManager.service' @@ -25,6 +25,8 @@ export class PluginsSettingsTabComponent { @Input() erroredPlugin: string @Input() errorMessage: string + @HostBinding('class.content-box') true + constructor ( private config: ConfigService, private platform: PlatformService, diff --git a/tabby-settings/src/api.ts b/tabby-settings/src/api.ts index 9f7f4cd3..19ae4492 100644 --- a/tabby-settings/src/api.ts +++ b/tabby-settings/src/api.ts @@ -5,6 +5,8 @@ export abstract class SettingsTabProvider { id: string icon: string title: string + weight = 0 + prioritized = false getComponentType (): any { return null diff --git a/tabby-settings/src/components/configSyncSettingsTab.component.ts b/tabby-settings/src/components/configSyncSettingsTab.component.ts index bd3ca4ae..1d0a186b 100644 --- a/tabby-settings/src/components/configSyncSettingsTab.component.ts +++ b/tabby-settings/src/components/configSyncSettingsTab.component.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/explicit-module-boundary-types */ -import { Component } from '@angular/core' +import { Component, HostBinding } from '@angular/core' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { BaseComponent, ConfigService, PromptModalComponent, HostAppService, PlatformService, NotificationsService } from 'tabby-core' import { Config, ConfigSyncService } from '../services/configSync.service' @@ -15,6 +15,8 @@ export class ConfigSyncSettingsTabComponent extends BaseComponent { connectionError: Error|null = null configs: Config[]|null = null + @HostBinding('class.content-box') true + constructor ( public config: ConfigService, public platform: PlatformService, diff --git a/tabby-settings/src/components/profilesSettingsTab.component.ts b/tabby-settings/src/components/profilesSettingsTab.component.ts index 3eb3f755..60cdf611 100644 --- a/tabby-settings/src/components/profilesSettingsTab.component.ts +++ b/tabby-settings/src/components/profilesSettingsTab.component.ts @@ -1,7 +1,7 @@ import { v4 as uuidv4 } from 'uuid' import slugify from 'slugify' import deepClone from 'clone-deep' -import { Component, Inject } from '@angular/core' +import { Component, HostBinding, Inject } from '@angular/core' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { ConfigService, HostAppService, Profile, SelectorService, ProfilesService, PromptModalComponent, PlatformService, BaseComponent, PartialProfile, ProfileProvider } from 'tabby-core' import { EditProfileModalComponent } from './editProfileModal.component' @@ -25,6 +25,8 @@ export class ProfilesSettingsTabComponent extends BaseComponent { profileGroups: ProfileGroup[] filter = '' + @HostBinding('class.content-box') true + constructor ( public config: ConfigService, public hostApp: HostAppService, diff --git a/tabby-settings/src/components/settingsTab.component.pug b/tabby-settings/src/components/settingsTab.component.pug index 85da2ecf..e66484ec 100644 --- a/tabby-settings/src/components/settingsTab.component.pug +++ b/tabby-settings/src/components/settingsTab.component.pug @@ -1,5 +1,3 @@ -button.btn.btn-warning.btn-block(*ngIf='config.restartRequested', '(click)'='restartApp()') Restart the app to apply changes - .content ul.nav-pills(ngbNav, #nav='ngbNav', [activeId]='activeTab', orientation='vertical') li(ngbNavItem='application') @@ -7,80 +5,92 @@ button.btn.btn-warning.btn-block(*ngIf='config.restartRequested', '(click)'='res i.fas.fa-fw.fa-window-maximize.mr-2 | Application ng-template(ngbNavContent) - .tabby-logo.mt-3 - h1.tabby-title Tabby - sup α + .content-box + .tabby-logo.mt-3 + h1.tabby-title Tabby + sup α - .text-center - .text-muted {{homeBase.appVersion}} + .text-center + .text-muted {{homeBase.appVersion}} - .mb-5.mt-3 - button.btn.btn-secondary.mr-3.mb-2((click)='homeBase.openGitHub()') - i.fab.fa-github - span GitHub + .mb-5.mt-3 + button.btn.btn-secondary.mr-3.mb-2((click)='homeBase.openGitHub()') + i.fab.fa-github + span GitHub - button.btn.btn-secondary.mr-3.mb-2((click)='homeBase.reportBug()') - i.fas.fa-bug - span Report a problem + button.btn.btn-secondary.mr-3.mb-2((click)='homeBase.reportBug()') + i.fas.fa-bug + span Report a problem - button.btn.btn-secondary.mr-3.mb-2( - (click)='showReleaseNotes()', - ) - i.fas.fa-book - span What's new - - button.btn.btn-secondary.mr-3.mb-2( - *ngIf='!updateAvailable && hostApp.platform !== Platform.Web', - (click)='checkForUpdates()', - [disabled]='checkingForUpdate' - ) - i.fas.fa-sync( - [class.fa-spin]='checkingForUpdate' + button.btn.btn-secondary.mr-3.mb-2( + (click)='showReleaseNotes()', ) - span Check for updates + i.fas.fa-book + span What's new - button.btn.btn-info.mr-3.mb-2( - *ngIf='updateAvailable', - (click)='updater.update()', + button.btn.btn-secondary.mr-3.mb-2( + *ngIf='!updateAvailable && hostApp.platform !== Platform.Web', + (click)='checkForUpdates()', + [disabled]='checkingForUpdate' + ) + i.fas.fa-sync( + [class.fa-spin]='checkingForUpdate' + ) + span Check for updates + + button.btn.btn-info.mr-3.mb-2( + *ngIf='updateAvailable', + (click)='updater.update()', + ) + i.fas.fa-sync + span Update + + .form-line(*ngIf='platform.isShellIntegrationSupported()') + .header + .title Shell integration + .description Allows quickly opening a terminal in the selected folder + toggle([ngModel]='isShellIntegrationInstalled', (ngModelChange)='toggleShellIntegration()') + + .form-line(*ngIf='hostApp.platform !== Platform.Web') + .header + .title Enable analytics + .description We're only tracking your Tabby and OS versions. + toggle( + [(ngModel)]='config.store.enableAnalytics', + (ngModelChange)='saveConfiguration(true)', ) - i.fas.fa-sync - span Update - .form-line(*ngIf='platform.isShellIntegrationSupported()') - .header - .title Shell integration - .description Allows quickly opening a terminal in the selected folder - toggle([ngModel]='isShellIntegrationInstalled', (ngModelChange)='toggleShellIntegration()') + .form-line(*ngIf='hostApp.platform !== Platform.Web') + .header + .title Automatic Updates + .description Enable automatic installation of updates when they become available. + toggle([(ngModel)]='config.store.enableAutomaticUpdates', (ngModelChange)='saveConfiguration()') - .form-line(*ngIf='hostApp.platform !== Platform.Web') - .header - .title Enable analytics - .description We're only tracking your Tabby and OS versions. - toggle( - [(ngModel)]='config.store.enableAnalytics', - (ngModelChange)='saveConfiguration(true)', - ) + .form-line(*ngIf='hostApp.platform !== Platform.Web') + .header + .title Debugging - .form-line(*ngIf='hostApp.platform !== Platform.Web') - .header - .title Automatic Updates - .description Enable automatic installation of updates when they become available. - toggle([(ngModel)]='config.store.enableAutomaticUpdates', (ngModelChange)='saveConfiguration()') + button.btn.btn-secondary((click)='hostWindow.openDevTools()') + i.fas.fa-bug + span Open DevTools - .form-line(*ngIf='hostApp.platform !== Platform.Web') - .header - .title Debugging + ng-container(*ngFor='let provider of settingsProviders') + li(*ngIf='provider.prioritized', [ngbNavItem]='provider.id') + a(ngbNavLink) + i(class='fas fa-fw mr-2 fa-{{provider.icon}}') + | {{provider.title}} + ng-template(ngbNavContent) + settings-tab-body([provider]='provider') - button.btn.btn-secondary((click)='hostWindow.openDevTools()') - i.fas.fa-bug - span Open DevTools + .mb-3 - 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') + ng-container(*ngFor='let provider of settingsProviders') + li(*ngIf='!provider.prioritized', [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') li(ngbNavItem='config-file') a(ngbNavLink) @@ -118,3 +128,5 @@ button.btn.btn-warning.btn-block(*ngIf='config.restartRequested', '(click)'='res | Show config file div([ngbNavOutlet]='nav') + +button.btn.btn-warning.btn-block(*ngIf='config.restartRequested', '(click)'='restartApp()') Restart the app to apply changes diff --git a/tabby-settings/src/components/settingsTab.component.scss b/tabby-settings/src/components/settingsTab.component.scss index 94e9682c..a871ada6 100644 --- a/tabby-settings/src/components/settingsTab.component.scss +++ b/tabby-settings/src/components/settingsTab.component.scss @@ -16,7 +16,7 @@ > .nav { padding: 20px 10px; - width: 190px; + width: 212px; flex: none; overflow-y: auto; flex-wrap: nowrap; @@ -29,6 +29,10 @@ > ::ng-deep .tab-pane { height: 100%; + + > settings-tab-body > * { + display: block; + } } } } diff --git a/tabby-settings/src/components/settingsTab.component.ts b/tabby-settings/src/components/settingsTab.component.ts index 4b6c6979..0833c98b 100644 --- a/tabby-settings/src/components/settingsTab.component.ts +++ b/tabby-settings/src/components/settingsTab.component.ts @@ -51,7 +51,7 @@ export class SettingsTabComponent extends BaseTabComponent { this.setTitle('Settings') this.settingsProviders = config.enabledServices(this.settingsProviders) this.settingsProviders = this.settingsProviders.filter(x => !!x.getComponentType()) - this.settingsProviders.sort((a, b) => a.title.localeCompare(b.title)) + this.settingsProviders.sort((a, b) => a.weight - b.weight + a.title.localeCompare(b.title)) this.configDefaults = yaml.dump(config.getDefaults()) diff --git a/tabby-settings/src/components/vaultSettingsTab.component.ts b/tabby-settings/src/components/vaultSettingsTab.component.ts index b013a050..1520c00b 100644 --- a/tabby-settings/src/components/vaultSettingsTab.component.ts +++ b/tabby-settings/src/components/vaultSettingsTab.component.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/explicit-module-boundary-types */ -import { Component } from '@angular/core' +import { Component, HostBinding } from '@angular/core' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { BaseComponent, VaultService, VaultSecret, Vault, PlatformService, ConfigService, VAULT_SECRET_TYPE_FILE, PromptModalComponent, VaultFileSecret } from 'tabby-core' import { SetVaultPassphraseModalComponent } from './setVaultPassphraseModal.component' @@ -14,6 +14,8 @@ export class VaultSettingsTabComponent extends BaseComponent { vaultContents: Vault|null = null VAULT_SECRET_TYPE_FILE = VAULT_SECRET_TYPE_FILE + @HostBinding('class.content-box') true + constructor ( public vault: VaultService, public config: ConfigService, diff --git a/tabby-settings/src/components/windowSettingsTab.component.ts b/tabby-settings/src/components/windowSettingsTab.component.ts index 51cbde3a..25446de5 100644 --- a/tabby-settings/src/components/windowSettingsTab.component.ts +++ b/tabby-settings/src/components/windowSettingsTab.component.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/explicit-module-boundary-types */ import { debounce } from 'utils-decorators/dist/esm/debounce/debounce' -import { Component, Inject, NgZone, Optional } from '@angular/core' +import { Component, HostBinding, Inject, NgZone, Optional } from '@angular/core' import { DockingService, ConfigService, @@ -25,6 +25,8 @@ export class WindowSettingsTabComponent extends BaseComponent { Platform = Platform isFluentVibrancySupported = false + @HostBinding('class.content-box') true + constructor ( public config: ConfigService, public hostApp: HostAppService, diff --git a/tabby-settings/src/settings.ts b/tabby-settings/src/settings.ts index 70b33051..b2a2ac99 100644 --- a/tabby-settings/src/settings.ts +++ b/tabby-settings/src/settings.ts @@ -51,7 +51,8 @@ export class VaultSettingsTabProvider extends SettingsTabProvider { export class ProfilesSettingsTabProvider extends SettingsTabProvider { id = 'profiles' icon = 'window-restore' - title = 'Profiles' + title = 'Profiles & connections' + prioritized = true getComponentType (): any { return ProfilesSettingsTabComponent diff --git a/tabby-ssh/src/components/sshSettingsTab.component.ts b/tabby-ssh/src/components/sshSettingsTab.component.ts index 4bf49200..94c18223 100644 --- a/tabby-ssh/src/components/sshSettingsTab.component.ts +++ b/tabby-ssh/src/components/sshSettingsTab.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core' +import { Component, HostBinding } from '@angular/core' import { X11Socket } from '../session/x11' import { ConfigService, HostAppService, Platform } from 'tabby-core' @@ -10,6 +10,8 @@ export class SSHSettingsTabComponent { Platform = Platform defaultX11Display: string + @HostBinding('class.content-box') true + constructor ( public config: ConfigService, public hostApp: HostAppService, diff --git a/tabby-terminal/src/components/appearanceSettingsTab.component.pug b/tabby-terminal/src/components/appearanceSettingsTab.component.pug index 7607ac44..aaa1a26b 100644 --- a/tabby-terminal/src/components/appearanceSettingsTab.component.pug +++ b/tabby-terminal/src/components/appearanceSettingsTab.component.pug @@ -33,88 +33,89 @@ h3.mb-3 Appearance .col-12.col-md-6 color-scheme-preview([scheme]='config.store.terminal.colorScheme', [fontPreview]='true') -.form-line - .header - .title Terminal background +.content-box + .form-line + .header + .title Terminal background - .btn-group( - [(ngModel)]='config.store.terminal.background', - (ngModelChange)='config.save()', - ngbRadioGroup + .btn-group( + [(ngModel)]='config.store.terminal.background', + (ngModelChange)='config.save()', + ngbRadioGroup + ) + label.btn.btn-secondary(ngbButtonLabel) + input( + type='radio', + ngbButton, + [value]='"theme"' + ) + | From theme + label.btn.btn-secondary(ngbButtonLabel) + input( + type='radio', + ngbButton, + [value]='"colorScheme"' + ) + | From color scheme + + .form-line + .header + .title Cursor shape + + .btn-group( + [(ngModel)]='config.store.terminal.cursor', + (ngModelChange)='config.save()', + ngbRadioGroup + ) + label.btn.btn-secondary(ngbButtonLabel) + input( + type='radio', + ngbButton, + [value]='"block"' + ) + | █ + label.btn.btn-secondary(ngbButtonLabel) + input( + type='radio', + ngbButton, + [value]='"beam"' + ) + | | + label.btn.btn-secondary(ngbButtonLabel) + input( + type='radio', + ngbButton, + [value]='"underline"' + ) + | ▁ + + .form-line + .header + .title Blink cursor + + toggle( + [(ngModel)]='config.store.terminal.cursorBlink', + (ngModelChange)='config.save()', + ) + + .form-line + .header + .title Fallback font + .description A second font family used to display characters missing in the main font + + input.form-control( + type='text', + [ngbTypeahead]='fontAutocomplete', + [(ngModel)]='config.store.terminal.fallbackFont', + (ngModelChange)='config.save()' + ) + + + .form-line + .header + .title Custom CSS + + textarea.form-control.mb-5( + [(ngModel)]='config.store.appearance.css', + (ngModelChange)='saveConfiguration()', ) - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"theme"' - ) - | From theme - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"colorScheme"' - ) - | From color scheme - -.form-line - .header - .title Cursor shape - - .btn-group( - [(ngModel)]='config.store.terminal.cursor', - (ngModelChange)='config.save()', - ngbRadioGroup - ) - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"block"' - ) - | █ - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"beam"' - ) - | | - label.btn.btn-secondary(ngbButtonLabel) - input( - type='radio', - ngbButton, - [value]='"underline"' - ) - | ▁ - -.form-line - .header - .title Blink cursor - - toggle( - [(ngModel)]='config.store.terminal.cursorBlink', - (ngModelChange)='config.save()', - ) - -.form-line - .header - .title Fallback font - .description A second font family used to display characters missing in the main font - - input.form-control( - type='text', - [ngbTypeahead]='fontAutocomplete', - [(ngModel)]='config.store.terminal.fallbackFont', - (ngModelChange)='config.save()' - ) - - -.form-line - .header - .title Custom CSS - -textarea.form-control.mb-5( - [(ngModel)]='config.store.appearance.css', - (ngModelChange)='saveConfiguration()', -) diff --git a/tabby-terminal/src/components/colorSchemeSettingsTab.component.ts b/tabby-terminal/src/components/colorSchemeSettingsTab.component.ts index 60048534..84974111 100644 --- a/tabby-terminal/src/components/colorSchemeSettingsTab.component.ts +++ b/tabby-terminal/src/components/colorSchemeSettingsTab.component.ts @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/explicit-module-boundary-types */ import deepEqual from 'deep-equal' -import { Component, Inject, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core' +import { Component, Inject, Input, ChangeDetectionStrategy, ChangeDetectorRef, HostBinding } from '@angular/core' import { ConfigService, PlatformService } from 'tabby-core' import { TerminalColorSchemeProvider } from '../api/colorSchemeProvider' import { TerminalColorScheme } from '../api/interfaces' @@ -23,6 +23,8 @@ export class ColorSchemeSettingsTabComponent { currentStockScheme: TerminalColorScheme|null = null currentCustomScheme: TerminalColorScheme|null = null + @HostBinding('class.content-box') true + constructor ( @Inject(TerminalColorSchemeProvider) private colorSchemeProviders: TerminalColorSchemeProvider[], private changeDetector: ChangeDetectorRef, diff --git a/tabby-terminal/src/components/terminalSettingsTab.component.ts b/tabby-terminal/src/components/terminalSettingsTab.component.ts index b865809c..a200c06a 100644 --- a/tabby-terminal/src/components/terminalSettingsTab.component.ts +++ b/tabby-terminal/src/components/terminalSettingsTab.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core' +import { Component, HostBinding } from '@angular/core' import { ConfigService, HostAppService, Platform, PlatformService } from 'tabby-core' /** @hidden */ @@ -8,6 +8,8 @@ import { ConfigService, HostAppService, Platform, PlatformService } from 'tabby- export class TerminalSettingsTabComponent { Platform = Platform + @HostBinding('class.content-box') true + constructor ( public config: ConfigService, public hostApp: HostAppService,