Also show the day for the first received messages.

Until now, new days were only indicated for messages received on different days
*after* the day's messages.
This commit is contained in:
JC Brand 2016-05-25 06:23:00 +00:00
parent cb288341fb
commit aaaacf2513
5 changed files with 66 additions and 76 deletions

View File

@ -1347,7 +1347,7 @@
font-weight: bold; }
#conversejs .chatbox .chat-body .chat-info.chat-date {
display: inline-block;
margin-top: 2em; }
margin-top: 1em; }
#conversejs .chatbox .chat-body .chat-message {
margin: 0.3em; }
#conversejs .chatbox .chat-body .chat-message span {

View File

@ -1,9 +1,10 @@
# Changelog
## 1.0.2 (Unreleased)
## 1.0.3 (Unreleased)
- Bugfix. Login form doesn't render after logging out, when `auto_reconnect = false`
[jcbrand]
- Also indicate new day for the first day's messages. [jcbrand]
## 1.0.2 (2016-05-24)

View File

@ -151,7 +151,7 @@
}
&.chat-date {
display: inline-block;
margin-top: 2em;
margin-top: 1em;
}
}
.chat-message {

View File

@ -664,6 +664,12 @@
sender_txt = $chat_content.find('span.chat-msg-them').text();
expect(sender_txt.match(/^[0-9][0-9]:[0-9][0-9] /)).toBeTruthy();
var $time = $chat_content.find('time');
expect($time.length).toEqual(1);
expect($time.attr('class')).toEqual('chat-info chat-date');
expect($time.data('isodate')).toEqual(moment(one_day_ago.startOf('day')).format());
expect($time.text()).toEqual(moment(one_day_ago.startOf('day')).format("dddd MMM Do YYYY"));
message = 'This is a current message';
msg = $msg({
from: contact_jid,
@ -676,12 +682,13 @@
expect(converse.emit).toHaveBeenCalledWith('message', msg);
// Check that there is a <time> element, with the required
// props.
var $time = $chat_content.find('time');
$time = $chat_content.find('time');
expect($time.length).toEqual(2); // There are now two time elements
$time = $chat_content.find('time:last'); // We check the last one
var message_date = new Date();
expect($time.length).toEqual(1);
expect($time.attr('class')).toEqual('chat-info chat-date');
expect($time.data('isodate')).toEqual(moment(message_date).format());
expect($time.text()).toEqual(moment(message_date).format("dddd MMM Do YYYY"));
expect($time.data('isodate')).toEqual(moment(message_date).startOf('day').format());
expect($time.text()).toEqual(moment(message_date).startOf('day').format("dddd MMM Do YYYY"));
// Normal checks for the 2nd message
expect(chatbox.messages.length).toEqual(2);

View File

@ -154,30 +154,37 @@
}
},
prependDayIndicator: function (date) {
/* Prepends an indicator into the chat area, showing the day as
* given by the passed in date.
insertDayIndicator: function (date, prepend) {
/* Appends (or prepends if "prepend" is truthy) an indicator
* into the chat area, showing the day as given by the
* passed in date.
*
* Parameters:
* (String) date - An ISO8601 date string.
*/
var day_date = moment(date).startOf('day');
this.$content.prepend(converse.templates.new_day({
var insert = prepend ? this.$content.prepend: this.$content.append;
insert.call(this.$content, converse.templates.new_day({
isodate: day_date.format(),
datestring: day_date.format("dddd MMM Do YYYY")
}));
},
appendMessage: function (attrs) {
/* Helper method which appends a message to the end of the chat
* box's content area.
insertMessage: function (attrs, prepend) {
/* Helper method which appends a message (or prepends if the
* 2nd parameter is set to true) to the end of the chat box's
* content area.
*
* Parameters:
* (Object) attrs: An object containing the message attributes.
*/
var insert = prepend ? this.$content.prepend : this.$content.append;
_.compose(
_.debounce(this.scrollDown.bind(this), 50),
this.$content.append.bind(this.$content)
this.scrollDownMessageHeight.bind(this),
function ($el) {
insert.call(this.$content, $el);
return $el;
}.bind(this)
)(this.renderMessage(attrs));
},
@ -192,66 +199,42 @@
* Parameters:
* (Object) attrs: An object containing the message attributes.
*/
var $first_msg = this.$content.children('.chat-message:first'),
var msg_dates, idx,
$first_msg = this.$content.children('.chat-message:first'),
first_msg_date = $first_msg.data('isodate'),
last_msg_date, current_msg_date, day_date, $msgs, msg_dates, idx;
if (!first_msg_date) {
this.appendMessage(attrs);
return;
}
current_msg_date = moment(attrs.time) || moment;
current_msg_date = moment(attrs.time) || moment,
last_msg_date = this.$content.children('.chat-message:last').data('isodate');
if (typeof last_msg_date !== "undefined" && (current_msg_date.isAfter(last_msg_date) || current_msg_date.isSame(last_msg_date))) {
if (!first_msg_date) {
// This is the first received message, so we insert a
// date indicator before it.
this.insertDayIndicator(current_msg_date);
this.insertMessage(attrs);
return;
}
if (current_msg_date.isAfter(last_msg_date) || current_msg_date.isSame(last_msg_date)) {
// The new message is after the last message
if (current_msg_date.isAfter(last_msg_date, 'day')) {
// Append a new day indicator
day_date = moment(current_msg_date).startOf('day');
this.$content.append(converse.templates.new_day({
isodate: current_msg_date.format(),
datestring: current_msg_date.format("dddd MMM Do YYYY")
}));
this.insertDayIndicator(current_msg_date);
}
this.appendMessage(attrs);
this.insertMessage(attrs);
return;
}
if (typeof first_msg_date !== "undefined" &&
(current_msg_date.isBefore(first_msg_date) ||
(current_msg_date.isSame(first_msg_date) && !current_msg_date.isSame(last_msg_date)))) {
// The new message is before the first message
if ($first_msg.prev().length === 0) {
// There's no day indicator before the first message, so we prepend one.
this.prependDayIndicator(first_msg_date);
}
if (current_msg_date.isBefore(first_msg_date, 'day')) {
_.compose(
this.scrollDownMessageHeight.bind(this),
function ($el) {
this.$content.prepend($el);
return $el;
}.bind(this)
)(this.renderMessage(attrs));
// This message is on a different day, so we add a day indicator.
this.prependDayIndicator(current_msg_date);
} else {
if (current_msg_date.isBefore(first_msg_date) || current_msg_date.isSame(first_msg_date)) {
// The message is before the first, but on the same day.
// We need to prepend the message immediately before the
// first message (so that it'll still be after the day indicator).
_.compose(
this.scrollDownMessageHeight.bind(this),
function ($el) {
$el.insertBefore($first_msg);
return $el;
this.insertMessage(attrs, 'prepend');
if (current_msg_date.isBefore(first_msg_date, 'day')) {
// This message is also on a different day, so we prepend a day indicator.
this.insertDayIndicator(current_msg_date, 'prepend');
}
)(this.renderMessage(attrs));
return;
}
} else {
// We need to find the correct place to position the message
// Find the correct place to position the message
current_msg_date = current_msg_date.format();
$msgs = this.$content.children('.chat-message');
msg_dates = _.map($msgs, function (el) {
msg_dates = _.map(this.$content.children('.chat-message'), function (el) {
return $(el).data('isodate');
});
msg_dates.push(current_msg_date);
@ -264,7 +247,6 @@
return $el;
}.bind(this)
)(this.renderMessage(attrs));
}
},
renderMessage: function (attrs) {