global_times: Allow global times to display inline.

This commit is contained in:
Karl Stolley 2024-08-21 14:08:03 -05:00 committed by Tim Abbott
parent 02161582fd
commit 562e6d6802
4 changed files with 25 additions and 11 deletions

View File

@ -160,7 +160,7 @@ def zulip():
{ {
markdown: "<time:2023-05-28T13:30:00+05:30>", markdown: "<time:2023-05-28T13:30:00+05:30>",
output_html: output_html:
'<p><time datetime="2023-05-28T08:00:00Z"><i class="zulip-icon zulip-icon-clock markdown-timestamp-icon"></i>Sun, May 28, 2023, 1:30 PM</time></p>', '<p><time datetime="2023-05-28T08:00:00Z"><span class="timestamp-content-wrapper"><i class="zulip-icon zulip-icon-clock markdown-timestamp-icon"></i>Sun, May 28, 2023, 1:30 PM</time></span></p>',
}, },
{ {
markdown: `/poll What did you drink this morning? markdown: `/poll What did you drink this morning?

View File

@ -236,15 +236,25 @@
/* Timestamps */ /* Timestamps */
& time { & time {
display: inline-flex;
align-items: baseline;
gap: 3px;
background: hsl(0deg 0% 93%); background: hsl(0deg 0% 93%);
border-radius: 3px; border-radius: 3px;
padding: 0 0.2em;
box-shadow: 0 0 0 1px hsl(0deg 0% 80%); box-shadow: 0 0 0 1px hsl(0deg 0% 80%);
white-space: nowrap; white-space: nowrap;
margin: 0 2px 1px; margin: 0 2px;
/* Reduce the font-size to reduce the
footprint of the timestamp block. */
font-size: 0.95em;
.timestamp-content-wrapper {
/* Restore the font-size to match the rest
of the message area, and apply the layout
for the icon. */
font-size: 1.0526em;
padding: 0 0.2em;
display: inline-flex;
align-items: baseline;
gap: 3px;
}
.markdown-timestamp-icon { .markdown-timestamp-icon {
align-self: center; align-self: center;

View File

@ -1,2 +1,6 @@
<i class="zulip-icon zulip-icon-clock markdown-timestamp-icon"></i> {{~!-- --~}}
{{ text ~}} <span class="timestamp-content-wrapper">
<i class="zulip-icon zulip-icon-clock markdown-timestamp-icon"></i>
{{~ text ~}}
</span>
{{~!-- --~}}

View File

@ -426,7 +426,7 @@ run_test("timestamp", ({mock_template}) => {
// Final asserts // Final asserts
assert.equal( assert.equal(
$timestamp.html(), $timestamp.html(),
'<i class="zulip-icon zulip-icon-clock markdown-timestamp-icon"></i>\nThu, Jan 1, 1970, 12:00 AM', '<span class="timestamp-content-wrapper">\n <i class="zulip-icon zulip-icon-clock markdown-timestamp-icon"></i>Thu, Jan 1, 1970, 12:00 AM</span>',
); );
assert.equal($timestamp_invalid.text(), "never-been-set"); assert.equal($timestamp_invalid.text(), "never-been-set");
}); });
@ -448,14 +448,14 @@ run_test("timestamp-twenty-four-hour-time", ({mock_template, override}) => {
rm.update_elements($content); rm.update_elements($content);
assert.equal( assert.equal(
$timestamp.html(), $timestamp.html(),
'<i class="zulip-icon zulip-icon-clock markdown-timestamp-icon"></i>\nWed, Jul 15, 2020, 20:40', '<span class="timestamp-content-wrapper">\n <i class="zulip-icon zulip-icon-clock markdown-timestamp-icon"></i>Wed, Jul 15, 2020, 20:40</span>',
); );
override(user_settings, "twenty_four_hour_time", false); override(user_settings, "twenty_four_hour_time", false);
rm.update_elements($content); rm.update_elements($content);
assert.equal( assert.equal(
$timestamp.html(), $timestamp.html(),
'<i class="zulip-icon zulip-icon-clock markdown-timestamp-icon"></i>\nWed, Jul 15, 2020, 8:40 PM', '<span class="timestamp-content-wrapper">\n <i class="zulip-icon zulip-icon-clock markdown-timestamp-icon"></i>Wed, Jul 15, 2020, 8:40 PM</span>',
); );
}); });