Add a date seperator
This commit is contained in:
parent
c954d9c9a3
commit
93f0f6942e
@ -839,6 +839,33 @@ button {
|
|||||||
display: none;
|
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 {
|
.inline-channel {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
5
client/js/libs/handlebars/localedate.js
Normal file
5
client/js/libs/handlebars/localedate.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
Handlebars.registerHelper("localedate", function(time) {
|
||||||
|
return new Date(time).toLocaleDateString();
|
||||||
|
});
|
@ -307,6 +307,27 @@ $(function() {
|
|||||||
} else {
|
} else {
|
||||||
channel.append(render("unread_marker"));
|
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) {
|
function renderChannelUsers(data) {
|
||||||
@ -362,6 +383,21 @@ $(function() {
|
|||||||
var target = "#chan-" + data.chan;
|
var target = "#chan-" + data.chan;
|
||||||
var container = chat.find(target + " .messages");
|
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
|
container
|
||||||
.append(msg)
|
.append(msg)
|
||||||
.trigger("msg", [
|
.trigger("msg", [
|
||||||
@ -382,6 +418,13 @@ $(function() {
|
|||||||
.find("#chan-" + data.chan)
|
.find("#chan-" + data.chan)
|
||||||
.find(".messages");
|
.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
|
// get the scrollable wrapper around messages
|
||||||
var scrollable = chan.closest(".chat");
|
var scrollable = chan.closest(".chat");
|
||||||
var heightOld = chan.height();
|
var heightOld = chan.height();
|
||||||
@ -394,6 +437,28 @@ $(function() {
|
|||||||
if (data.messages.length !== 100) {
|
if (data.messages.length !== 100) {
|
||||||
scrollable.find(".show-more").removeClass("show");
|
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) {
|
socket.on("network", function(data) {
|
||||||
@ -1210,6 +1275,26 @@ $(function() {
|
|||||||
var chan = $(this);
|
var chan = $(this);
|
||||||
if (chan.find(".messages .msg:not(.unread-marker)").slice(0, -100).remove().length) {
|
if (chan.find(".messages .msg:not(.unread-marker)").slice(0, -100).remove().length) {
|
||||||
chan.find(".show-more").addClass("show");
|
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);
|
}, 1000 * 10);
|
||||||
@ -1217,6 +1302,7 @@ $(function() {
|
|||||||
function clear() {
|
function clear() {
|
||||||
chat.find(".active .messages .msg:not(.unread-marker)").remove();
|
chat.find(".active .messages .msg:not(.unread-marker)").remove();
|
||||||
chat.find(".active .show-more").addClass("show");
|
chat.find(".active .show-more").addClass("show");
|
||||||
|
chat.find(".active .date-marker").remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
function complete(word) {
|
function complete(word) {
|
||||||
|
@ -155,7 +155,8 @@ body {
|
|||||||
border-color: #333c4a;
|
border-color: #333c4a;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat .unread-marker {
|
#chat .unread-marker,
|
||||||
|
#chat .date-marker {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -163,6 +164,15 @@ body {
|
|||||||
background-color: #333c4a;
|
background-color: #333c4a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#chat .date-marker:before {
|
||||||
|
border-color: #97ea70;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chat .date-marker-text:before {
|
||||||
|
background-color: #333c4a;
|
||||||
|
color: #97ea70;
|
||||||
|
}
|
||||||
|
|
||||||
/* Setup text colors */
|
/* Setup text colors */
|
||||||
#chat .msg {
|
#chat .msg {
|
||||||
color: #f3f3f3;
|
color: #f3f3f3;
|
||||||
|
@ -181,7 +181,8 @@ body {
|
|||||||
border-color: #3f3f3f;
|
border-color: #3f3f3f;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat .unread-marker {
|
#chat .unread-marker,
|
||||||
|
.date-marker {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -189,6 +190,15 @@ body {
|
|||||||
background-color: #3f3f3f;
|
background-color: #3f3f3f;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#chat .date-marker:before {
|
||||||
|
border-color: #97ea70;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chat .date-marker-text:before {
|
||||||
|
background-color: #3f3f3f;
|
||||||
|
color: #97ea70;
|
||||||
|
}
|
||||||
|
|
||||||
/* Setup text colors */
|
/* Setup text colors */
|
||||||
#chat .msg {
|
#chat .msg {
|
||||||
color: #ffcfaf;
|
color: #ffcfaf;
|
||||||
|
3
client/views/date-marker.tpl
Normal file
3
client/views/date-marker.tpl
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<div class="date-marker">
|
||||||
|
<span class="date-marker-text" data-date="{{localedate msgDate}}"></span>
|
||||||
|
</div>
|
@ -1,4 +1,4 @@
|
|||||||
<div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}" id="msg-{{id}}">
|
<div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}" id="msg-{{id}}" data-time="{{time}}">
|
||||||
<span class="time" title="{{localetime time}}">
|
<span class="time" title="{{localetime time}}">
|
||||||
{{tz time}}
|
{{tz time}}
|
||||||
</span>
|
</span>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}" id="msg-{{id}}">
|
<div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}" id="msg-{{id}}" data-time="{{time}}">
|
||||||
<span class="time" title="{{localetime time}}">
|
<span class="time" title="{{localetime time}}">
|
||||||
{{tz time}}
|
{{tz time}}
|
||||||
</span>
|
</span>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}">
|
<div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}" data-time="{{time}}">
|
||||||
<span class="time" title="{{localetime time}}">
|
<span class="time" title="{{localetime time}}">
|
||||||
{{tz time}}
|
{{tz time}}
|
||||||
</span>
|
</span>
|
||||||
|
Loading…
Reference in New Issue
Block a user