From bb98be475a4f71fe5d270a345fbcab0b5b0bdd95 Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Sat, 23 Jan 2016 16:39:54 +0200 Subject: [PATCH] Render user actions separately --- client/css/style.css | 70 ++++++++++++++++++++------------ client/js/shout.js | 43 +++++++++++++++----- client/themes/crypto.css | 2 - client/themes/morning.css | 9 +--- client/themes/zenburn.css | 9 +--- client/views/msg.tpl | 1 - client/views/msg_action.tpl | 11 +++++ src/plugins/inputs/action.js | 1 + src/plugins/irc-events/kick.js | 7 +++- src/plugins/irc-events/mode.js | 2 +- src/plugins/irc-events/notice.js | 1 + src/plugins/irc-events/part.js | 5 +++ src/plugins/irc-events/quit.js | 5 +++ 13 files changed, 111 insertions(+), 55 deletions(-) create mode 100644 client/views/msg_action.tpl diff --git a/client/css/style.css b/client/css/style.css index c8bc4062..e3c756a5 100644 --- a/client/css/style.css +++ b/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; diff --git a/client/js/shout.js b/client/js/shout.js index 1b080a6e..4fe9bbed 100644 --- a/client/js/shout.js +++ b/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); } } } diff --git a/client/themes/crypto.css b/client/themes/crypto.css index 26480b74..7f72fc92 100644 --- a/client/themes/crypto.css +++ b/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; diff --git a/client/themes/morning.css b/client/themes/morning.css index 555eacce..1652088d 100644 --- a/client/themes/morning.css +++ b/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 */ diff --git a/client/themes/zenburn.css b/client/themes/zenburn.css index 788b570c..497193d6 100644 --- a/client/themes/zenburn.css +++ b/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 */ diff --git a/client/views/msg.tpl b/client/views/msg.tpl index 770e79e4..6d2e9d48 100644 --- a/client/views/msg.tpl +++ b/client/views/msg.tpl @@ -8,7 +8,6 @@ {{/if}} - {{type}} {{#equal type "toggle"}}
diff --git a/client/views/msg_action.tpl b/client/views/msg_action.tpl new file mode 100644 index 00000000..78d2373e --- /dev/null +++ b/client/views/msg_action.tpl @@ -0,0 +1,11 @@ +
+ + {{tz time}} + + + + {{mode}}{{from}} + {{formattedAction}} + {{{parse text}}} + +
diff --git a/src/plugins/inputs/action.js b/src/plugins/inputs/action.js index b04b1463..e81d13a0 100644 --- a/src/plugins/inputs/action.js +++ b/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 }); diff --git a/src/plugins/irc-events/kick.js b/src/plugins/irc-events/kick.js index 5daf252e..a826450d 100644 --- a/src/plugins/irc-events/kick.js +++ b/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); diff --git a/src/plugins/irc-events/mode.js b/src/plugins/irc-events/mode.js index b4acc82a..0d462f0b 100644 --- a/src/plugins/irc-events/mode.js +++ b/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); diff --git a/src/plugins/irc-events/notice.js b/src/plugins/irc-events/notice.js index a4b9d877..da9d3fe3 100644 --- a/src/plugins/irc-events/notice.js +++ b/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 }); diff --git a/src/plugins/irc-events/part.js b/src/plugins/irc-events/part.js index a7ba317c..d4c0bb1c 100644 --- a/src/plugins/irc-events/part.js +++ b/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); diff --git a/src/plugins/irc-events/quit.js b/src/plugins/irc-events/quit.js index b60d334d..46322a10 100644 --- a/src/plugins/irc-events/quit.js +++ b/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);