support esc and x button for main search bar

diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html
index 3700105f3507514eb9fdaffa5e2572be8088c939..41bd50970da70f3bc460cb1d0cbd05d6bf123692 100644 (file)
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -16,7 +16,12 @@
         <use xlink:href="assets/bootstrap-icons.svg#search"/>
       </svg>
       <input class="form-control form-control-sm" type="text" placeholder="Search documents" aria-label="Search"
-        [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (selectItem)="itemSelected($event)" i18n-placeholder>
+        [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (keyup)="searchFieldKeyup($event)" (selectItem)="itemSelected($event)" i18n-placeholder>
+      <button *ngIf="!searchFieldEmpty" class="btn btn-link btn-sm px-0 position-absolute top-0 end-0" (click)="resetSearchField()">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x me-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+        </svg>
+      </button>
     </form>
   </div>
   <ul ngbNav class="order-sm-3">

diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss
index 755f206960552986647a7e04ba4f5918939f3b94..0bd96f33e99c4771c3b1493dbd4c25624de209a0 100644 (file)
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@@ -243,17 +243,18 @@ main {
 
   form {
     position: relative;
-  }
 
-  svg {
-    position: absolute;
-    left: 0.6rem;
-    top: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
+    > svg {
+      position: absolute;
+      left: 0.6rem;
+      top: 0.5rem;
+      color: rgba(255, 255, 255, 0.6);
+    }
   }
 
+
   &:focus-within {
-    svg {
+    form > svg {
       display: none;
     }
 

diff --git a/src-ui/src/app/components/app-frame/app-frame.component.ts b/src-ui/src/app/components/app-frame/app-frame.component.ts
index b189409a8b31601215737d4b0a0e805ae37207d6..d637a32b66b504a65e94509a93396f721179c479 100644 (file)
--- a/src-ui/src/app/components/app-frame/app-frame.component.ts
+++ b/src-ui/src/app/components/app-frame/app-frame.component.ts
@@ -93,6 +93,20 @@ export class AppFrameComponent implements OnInit, ComponentCanDeactivate {
 
   searchField = new FormControl('')
 
+  get searchFieldEmpty(): boolean {
+    return this.searchField.value.trim().length == 0
+  }
+
+  resetSearchField() {
+    this.searchField.reset('')
+  }
+
+  searchFieldKeyup(event: KeyboardEvent) {
+    if (event.key == 'Escape') {
+      this.resetSearchField()
+    }
+  }
+
   get openDocuments(): PaperlessDocument[] {
     return this.openDocumentsService.getOpenDocuments()
   }