From 7936dab6e3c2ae9261df52b564c8bdceaa49ee2c Mon Sep 17 00:00:00 2001 From: Mattias Erming Date: Thu, 25 Sep 2014 16:51:53 -0700 Subject: [PATCH] Show current nick --- client/css/style.css | 48 +++++++++++++++++++++---------- client/index.html | 1 + client/js/shout.js | 36 ++++++++++++++++++----- client/js/shout.templates.js | 2 ++ client/templates/network.tpl | 2 +- package.json | 2 +- src/models/network.js | 3 +- src/plugins/irc-events/nick.js | 13 ++++++--- src/plugins/irc-events/welcome.js | 7 ++++- 9 files changed, 84 insertions(+), 30 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 62e59212..ac77a00e 100644 --- a/client/css/style.css +++ b/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); diff --git a/client/index.html b/client/index.html index 7d26e949..ac2891da 100644 --- a/client/index.html +++ b/client/index.html @@ -239,6 +239,7 @@ Send
+
diff --git a/client/js/shout.js b/client/js/shout.js index 5a68ac58..7e860e04 100644 --- a/client/js/shout.js +++ b/client/js/shout.js @@ -63,12 +63,10 @@ $(function() { console.log(e); }); - socket.on("connect_error", function() { - refresh(); - }); - - socket.on("disconnect", function() { - refresh(); + $.each(["connect_error", "disconnect"], function(i, e) { + socket.on(e, 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() { diff --git a/client/js/shout.templates.js b/client/js/shout.templates.js index 496496b6..b05d8cf8 100644 --- a/client/js/shout.templates.js +++ b/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\n"; diff --git a/client/templates/network.tpl b/client/templates/network.tpl index e823e159..feec605d 100644 --- a/client/templates/network.tpl +++ b/client/templates/network.tpl @@ -1,5 +1,5 @@ {{#each networks}} -
+
{{partial "chan"}}
{{/each}} diff --git a/package.json b/package.json index 7d56e57b..7e549df2 100644 --- a/package.json +++ b/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": { diff --git a/src/models/network.js b/src/models/network.js index 908ad1c6..d0db0735 100644 --- a/src/models/network.js +++ b/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) { diff --git a/src/plugins/irc-events/nick.js b/src/plugins/irc-events/nick.js index 4ade101f..d437b783 100644 --- a/src/plugins/irc-events/nick.js +++ b/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); diff --git a/src/plugins/irc-events/welcome.js b/src/plugins/irc-events/welcome.js index 2212daac..4c4d5bef 100644 --- a/src/plugins/irc-events/welcome.js +++ b/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 + }); }); };