From e946633c1899c87e967fb9faca4889f9635abca7 Mon Sep 17 00:00:00 2001
From: Mattias Erming <mattias@mattiaserming.com>
Date: Wed, 9 Jul 2014 19:11:07 +0200
Subject: [PATCH] Added close button again

---
 client/css/style.css | 26 +++++++++++++++++++++++++-
 client/index.html    |  3 ++-
 client/js/chat.js    | 25 +++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index 47f7e2e..d452c42 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -162,6 +162,12 @@ button {
 	font-size: 15px;
 	font-weight: bold;
 }
+#sidebar .chan:hover .badge {
+	opacity: 0;
+}
+#sidebar .chan:hover .close {
+	opacity: .2;
+}
 #sidebar .badge {
 	background: rgba(255, 255, 255, .06);
 	border-radius: 3px;
@@ -171,7 +177,7 @@ button {
 	padding: 3px 6px;
 	position: absolute;
 	right: 10px;
-	transition: all .1s;
+	transition: all .2s;
 }
 #sidebar .badge.highlight {
 	background: #fff;
@@ -180,6 +186,24 @@ button {
 #sidebar .badge:empty {
 	display: none;
 }
+#sidebar .close {
+	background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogPGc+DQogIDx0aXRsZT5MYXllciAxPC90aXRsZT4NCiAgPHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18xIiBkPSJtMTIuODcyLDEuNTYyYzAuMTk1MDAxLDAuMTk0IDAuMTk1MDAxLDAuNTEzIDAsMC43MDdsLTMuODg5LDMuODkxYy0wLjE5MywwLjE5NCAtMC4xOTMsMC41MTMgMCwwLjcwOGwzLjg4NywzLjg5MmMwLjE5NSwwLjE5NCAwLjE5NSwwLjUxMyAwLDAuNzA3bC0xLjQxNTk5OSwxLjQxM2MtMC4xOTMwMDEsMC4xOTQgLTAuNTEyLDAuMTk0IC0wLjcwNzAwMSwwbC0zLjg4NSwtMy44OTJjLTAuMTk0LC0wLjE5NCAtMC41MTMsLTAuMTk0IC0wLjcwNywwbC0zLjg4OSwzLjg4OWMtMC4xOTQsMC4xOTUgLTAuNTEzLDAuMTk1IC0wLjcwNywwbC0xLjQxNCwtMS40MTU5OTljLTAuMTk0LC0wLjE5MzAwMSAtMC4xOTQsLTAuNTEyIDAsLTAuNzA3MDAxbDMuODksLTMuODg5YzAuMTk0LC0wLjE5NCAwLjE5NCwtMC41MTMgMCwtMC43MDhsLTMuODg3LC0zLjg5MWMtMC4xOTQsLTAuMTk1IC0wLjE5NCwtMC41MTMgMCwtMC43MDdsMS40MTUsLTEuNDE0YzAuMTk0LC0wLjE5NCAwLjUxMywtMC4xOTQgMC43MDcsMGwzLjg4NSwzLjg5MWMwLjE5NCwwLjE5NSAwLjUxMywwLjE5NSAwLjcwNywwLjAwMWwzLjg4OCwtMy44OWMwLjE5NSwtMC4xOTMgMC41MTQsLTAuMTkzIDAuNzA3LDBsMS40MTUsMS40MTV6Ii8+DQogPC9nPg0KPC9zdmc+);
+	background-size: 50%;
+	background-position: 5px 6px;
+	border-radius: 3px;
+	height: 18px;
+	margin-top: 1px;
+	margin-right: 10px;
+	opacity: 0;
+	position: absolute;
+	right: 0;
+	transition: all .2s;
+	width: 18px;
+}
+#sidebar .close:hover {
+	background-color: rgba(0, 0, 0, .2);
+	opacity: .7 !important;
+}
 #footer {
 	height: 80px;
 	line-height: 80px;
diff --git a/client/index.html b/client/index.html
index d963803..6811d09 100644
--- a/client/index.html
+++ b/client/index.html
@@ -111,8 +111,9 @@
 		
 		<script type="text/html" class="channels">
 		{{#each channels}}
-		<button data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan">
+		<button data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan {{type}}">
 			<span class="badge"></span>
+			<span class="close"></span>
 			{{name}}
 		</button>
 		{{/each}}
diff --git a/client/js/chat.js b/client/js/chat.js
index 356f228..3f82362 100644
--- a/client/js/chat.js
+++ b/client/js/chat.js
@@ -225,6 +225,31 @@ $(function() {
 			.sticky();
 	});
 	
+	sidebar.on("click", ".close", function() {
+		var cmd = "/close";
+		var chan = $(this).closest(".chan");
+		if (chan.hasClass("lobby")) {
+			cmd = "/quit";
+			var server = chan
+				.clone()
+				.remove("span")
+				.text()
+				.trim();
+			if (!confirm("Disconnect from " + server + "?")) {
+				return false;
+			}
+		}
+		socket.emit("input", {
+			target: chan.data("id"),
+			text: cmd
+		});
+		chan.css({
+			transition: "none",
+			opacity: .4
+		});
+		return false;
+	});
+	
 	chat.on("input", ".search", function() {
 		var value = $(this).val();
 		var names = $(this).closest(".users").find(".names");