settings UI tweaks

This commit is contained in:
Eugene Pankov
2021-10-24 22:50:21 +02:00
parent 6fed2cb9c0
commit f0e96b5f8b
16 changed files with 200 additions and 158 deletions

View File

@@ -5,6 +5,8 @@ export abstract class SettingsTabProvider {
id: string
icon: string
title: string
weight = 0
prioritized = false
getComponentType (): any {
return null

View File

@@ -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,

View File

@@ -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,

View File

@@ -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

View File

@@ -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;
}
}
}
}

View File

@@ -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())

View File

@@ -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,

View File

@@ -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,

View File

@@ -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