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:
parent
cb288341fb
commit
aaaacf2513
|
@ -1347,7 +1347,7 @@
|
||||||
font-weight: bold; }
|
font-weight: bold; }
|
||||||
#conversejs .chatbox .chat-body .chat-info.chat-date {
|
#conversejs .chatbox .chat-body .chat-info.chat-date {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: 2em; }
|
margin-top: 1em; }
|
||||||
#conversejs .chatbox .chat-body .chat-message {
|
#conversejs .chatbox .chat-body .chat-message {
|
||||||
margin: 0.3em; }
|
margin: 0.3em; }
|
||||||
#conversejs .chatbox .chat-body .chat-message span {
|
#conversejs .chatbox .chat-body .chat-message span {
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
## 1.0.2 (Unreleased)
|
## 1.0.3 (Unreleased)
|
||||||
|
|
||||||
- Bugfix. Login form doesn't render after logging out, when `auto_reconnect = false`
|
- Bugfix. Login form doesn't render after logging out, when `auto_reconnect = false`
|
||||||
[jcbrand]
|
[jcbrand]
|
||||||
|
- Also indicate new day for the first day's messages. [jcbrand]
|
||||||
|
|
||||||
## 1.0.2 (2016-05-24)
|
## 1.0.2 (2016-05-24)
|
||||||
|
|
||||||
|
|
|
@ -151,7 +151,7 @@
|
||||||
}
|
}
|
||||||
&.chat-date {
|
&.chat-date {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: 2em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.chat-message {
|
.chat-message {
|
||||||
|
|
|
@ -664,6 +664,12 @@
|
||||||
sender_txt = $chat_content.find('span.chat-msg-them').text();
|
sender_txt = $chat_content.find('span.chat-msg-them').text();
|
||||||
expect(sender_txt.match(/^[0-9][0-9]:[0-9][0-9] /)).toBeTruthy();
|
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';
|
message = 'This is a current message';
|
||||||
msg = $msg({
|
msg = $msg({
|
||||||
from: contact_jid,
|
from: contact_jid,
|
||||||
|
@ -676,12 +682,13 @@
|
||||||
expect(converse.emit).toHaveBeenCalledWith('message', msg);
|
expect(converse.emit).toHaveBeenCalledWith('message', msg);
|
||||||
// Check that there is a <time> element, with the required
|
// Check that there is a <time> element, with the required
|
||||||
// props.
|
// 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();
|
var message_date = new Date();
|
||||||
expect($time.length).toEqual(1);
|
|
||||||
expect($time.attr('class')).toEqual('chat-info chat-date');
|
expect($time.attr('class')).toEqual('chat-info chat-date');
|
||||||
expect($time.data('isodate')).toEqual(moment(message_date).format());
|
expect($time.data('isodate')).toEqual(moment(message_date).startOf('day').format());
|
||||||
expect($time.text()).toEqual(moment(message_date).format("dddd MMM Do YYYY"));
|
expect($time.text()).toEqual(moment(message_date).startOf('day').format("dddd MMM Do YYYY"));
|
||||||
|
|
||||||
// Normal checks for the 2nd message
|
// Normal checks for the 2nd message
|
||||||
expect(chatbox.messages.length).toEqual(2);
|
expect(chatbox.messages.length).toEqual(2);
|
||||||
|
|
|
@ -154,30 +154,37 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
prependDayIndicator: function (date) {
|
insertDayIndicator: function (date, prepend) {
|
||||||
/* Prepends an indicator into the chat area, showing the day as
|
/* Appends (or prepends if "prepend" is truthy) an indicator
|
||||||
* given by the passed in date.
|
* into the chat area, showing the day as given by the
|
||||||
|
* passed in date.
|
||||||
*
|
*
|
||||||
* Parameters:
|
* Parameters:
|
||||||
* (String) date - An ISO8601 date string.
|
* (String) date - An ISO8601 date string.
|
||||||
*/
|
*/
|
||||||
var day_date = moment(date).startOf('day');
|
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(),
|
isodate: day_date.format(),
|
||||||
datestring: day_date.format("dddd MMM Do YYYY")
|
datestring: day_date.format("dddd MMM Do YYYY")
|
||||||
}));
|
}));
|
||||||
},
|
},
|
||||||
|
|
||||||
appendMessage: function (attrs) {
|
insertMessage: function (attrs, prepend) {
|
||||||
/* Helper method which appends a message to the end of the chat
|
/* Helper method which appends a message (or prepends if the
|
||||||
* box's content area.
|
* 2nd parameter is set to true) to the end of the chat box's
|
||||||
|
* content area.
|
||||||
*
|
*
|
||||||
* Parameters:
|
* Parameters:
|
||||||
* (Object) attrs: An object containing the message attributes.
|
* (Object) attrs: An object containing the message attributes.
|
||||||
*/
|
*/
|
||||||
|
var insert = prepend ? this.$content.prepend : this.$content.append;
|
||||||
_.compose(
|
_.compose(
|
||||||
_.debounce(this.scrollDown.bind(this), 50),
|
this.scrollDownMessageHeight.bind(this),
|
||||||
this.$content.append.bind(this.$content)
|
function ($el) {
|
||||||
|
insert.call(this.$content, $el);
|
||||||
|
return $el;
|
||||||
|
}.bind(this)
|
||||||
)(this.renderMessage(attrs));
|
)(this.renderMessage(attrs));
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -192,79 +199,54 @@
|
||||||
* Parameters:
|
* Parameters:
|
||||||
* (Object) attrs: An object containing the message attributes.
|
* (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'),
|
first_msg_date = $first_msg.data('isodate'),
|
||||||
last_msg_date, current_msg_date, day_date, $msgs, msg_dates, idx;
|
current_msg_date = moment(attrs.time) || moment,
|
||||||
|
last_msg_date = this.$content.children('.chat-message:last').data('isodate');
|
||||||
|
|
||||||
if (!first_msg_date) {
|
if (!first_msg_date) {
|
||||||
this.appendMessage(attrs);
|
// This is the first received message, so we insert a
|
||||||
|
// date indicator before it.
|
||||||
|
this.insertDayIndicator(current_msg_date);
|
||||||
|
this.insertMessage(attrs);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
current_msg_date = moment(attrs.time) || moment;
|
if (current_msg_date.isAfter(last_msg_date) || current_msg_date.isSame(last_msg_date)) {
|
||||||
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))) {
|
|
||||||
// The new message is after the last message
|
// The new message is after the last message
|
||||||
if (current_msg_date.isAfter(last_msg_date, 'day')) {
|
if (current_msg_date.isAfter(last_msg_date, 'day')) {
|
||||||
// Append a new day indicator
|
// Append a new day indicator
|
||||||
day_date = moment(current_msg_date).startOf('day');
|
this.insertDayIndicator(current_msg_date);
|
||||||
this.$content.append(converse.templates.new_day({
|
|
||||||
isodate: current_msg_date.format(),
|
|
||||||
datestring: current_msg_date.format("dddd MMM Do YYYY")
|
|
||||||
}));
|
|
||||||
}
|
}
|
||||||
this.appendMessage(attrs);
|
this.insertMessage(attrs);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (current_msg_date.isBefore(first_msg_date) || current_msg_date.isSame(first_msg_date)) {
|
||||||
if (typeof first_msg_date !== "undefined" &&
|
// The message is before the first, but on the same day.
|
||||||
(current_msg_date.isBefore(first_msg_date) ||
|
// We need to prepend the message immediately before the
|
||||||
(current_msg_date.isSame(first_msg_date) && !current_msg_date.isSame(last_msg_date)))) {
|
// first message (so that it'll still be after the day indicator).
|
||||||
// The new message is before the first message
|
this.insertMessage(attrs, 'prepend');
|
||||||
|
|
||||||
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')) {
|
if (current_msg_date.isBefore(first_msg_date, 'day')) {
|
||||||
_.compose(
|
// This message is also on a different day, so we prepend a day indicator.
|
||||||
this.scrollDownMessageHeight.bind(this),
|
this.insertDayIndicator(current_msg_date, 'prepend');
|
||||||
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 {
|
|
||||||
// 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.renderMessage(attrs));
|
|
||||||
}
|
}
|
||||||
} else {
|
return;
|
||||||
// We need to 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) {
|
|
||||||
return $(el).data('isodate');
|
|
||||||
});
|
|
||||||
msg_dates.push(current_msg_date);
|
|
||||||
msg_dates.sort();
|
|
||||||
idx = msg_dates.indexOf(current_msg_date)-1;
|
|
||||||
_.compose(
|
|
||||||
this.scrollDownMessageHeight.bind(this),
|
|
||||||
function ($el) {
|
|
||||||
$el.insertAfter(this.$content.find('.chat-message[data-isodate="'+msg_dates[idx]+'"]'));
|
|
||||||
return $el;
|
|
||||||
}.bind(this)
|
|
||||||
)(this.renderMessage(attrs));
|
|
||||||
}
|
}
|
||||||
|
// Find the correct place to position the message
|
||||||
|
current_msg_date = current_msg_date.format();
|
||||||
|
msg_dates = _.map(this.$content.children('.chat-message'), function (el) {
|
||||||
|
return $(el).data('isodate');
|
||||||
|
});
|
||||||
|
msg_dates.push(current_msg_date);
|
||||||
|
msg_dates.sort();
|
||||||
|
idx = msg_dates.indexOf(current_msg_date)-1;
|
||||||
|
_.compose(
|
||||||
|
this.scrollDownMessageHeight.bind(this),
|
||||||
|
function ($el) {
|
||||||
|
$el.insertAfter(this.$content.find('.chat-message[data-isodate="'+msg_dates[idx]+'"]'));
|
||||||
|
return $el;
|
||||||
|
}.bind(this)
|
||||||
|
)(this.renderMessage(attrs));
|
||||||
},
|
},
|
||||||
|
|
||||||
renderMessage: function (attrs) {
|
renderMessage: function (attrs) {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user