From 8cf2a1df6bf52b58a99f8885c9ce179c144fe6d0 Mon Sep 17 00:00:00 2001 From: Joseph Hughes Date: Thu, 29 Sep 2022 19:17:17 +0200 Subject: [PATCH] message_feed_ui: Remove previous date from date separators. This commit updates the date row between messages and message groups, removing the date of the previous message along with the down arrow for the next message. The goal of this commit is to declutter the message feed UI as part of the redesign. The change concerns the render functions in timerender.js along with the files that reference these. Fixes: #22967. --- .../node_tests/message_list_view.js | 13 +++---- frontend_tests/node_tests/timerender.js | 28 +-------------- static/js/message_list_view.js | 20 ++++------- static/js/timerender.ts | 36 +++---------------- static/styles/zulip.css | 14 -------- 5 files changed, 16 insertions(+), 95 deletions(-) diff --git a/frontend_tests/node_tests/message_list_view.js b/frontend_tests/node_tests/message_list_view.js index e30d2b0770..9d114ec6c7 100644 --- a/frontend_tests/node_tests/message_list_view.js +++ b/frontend_tests/node_tests/message_list_view.js @@ -14,11 +14,8 @@ const noop = () => {}; // timerender calls setInterval when imported mock_esm("../../static/js/timerender", { - render_date(time1, time2) { - if (time2 === undefined) { - return [{outerHTML: String(time1.getTime())}]; - } - return [{outerHTML: String(time1.getTime()) + " - " + String(time2.getTime())}]; + render_date(time) { + return [{outerHTML: String(time.getTime())}]; }, stringify_time(time) { return time.toString("h:mm TT"); @@ -540,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 - 1000000"); + assert.equal(message_group2.group_date_divider_html, "900000000"); })(); (function test_append_message_different_day() { @@ -648,7 +645,7 @@ test("merge_message_groups", () => { 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 - 1000000"); + assert.equal(message_group1.group_date_divider_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]); @@ -667,7 +664,7 @@ test("merge_message_groups", () => { 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 - 1000000"); + 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, []); assert.deepEqual(result.prepend_groups, []); diff --git a/frontend_tests/node_tests/timerender.js b/frontend_tests/node_tests/timerender.js index 6716923bad..54260a63df 100644 --- a/frontend_tests/node_tests/timerender.js +++ b/frontend_tests/node_tests/timerender.js @@ -222,38 +222,12 @@ run_test("render_date_renders_time_html", () => { return $span_stub; }; - const $actual = timerender.render_date(message_time, undefined, today); + const $actual = timerender.render_date(message_time, today); assert.equal($actual.html(), expected_html); assert.equal(attrs["data-tippy-content"], "Friday, April 12, 2019"); assert.equal(attrs.class, "timerender0"); }); -run_test("render_date_renders_time_above_html", () => { - const today = date_2019; - - const message_time = today; - const message_time_above = add(today, {days: -1}); - - const $span_stub = $(""); - - let appended_val; - $span_stub.append = (...val) => { - appended_val = val; - return $span_stub; - }; - - const expected = [ - $(""), - $t({defaultMessage: "Yesterday"}), - $("
"), - $(""), - $t({defaultMessage: "Today"}), - ]; - - timerender.render_date(message_time, message_time_above, today); - assert.deepEqual(appended_val, expected); -}); - run_test("get_full_time", () => { const timestamp = date_2017.getTime() / 1000; const expected = "2017-05-18T07:12:53Z"; // ISO 8601 date format diff --git a/static/js/message_list_view.js b/static/js/message_list_view.js index dd8b3d12fa..ba0a9d1bf7 100644 --- a/static/js/message_list_view.js +++ b/static/js/message_list_view.js @@ -106,7 +106,7 @@ function analyze_edit_history(message) { function render_group_display_date(group, message_container) { const time = new Date(message_container.msg.timestamp * 1000); const today = new Date(); - const date_element = timerender.render_date(time, undefined, today)[0]; + const date_element = timerender.render_date(time, today)[0]; group.date = date_element.outerHTML; } @@ -115,21 +115,18 @@ function update_group_date_divider(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, - prev_time, - today, - )[0].outerHTML; + 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, undefined, today)[0].outerHTML; + group.group_date_divider_html = timerender.render_date(time, today)[0].outerHTML; } } @@ -154,16 +151,11 @@ function update_message_date_divider(opts) { return; } - const prev_time = new Date(prev_msg_container.msg.timestamp * 1000); const curr_time = new Date(curr_msg_container.msg.timestamp * 1000); const today = new Date(); curr_msg_container.want_date_divider = true; - curr_msg_container.date_divider_html = timerender.render_date( - curr_time, - prev_time, - today, - )[0].outerHTML; + curr_msg_container.date_divider_html = timerender.render_date(curr_time, today)[0].outerHTML; } function set_timestr(message_container) { @@ -291,7 +283,7 @@ export class MessageListView { return $t( {defaultMessage: "{date} at {time}"}, { - date: timerender.render_date(last_edit_time, undefined, today)[0].textContent, + date: timerender.render_date(last_edit_time, today)[0].textContent, time: timerender.stringify_time(last_edit_time), }, ); diff --git a/static/js/timerender.ts b/static/js/timerender.ts index 5f3664de24..a39c8b040f 100644 --- a/static/js/timerender.ts +++ b/static/js/timerender.ts @@ -155,7 +155,6 @@ type UpdateEntry = { needs_update: boolean; className: string; time: Date; - time_above?: Date; }; let update_list: UpdateEntry[] = []; @@ -167,30 +166,14 @@ export function initialize(): void { last_update = startOfToday(); } -// time_above is an optional argument, to support dates that look like: -// --- ▲ Yesterday ▲ ------ ▼ Today ▼ --- function maybe_add_update_list_entry(entry: UpdateEntry): void { if (entry.needs_update) { update_list.push(entry); } } -function render_date_span( - $elem: JQuery, - rendered_time: TimeRender, - rendered_time_above?: TimeRender, -): JQuery { +function render_date_span($elem: JQuery, rendered_time: TimeRender): JQuery { $elem.text(""); - if (rendered_time_above !== undefined) { - $elem.append( - $("").addClass(["date-direction", "fa", "fa-caret-up"]), - _.escape(rendered_time_above.time_str), - $("
").addClass("date-line"), - $("").addClass(["date-direction", "fa", "fa-caret-down"]), - _.escape(rendered_time.time_str), - ); - return $elem; - } $elem.append(_.escape(rendered_time.time_str)); return $elem.attr("data-tippy-content", rendered_time.formal_time_str); } @@ -198,28 +181,20 @@ function render_date_span( // Given an Date object 'time', return a DOM node that initially // displays the human-formatted date, and is updated automatically as // necessary (e.g. changing "Today" to "Yesterday" to "Jul 1"). -// If two dates are given, it renders them as: -// --- ▲ Yesterday ▲ ------ ▼ Today ▼ --- // (What's actually spliced into the message template is the contents // of this DOM node as HTML, so effectively a copy of the node. That's // okay since to update the time later we look up the node by its id.) -export function render_date(time: Date, time_above: Date | undefined, today: Date): JQuery { +export function render_date(time: Date, today: Date): JQuery { const className = `timerender${next_timerender_id}`; next_timerender_id += 1; const rendered_time = render_now(time, today); let $node = $("").attr("class", className); - if (time_above !== undefined) { - const rendered_time_above = render_now(time_above, today); - $node = render_date_span($node, rendered_time, rendered_time_above); - } else { - $node = render_date_span($node, rendered_time); - } + $node = render_date_span($node, rendered_time); maybe_add_update_list_entry({ needs_update: rendered_time.needs_update, className, time, - time_above, }); return $node; } @@ -255,17 +230,14 @@ export function update_timestamps(): void { // messages above it and re-collapsed). if ($elements.length > 0) { const time = entry.time; - const time_above = entry.time_above; const rendered_time = render_now(time, today); - const rendered_time_above = time_above ? render_now(time_above, today) : undefined; for (const element of $elements) { - render_date_span($(element), rendered_time, rendered_time_above); + render_date_span($(element), rendered_time); } maybe_add_update_list_entry({ needs_update: rendered_time.needs_update, className, time, - time_above, }); } } diff --git a/static/styles/zulip.css b/static/styles/zulip.css index 2c56805a41..3207730f1d 100644 --- a/static/styles/zulip.css +++ b/static/styles/zulip.css @@ -2546,20 +2546,6 @@ select.invite-as { .date_row { padding-left: 2px; - - .date-direction { - display: inline-block; - padding-right: 5px; - } - - .date-line { - display: inline-block; - vertical-align: middle; - width: 33%; - border-top: 1px solid hsl(0, 0%, 88%); - border-bottom: 1px solid hsl(0, 0%, 100%); - margin: 0 5px; - } } .sub-unsub-message span,