Render user actions separately

client/css/style.css

@@ -603,11 +603,6 @@ button {
 #chat .msg:last-child .text {
 	padding-bottom: 10px;
 }
-#chat .msg .type {
-	color: #ccc;
-	display: none;
-	font-style: normal;
-}
 #chat .msg .inline-channel {
 	cursor: pointer;
 }
@@ -641,7 +636,6 @@ button {
 }
 #chat.no-colors .from button,
 #chat.no-colors .sidebar button {
-	color: #84ce88 !important;
 	color: #50a656 !important;
 }
 #chat .text {
@@ -657,16 +651,6 @@ button {
 #chat .self .text {
 	color: #999;
 }
-#chat .join .type,
-#chat .part .type,
-#chat .mode .type,
-#chat .nick .type,
-#chat .kick .type,
-#chat .quit .type,
-#chat .quit .type,
-#chat .topic .type {
-	display: inline;
-}
 #chat .error,
 #chat .error .from,
 #chat .highlight,
@@ -681,19 +665,55 @@ button {
 #chat.hide-quit .quit {
 	display: none !important;
 }
-#chat .notice .type {
-	display: none;
+#chat .join .from:before {
+    font-family: FontAwesome;
+	content: "\f090";
+	color: #2ECC40;
 }
-#chat .action,
-#chat .chan .action .user {
-	color: #f39c12 !important;
+#chat .kick .from:before {
+    font-family: FontAwesome;
+	content: "\f05e";
+	color: #FF4136;
 }
-#chat .action .user:before {
-	content: "* ";
+#chat .part .from:before,
+#chat .quit .from:before {
+    font-family: FontAwesome;
+	content: "\f08b";
+	color: #FF4136;
 }
-#chat .action .user:after {
-	content: "";
+#chat .topic .from:before {
+    font-family: FontAwesome;
+	content: "\f0a1";
+	color: #2ECC40;
 }
+#chat .mode .from:before {
+    font-family: FontAwesome;
+	content: "\f05a";
+	color: #2ECC40;
+}
+#chat .nick .from:before {
+    font-family: FontAwesome;
+	content: "\f007";
+	color: #2ECC40;
+}
+#chat .action .text,
+#chat .action .user {
+	color: #F39C12;
+}
+#chat .action .from:before {
+    font-family: FontAwesome;
+	content: "\f005";
+	color: #F39C12;
+}
+#chat .notice .time,
+#chat .notice .text,
+#chat .chan .notice .user {
+	color: #0074D9 !important;
+}
+#chat .notice .user:before {
+	content: "Notice: ";
+}
+
 #chat .toggle-button {
 	background: #f5f5f5;
 	border-radius: 2px;

client/js/shout.js

@@ -185,14 +185,40 @@ $(function() {
 	});
 
 	function buildChatMessage(data) {
+		var type = data.msg.type;
 		var target = "#chan-" + data.chan;
-		if (data.msg.type === "error") {
+		if (type === "error") {
 			target = "#chan-" + chat.find(".active").data("id");
 		}
 
 		var chan = chat.find(target);
 		var from = data.msg.from;
 
+		if ([
+			"join",
+			"mode",
+			"kick",
+			"nick",
+			"part",
+			"quit",
+			"topic",
+			"action",
+		].indexOf(type) !== -1) {
+			switch (type) {
+			case "join": data.msg.formattedAction = "has joined the channel"; break;
+			case "mode": data.msg.formattedAction = "sets mode"; break;
+			case "kick": data.msg.formattedAction = "has kicked"; break;
+			case "nick": data.msg.formattedAction = "is now known as"; break;
+			case "part": data.msg.formattedAction = "has left the channel"; break;
+			case "quit": data.msg.formattedAction = "has quit"; break;
+			case "topic": data.msg.formattedAction = "has changed the topic to:"; break;
+			default: data.msg.formattedAction = "";
+			}
+
+			var action = $(render("msg_action", data.msg));
+			return action;
+		}
+
 		var msg = $(render("msg", data.msg));
 
 		var text = msg.find(".text");
@@ -220,15 +246,12 @@ $(function() {
 				}
 			});
 
-		if (chan.hasClass("channel")) {
-			var type = data.msg.type;
-			if (type === "message" || type === "action") {
-				var nicks = chan.find(".users").data("nicks");
-				if (nicks) {
-					var find = nicks.indexOf(from);
-					if (find !== -1 && typeof move === "function") {
-						move(nicks, find, 0);
-					}
+		if ((type === "message" || type === "action") && chan.hasClass("channel")) {
+			var nicks = chan.find(".users").data("nicks");
+			if (nicks) {
+				var find = nicks.indexOf(from);
+				if (find !== -1 && typeof move === "function") {
+					move(nicks, find, 0);
 				}
 			}
 		}

client/themes/crypto.css

@@ -76,7 +76,6 @@ a:hover, #chat a:hover {
     line-height: 30px;
 }
 
-.chan:first-child.activeat .msg .type,
 #sidebar .chan:first-child {
     color: #00FF0E;
 }
@@ -85,7 +84,6 @@ a:hover, #chat a:hover {
 #sidebar .chan,
 #sidebar .sign-out,
 #chat .time,
-#chat .msg .type,
 #chat .count:before,
 #sidebar .empty {
     color: #666;

client/themes/morning.css

@@ -164,21 +164,16 @@ QUIT #d0907d
 }
 
 #chat .msg.quit .time,
-#chat .msg.quit .from button,
-#chat .msg.quit .type {
+#chat .msg.quit .from button {
   color: #d0907d !important;
 }
 
 #chat .msg.topic {
   color: #fefefe;
 }
