From 2516dce8cba0bffecd7d206291f98ce43aadb459 Mon Sep 17 00:00:00 2001
From: Mattias Erming <mattias@mattiaserming.com>
Date: Sat, 15 Mar 2014 16:07:49 +0100
Subject: [PATCH] Added message counter

---
 client/css/bootstrap.css | 22 +++++++++++-----------
 client/css/style.css     | 17 +++++++++--------
 client/index.html        |  1 +
 client/js/chat.js        | 15 +++++++++++++--
 4 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/client/css/bootstrap.css b/client/css/bootstrap.css
index a14cd57f..69abc025 100644
--- a/client/css/bootstrap.css
+++ b/client/css/bootstrap.css
@@ -240,14 +240,14 @@ img {
   height: auto;
 }
 .img-rounded {
-  border-radius: 6px;
+  border-radius: 2px;
 }
 .img-thumbnail {
   padding: 4px;
   line-height: 1.42857143;
   background-color: #ffffff;
   border: 1px solid #dddddd;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   display: inline-block;
@@ -286,7 +286,7 @@ hr {
   padding: 6px 12px;
   font-size: 14px;
   line-height: 1.42857143;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -604,19 +604,19 @@ fieldset[disabled] .btn-link:focus {
   padding: 10px 16px;
   font-size: 18px;
   line-height: 1.33;
-  border-radius: 6px;
+  border-radius: 2px;
 }
 .btn-sm {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 .btn-xs {
   padding: 1px 5px;
   font-size: 12px;
   line-height: 1.5;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 .btn-block {
   display: block;
@@ -644,7 +644,7 @@ input[type="button"].btn-block {
   white-space: nowrap;
   text-align: center;
   background-color: #999999;
-  border-radius: 10px;
+  border-radius: 2px;
 }
 .badge:empty {
   display: none;
@@ -684,13 +684,13 @@ a.list-group-item.active > .badge,
   border: 1px solid #dddddd;
 }
 .list-group-item:first-child {
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
 }
 .list-group-item:last-child {
   margin-bottom: 0;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
 }
 .list-group-item > .badge {
   float: right;
diff --git a/client/css/style.css b/client/css/style.css
index 717e202f..fbb66d06 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -3,13 +3,6 @@ body {
 	font: 12px Consolas, monospace;
 	height: 100%;
 }
-a {
-	color: inherit;
-	text-decoration: none;
-}
-a:hover {
-	text-decoration: underline;
-}
 ul,
 li {
 	list-style: none;
@@ -31,6 +24,14 @@ h2 {
 	margin: 10px 0;
 	padding: 0 10px;
 }
+#sidebar .list-group-item {
+	padding: 10px 12px;
+}
+#sidebar .list-group-item .badge {
+	font-size: 11px;
+	font-weight: normal;
+	margin-top: -1px;
+}
 #chat {
 	bottom: 0;
 	left: 200px;
@@ -103,7 +104,7 @@ h2 {
 	position: absolute;
 	right: 0px;
 	top: 43px;
-	width: 159px;
+	width: 160px;
 }
 #chat .users .user {
 	clear: both;
diff --git a/client/index.html b/client/index.html
index f9ce0b3e..025d4cdf 100644
--- a/client/index.html
+++ b/client/index.html
@@ -19,6 +19,7 @@
 	<div class="network list-group" data-id="{{id}}">
 		{{#channels}}
 		<a href="" class="channel list-group-item" data-id="{{id}}">
+			<span class="badge pull-right"></span>
 			{{name}}
 		</a>
 		{{/channels}}
diff --git a/client/js/chat.js b/client/js/chat.js
index 6b6e5e9c..a664a0ef 100644
--- a/client/js/chat.js
+++ b/client/js/chat.js
@@ -86,11 +86,22 @@ $(function() {
 		});
 	});
 	
+	chat.on("append", ".window", function() {
+		var id = $(this).data("id");
+		var badge = sidebar.find(".channel[data-id='" + id + "']:not(.active) .badge");
+		badge.html((parseInt(badge.html()) + 1) || "1");
+	});
+	
 	sidebar.on("click", ".channel", function(e) {
 		e.preventDefault();
 		sidebar.find(".active").removeClass("active");
-		$(this).addClass("active");
-		chat.find(".window[data-id='" + $(this).data("id") + "']")
+		var item = $(this)
+			.addClass("active")
+			.find(".badge")
+			.html("")
+			.end();
+		var id = item.data("id");
+		chat.find(".window[data-id='" + id + "']")
 			.bringToTop();
 	});
 });