1
1
mirror of https://github.com/Eugeny/tabby.git synced 2024-12-23 02:22:02 +03:00

new color picker

This commit is contained in:
Eugene Pankov 2022-03-16 10:26:34 +01:00
parent 0560196546
commit 515ddbf64b
No known key found for this signature in database
GPG Key ID: 5896FCBBDD1CF4F4
6 changed files with 36 additions and 25 deletions

View File

@ -393,3 +393,15 @@ hr {
.dropdown-menu { .dropdown-menu {
box-shadow: $dropdown-box-shadow; box-shadow: $dropdown-box-shadow;
} }
ngx-colors-panel .opened {
background: $body-bg !important;
button {
color: $body-color;
}
.button svg {
fill: white;
}
}

View File

@ -23,6 +23,7 @@
"cli-spinner": "^0.2.10", "cli-spinner": "^0.2.10",
"dataurl": "0.1.0", "dataurl": "0.1.0",
"hexer": "^1.5.0", "hexer": "^1.5.0",
"ngx-colors": "^3.0.4",
"ps-node": "^0.1.6", "ps-node": "^0.1.6",
"runes": "^0.4.2", "runes": "^0.4.2",
"xterm": "npm:@tabby-gang/xterm@^4.17.1-beta.2", "xterm": "npm:@tabby-gang/xterm@^4.17.1-beta.2",

View File

@ -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( div(
[ngbPopover]='content',
[style.background]='model', [style.background]='model',
(click)='open()', ngx-colors-trigger,
autoClose='outside', [(ngModel)]='model',
container='body', (ngModelChange)='onChange($event)',
#popover='ngbPopover', [ngbTooltip]='hint'
[title]='hint'
) {{ title }} ) {{ title }}

View File

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

View File

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

View File

@ -94,6 +94,13 @@ minimist@^1.1.0:
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
ngx-colors@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/ngx-colors/-/ngx-colors-3.0.4.tgz#69b760760e6e1e92fda5da51fa9b4bea7e555d40"
integrity sha512-peNvVpYkm8pe3nP8/TbaFFqo/RxZevGljKrzFa2g1hPPacdx+WdfwAN4uJfcGk7qTYbqlV64SSfb3Pnx8qjzDA==
dependencies:
tslib "^2.0.0"
opentype.js@^0.8.0: opentype.js@^0.8.0:
version "0.8.0" version "0.8.0"
resolved "https://registry.yarnpkg.com/opentype.js/-/opentype.js-0.8.0.tgz#acabcfa1642fbe894a3e4d759e43ba694e02bd35" resolved "https://registry.yarnpkg.com/opentype.js/-/opentype.js-0.8.0.tgz#acabcfa1642fbe894a3e4d759e43ba694e02bd35"
@ -140,6 +147,11 @@ tiny-inflate@^1.0.2:
resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4" resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw== integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
tslib@^2.0.0:
version "2.3.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
xtend@^4.0.0: xtend@^4.0.0:
version "4.0.2" version "4.0.2"
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"