From 08a78d2879f42ab49f2674b557b365c2f6a23bb5 Mon Sep 17 00:00:00 2001
From: Mattias Erming <mattias@mattiaserming.com>
Date: Sat, 24 May 2014 23:56:28 +0200
Subject: [PATCH] Added close buttons

---
 client/css/style.css | 44 +++++++++++++++++++++++++++++++++++---------
 client/index.html    |  1 +
 client/js/chat.js    | 11 +++++++++--
 3 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index 17fc778..554a51b 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -78,7 +78,12 @@ button::-moz-focus-inner {
 #networks {
 	margin: 20px;
 }
-#networks button {
+#networks .network + .network {
+	border-top: 2px solid #ebedef;
+	margin-top: 14px;
+	padding-top: 14px;
+}
+#networks .channel {
 	border-radius: 3px;
 	color: #1abc9c;
 	display: block;
@@ -92,17 +97,35 @@ button::-moz-focus-inner {
 	white-space: nowrap;
 	width: 100%;
 }
-#networks button:hover {
-	background-color: #f1f2f3;
-}
 #networks button.active {
 	background-color: #ebedef;
 	color: #526476;
 }
-#networks .network + .network {
-	border-top: 2px solid #ebedef;
-	margin-top: 14px;
-	padding-top: 14px;
+#networks button:hover {
+	background-color: #f1f2f3;
+}
+#networks button:hover .badge {
+	opacity: 0;
+}
+#networks button:hover .close {
+	opacity: .2;
+}
+#networks .close {
+	background: no-repeat url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2IDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGQ9Ik0xMi44NzIsMS41NjJjMC4xOTUsMC4xOTQsMC4xOTUsMC41MTMsMCwwLjcwN0w4Ljk4Myw2LjE2Yy0wLjE5MywwLjE5NC0wLjE5MywwLjUxMywwLDAuNzA4bDMuODg3LDMuODkyDQoJYzAuMTk1LDAuMTk0LDAuMTk1LDAuNTEzLDAsMC43MDdsLTEuNDE2LDEuNDEzYy0wLjE5MywwLjE5NC0wLjUxMiwwLjE5NC0wLjcwNywwTDYuODYyLDguOTg4Yy0wLjE5NC0wLjE5NC0wLjUxMy0wLjE5NC0wLjcwNywwDQoJbC0zLjg4OSwzLjg4OWMtMC4xOTQsMC4xOTUtMC41MTMsMC4xOTUtMC43MDcsMGwtMS40MTQtMS40MTZjLTAuMTk0LTAuMTkzLTAuMTk0LTAuNTEyLDAtMC43MDdsMy44OS0zLjg4OQ0KCWMwLjE5NC0wLjE5NCwwLjE5NC0wLjUxMywwLTAuNzA4TDAuMTQ4LDIuMjY2Yy0wLjE5NC0wLjE5NS0wLjE5NC0wLjUxMywwLTAuNzA3bDEuNDE1LTEuNDE0YzAuMTk0LTAuMTk0LDAuNTEzLTAuMTk0LDAuNzA3LDANCglsMy44ODUsMy44OTFjMC4xOTQsMC4xOTUsMC41MTMsMC4xOTUsMC43MDcsMC4wMDFsMy44ODgtMy44OWMwLjE5NS0wLjE5MywwLjUxNC0wLjE5MywwLjcwNywwTDEyLjg3MiwxLjU2MnoiLz4NCjwvc3ZnPg0K);
+	background-size: 50%;
+	background-position: 6px 6px;
+	border-radius: 2px;
+	height: 19px;
+	margin-top: 1px;
+	opacity: 0;
+	position: absolute;
+	right: 28px;
+	transition: all .25s;
+	width: 20px;
+}
+#networks .close:hover {
+	background-color: rgba(0, 0, 0, .1);
+	opacity: .6 !important;
 }
 #networks .badge {
 	background: #f7f9fa;
@@ -112,6 +135,9 @@ button::-moz-focus-inner {
 	font: 12px sans-serif;
 	line-height: 21px;
 	padding: 0 6px;
+	position: absolute;
+	right: 28px;
+	transition: all .25s;
 }
 #networks .badge.highlight {
 	background: #f8e2e2;
@@ -197,7 +223,7 @@ button::-moz-focus-inner {
 }
 #chat .show-more {
 	display: none;
-	margin: 6px 8px 4px 148px;
+	margin: 4px 8px 4px 148px;
 }
 #chat .show-more .btn {
 	width: 100%;
diff --git a/client/index.html b/client/index.html
index 8ea081b..8af6d35 100644
--- a/client/index.html
+++ b/client/index.html
@@ -40,6 +40,7 @@
 		{{#each channels}}
 		<button id="channel-{{id}}" class="channel" data-target="#window-{{id}}">
 			<span class="badge"></span>
+			<span class="close"></span>
 			{{name}}
 		</button>
 		{{/each}}
diff --git a/client/js/chat.js b/client/js/chat.js
index 41ed7ae..07f5aae 100644
--- a/client/js/chat.js
+++ b/client/js/chat.js
@@ -126,8 +126,15 @@ $(function() {
 			.focus();
 	});
 	
-	sidebar.on("click", "#menu .btn", function() {
-		$("#menu").toggleClass("visible");
+	sidebar.on("click", ".close", function() {
+		var link = $(this);
+		var channel = link.closest(".channel");
+		var id = parseInt(channel.attr("id").split("-")[1]);
+		socket.emit("input", {
+			id: id,
+			text: "/close",
+		});
+		return false;
 	});
 	
 	chat.on("append", ".messages", function() {