Skip to content

Commit

Permalink
Merge groups that only differ by message "day".
Browse files Browse the repository at this point in the history 
Now if two messages are on different days but otherwise
belong in the same group, we put them in the same group
with a date divider between them, but no recipient bar.
  • Loading branch information
Steve Howell committed Nov 27, 2018
1 parent 3bb0956 commit 71ddede
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 45 deletions.
17 changes: 9 additions & 8 deletions frontend_tests/node_tests/message_list_view.js
View file
Expand Up @@ -164,7 +164,7 @@ run_test('merge_message_groups', () => {
var list = build_list([message_group1]);
var result = list.merge_message_groups([message_group2], 'bottom');

assert(!message_group2.show_date);
assert(!message_group2.show_date_separator);
assert_message_groups_list_equal(
list._message_groups,
[message_group1, message_group2]);
Expand Down Expand Up @@ -193,12 +193,13 @@ run_test('merge_message_groups', () => {
assert(message_group2.show_date);
assert_message_groups_list_equal(
list._message_groups,
[message_group1, message_group2]);
assert_message_groups_list_equal(result.append_groups, [message_group2]);
[message_group1 + message_group2]);
assert_message_groups_list_equal(result.append_groups, []);
assert_message_groups_list_equal(result.prepend_groups, []);
assert_message_groups_list_equal(result.rerender_groups, []);
assert_message_list_equal(result.append_messages, []);
assert_message_list_equal(result.rerender_messages, []);
assert_message_list_equal(result.append_messages, [message2]);
assert_message_list_equal(result.rerender_messages, [message1]);
assert(list._message_groups[0].message_containers[1].want_date_divider);
}());

(function test_append_message_historical() {
Expand Down Expand Up @@ -321,13 +322,13 @@ run_test('merge_message_groups', () => {
var result = list.merge_message_groups([message_group2], 'top');

assert.equal(
message_group1.show_date,
message_group2.message_containers[1].date_divider_html,
'900000000 - 1000000');
assert_message_groups_list_equal(
list._message_groups,
[message_group2, message_group1]);
[message_group1 + message_group1]);
assert_message_groups_list_equal(result.append_groups, []);
assert_message_groups_list_equal(result.prepend_groups, [message_group2]);
assert_message_groups_list_equal(result.prepend_groups, []);
assert_message_groups_list_equal(result.rerender_groups, [message_group1]);
assert_message_list_equal(result.append_messages, []);
assert_message_list_equal(result.rerender_messages, []);
Expand Down
106 changes: 69 additions & 37 deletions static/js/message_list_view.js
View file
Expand Up @@ -74,6 +74,31 @@ function update_group_time_display(group, message_container, prev) {
}
}

function clear_message_date_divider(msg) {
// see update_message_date_divider for how
// these get set
msg.want_date_divider = false;
msg.date_divider_html = undefined;
}

function update_message_date_divider(opts) {
var prev_msg_container = opts.prev_msg_container;
var curr_msg_container = opts.curr_msg_container;

if (!prev_msg_container || same_day(curr_msg_container, prev_msg_container)) {
clear_message_date_divider(curr_msg_container);
return;
}

var prev_time = new XDate(prev_msg_container.msg.timestamp * 1000);
var curr_time = new XDate(curr_msg_container.msg.timestamp * 1000);
var today = new XDate();

curr_msg_container.want_date_divider = true;
curr_msg_container.date_divider_html =
timerender.render_date(curr_time, prev_time, today)[0].outerHTML;
}

function update_timestr(message_container) {
if (message_container.timestr === undefined) {
var time = new XDate(message_container.msg.timestamp * 1000);
Expand Down Expand Up @@ -213,14 +238,21 @@ MessageListView.prototype = {
message_container.include_footer = false;

if (same_recipient(prev, message_container) && self.collapse_messages &&
prev.msg.historical === message_container.msg.historical &&
same_day(prev, message_container)) {
prev.msg.historical === message_container.msg.historical) {
add_message_container_to_group(message_container);
update_message_date_divider({
prev_msg_container: prev,
curr_msg_container: message_container,
});

} else {
finish_group();
current_group = start_group();
add_message_container_to_group(message_container);

clear_message_date_divider(message_container);
update_group_time_display(current_group, message_container, prev);

message_container.include_recipient = true;
message_container.subscribed = false;
message_container.unsubscribed = false;
Expand All @@ -246,7 +278,6 @@ MessageListView.prototype = {
}
}

update_group_time_display(current_group, message_container, prev);
update_timestr(message_container);

message_container.include_sender = true;
Expand Down Expand Up @@ -292,7 +323,6 @@ MessageListView.prototype = {

// Join two groups into one.
if (this.collapse_messages && same_recipient(last_msg_container, first_msg_container) &&
same_day(last_msg_container, first_msg_container) &&
last_msg_container.msg.historical === first_msg_container.msg.historical) {
if (!last_msg_container.status_message && !first_msg_container.msg.is_me_message
&& same_sender(last_msg_container, first_msg_container)) {
Expand Down Expand Up @@ -341,7 +371,34 @@ MessageListView.prototype = {
if (where === 'top') {
first_group = _.last(new_message_groups);
second_group = _.first(this._message_groups);
if (this.join_message_groups(first_group, second_group)) {
} else {
first_group = _.last(this._message_groups);
second_group = _.first(new_message_groups);
}

if (first_group) {
prev_msg_container = _.last(first_group.message_containers);
}

if (second_group) {
curr_msg_container = _.first(second_group.message_containers);
}

var was_joined = this.join_message_groups(first_group, second_group);

if (was_joined) {
update_message_date_divider({
prev_msg_container: prev_msg_container,
curr_msg_container: curr_msg_container,
});
} else {
clear_message_date_divider(curr_msg_container);
update_group_time_display(second_group, curr_msg_container, prev_msg_container);
}
update_timestr(curr_msg_container);

if (where === 'top') {
if (was_joined) {
// join_message_groups moved the old message to the end of the
// new group. We need to replace the old rendered message
// group. So we will reuse its ID.
Expand All @@ -354,45 +411,20 @@ MessageListView.prototype = {
this._message_groups.unshift(first_group);

new_message_groups = _.initial(new_message_groups);
} else if (!same_day(second_group.message_containers[0],
first_group.message_containers[0])) {
prev_msg_container = _.last(first_group.message_containers);
curr_msg_container = _.first(second_group.message_containers);

// The groups did not merge, so we need up update the date row for the old group
update_group_time_display(second_group, curr_msg_container, prev_msg_container);
update_timestr(curr_msg_container);
} else {
// We could add an action to update the date row, but for now rerender the group.
message_actions.rerender_groups.push(second_group);
if (second_group.show_date_separator) {
message_actions.rerender_groups.push(second_group);
}
}
message_actions.prepend_groups = new_message_groups;
this._message_groups = new_message_groups.concat(this._message_groups);
} else {
first_group = _.last(this._message_groups);
second_group = _.first(new_message_groups);
if (this.join_message_groups(first_group, second_group)) {
// rerender the last message
message_actions.rerender_messages.push(
first_group.message_containers[
first_group.message_containers.length
- second_group.message_containers.length - 1]
);
if (was_joined) {
message_actions.rerender_messages.push(prev_msg_container);

message_actions.append_messages = _.first(new_message_groups).message_containers;
new_message_groups = _.rest(new_message_groups);
} else if (first_group !== undefined && second_group !== undefined) {
prev_msg_container = _.last(first_group.message_containers);
curr_msg_container = _.first(second_group.message_containers);

if (same_day(prev_msg_container, curr_msg_container)) {
// Clear the date if it is the same as the last group
second_group.show_date = false;
second_group.show_date_separator = undefined;
} else {
// If we just sent the first message on a new day
// in a narrow, make sure we render a date separator.
update_group_time_display(second_group, curr_msg_container, prev_msg_container);
update_timestr(curr_msg_container);
}
}
message_actions.append_groups = new_message_groups;
this._message_groups = this._message_groups.concat(new_message_groups);
Expand Down
4 changes: 4 additions & 0 deletions static/templates/single_message.handlebars
View file
Expand Up @@ -2,8 +2,12 @@
class="message_row{{^msg/is_stream}} private-message{{/msg/is_stream}}{{#include_sender}} include-sender{{/include_sender}}{{#contains_mention}} mention{{/contains_mention}}{{#include_footer}} last_message{{/include_footer}}{{#msg.unread}} unread{{/msg.unread}} {{#if msg.locally_echoed}}local{{/if}} selectable_row"
role="listitem">
<div class="unread_marker"><div class="unread-marker-fill"></div></div>

<div class="messagebox{{^include_sender}} prev_is_same_sender{{/include_sender}}{{^msg/is_stream}} private-message{{/msg/is_stream}} {{#if next_is_same_sender}}next_is_same_sender{{/if}}"
style="box-shadow: inset 2px 0px 0px 0px {{#if msg/is_stream}}{{background_color}}{{else}}#444444{{/if}}, -1px 0px 0px 0px {{#if msg/is_stream}}{{background_color}}{{else}}#444444{{/if}};">
{{#if want_date_divider}}
<div class="date_row no-select">{{{date_divider_html}}}</div>
{{/if}}
<div class="messagebox-border">
<div class="messagebox-content">
<div class="message_top_line">
Expand Down

0 comments on commit 71ddede

Please sign in to comment.