From 93f0f6942e691faa471b8cd547dd7c551745cfd3 Mon Sep 17 00:00:00 2001 From: stepie22 Date: Mon, 3 Oct 2016 20:03:19 +0200 Subject: [PATCH] Add a date seperator --- client/css/style.css | 27 ++++++++ client/js/libs/handlebars/localedate.js | 5 ++ client/js/lounge.js | 86 +++++++++++++++++++++++++ client/themes/morning.css | 12 +++- client/themes/zenburn.css | 12 +++- client/views/date-marker.tpl | 3 + client/views/msg.tpl | 2 +- client/views/msg_action.tpl | 2 +- client/views/msg_unhandled.tpl | 2 +- 9 files changed, 146 insertions(+), 5 deletions(-) create mode 100644 client/js/libs/handlebars/localedate.js create mode 100644 client/views/date-marker.tpl diff --git a/client/css/style.css b/client/css/style.css index 52910002..43442956 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -839,6 +839,33 @@ button { display: none; } +#chat .date-marker { + position: relative; + text-align: center; + opacity: .5; + margin: 0 10px; + z-index: 0; + font-weight: bold; + font-size: 12px; +} + +#chat .date-marker:before { + position: absolute; + z-index: -1; + content: ""; + left: 0; + right: 0; + top: 50%; + border-top: 1px solid #006b3b; +} + +#chat .date-marker-text:before { + content: attr(data-date); + background-color: white; + color: #006b3b; + padding: 0 10px; +} + .inline-channel { cursor: pointer; } diff --git a/client/js/libs/handlebars/localedate.js b/client/js/libs/handlebars/localedate.js new file mode 100644 index 00000000..a933ad06 --- /dev/null +++ b/client/js/libs/handlebars/localedate.js @@ -0,0 +1,5 @@ +"use strict"; + +Handlebars.registerHelper("localedate", function(time) { + return new Date(time).toLocaleDateString(); +}); diff --git a/client/js/lounge.js b/client/js/lounge.js index 9f153368..a665dca9 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -307,6 +307,27 @@ $(function() { } else { channel.append(render("unread_marker")); } + + if (data.type !== "lobby") { + var lastDate; + $(chat.find("#chan-" + data.id + " .messages .msg[data-time]")).each(function() { + var msg = $(this); + var msgDate = new Date(msg.attr("data-time")); + + // Top-most message in a channel + if (!lastDate) { + lastDate = msgDate; + msg.before(render("date-marker", {msgDate: msgDate})); + } + + if (lastDate.toDateString() !== msgDate.toDateString()) { + msg.before(render("date-marker", {msgDate: msgDate})); + } + + lastDate = msgDate; + }); + } + } function renderChannelUsers(data) { @@ -362,6 +383,21 @@ $(function() { var target = "#chan-" + data.chan; var container = chat.find(target + " .messages"); + // Check if date changed + var prevMsg = $(container.find(".msg")).last(); + var prevMsgTime = new Date(prevMsg.attr("data-time")); + var msgTime = new Date(msg.attr("data-time")); + + // It's the first message in a channel/query + if (prevMsg.length === 0) { + container.append(render("date-marker", {msgDate: msgTime})); + } + + if (prevMsgTime.toDateString() !== msgTime.toDateString()) { + prevMsg.append(render("date-marker", {msgDate: msgTime})); + } + + // Add message to the container container .append(msg) .trigger("msg", [ @@ -382,6 +418,13 @@ $(function() { .find("#chan-" + data.chan) .find(".messages"); + // Remove the date-change marker we put at the top, because it may + // not actually be a date change now + var firstChild = $(chan).children().eq(0); + if (firstChild.attr("class") === "date-marker") { + firstChild.remove(); + } + // get the scrollable wrapper around messages var scrollable = chan.closest(".chat"); var heightOld = chan.height(); @@ -394,6 +437,28 @@ $(function() { if (data.messages.length !== 100) { scrollable.find(".show-more").removeClass("show"); } + + // Date change detect + // Have to use data instaid of the documentFragment because it's being weird + var lastDate; + $(data.messages).each(function() { + var msgData = this; + var msgDate = new Date(msgData.time); + var msg = $(chat.find("#chan-" + data.chan + " .messages #msg-" + msgData.id)); + + // Top-most message in a channel + if (!lastDate) { + lastDate = msgDate; + msg.before(render("date-marker", {msgDate: msgDate})); + } + + if (lastDate.toDateString() !== msgDate.toDateString()) { + msg.before(render("date-marker", {msgDate: msgDate})); + } + + lastDate = msgDate; + }); + }); socket.on("network", function(data) { @@ -1210,6 +1275,26 @@ $(function() { var chan = $(this); if (chan.find(".messages .msg:not(.unread-marker)").slice(0, -100).remove().length) { chan.find(".show-more").addClass("show"); + + // Remove date-seperators that would otherwise be "stuck" at the top + // of the channel + var prev; + $(chan.find(".messages").children()).each(function() { + if (!prev) { + // Should always be a date-seperator, because it's always added + prev = $(this); + } else { + var current = $(this); + + if (current.attr("class") === "date-marker") { + prev.remove(); + } else { + return false; + } + + prev = current; + } + }); } }); }, 1000 * 10); @@ -1217,6 +1302,7 @@ $(function() { function clear() { chat.find(".active .messages .msg:not(.unread-marker)").remove(); chat.find(".active .show-more").addClass("show"); + chat.find(".active .date-marker").remove(); } function complete(word) { diff --git a/client/themes/morning.css b/client/themes/morning.css index a837d62c..41adf99a 100644 --- a/client/themes/morning.css +++ b/client/themes/morning.css @@ -155,7 +155,8 @@ body { border-color: #333c4a; } -#chat .unread-marker { +#chat .unread-marker, +#chat .date-marker { opacity: 1; } @@ -163,6 +164,15 @@ body { background-color: #333c4a; } +#chat .date-marker:before { + border-color: #97ea70; +} + +#chat .date-marker-text:before { + background-color: #333c4a; + color: #97ea70; +} + /* Setup text colors */ #chat .msg { color: #f3f3f3; diff --git a/client/themes/zenburn.css b/client/themes/zenburn.css index cd95b652..7d838dac 100644 --- a/client/themes/zenburn.css +++ b/client/themes/zenburn.css @@ -181,7 +181,8 @@ body { border-color: #3f3f3f; } -#chat .unread-marker { +#chat .unread-marker, +.date-marker { opacity: 1; } @@ -189,6 +190,15 @@ body { background-color: #3f3f3f; } +#chat .date-marker:before { + border-color: #97ea70; +} + +#chat .date-marker-text:before { + background-color: #3f3f3f; + color: #97ea70; +} + /* Setup text colors */ #chat .msg { color: #ffcfaf; diff --git a/client/views/date-marker.tpl b/client/views/date-marker.tpl new file mode 100644 index 00000000..bf9d89c7 --- /dev/null +++ b/client/views/date-marker.tpl @@ -0,0 +1,3 @@ +
+ +
diff --git a/client/views/msg.tpl b/client/views/msg.tpl index 8817f2be..1f2be842 100644 --- a/client/views/msg.tpl +++ b/client/views/msg.tpl @@ -1,4 +1,4 @@ -
+
{{tz time}} diff --git a/client/views/msg_action.tpl b/client/views/msg_action.tpl index 9acc07d0..1735fa3f 100644 --- a/client/views/msg_action.tpl +++ b/client/views/msg_action.tpl @@ -1,4 +1,4 @@ -
+
{{tz time}} diff --git a/client/views/msg_unhandled.tpl b/client/views/msg_unhandled.tpl index 24838975..9c30f3d3 100644 --- a/client/views/msg_unhandled.tpl +++ b/client/views/msg_unhandled.tpl @@ -1,4 +1,4 @@ -
+
{{tz time}}