From 471f9effcf30f7c675532e6a12d0bd77cf97ca52 Mon Sep 17 00:00:00 2001
From: Eugene Pankov <john.pankov@gmail.com>
Date: Sun, 1 Dec 2019 18:52:22 +0100
Subject: [PATCH] better search UI

---
 app/src/toastr.scss                           |  4 ++++
 terminus-core/src/theme.scss                  |  4 ++++
 .../src/components/searchPanel.component.pug  | 24 ++++++++-----------
 .../src/components/searchPanel.component.scss | 13 +++++++++-
 .../src/components/searchPanel.component.ts   | 13 +++++++---
 terminus-terminal/src/frontends/frontend.ts   |  1 +
 6 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/app/src/toastr.scss b/app/src/toastr.scss
index 63fd7dee..eaa1c715 100644
--- a/app/src/toastr.scss
+++ b/app/src/toastr.scss
@@ -10,6 +10,10 @@
     background-image: none;
     width: auto;
 
+    &.toast-error {
+      background-color: #BD362F;
+    }
+
     &.toast-info {
       background-color: #555;
     }
diff --git a/terminus-core/src/theme.scss b/terminus-core/src/theme.scss
index e545cdae..f497f6eb 100644
--- a/terminus-core/src/theme.scss
+++ b/terminus-core/src/theme.scss
@@ -405,3 +405,7 @@ toggle.active .body .toggle {
 *::-webkit-resizer {
     opacity: 0;
 }
+
+search-panel {
+    background: rgba(39, 49, 60, 0.65) !important;
+}
diff --git a/terminus-terminal/src/components/searchPanel.component.pug b/terminus-terminal/src/components/searchPanel.component.pug
index 5742614b..1fedf756 100644
--- a/terminus-terminal/src/components/searchPanel.component.pug
+++ b/terminus-terminal/src/components/searchPanel.component.pug
@@ -2,7 +2,7 @@
     input.search-input.form-control(
         type='search',
         [(ngModel)]='query',
-        (ngModelChange)='notFound = false',
+        (ngModelChange)='onQueryChange()',
         [class.text-danger]='notFound',
         (click)='$event.stopPropagation()',
         (keyup.enter)='findNext()',
@@ -10,31 +10,27 @@
         placeholder='Search...'
     )
     .input-group-append
-        .btn-group
-            button.btn.btn-outline-primary(
+        .input-group-text
+            a(
                 (click)='options.caseSensitive = !options.caseSensitive',
-                [class.active]='options.caseSensitive',
+                [class.text-info]='options.caseSensitive',
                 ngbTooltip='Case sensitivity',
                 placement='bottom'
             )
                 i.fa.fa-fw.fa-font
-            button.btn.btn-outline-primary(
+            a(
                 (click)='options.regex = !options.regex',
-                [class.active]='options.regex',
+                [class.text-info]='options.regex',
                 ngbTooltip='Regular expression',
                 placement='bottom'
             )
                 i.fa.fa-fw.fa-asterisk
-            button.btn.btn-outline-primary(
+            a(
                 (click)='options.wholeWord = !options.wholeWord',
-                [class.active]='options.wholeWord',
+                [class.text-info]='options.wholeWord',
                 ngbTooltip='Whole word',
                 placement='bottom'
             )
                 i.fa.fa-fw.fa-text-width
-            button.btn.btn-outline(
-                (click)='close.emit()',
-                ngbTooltip='Close',
-                placement='bottom'
-            )
-                i.fa.fa-fw.fa-times
\ No newline at end of file
+
+button.close.text-light.pl-3.pr-2((click)='close.emit()') &times;
diff --git a/terminus-terminal/src/components/searchPanel.component.scss b/terminus-terminal/src/components/searchPanel.component.scss
index df590207..b89634e3 100644
--- a/terminus-terminal/src/components/searchPanel.component.scss
+++ b/terminus-terminal/src/components/searchPanel.component.scss
@@ -1,9 +1,20 @@
 :host {
     position: fixed;
     width: 400px;
-    align-self: center;
+    right: 50px;
     z-index: 5;
     padding: 10px;
     border-radius: 0 0 3px 3px;
     background: rgba(0, 0, 0, .75);
+    border: 1px solid rgba(0, 0, 0, .5);
+    border-top: 0;
+    display: flex;
+
+    a {
+        padding-left: 10px;
+
+        &:first-child {
+            padding-left: 0;
+        }
+    }
 }
diff --git a/terminus-terminal/src/components/searchPanel.component.ts b/terminus-terminal/src/components/searchPanel.component.ts
index e75fee6b..d7c03717 100644
--- a/terminus-terminal/src/components/searchPanel.component.ts
+++ b/terminus-terminal/src/components/searchPanel.component.ts
@@ -11,7 +11,9 @@ export class SearchPanelComponent {
     @Input() query: string
     @Input() frontend: Frontend
     notFound = false
-    options: SearchOptions = {}
+    options: SearchOptions = {
+        incremental: true,
+    }
 
     @Output() close = new EventEmitter()
 
@@ -19,8 +21,13 @@ export class SearchPanelComponent {
         private toastr: ToastrService,
     ) { }
 
-    findNext () {
-        if (!this.frontend.findNext(this.query, this.options)) {
+    onQueryChange () {
+        this.notFound = false
+        this.findNext(true)
+    }
+
+    findNext (incremental? = false) {
+        if (!this.frontend.findNext(this.query, { ...this.options, incremental })) {
             this.notFound = true
             this.toastr.error('Not found')
         }
diff --git a/terminus-terminal/src/frontends/frontend.ts b/terminus-terminal/src/frontends/frontend.ts
index 70c75fca..f7dea478 100644
--- a/terminus-terminal/src/frontends/frontend.ts
+++ b/terminus-terminal/src/frontends/frontend.ts
@@ -6,6 +6,7 @@ export interface SearchOptions {
     regex?: boolean
     wholeWord?: boolean
     caseSensitive?: boolean
+    incremental?: true
 }
 
 /**