Show current nick

client/css/style.css

@@ -435,7 +435,8 @@ button {
 }
 #chat,
 #windows .header {
-	font: 13px Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
+	font: 12px Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
+	line-height: 1.4;
 }
 #chat button:hover {
 	opacity: .6;
@@ -499,19 +500,18 @@ button {
 	padding-bottom: 10px;
 }
 #chat .msg .type {
-	color: #ccc;
-	color: #d0dbe2;
+	color: #ddd;
 	display: none;
 }
 #chat .time,
 #chat .from,
 #chat .text {
 	display: table-cell;
-	padding: 3px 0;
+	padding: 2px 0;
 	vertical-align: top;
 }
 #chat .time {
-	color: #d0dbe2;
+	color: #ddd;
 	text-align: right;
 	width: 46px;
 	min-width: 46px;
@@ -710,16 +710,7 @@ button {
 	position: absolute;
 	right: 0px;
 }
-#form input {
-	border: 1px solid #cfdae1;
-	font: 13px Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
-	border-radius: 2px;
-	height: 100%;
-	outline: none;
-	padding: 0 10px;
-	-webkit-appearance: none;
-	width: 100%;
-}
+
 #form .inner {
 	bottom: 7px;
 	left: 7px;
@@ -728,11 +719,38 @@ button {
 	top: 6px;
 }
 #form .input {
+	font: 12px Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
 	left: 0;
 	height: 34px;
 	margin-right: 60px;
 	position: relative;
 }
+#form #nick {
+	background: #f6f6f6;
+	color: #aaa;
+	position: absolute;
+	font: inherit;
+	font-size: 11px;
+	margin: 5px;
+	line-height: 26px;
+	height: 24px;
+	padding: 0 10px;
+	border-radius: 1px;
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	    -ms-user-select: none;
+	        user-select: none;
+}
+#form #input {
+	border: 1px solid #cfdae1;
+	font: inherit;
+	border-radius: 2px;
+	height: 100%;
+	outline: none;
+	padding: 0 10px;
+	-webkit-appearance: none;
+	width: 100%;
+}
 #form #submit {
 	background: #f4f4f4;
 	background-image: linear-gradient(#f4f4f4, #ececec);

client/index.html

@@ -239,6 +239,7 @@
 						Send
 					</button>
 					<div class="input">
+						<label for="input" id="nick"></label>
 						<input id="input" class="mousetrap">
 					</div>
 				</div>

client/js/shout.js

@@ -63,12 +63,10 @@ $(function() {
 		console.log(e);
 	});
 
-	socket.on("connect_error", function() {
+	$.each(["connect_error", "disconnect"], function(i, e) {
+		socket.on(e, function() {
 			refresh();
 		});
-
-	socket.on("disconnect", function() {
-		refresh();
 	});
 
 	socket.on("auth", function(data) {
@@ -231,7 +229,12 @@ $(function() {
 	});
 
 	socket.on("nick", function(data) {
-		console.log(data);
+		var id = data.network;
+		var nick = data.nick;
+		var network = sidebar.find("#network-" + id).data("nick", nick);
+		if (network.find(".active").length) {
+			setNick(nick);
+		}
 	});
 
 	socket.on("part", function(data) {
@@ -419,6 +422,15 @@ $(function() {
 			.sticky()
 			.end();
 
+		if (self.hasClass("chan")) {
+			var nick = self
+				.closest(".network")
+				.data("nick");
+			if (nick) {
+				setNick(nick);
+			}
+		}
+
 		if (screen.width > 768 && chan.hasClass("chan")) {
 			input.focus();
 		}
@@ -726,6 +738,16 @@ $(function() {
 		});
 	}
 
+	function setNick(nick) {
+		var width = $("#nick")
+			.html(nick + ":")
+			.width();
+		if (width) {
+			width += 34;
+			input.css("padding-left", width);
+		}
+	}
+
 	document.addEventListener(
 		"visibilitychange",
 		function() {

client/js/shout.templates.js

@@ -116,6 +116,8 @@ templates['network'] = template({"1":function(depth0,helpers,partials,data) {
     + escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
     + "\" class=\"network\" data-id=\""
     + escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
+    + "\" data-nick=\""
+    + escapeExpression(((helper = (helper = helpers.nick || (depth0 != null ? depth0.nick : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"nick","hash":{},"data":data}) : helper)))
     + "\">\n	"
     + escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "chan", {"name":"partial","hash":{},"data":data})))
     + "\n</section>\n";

client/templates/network.tpl

@@ -1,5 +1,5 @@
 {{#each networks}}
-<section id="network-{{id}}" class="network" data-id="{{id}}">
+<section id="network-{{id}}" class="network" data-id="{{id}}" data-nick="{{nick}}">
 	{{partial "chan"}}
 </section>
 {{/each}}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "shout",
   "description": "The self-hosted web IRC client",
-  "version": "0.34.1",
+  "version": "0.35.0",
   "author": "Mattias Erming",
   "preferGlobal": true,
   "bin": {

src/models/network.js

@@ -20,7 +20,8 @@ function Network(attr) {
 }
 
 Network.prototype.toJSON = function() {
-	return _.omit(this, "irc");
+	var json = _.extend(this, {nick: (this.irc || {}).me || ""});
+	return _.omit(json, "irc");
 };
 
 function prettify(host) {

src/plugins/irc-events/nick.js

@@ -5,10 +5,11 @@ module.exports = function(irc, network) {
 	var client = this;
 	irc.on("nick", function(data) {
 		var self = false;
-		if (data["new"] == irc.me) {
+		var nick = data["new"];
+		if (nick == irc.me) {
 			var lobby = network.channels[0];
 			var msg = new Msg({
-				text: "You're now known as " + data["new"],
+				text: "You're now known as " + nick,
 			});
 			lobby.messages.push(msg);
 			client.emit("msg", {
@@ -16,13 +17,17 @@ module.exports = function(irc, network) {
 				msg: msg
 			});
 			self = true;
+			client.emit("nick", {
+				network: network.id,
+				nick: nick
+			});
 		}
 		network.channels.forEach(function(chan) {
 			var user = _.findWhere(chan.users, {name: data.nick});
 			if (typeof user === "undefined") {
 				return;
 			}
-			user.name = data["new"];
+			user.name = nick;
 			chan.sortUsers();
 			client.emit("users", {
 				chan: chan.id,
@@ -31,7 +36,7 @@ module.exports = function(irc, network) {
 			var msg = new Msg({
 				type: Msg.Type.NICK,
 				from: data.nick,
-				text: data["new"],
+				text: nick,
 				self: self
 			});
 			chan.messages.push(msg);

src/plugins/irc-events/welcome.js

@@ -6,13 +6,18 @@ module.exports = function(irc, network) {
 		network.connected = true;
 		irc.write("PING " + network.host);
 		var lobby = network.channels[0];
+		var nick = data;
 		var msg = new Msg({
-			text: "You're now known as " + data
+			text: "You're now known as " + nick
 		});
 		lobby.messages.push(msg);
 		client.emit("msg", {
 			chan: lobby.id,
 			msg: msg
 		});
+		client.emit("nick", {
+			network: network.id,
+			nick: nick
+		});
 	});
 };