Skip to content

Commit

Permalink
feat: clear button (x) in search box
Browse files Browse the repository at this point in the history
  • Loading branch information
RomanHotsiy committed Apr 25, 2017
1 parent 6b363a5 commit 0341db4
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 1 deletion.
1 change: 1 addition & 0 deletions lib/components/Search/redoc-search.html
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
14 changes: 13 additions & 1 deletion lib/components/Search/redoc-search.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down
5 changes: 5 additions & 0 deletions lib/components/Search/redoc-search.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '';
Expand Down

0 comments on commit 0341db4

Please sign in to comment.