From 606c62dc70760eaeb41e1b887e335f91a5448d2a Mon Sep 17 00:00:00 2001
From: Richard Lewis <richrd.lewis@gmail.com>
Date: Sat, 11 Jan 2020 17:40:18 +0200
Subject: [PATCH] Move styles to component.

---
 client/components/NetworkList.vue | 68 ++++++++++++++++++++++++++++---
 client/css/style.css              | 59 ---------------------------
 2 files changed, 62 insertions(+), 65 deletions(-)

diff --git a/client/components/NetworkList.vue b/client/components/NetworkList.vue
index f47d3855..0fc7a4e5 100644
--- a/client/components/NetworkList.vue
+++ b/client/components/NetworkList.vue
@@ -117,6 +117,66 @@
 	</div>
 </template>
 
+<style>
+.jump-to-input {
+	margin: 8px;
+	position: relative;
+}
+
+.jump-to-input .input {
+	margin: 0;
+	width: 100%;
+	border: 0;
+	color: inherit;
+	background-color: rgba(255, 255, 255, 0.1);
+	padding-right: 35px;
+}
+
+.jump-to-input .input::placeholder {
+	color: rgba(255, 255, 255, 0.35);
+}
+
+.jump-to-input::before {
+	content: "\f002"; /* http://fontawesome.io/icon/search/ */
+	color: rgba(255, 255, 255, 0.35);
+	position: absolute;
+	right: 8px;
+	top: 0;
+	bottom: 0;
+	pointer-events: none;
+	line-height: 35px !important;
+}
+
+.jump-to-results {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	overflow: auto;
+}
+
+.jump-to-results .no-results {
+	margin: 14px 8px;
+	text-align: center;
+}
+
+.jump-to-results .channel-list-item.active {
+	cursor: pointer;
+}
+
+.jump-to-results .channel-list-item .add-channel,
+.jump-to-results .channel-list-item .close-tooltip {
+	display: none;
+}
+
+.jump-to-results .channel-list-item[data-type="lobby"] {
+	padding: 8px 14px;
+}
+
+.jump-to-results .channel-list-item[data-type="lobby"]::before {
+	content: "\f233";
+}
+</style>
+
 <script>
 import Mousetrap from "mousetrap";
 import Draggable from "vuedraggable";
@@ -180,19 +240,15 @@ export default {
 			this.setActiveSearchItem();
 		},
 	},
-	mounted() {
-		Mousetrap.bind("alt+j", this.toggleSearch);
-	},
-	destroyed() {
-		Mousetrap.unbind("alt+j", this.toggleSearch);
-	},
 	mounted() {
 		Mousetrap.bind("alt+shift+right", this.expandNetwork);
 		Mousetrap.bind("alt+shift+left", this.collapseNetwork);
+		Mousetrap.bind("alt+j", this.toggleSearch);
 	},
 	beforeDestroy() {
 		Mousetrap.unbind("alt+shift+right", this.expandNetwork);
 		Mousetrap.unbind("alt+shift+left", this.collapseNetwork);
+		Mousetrap.unbind("alt+j", this.toggleSearch);
 	},
 	methods: {
 		expandNetwork() {
diff --git a/client/css/style.css b/client/css/style.css
index 718114c7..713bfda3 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -511,7 +511,6 @@ p {
 	content: "\f0da"; /* http://fontawesome.io/icon/caret-right/ */
 }
 
-.jump-to-input::before,
 #chat .count::before {
 	color: #cfcfcf;
 	content: "\f002"; /* http://fontawesome.io/icon/search/ */
@@ -2805,61 +2804,3 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 #chat table.channel-list .topic {
 	white-space: pre-wrap;
 }
-
-/* Jump to feature WIP styles */
-.jump-to-input {
-	margin: 8px;
-	position: relative;
-}
-
-.jump-to-input .input {
-	margin: 0;
-	width: 100%;
-	border: 0;
-	color: inherit;
-	background-color: rgba(255, 255, 255, 0.1);
-	padding-right: 35px;
-}
-
-.jump-to-input .input::placeholder {
-	color: rgba(255, 255, 255, 0.35);
-}
-
-.jump-to-input::before {
-	color: rgba(255, 255, 255, 0.35);
-	position: absolute;
-	right: 8px;
-	top: 0;
-	bottom: 0;
-	pointer-events: none;
-	line-height: 35px;
-}
-
-.jump-to-results {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	overflow: auto;
-}
-
-.jump-to-results .no-results {
-	margin: 14px 8px;
-	text-align: center;
-}
-
-.jump-to-results .channel-list-item.active {
-	cursor: pointer;
-}
-
-.jump-to-results .channel-list-item .add-channel,
-.jump-to-results .channel-list-item .close-tooltip {
-	display: none;
-}
-
-.jump-to-results .channel-list-item[data-type="lobby"] {
-	padding: 8px 14px;
-}
-
-.jump-to-results .channel-list-item[data-type="lobby"]::before {
-	content: "\f233";
-}