Skip to content

C
converse.js
Commit aaaacf25 authored by JC Brand's avatar JC Brand
Browse files
Options

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.
parent cb288341
Show whitespace changes
Inline Side-by-side
Showing with 66 additions and 76 deletions
css/converse.css
View file @ aaaacf25
......@@ -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 {
......
docs/CHANGES.md
View file @ aaaacf25
# 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)
......
sass/_chatbox.scss
View file @ aaaacf25
......@@ -151,7 +151,7 @@
}
&.chat-date {
display: inline-block;
margin-top: 2em;
margin-top: 1em;
}
}
.chat-message {
......
spec/chatbox.js
View file @ aaaacf25
......@@ -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);
......
src/converse-chatview.js
View file @ aaaacf25
......@@ -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;
current_msg_date = moment(attrs.time) || moment,
last_msg_date = this.$content.children('.chat-message:last').data('isodate');
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;
}
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 (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) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7