markdown: Add fa-clock icon before markdown timestamps.

These sigils will help make it easier to see that this is a special
Zulip syntax feature, not just something the other user typed, which
might help set the expectation that we're showing the time in the
user's timezone.

Tweaked by tabbott to improve variable/template naming.
This commit is contained in:
Nikhil Maske 2021-03-03 16:48:35 +05:30 committed by Tim Abbott
parent cd1601a858
commit f5544e36ed
3 changed files with 13 additions and 4 deletions

View File

@ -178,7 +178,7 @@ run_test("timestamp", () => {
rm.update_elements($content);
// Final asserts
assert.equal($timestamp.text(), "Thu, Jan 1 1970, 12:00 AM");
assert.equal($timestamp.html(), '<i class="fa fa-clock-o"></i>\nThu, Jan 1 1970, 12:00 AM\n');
assert.equal(
$timestamp.attr("title"),
"This time is in your timezone. Original text was 'never-been-set'.",
@ -195,12 +195,15 @@ run_test("timestamp-twenty-four-hour-time", () => {
// We will temporarily change the 24h setting for this test.
with_field(page_params, "twenty_four_hour_time", true, () => {
rm.update_elements($content);
assert.equal($timestamp.text(), "Wed, Jul 15 2020, 20:40");
assert.equal($timestamp.html(), '<i class="fa fa-clock-o"></i>\nWed, Jul 15 2020, 20:40\n');
});
with_field(page_params, "twenty_four_hour_time", false, () => {
rm.update_elements($content);
assert.equal($timestamp.text(), "Wed, Jul 15 2020, 8:40 PM");
assert.equal(
$timestamp.html(),
'<i class="fa fa-clock-o"></i>\nWed, Jul 15 2020, 8:40 PM\n',
);
});
});

View File

@ -3,6 +3,7 @@ import {parseISO, isValid} from "date-fns";
import $ from "jquery";
import copy_code_button from "../templates/copy_code_button.hbs";
import render_markdown_timestamp from "../templates/markdown_timestamp.hbs";
import view_code_in_playground from "../templates/view_code_in_playground.hbs";
import * as people from "./people";
@ -162,7 +163,10 @@ export const update_elements = (content) => {
if (isValid(timestamp)) {
const text = $(this).text();
const rendered_time = timerender.render_markdown_timestamp(timestamp, text);
$(this).text(rendered_time.text);
const rendered_timestamp = render_markdown_timestamp({
text: rendered_time.text,
});
$(this).html(rendered_timestamp);
$(this).attr("title", rendered_time.title);
} else {
// This shouldn't happen. If it does, we're very interested in debugging it.

View File

@ -0,0 +1,2 @@
<i class="fa fa-clock-o"></i>
{{ text }}