paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

message_grid: Let the avatar participate in CSS Grid.

Browse Source 
This also ensures that sender info flexes and participates
in the grid's baseline group.
This commit is contained in:
Karl Stolley
2023-06-14 14:03:37 -05:00
committed by Tim Abbott
parent 1d1a2e3c75
commit 93dba7f381
2 changed files with 17 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/styles/message_row.css
View File

@@ -222,11 +222,18 @@ $time_column_max_width: 150px;
&.include-sender {
.messagebox .messagebox-content {
grid-template-areas:
"sender sender controls time"
". message . . "
"avatar sender controls time"
"avatar message . . "
". more . . "
". reactions . . ";
.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;
}
.message_content {
padding-top: 0;
grid-area: message;
@@ -267,6 +274,11 @@ $time_column_max_width: 150px;
overflow: hidden;
text-overflow: ellipsis;
grid-area: sender;
display: flex;
/* Ensure flexed sender info (name, status emoji, inline EDITED)
forms a baseline group, which will participate with the
message-box grid's baseline group, too. */
align-items: baseline;
.zulip-icon.zulip-icon-bot {
align-self: center;
@@ -313,18 +325,6 @@ $time_column_max_width: 150px;
}
}
> span {
display: flex;
}
.inline_profile_picture {
flex-shrink: 0;
/* Let user profile picture take extra height without
having any affect on height of the container. */
position: absolute;
margin-top: $distance_of_non_text_elements_from_message_box_top;
}
.sender_name {
margin-top: $sender_name_distance_below_flex_center;
}
@@ -340,17 +340,6 @@ $time_column_max_width: 150px;
line-height: normal;
outline: none;
}
.sender_name_padding {
/* Add padding to align user name with the content. This region is
important to ensure that the hover region for the sender name
and avatar are continuous with each other. */
padding-left: $avatar_column_width;
}
.sender_name-in-status .sender_name_padding {
margin-left: -$avatar_column_width;
}
}
&.content_edit_mode {

7
web/templates/message_body.hbs
View File

@@ -1,10 +1,10 @@
{{#unless status_message}}
{{#if include_sender}}
{{> message_avatar ~}}
{{/if}}
<span class="message_sender no-select">
{{#if include_sender}}
<span>
{{> message_avatar ~}}
<span class="sender_info_hover sender_name auto-select" role="button" tabindex="0">
<span class="sender_name_padding view_user_card_tooltip" data-tooltip-template-id="view-user-card-tooltip-template"></span>
<span class="view_user_card_tooltip" data-tooltip-template-id="view-user-card-tooltip-template">{{msg/sender_full_name}}{{> status_emoji msg/status_emoji_info}}</span>
</span>
{{#if sender_is_bot}}
@@ -13,7 +13,6 @@
{{#if edited_alongside_sender}}
{{> edited_notice}}
{{/if}}
</span>
{{/if}}
</span>
{{/unless}}