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,