From bb418718730ab4e242691812ff878ce69af833b0 Mon Sep 17 00:00:00 2001
From: Nachtalb <info@nachtalb.io>
Date: Fri, 30 Apr 2021 01:49:49 +0200
Subject: [PATCH] Add close search button

---
 client/components/Windows/SearchResults.vue | 9 +++++++++
 client/css/style.css                        | 8 ++++++--
 client/themes/morning.css                   | 1 +
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/client/components/Windows/SearchResults.vue b/client/components/Windows/SearchResults.vue
index ed307cf5..08ce21ff 100644
--- a/client/components/Windows/SearchResults.vue
+++ b/client/components/Windows/SearchResults.vue
@@ -21,6 +21,12 @@
 					>
 					<span class="topic">{{ $route.query.q }}</span>
 					<MessageSearchForm :network="network" :channel="channel" />
+					<button
+						class="close"
+						aria-label="Close search window"
+						title="Close search window"
+						@click="closeSearch"
+					/>
 				</div>
 				<div class="chat-content">
 					<div ref="chat" class="chat" tabindex="-1">
@@ -174,6 +180,9 @@ export default {
 		setActiveChannel() {
 			this.$store.commit("activeChannel", this.chan);
 		},
+		closeSearch() {
+			this.$root.switchToChannel(this.channel);
+		},
 		shouldDisplayDateMarker(message, id) {
 			const previousMessage = this.messages[id - 1];
 
diff --git a/client/css/style.css b/client/css/style.css
index 7ae30f26..4891253b 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -284,6 +284,7 @@ p {
 #viewport .lt::before,
 #viewport .rt::before,
 #chat button.mentions::before,
+#chat button.close::before,
 #chat button.menu::before,
 #chat button.search::before,
 .channel-list-item::before,
@@ -344,6 +345,7 @@ p {
 #chat button.menu::before { content: "\f142"; /* http://fontawesome.io/icon/ellipsis-v/ */ }
 #chat button.mentions::before { content: "\f1fa"; /* https://fontawesome.com/icons/at?style=solid */ }
 #chat button.search::before { content: "\f002"; /* https://fontawesome.com/icons/search?style=solid */ }
+#chat button.close::before { content: "\f00d"; /* https://fontawesome.com/icons/times?style=solid */ }
 
 .context-menu-join::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
 .context-menu-user::before { content: "\f007"; /* http://fontawesome.io/icon/user/ */ }
@@ -578,7 +580,8 @@ p {
 #viewport .rt,
 #chat button.mentions,
 #chat button.search,
-#chat button.menu {
+#chat button.menu,
+#chat button.close {
 	color: #607992;
 	display: flex;
 	font-size: 14px;
@@ -593,7 +596,8 @@ p {
 #viewport .rt::before,
 #chat button.mentions::before,
 #chat button.search::before,
-#chat button.menu::before {
+#chat button.menu::before,
+#chat button.close::before {
 	width: 36px;
 	line-height: 36px; /* Fix alignment in Microsoft Edge */
 }
diff --git a/client/themes/morning.css b/client/themes/morning.css
index d01af32e..a0e0dca5 100644
--- a/client/themes/morning.css
+++ b/client/themes/morning.css
@@ -114,6 +114,7 @@ body {
 #viewport .rt,
 #chat button.mentions,
 #chat button.menu,
+#chat button.close,
 #form #submit {
 	color: #b7c5d1;
 }