Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
Joseph Hughes 2022-09-29 19:17:17 +02:00 committed by Tim Abbott
parent 343536d4bc
commit 8cf2a1df6b
5 changed files with 16 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend_tests/node_tests/message_list_view.js
View File

@ -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, []);

28
frontend_tests/node_tests/timerender.js
View File

@ -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 = $("<span>");
let appended_val;
$span_stub.append = (...val) => {
appended_val = val;
return $span_stub;
};
const expected = [
$("<i>"),
$t({defaultMessage: "Yesterday"}),
$("<hr>"),
$("<i>"),
$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

20
static/js/message_list_view.js
View File

@ -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),
},
);

36
static/js/timerender.ts
View File

@ -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(
$("<i>").addClass(["date-direction", "fa", "fa-caret-up"]),
_.escape(rendered_time_above.time_str),
$("<hr>").addClass("date-line"),
$("<i>").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 = $("<span>").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,
});
}
}

14
static/styles/zulip.css
View File

@ -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,