From 492329149faf7afd1ee619d0364257f522c39e56 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Sun, 27 Oct 2019 18:36:04 +0100
Subject: [PATCH] Finishing the search engine.

---
 Kyoo/ClientApp/src/app/app.component.scss         | 2 +-
 Kyoo/ClientApp/src/app/app.component.ts           | 8 +++++++-
 Kyoo/ClientApp/src/app/search/search.component.ts | 7 +++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

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 = <HTMLInputElement>document.getElementById("search");
+		let input: HTMLInputElement = <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 = <HTMLInputElement>document.getElementById("search");
+		searchBar.classList.add("searching");
+		searchBar.value = this.items.query;
+	}
 }