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

message_body: Keep the sender name padding as a different element. 

This helps us align the tooltip on sender name at the center of it
while still having a tooltip in the gap between avatar and sender
name.
This commit is contained in:
Aman Agrawal 2023-01-24 09:00:45 +00:00 committed by Tim Abbott
parent dbef64426b
commit b8f91b6513
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
static/styles/message_row.css
View File

@ -222,10 +222,13 @@ $time_column_min_width: 50px; /* + padding */
be in any language and `line-height: 1` doesn't work to accommodate text be in any language and `line-height: 1` doesn't work to accommodate text
from start and end vertically in all languages. */ from start and end vertically in all languages. */
line-height: normal; line-height: normal;
/* Add padding to align user name with the content */
padding-left: $avatar_column_width;
outline: none; outline: none;
margin-top: $sender_name_distance_below_flex_center; margin-top: $sender_name_distance_below_flex_center;
.sender_name_padding {
/* Add padding to align user name with the content */
padding-left: $avatar_column_width;
}
} }
} }

5
static/templates/message_body.hbs
View File

@ -3,7 +3,10 @@
{{#if include_sender}} {{#if include_sender}}
<span> <span>
{{> message_avatar ~}} {{> message_avatar ~}}
<span class="sender_name auto-select view_user_card_tooltip" role="button" tabindex="0">{{msg/sender_full_name}}{{> status_emoji msg/status_emoji_info}}</span> <span class="sender_name auto-select" role="button" tabindex="0">
<span class="sender_name_padding view_user_card_tooltip"></span>
<span class="view_user_card_tooltip">{{msg/sender_full_name}}{{> status_emoji msg/status_emoji_info}}</span>
</span>
{{#if sender_is_bot}} {{#if sender_is_bot}}
<i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i> <i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i>
{{/if}} {{/if}}