diff --git a/web/e2e-tests/edit.test.ts b/web/e2e-tests/edit.test.ts index 26847c03b9..2d6026f658 100644 --- a/web/e2e-tests/edit.test.ts +++ b/web/e2e-tests/edit.test.ts @@ -56,7 +56,7 @@ async function test_edit_message_with_slash_me(page: Page): Promise { ); await page.waitForSelector( `xpath/${last_message_xpath}//*[${common.has_class_x( - "sender_name-in-status", + "sender_name", )} and normalize-space()="Desdemona"]`, ); @@ -69,7 +69,7 @@ async function test_edit_message_with_slash_me(page: Page): Promise { ); await page.waitForSelector( `xpath/${last_message_xpath}//*[${common.has_class_x( - "sender_name-in-status", + "sender_name", )} and normalize-space()="Desdemona"]`, ); } diff --git a/web/styles/message_row.css b/web/styles/message_row.css index c1b15c22dc..245e835d5e 100644 --- a/web/styles/message_row.css +++ b/web/styles/message_row.css @@ -1,7 +1,7 @@ $avatar_column_width: 46px; $distance_of_text_elements_from_message_box_top: 8.5px; -$distance_of_non_text_elements_from_message_box_top: 6px; -$sender_name_distance_below_flex_center: 3px; +$distance_of_non_text_elements_from_message_box: 6px; +$message_box_margin: 3px; /* The time column usually just needs enough space to display the timestamp. The minimum width here is enough for "22:22 PM", which @@ -223,11 +223,53 @@ $time_column_max_width: 150px; ". more . . " ". reactions . . "; + &.is-me-message { + grid-template-areas: + "avatar sender controls time" + "avatar sender . . " + ". more . . " + ". reactions . . "; + + .message_sender { + /* Don't display message sender as flexbox for me-messages. */ + display: block; + /* This preserves a consistent bottom spacing on the me-message + grid, which ordinarily benefits from the margin of

+ elements in the markdown--which single-line me-messages do + not receive. + + It also ensures a uniform space-relationship between the top: of the avatar and the top of the sender_name line. + + However, this should all arguably be handled from the grid + container or the grid definition itself. */ + margin: $message_box_margin 0; + + /* Set the same line-height as on message content for + me-messages. */ + line-height: var(--message-box-line-height); + + /* Display message components inline, with wrapping white-space, + so the sender name and message display as a continuous line + of wrapping text. */ + .sender_name { + white-space: normal; + display: inline; + } + } + } + .inline_profile_picture { grid-area: avatar; /* The picture should not participate in the baseline group. */ align-self: start; - margin-top: $distance_of_non_text_elements_from_message_box_top; + /* Because the avatar may be the tallest element in a + single-line me message, this margin preserves the + overall height of the message box. */ + margin: $distance_of_non_text_elements_from_message_box 0; + } + + .status-message { + font-weight: normal; } .message_content { @@ -269,48 +311,11 @@ $time_column_max_width: 150px; message-box grid's baseline group, too. */ align-items: baseline; + margin-top: $message_box_margin; + .zulip-icon.zulip-icon-bot { align-self: center; - padding: $sender_name_distance_below_flex_center 0 0 5px; - } - - &.is_me_message { - /* - 1 2 3 4 5 - 1,2 |‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾| - | ((((\\\ : : : | - | 9_9 3)) : Sender Name is excited to write this multiline message that goes to the next line and takes the : + ⋮ ☆ : 10:00 AM | - | \= (( : edit status with it to the next line. EDITED : : | - 3 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ | - | : : : | - | : [EXPAND / COLLAPSE] : : | - 4 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ | - | : : : | - | : [Message Reactions] : : | - 5 |___________:____________________________________________________________________________________________________:______________:____________| - */ - min-height: $avatar_column_width; - grid-row: 1 / 3; - display: grid; - grid-template-columns: $avatar_column_width auto; - grid-template-rows: auto; - - & ~ .alert-msg, - & ~ .message_time, - & ~ .slow-send-spinner, - & ~ .message_controls { - grid-row: 1 / 3; - } - - .sender-status { - display: inline; - margin: 0; - margin-top: 13px; - } - } - - .sender_name { - margin-top: $sender_name_distance_below_flex_center; + padding: $message_box_margin 0 0 5px; } .sender_name, diff --git a/web/styles/zulip.css b/web/styles/zulip.css index 519ffdbc37..1fc7d5c3a8 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -82,6 +82,11 @@ body { --left-sidebar-width: 270px; --right-sidebar-width: 250px; + /* + Message box line-height. + */ + --message-box-line-height: 1.214; + /* Left position of unread marker. Only needs to be tracked if it is negative so that it doesn't leak through message header. @@ -1667,7 +1672,7 @@ div.focused_table { .message_content { color: var(--color-text-message-default); - line-height: 1.214; + line-height: var(--message-box-line-height); min-height: 17px; display: block; position: relative; diff --git a/web/templates/me_message.hbs b/web/templates/me_message.hbs deleted file mode 100644 index 66a7cf70f5..0000000000 --- a/web/templates/me_message.hbs +++ /dev/null @@ -1,23 +0,0 @@ - - - {{> message_avatar}} - - - - - - - {{msg/sender_full_name}} - - - {{#if sender_is_bot}} - - {{/if}} - - {{rendered_markdown status_message}} - - {{#if edited_status_msg}} - {{> edited_notice}} - {{/if}} - - diff --git a/web/templates/message_body.hbs b/web/templates/message_body.hbs index 02a117b69f..8b3119c124 100644 --- a/web/templates/message_body.hbs +++ b/web/templates/message_body.hbs @@ -1,25 +1,30 @@ -{{#unless status_message}} {{#if include_sender}} {{> message_avatar ~}} {{/if}} {{#if include_sender}} - {{msg/sender_full_name}}{{> status_emoji msg/status_emoji_info}} + + {{msg/sender_full_name}} + {{#unless status_message}} + {{> status_emoji msg/status_emoji_info}} + {{/unless}} + {{#if sender_is_bot}} {{/if}} + {{#if status_message}} + {{rendered_markdown status_message}} + {{#if edited_status_msg}} + {{> edited_notice}} + {{/if}} + {{/if}} {{#if edited_alongside_sender}} - {{> edited_notice}} + {{> edited_notice}} {{/if}} {{/if}} -{{/unless}} - -{{#if status_message}} -{{> me_message}} -{{/if}} diff --git a/web/templates/single_message.hbs b/web/templates/single_message.hbs index 0370a2e975..8679d9d666 100644 --- a/web/templates/single_message.hbs +++ b/web/templates/single_message.hbs @@ -9,7 +9,7 @@ {{/if}}

-
+
{{> message_body}}