diff --git a/Kyoo/ClientApp/src/app/app.component.scss b/Kyoo/ClientApp/src/app/app.component.scss index 4ce4e1ca..7449bedb 100644 --- a/Kyoo/ClientApp/src/app/app.component.scss +++ b/Kyoo/ClientApp/src/app/app.component.scss @@ -54,7 +54,7 @@ padding: 0; transition: width 0.4s ease-in-out; - &:focus, .searching + &:focus, &.searching { width: 12rem; diff --git a/Kyoo/ClientApp/src/app/app.component.ts b/Kyoo/ClientApp/src/app/app.component.ts index 81d31048..23a2f55c 100644 --- a/Kyoo/ClientApp/src/app/app.component.ts +++ b/Kyoo/ClientApp/src/app/app.component.ts @@ -43,7 +43,7 @@ export class AppComponent openSearch() { - let input = document.getElementById("search"); + let input: HTMLInputElement = document.getElementById("search"); input.value = ""; input.focus(); @@ -53,9 +53,15 @@ export class AppComponent { let query: string = event.target.value; if (query != "") + { + event.target.classList.add("searching"); this.router.navigate(["/search/" + query], { replaceUrl: this.router.url.startsWith("/search/") }); + } else + { + event.target.classList.remove("searching"); this.location.back(); + } } } diff --git a/Kyoo/ClientApp/src/app/search/search.component.ts b/Kyoo/ClientApp/src/app/search/search.component.ts index 63633886..b4b6e618 100644 --- a/Kyoo/ClientApp/src/app/search/search.component.ts +++ b/Kyoo/ClientApp/src/app/search/search.component.ts @@ -22,4 +22,11 @@ export class SearchComponent implements OnInit this.title.setTitle(this.items.query + " - Kyoo"); }); } + + ngAfterViewInit() + { + let searchBar: HTMLInputElement = document.getElementById("search"); + searchBar.classList.add("searching"); + searchBar.value = this.items.query; + } }