-#chat .msg .type {
-  margin-right: 0.5em;
-}
 
 #chat .msg.join .time,
-#chat .msg.join .from button,
-#chat .msg.join .type {
+#chat .msg.join .from button {
   color: #84ce88 !important;
 }
 /* Embeds */

client/themes/zenburn.css

@@ -179,21 +179,16 @@ body {
 }
 
 #chat .msg.quit .time,
-#chat .msg.quit .from button,
-#chat .msg.quit .type {
+#chat .msg.quit .from button {
   color: #bc6c9c !important;
 }
 
 #chat .msg.topic {
   color: #dcdccc;
 }
-#chat .msg .type {
-  margin-right: 0.5em;
-}
 
 #chat .msg.join .time,
-#chat .msg.join .from button,
-#chat .msg.join .type {
+#chat .msg.join .from button {
   color: #8cd0d3 !important;
 }
 /* Embeds */

client/views/msg.tpl

@@ -8,7 +8,6 @@
 		{{/if}}
 	</span>
 	<span class="text">
-		<em class="type">{{type}}</em>
 		{{#equal type "toggle"}}
 			<div class="force-newline">
 				<button id="toggle-{{id}}" class="toggle-button">···</button>

client/views/msg_action.tpl

@@ -0,0 +1,11 @@
+<div class="msg {{type}} {{#if self}}self{{/if}}">
+	<span class="time">
+		{{tz time}}
+	</span>
+	<span class="from"></span>
+	<span class="text">
+		<a href="#" class="user">{{mode}}{{from}}</a>
+		{{formattedAction}}
+		{{{parse text}}}
+	</span>
+</div>

src/plugins/inputs/action.js

@@ -25,6 +25,7 @@ module.exports = function(network, chan, cmd, args) {
 
 		var msg = new Msg({
 			type: Msg.Type.ACTION,
+			mode: chan.getMode(irc.me),
 			from: irc.me,
 			text: text
 		});

src/plugins/irc-events/kick.js

@@ -27,12 +27,15 @@ module.exports = function(irc, network) {
 		if (data.nick.toLowerCase() === irc.me.toLowerCase()) {
 			self = true;
 		}
-
+		var reason = data.message || "";
+		if (reason.length > 0) {
+			reason = " (" + reason + ")";
+		}
 		var msg = new Msg({
 			type: Msg.Type.KICK,
 			mode: mode,
 			from: from,
-			text: data.client,
+			text: data.client + reason,
 			self: self
 		});
 		chan.messages.push(msg);

src/plugins/irc-events/mode.js

@@ -21,7 +21,7 @@ module.exports = function(irc, network) {
 				type: Msg.Type.MODE,
 				mode: chan.getMode(from),
 				from: from,
-				text: data.mode + " " + data.client,
+				text: data.mode + " " + (data.client || ""),
 				self: self
 			});
 			chan.messages.push(msg);

src/plugins/irc-events/notice.js

@@ -20,6 +20,7 @@ module.exports = function(irc, network) {
 		}
 		var msg = new Msg({
 			type: Msg.Type.NOTICE,
+			mode: chan.getMode(from),
 			from: from,
 			text: data.message
 		});

src/plugins/irc-events/part.js

@@ -22,9 +22,14 @@ module.exports = function(irc, network) {
 				chan: chan.id,
 				users: chan.users
 			});
+			var reason = data.message || "";
+			if (reason.length > 0) {
+				reason = "(" + reason + ")";
+			}
 			var msg = new Msg({
 				type: Msg.Type.PART,
 				mode: chan.getMode(from),
+				text: reason,
 				from: from
 			});
 			chan.messages.push(msg);

src/plugins/irc-events/quit.js

@@ -15,9 +15,14 @@ module.exports = function(irc, network) {
 				chan: chan.id,
 				users: chan.users
 			});
+			var reason = data.message || "";
+			if (reason.length > 0) {
+				reason = "(" + reason + ")";
+			}
 			var msg = new Msg({
 				type: Msg.Type.QUIT,
 				mode: chan.getMode(from),
+				text: reason,
 				from: from
 			});
 			chan.messages.push(msg);