Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-11 03:16:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: clear button (x) in search box

Browse Source
This commit is contained in:
Roman Hotsiy 2017-04-25 10:41:09 +03:00
parent 6b363a5f44
commit 0341db4559
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
3 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/components/Search/redoc-search.html
View File

@ -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>

14
lib/components/Search/redoc-search.scss
View File

@ -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%);

5
lib/components/Search/redoc-search.ts
View File

@ -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 = '';