From 2fa88362bc498676b54f7bde270bc20b0627f8a8 Mon Sep 17 00:00:00 2001 From: Aman Agrawal Date: Fri, 9 Dec 2022 09:13:25 +0000 Subject: [PATCH] message: Hide first action button on narrow widths. Fixes zulip#19759 Before grid, there was overlap of action buttons and text (photo 1). With grid, there was just very little space for messages (photo 2). With this commit, the message gets a bit more space (photo 3). This helps us add more width to the content column of message on narrow widths. Note that it will still always be less than before grid, since we are explicitly preventing overlap. --- static/js/popover_menus_data.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/static/js/popover_menus_data.js b/static/js/popover_menus_data.js index 8b091c878d..e54d910807 100644 --- a/static/js/popover_menus_data.js +++ b/static/js/popover_menus_data.js @@ -87,6 +87,17 @@ export function get_actions_popover_content_context(message_id) { const should_display_read_receipts_option = page_params.realm_enable_read_receipts && not_spectator; + function is_add_reaction_icon_visible() { + const $message_row = message_lists.current.get_row(message_id); + return $message_row.find(".message_controls.reaction_button").is(":visible"); + } + + // Since we only display msg actions and star icons on windows smaller than + // `media_breakpoints.sm_min`, we need to include the reaction button in the + // popover if it is not displayed. + const should_display_add_reaction_option = + !message.is_me_message && !is_add_reaction_icon_visible(); + return { message_id: message.id, stream_id: message.stream_id, @@ -96,7 +107,7 @@ export function get_actions_popover_content_context(message_id) { view_source_menu_item, should_display_collapse, should_display_uncollapse, - should_display_add_reaction_option: message.sent_by_me, + should_display_add_reaction_option, should_display_edit_history_option, should_display_hide_option, conversation_time_uri,