refreshed search panel design

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

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

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'

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'
+)

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

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,

tabby-terminal/src/frontends/frontend.ts

@@ -24,6 +24,7 @@ export abstract class Frontend {
     protected resize = new ReplaySubject<ResizeEvent>(1)
     protected dragOver = new Subject<DragEvent>()
     protected drop = new Subject<DragEvent>()
+    protected destroyed = new Subject<void>()
 
     get ready$ (): Observable<void> { return this.ready }
     get title$ (): Observable<string> { return this.title }
@@ -35,10 +36,12 @@ export abstract class Frontend {
     get resize$ (): Observable<ResizeEvent> { return this.resize }
     get dragOver$ (): Observable<DragEvent> { return this.dragOver }
     get drop$ (): Observable<DragEvent> { return this.drop }
+    get destroyed$ (): Observable<void> { 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()
         }

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

tabby-terminal/src/icons/arrow-down.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="arrow-down" class="svg-inline--fa fa-arrow-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M378.8 309.8l-176 165.9C199.7 478.6 195.9 480 192 480s-7.719-1.426-10.77-4.31l-176-165.9C-1.297 303.6-1.781 293.1 4.156 286.3c5.953-6.838 16.09-7.259 22.61-1.134L176 425.9V48.59c0-9.171 7.156-16.59 15.1-16.59S208 39.42 208 48.59v377.3l149.2-140.7c6.516-6.125 16.66-5.704 22.61 1.134C385.8 293.1 385.3 303.6 378.8 309.8z"></path></svg>

tabby-terminal/src/icons/arrow-up.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="arrow-up" class="svg-inline--fa fa-arrow-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M379.8 225.7C376.7 229.3 372.3 231.1 368 231.1c-3.844 0-7.703-1.426-10.77-4.31L208 86.12v377.3c0 9.171-7.156 16.59-15.1 16.59S176 472.6 176 463.4V86.12l-149.2 140.7C20.25 232.1 10.14 232.5 4.156 225.7C-1.781 218.9-1.297 208.4 5.234 202.2l176-165.9c6.094-5.768 15.44-5.768 21.53 0l176 165.9C385.3 208.4 385.8 218.9 379.8 225.7z"></path></svg>

tabby-terminal/src/icons/case.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="text-size" class="svg-inline--fa fa-text-size" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M0 48l0 96C0 152.8 7.156 160 16 160S32 152.8 32 144V64h144v384h-64C103.2 448 96 455.2 96 464S103.2 480 112 480h160C280.8 480 288 472.8 288 464S280.8 448 272 448h-64V64H352v80C352 152.8 359.2 160 368 160S384 152.8 384 144v-96C384 39.16 376.8 32 368 32h-352C7.156 32 0 39.16 0 48zM320 240v64c0 8.844 7.156 16 16 16S352 312.8 352 304V256h112v192H416c-8.844 0-16 7.156-16 16S407.2 480 416 480h128c8.844 0 16-7.156 16-16S552.8 448 544 448h-48V256H608v48c0 8.844 7.156 16 16 16S640 312.8 640 304v-64C640 231.2 632.8 224 624 224h-288C327.2 224 320 231.2 320 240z"></path></svg>

tabby-terminal/src/icons/close.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="xmark" class="svg-inline--fa fa-xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z"></path></svg>

tabby-terminal/src/icons/regexp.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="asterisk" class="svg-inline--fa fa-asterisk" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M413.8 368.1C410.8 373.2 405.5 376 399.1 376c-2.766 0-5.562-.7187-8.125-2.219L240 284V464c0 8.844-7.156 16-15.1 16S208 472.8 208 464V284l-151.9 89.73C53.58 375.3 50.79 376 48.02 376c-5.469 0-10.8-2.812-13.8-7.859c-4.484-7.609-1.969-17.42 5.641-21.92L192.5 256L39.86 165.8c-7.609-4.5-10.12-14.31-5.641-21.92c4.531-7.578 14.31-10.06 21.92-5.641L208 227.1V48C208 39.16 215.2 32 224 32S240 39.16 240 48v179.1l151.9-89.73c7.641-4.422 17.42-1.938 21.92 5.641c4.484 7.609 1.969 17.42-5.641 21.92L255.5 256l152.7 90.22C415.7 350.7 418.3 360.5 413.8 368.1z"></path></svg>

tabby-terminal/src/icons/whole-word.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="input-text" class="svg-inline--fa fa-input-text" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M576 64H63.1C28.65 64 0 92.65 0 128v256c0 35.35 28.65 64 63.1 64H576C611.3 448 640 419.3 640 384V128C640 92.65 611.3 64 576 64zM608 384c0 17.64-14.35 32-31.1 32H63.1C46.35 416 32 401.6 32 384V128c0-17.64 14.35-32 31.1-32H576C593.6 96 608 110.4 608 128V384zM405.6 248.5C412.2 239.3 416 228.1 416 216C416 185.1 390.9 160 360 160H304C295.2 160 288 167.2 288 176v160C288 344.8 295.2 352 304 352h72c30.88 0 56-25.12 56-56C432 275.1 421.4 258.4 405.6 248.5zM320 192h40C373.2 192 384 202.8 384 216S373.2 240 360 240H320V192zM376 320H320V272h56c13.22 0 24 10.77 24 24C400 309.2 389.2 320 376 320zM190.8 170.1c-4.812-12.16-24.88-12.16-29.69 0l-64 160c-3.281 8.188 .6875 17.5 8.906 20.78c8.219 3.312 17.5-.7187 20.78-8.906l15.33-38.31C142.8 303.7 143.4 304 144 304h64c.6484 0 1.201-.2949 1.83-.3691l15.33 38.31C227.7 348.2 233.7 352 240 352c1.969 0 4-.375 5.938-1.156c8.219-3.281 12.19-12.59 8.906-20.78L190.8 170.1zM154.8 272L176 219.1L197.2 272H154.8z"></path></svg>