From b746823e2e1c82636843e93b10aaf5016603e6b1 Mon Sep 17 00:00:00 2001 From: Joseph Hughes Date: Sat, 1 Oct 2022 01:41:21 +0200 Subject: [PATCH] message_feed_ui: Remove group date dividers. This commit removes the group date dividers from the message feed UI, leaving only the dividers between individual messages. These are considered unecessary as the recipient bar displays the date. The change concerns message_list_view.js along with the templates message_group.hbs and recipient_row.hbs. Fixes #22966. --- .../node_tests/message_list_view.js | 8 ++--- static/js/message_list_view.js | 34 +++++++------------ static/templates/message_group.hbs | 4 --- static/templates/recipient_row.hbs | 4 +-- 4 files changed, 17 insertions(+), 33 deletions(-) diff --git a/frontend_tests/node_tests/message_list_view.js b/frontend_tests/node_tests/message_list_view.js index 9d114ec6c7..5c15e9aabb 100644 --- a/frontend_tests/node_tests/message_list_view.js +++ b/frontend_tests/node_tests/message_list_view.js @@ -514,7 +514,7 @@ test("merge_message_groups", () => { const list = build_list([message_group1]); const result = list.merge_message_groups([message_group2], "bottom"); - assert.ok(!message_group2.group_date_divider_html); + assert.ok(!message_group2.group_date_html); assert_message_groups_list_equal(list._message_groups, [message_group1, message_group2]); assert_message_groups_list_equal(result.append_groups, [message_group2]); assert.deepEqual(result.prepend_groups, []); @@ -537,7 +537,7 @@ test("merge_message_groups", () => { assert.deepEqual(result.prepend_groups, []); assert.deepEqual(result.rerender_groups, []); assert.deepEqual(result.append_messages, []); - assert.equal(message_group2.group_date_divider_html, "900000000"); + assert.equal(message_group2.group_date_html, "900000000"); })(); (function test_append_message_different_day() { @@ -644,8 +644,7 @@ test("merge_message_groups", () => { const list = build_list([message_group1]); const result = list.merge_message_groups([message_group2], "top"); - // We should have a group date divider between the recipient blocks. - assert.equal(message_group1.group_date_divider_html, "900000000"); + assert.equal(message_group1.group_date_html, "900000000"); assert_message_groups_list_equal(list._message_groups, [message_group2, message_group1]); assert.deepEqual(result.append_groups, []); assert_message_groups_list_equal(result.prepend_groups, [message_group2]); @@ -663,7 +662,6 @@ test("merge_message_groups", () => { const list = build_list([message_group1]); const result = list.merge_message_groups([message_group2], "top"); - // We should have a group date divider within the single recipient block. assert.equal(message_group2.message_containers[1].date_divider_html, "900000000"); assert_message_groups_list_equal(list._message_groups, [message_group2]); assert.deepEqual(result.append_groups, []); diff --git a/static/js/message_list_view.js b/static/js/message_list_view.js index ba0a9d1bf7..52072efe53 100644 --- a/static/js/message_list_view.js +++ b/static/js/message_list_view.js @@ -111,28 +111,18 @@ function render_group_display_date(group, message_container) { group.date = date_element.outerHTML; } -function update_group_date_divider(group, message_container, prev) { +function update_group_date(group, message_container, prev) { const time = new Date(message_container.msg.timestamp * 1000); const today = new Date(); - // TODO: investigate - if (prev !== undefined) { - const prev_time = new Date(prev.msg.timestamp * 1000); - if (!isSameDay(time, prev_time)) { - // NB: group_date_divider_html is HTML, inserted into the document without escaping. - group.group_date_divider_html = timerender.render_date(time, today)[0].outerHTML; - group.show_group_date_divider = true; - } - } else { - // Show the date in the recipient bar, but not a date separator bar. - group.show_group_date_divider = false; - group.group_date_divider_html = timerender.render_date(time, today)[0].outerHTML; - } + // Show the date in the recipient bar if the previous message was from a different day. + group.show_recipient_bar_date = !same_day(message_container, prev); + group.group_date_html = timerender.render_date(time, today)[0].outerHTML; } -function clear_group_date_divider(group) { - group.show_group_date_divider = false; - group.group_date_divider_html = undefined; +function clear_group_date(group) { + group.show_recipient_bar_date = true; + group.group_date_html = undefined; } function clear_message_date_divider(msg) { @@ -483,7 +473,7 @@ export class MessageListView { current_group = start_group(); add_message_container_to_group(message_container); - update_group_date_divider(current_group, message_container, prev); + update_group_date(current_group, message_container, prev); clear_message_date_divider(message_container); message_container.include_recipient = true; @@ -631,7 +621,7 @@ export class MessageListView { !same_day(second_group.message_containers[0], first_group.message_containers[0]) ) { // The groups did not merge, so we need up update the date row for the old group - update_group_date_divider(second_group, curr_msg_container, prev_msg_container); + update_group_date(second_group, curr_msg_container, prev_msg_container); // We could add an action to update the date row, but for now rerender the group. message_actions.rerender_groups.push(second_group); } @@ -644,11 +634,11 @@ export class MessageListView { new_message_groups = new_message_groups.slice(1); } else if (first_group !== undefined && second_group !== undefined) { if (same_day(prev_msg_container, curr_msg_container)) { - clear_group_date_divider(second_group); + clear_group_date(second_group); } else { // If we just sent the first message on a new day - // in a narrow, make sure we render a date separator. - update_group_date_divider(second_group, curr_msg_container, prev_msg_container); + // in a narrow, make sure we render a date. + update_group_date(second_group, curr_msg_container, prev_msg_container); } } message_actions.append_groups = new_message_groups; diff --git a/static/templates/message_group.hbs b/static/templates/message_group.hbs index 749bd19ca4..a56b177325 100644 --- a/static/templates/message_group.hbs +++ b/static/templates/message_group.hbs @@ -2,10 +2,6 @@ {{#each message_groups}} {{#with this}} - {{#if show_group_date_divider}} -
{{{group_date_divider_html}}}
- {{/if}} - {{#if bookend_top}} {{> bookend}} {{/if}} diff --git a/static/templates/recipient_row.hbs b/static/templates/recipient_row.hbs index 79f0ae49ac..eb4c14464b 100644 --- a/static/templates/recipient_row.hbs +++ b/static/templates/recipient_row.hbs @@ -77,7 +77,7 @@ {{/if}} - {{{date}}} + {{{date}}} @@ -91,7 +91,7 @@ {{#tr}}You and {display_reply_to}{{/tr}} - {{{date}}} + {{{date}}}