autocomplete profile colors - fixes #4231

This commit is contained in:
Eugene Pankov 2021-08-15 16:16:26 +02:00
parent 8d5b0fe863
commit 70b6be7301
No known key found for this signature in database
GPG key ID: 5896FCBBDD1CF4F4
4 changed files with 28 additions and 14 deletions

View file

@ -13,6 +13,7 @@ import { TabsService } from './services/tabs.service'
import { HotkeysService } from './services/hotkeys.service'
import { PromptModalComponent } from './components/promptModal.component'
import { SplitLayoutProfilesService } from './profiles'
import { TAB_COLORS } from './utils'
/** @hidden */
@Injectable()
@ -89,16 +90,6 @@ export class TabManagementContextMenu extends TabContextMenuItemProvider {
}
}
const COLORS = [
{ name: 'No color', value: null },
{ name: 'Blue', value: '#0275d8' },
{ name: 'Green', value: '#5cb85c' },
{ name: 'Orange', value: '#f0ad4e' },
{ name: 'Purple', value: '#613d7c' },
{ name: 'Red', value: '#d9534f' },
{ name: 'Yellow', value: '#ffd500' },
]
/** @hidden */
@Injectable()
export class CommonOptionsContextMenu extends TabContextMenuItemProvider {
@ -127,8 +118,8 @@ export class CommonOptionsContextMenu extends TabContextMenuItemProvider {
},
{
label: 'Color',
sublabel: COLORS.find(x => x.value === tab.color)?.name,
submenu: COLORS.map(color => ({
sublabel: TAB_COLORS.find(x => x.value === tab.color)?.name,
submenu: TAB_COLORS.map(color => ({
label: color.name,
type: 'radio',
checked: tab.color === color.value,

View file

@ -54,3 +54,13 @@ export class ResettableTimeout {
}
}
}
export const TAB_COLORS = [
{ name: 'No color', value: null },
{ name: 'Blue', value: '#0275d8' },
{ name: 'Green', value: '#5cb85c' },
{ name: 'Orange', value: '#f0ad4e' },
{ name: 'Purple', value: '#613d7c' },
{ name: 'Red', value: '#d9534f' },
{ name: 'Yellow', value: '#ffd500' },
]

View file

@ -46,7 +46,10 @@
input.form-control.w-50(
type='text',
[(ngModel)]='profile.color',
placeholder='#000000'
placeholder='#000000',
alwaysVisibleTypeahead,
[ngbTypeahead]='colorsAutocomplete',
[resultFormatter]='colorsFormatter'
)
.form-line

View file

@ -2,7 +2,7 @@
import { Observable, OperatorFunction, debounceTime, map, distinctUntilChanged } from 'rxjs'
import { Component, Input, ViewChild, ViewContainerRef, ComponentFactoryResolver, Injector } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
import { ConfigProxy, ConfigService, Profile, ProfileProvider, ProfileSettingsComponent, ProfilesService } from 'tabby-core'
import { ConfigProxy, ConfigService, Profile, ProfileProvider, ProfileSettingsComponent, ProfilesService, TAB_COLORS } from 'tabby-core'
const iconsData = require('../../../tabby-core/src/icons.json')
const iconsClassList = Object.keys(iconsData).map(
@ -39,6 +39,16 @@ export class EditProfileModalComponent<P extends Profile> {
)].sort() as string[]
}
colorsAutocomplete = text$ => text$.pipe(
debounceTime(200),
distinctUntilChanged(),
map((q: string) => TAB_COLORS.filter(x => !q || x.toString().startsWith(q)).map(x => x.value))
)
colorsFormatter = value => {
return TAB_COLORS.find(x => x.value === value)?.name ?? value
}
ngOnInit () {
this._profile = this.profile
this.profile = this.profilesService.getConfigProxyForProfile(this.profile)