new color picker

tabby-terminal/src/components/colorPicker.component.pug

@@ -1,16 +1,7 @@
-ng-template(#content)
-    .preview(
-        [style.width]='"100%"',
-        [style.background]='model',
-    )
-    input.form-control(type='text', [(ngModel)]='model', (ngModelChange)='onChange()', #input)
-
 div(
-    [ngbPopover]='content',
     [style.background]='model',
-    (click)='open()',
-    autoClose='outside',
-    container='body',
-    #popover='ngbPopover',
-    [title]='hint'
+    ngx-colors-trigger,
+    [(ngModel)]='model',
+    (ngModelChange)='onChange($event)',
+    [ngbTooltip]='hint'
 ) {{ title }}

tabby-terminal/src/components/colorPicker.component.ts

@@ -1,5 +1,4 @@
-import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core'
-import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
+import { Component, Input, Output, EventEmitter } from '@angular/core'
 
 /** @hidden */
 @Component({
@@ -12,16 +11,10 @@ export class ColorPickerComponent {
     @Input() title: string
     @Input() hint: string
     @Output() modelChange = new EventEmitter<string>()
-    @ViewChild('popover') popover: NgbPopover
 
-    open (): void {
-        setImmediate(() => {
-            this.popover.open()
-            this.popover['_windowRef'].location.nativeElement.querySelector('input').focus()
-        })
-    }
-
-    onChange (): void {
-        this.modelChange.emit(this.model)
+    onChange (value: string): void {
+        if (value !== this.model) {
+            this.modelChange.emit(value)
+        }
     }
 }

tabby-terminal/src/index.ts

@@ -3,6 +3,7 @@ import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { ToastrModule } from 'ngx-toastr'
+import { NgxColorsModule } from 'ngx-colors'
 
 import TabbyCorePlugin, { ConfigProvider, HotkeyProvider, TabContextMenuItemProvider, CLIHandler } from 'tabby-core'
 import { SettingsTabProvider } from 'tabby-settings'
@@ -40,6 +41,7 @@ import { TerminalCLIHandler } from './cli'
         NgbModule,
         ToastrModule,
         TabbyCorePlugin,
+        NgxColorsModule,
     ],
     providers: [
         { provide: SettingsTabProvider, useClass: AppearanceSettingsTabProvider, multi: true },