message_avatar: Preserve clickable area from image to user name.

This commit is contained in:
Karl Stolley 2023-07-07 10:26:25 -05:00 committed by Tim Abbott
parent 0058cc5f92
commit 42919ed2e1
4 changed files with 8 additions and 6 deletions

View File

@ -667,7 +667,7 @@ export function user_info_popover_manage_menu_handle_keyboard(key) {
export function show_sender_info() {
const $message = $(".selected_message");
let $sender = $message.find(".inline_profile_picture");
let $sender = $message.find(".message-avatar");
if ($sender.length === 0) {
// Messages without an avatar have an invisible message_sender
// element that's roughly in the right place.
@ -732,7 +732,7 @@ export function hide_playground_links_popover() {
export function register_click_handlers() {
$("#main_div").on(
"click",
".sender_name, .sender_name-in-status, .inline_profile_picture",
".sender_name, .sender_name-in-status, .message-avatar",
function (e) {
const $row = $(this).closest(".message_row");
e.stopPropagation();

View File

@ -281,7 +281,7 @@ $time_column_max_width: 150px;
}
}
.inline_profile_picture {
.message-avatar {
grid-area: avatar;
/* The picture should not participate in the baseline group. */
align-self: start;

View File

@ -1,4 +1,6 @@
<div class="u-{{msg/sender_id}} sender_info_hover inline_profile_picture {{#sender_is_guest}} guest-avatar{{/sender_is_guest}} view_user_card_tooltip" aria-hidden="true" data-tooltip-template-id="view-user-card-tooltip-template">
<img src="{{small_avatar_url}}" alt="" class="no-drag"/>
<div class="u-{{msg/sender_id}} message-avatar sender_info_hover view_user_card_tooltip" aria-hidden="true" data-tooltip-template-id="view-user-card-tooltip-template">
<div class="inline_profile_picture {{#sender_is_guest}} guest-avatar{{/sender_is_guest}}">
<img src="{{small_avatar_url}}" alt="" class="no-drag"/>
</div>
</div>
{{~! remove whitespace ~}}

View File

@ -111,7 +111,7 @@ test_ui("sender_hover", ({override, mock_template}) => {
page_params.is_spectator = false;
override($.fn, "popover", noop);
const selection = ".sender_name, .sender_name-in-status, .inline_profile_picture";
const selection = ".sender_name, .sender_name-in-status, .message-avatar";
const handler = $("#main_div").get_on_handler("click", selection);
const message = {