feat: clear button (x) in search box

Redocly · Apr 25, 2017 · 0341db4 · 0341db4
1 parent 6b363a5
commit 0341db4
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/lib/components/Search/redoc-search.html b/lib/components/Search/redoc-search.html
@@ -1,4 +1,5 @@
 <div class="search-input-wrap">
+  <div class="clear-button" *ngIf="searchTerm" (click)="clearSearch()">×</div>
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
     <path d="M968.2,849.4L667.3,549c83.9-136.5,66.7-317.4-51.7-435.6C477.1-25,252.5-25,113.9,113.4c-138.5,138.3-138.5,362.6,0,501C219.2,730.1,413.2,743,547.6,666.5l301.9,301.4c43.6,43.6,76.9,14.9,104.2-12.4C981,928.3,1011.8,893,968.2,849.4z M524.5,522c-88.9,88.7-233,88.7-321.8,0c-88.9-88.7-88.9-232.6,0-321.3c88.9-88.7,233-88.7,321.8,0C613.4,289.4,613.4,433.3,524.5,522z"/>
   </svg>

diff --git a/lib/components/Search/redoc-search.scss b/lib/components/Search/redoc-search.scss
@@ -18,12 +18,24 @@
       fill: lighten($text-color, 20%);
     }
   }
+
+  .clear-button {
+    position: absolute;
+    display: inline-block;
+    width: 13px;
+    text-align: center;
+    right: 20px;
+    height: 28px;
+    line-height: 28px;
+    vertical-align: middle;
+    cursor: pointer;
+  }
 }
 
 input {
   width: 100%;
   box-sizing: border-box;
-  padding: 5px 5px 5px 20px;
+  padding: 5px 20px 5px 20px;
 
   border: 0;
   border-bottom: 1px solid darken($side-bar-bg-color, 10%);

diff --git a/lib/components/Search/redoc-search.ts b/lib/components/Search/redoc-search.ts
@@ -38,6 +38,11 @@ export class RedocSearch implements OnInit {
     this.search.indexAll();
   }
 
+  clearSearch() {
+    this.searchTerm = '';
+    this.updateSearch();
+  }
+
   update(event:KeyboardEvent, val) {
     if (event && event.keyCode === 27) { // escape
       this.searchTerm = '';