diff --git a/app/src/global.scss b/app/src/global.scss index edfb32cc..17b1792d 100644 --- a/app/src/global.scss +++ b/app/src/global.scss @@ -16,13 +16,17 @@ body { display: none; } -.btn { - display: inline-flex; - align-items: center; - flex-wrap: nowrap; +a, button { + &.btn { + display: inline-flex; + align-items: center; + flex-wrap: nowrap; - & > svg { - pointer-events: none; + & > svg { + pointer-events: none; + width: 16px; + height: 16px; + } } } diff --git a/tabby-core/src/theme.scss b/tabby-core/src/theme.scss index e9507ffe..3ad0e63e 100644 --- a/tabby-core/src/theme.scss +++ b/tabby-core/src/theme.scss @@ -291,7 +291,7 @@ checkbox i.on { } search-panel { - background: rgba(39, 49, 60, 0.95) !important; + background: #131d27 !important; } diff --git a/tabby-terminal/src/components/baseTerminalTab.component.pug b/tabby-terminal/src/components/baseTerminalTab.component.pug index b40c3c26..2ff8fc9b 100644 --- a/tabby-terminal/src/components/baseTerminalTab.component.pug +++ b/tabby-terminal/src/components/baseTerminalTab.component.pug @@ -1,7 +1,7 @@ .terminal-toolbar-spacer .content(#content, [style.opacity]='frontendIsReady ? 1 : 0') search-panel( - *ngIf='showSearchPanel', + *ngIf='showSearchPanel && hasFocus', @toolbarSlide, [frontend]='frontend', (close)='showSearchPanel = false' diff --git a/tabby-terminal/src/components/searchPanel.component.pug b/tabby-terminal/src/components/searchPanel.component.pug index fc48bf13..54a88156 100644 --- a/tabby-terminal/src/components/searchPanel.component.pug +++ b/tabby-terminal/src/components/searchPanel.component.pug @@ -12,16 +12,16 @@ input.search-input.form-control( button.btn.btn-link( (click)='findPrevious()', ngbTooltip='Search up', - placement='bottom' + placement='bottom', + [fastHtmlBind]='icons.arrowUp' ) - i.fa.fa-fw.fa-arrow-up button.btn.btn-link( (click)='findNext()', ngbTooltip='Search down', - placement='bottom' + placement='bottom', + [fastHtmlBind]='icons.arrowDown' ) - i.fa.fa-fw.fa-arrow-down .mr-2 @@ -29,26 +29,29 @@ button.btn.btn-link( (click)='options.caseSensitive = !options.caseSensitive; saveSearchOptions()', [class.active]='options.caseSensitive', ngbTooltip='Case sensitivity', - placement='bottom' + placement='bottom', + [fastHtmlBind]='icons.case' ) - i.fa.fa-fw.fa-font button.btn.btn-link( (click)='options.regex = !options.regex; saveSearchOptions()', [class.active]='options.regex', ngbTooltip='Regular expression', - placement='bottom' + placement='bottom', + [fastHtmlBind]='icons.regexp' ) - i.fa.fa-fw.fa-asterisk + button.btn.btn-link( (click)='options.wholeWord = !options.wholeWord; saveSearchOptions()', [class.active]='options.wholeWord', ngbTooltip='Whole word', - placement='bottom' + placement='bottom', + [fastHtmlBind]='icons.wholeWord' ) - i.fa.fa-fw.fa-text-width .mr-2 -button.btn.btn-link((click)='close.emit()') - i.fa.fa-fw.fa-times +button.btn.btn-link( + (click)='close.emit()', + [fastHtmlBind]='icons.close' +) diff --git a/tabby-terminal/src/components/searchPanel.component.scss b/tabby-terminal/src/components/searchPanel.component.scss index 38e16942..d5623696 100644 --- a/tabby-terminal/src/components/searchPanel.component.scss +++ b/tabby-terminal/src/components/searchPanel.component.scss @@ -1,10 +1,9 @@ :host { position: fixed; width: 400px; - right: 50px; + right: 40px; z-index: 5; - padding: 10px; - border-radius: 0 0 3px 3px; + border-radius: 0 0 5px 5px; background: rgba(0, 0, 0, .95); border: 1px solid rgba(0, 0, 0, .5); border-top: 0; @@ -12,6 +11,7 @@ button { padding: 0 6px; + margin: 4px 2px; flex-shrink: 0; } } diff --git a/tabby-terminal/src/components/searchPanel.component.ts b/tabby-terminal/src/components/searchPanel.component.ts index 832aa2c4..a8537740 100644 --- a/tabby-terminal/src/components/searchPanel.component.ts +++ b/tabby-terminal/src/components/searchPanel.component.ts @@ -18,6 +18,15 @@ export class SearchPanelComponent { @Output() close = new EventEmitter() + icons = { + 'case': require('../icons/case.svg'), + regexp: require('../icons/regexp.svg'), + wholeWord: require('../icons/whole-word.svg'), + arrowUp: require('../icons/arrow-up.svg'), + arrowDown: require('../icons/arrow-down.svg'), + close: require('../icons/close.svg'), + } + constructor ( private notifications: NotificationsService, public config: ConfigService, diff --git a/tabby-terminal/src/frontends/frontend.ts b/tabby-terminal/src/frontends/frontend.ts index e0b852f9..ee3018ed 100644 --- a/tabby-terminal/src/frontends/frontend.ts +++ b/tabby-terminal/src/frontends/frontend.ts @@ -24,6 +24,7 @@ export abstract class Frontend { protected resize = new ReplaySubject(1) protected dragOver = new Subject() protected drop = new Subject() + protected destroyed = new Subject() get ready$ (): Observable { return this.ready } get title$ (): Observable { return this.title } @@ -35,10 +36,12 @@ export abstract class Frontend { get resize$ (): Observable { return this.resize } get dragOver$ (): Observable { return this.dragOver } get drop$ (): Observable { return this.drop } + get destroyed$ (): Observable { return this.destroyed } constructor (protected injector: Injector) { } destroy (): void { + this.destroyed.next() for (const o of [ this.ready, this.title, @@ -50,6 +53,7 @@ export abstract class Frontend { this.resize, this.dragOver, this.drop, + this.destroyed, ]) { o.complete() } diff --git a/tabby-terminal/src/frontends/xtermFrontend.ts b/tabby-terminal/src/frontends/xtermFrontend.ts index d35b59ef..f1e7785d 100644 --- a/tabby-terminal/src/frontends/xtermFrontend.ts +++ b/tabby-terminal/src/frontends/xtermFrontend.ts @@ -1,6 +1,7 @@ import { Injector } from '@angular/core' import { ConfigService, getCSSFontFamily, HostAppService, HotkeysService, Platform, PlatformService } from 'tabby-core' import { Frontend, SearchOptions } from './frontend' +import { takeUntil } from 'rxjs' import { Terminal, ITheme } from 'xterm' import { FitAddon } from 'xterm-addon-fit' import { LigaturesAddon } from 'xterm-addon-ligatures' @@ -151,6 +152,11 @@ export class XTermFrontend extends Frontend { if (this.enableWebGL) { this.webGLAddon = new WebglAddon() this.xterm.loadAddon(this.webGLAddon) + this.platformService.displayMetricsChanged$.pipe( + takeUntil(this.destroyed$), + ).subscribe(() => { + this.webGLAddon?.clearTextureAtlas() + }) } this.ready.next() diff --git a/tabby-terminal/src/icons/arrow-down.svg b/tabby-terminal/src/icons/arrow-down.svg new file mode 100644 index 00000000..2686158d --- /dev/null +++ b/tabby-terminal/src/icons/arrow-down.svg @@ -0,0 +1 @@ + diff --git a/tabby-terminal/src/icons/arrow-up.svg b/tabby-terminal/src/icons/arrow-up.svg new file mode 100644 index 00000000..018e93ad --- /dev/null +++ b/tabby-terminal/src/icons/arrow-up.svg @@ -0,0 +1 @@ + diff --git a/tabby-terminal/src/icons/case.svg b/tabby-terminal/src/icons/case.svg new file mode 100644 index 00000000..ea8377c4 --- /dev/null +++ b/tabby-terminal/src/icons/case.svg @@ -0,0 +1 @@ + diff --git a/tabby-terminal/src/icons/close.svg b/tabby-terminal/src/icons/close.svg new file mode 100644 index 00000000..010d9cef --- /dev/null +++ b/tabby-terminal/src/icons/close.svg @@ -0,0 +1 @@ + diff --git a/tabby-terminal/src/icons/regexp.svg b/tabby-terminal/src/icons/regexp.svg new file mode 100644 index 00000000..d099898d --- /dev/null +++ b/tabby-terminal/src/icons/regexp.svg @@ -0,0 +1 @@ + diff --git a/tabby-terminal/src/icons/whole-word.svg b/tabby-terminal/src/icons/whole-word.svg new file mode 100644 index 00000000..7164802a --- /dev/null +++ b/tabby-terminal/src/icons/whole-word.svg @@ -0,0 +1 @@ +