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

emoji: Display status emoji as inline-flex in sender row.

Browse Source 
With no existing class to reach this selector, this change
introduces a new `.inline-status-emoji` class on the Handlebars
template and in the main Zulip CSS file.

Because of the inline styling in the message sender row, this
specific instance of a status emoji needs to be presented as
an inline flex: that keeps the avatar image layout clean, while
also introducing the `align-self: center` vertical positioning
of the status emoji adjacent the username, which is itself a
bare text node.
This commit is contained in:
Karl Stolley
2023-04-04 16:03:12 -05:00
committed by Tim Abbott
parent 5df7330d2c
commit fbfc72cb05
2 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/styles/zulip.css
View File

@@ -2655,6 +2655,19 @@ select.invite-as {
margin-right: 0;
}
.inline-status-emoji {
/* Treat as an inline flex container, with an anonymous block around
the username text node, for positioning status emoji */
display: inline-flex;
.status-emoji {
/* Preserve the distance between the emoji
and username that was previously due to
whitespace. */
margin-left: 6px;
}
}
/* FIXME: Combine this rule with the one in portico.css somehow? */
#pw_strength {
width: 100%;

2
web/templates/message_body.hbs
View File

@@ -4,7 +4,7 @@
<span class="message_sender no-select">
{{#if include_sender}}
<span class="sender_info_hover sender_name auto-select" role="button" tabindex="0">
<span class="view_user_card_tooltip" data-tooltip-template-id="view-user-card-tooltip-template">
<span class="view_user_card_tooltip inline-status-emoji" data-tooltip-template-id="view-user-card-tooltip-template">
{{msg/sender_full_name}}
{{#unless status_message}}
{{> status_emoji msg/status_emoji_info}}