From 047bffe2575b9867cdf778cc386bcda3d4f88ea7 Mon Sep 17 00:00:00 2001 From: palashb01 Date: Thu, 13 Apr 2023 19:52:02 +0530 Subject: [PATCH] compose_box: Convert dynamic closed compose box tooltips to tippyjs. This commit converts the dynamic closed_compose_box tooltip to template-based tippy.js tooltips. The functions in the compose_closed_ui.js file are refactored to dynamically change the 'data-tooltip-template-id' attribute according to the situation. The title parameter is removed from the functions in compose_closed_ui.js so that we can change the tooltip within the caller functions themselves, according to the situation. Since there is no way to match the title in existing functions with different languages to change the tooltip attribute dynamically, it is better to change the tooltip attribute within the caller function according to the situation, rather than passing the title as a parameter. In the case of the reply button, we disable it when direct messages are not allowed. However, tippy.js tooltips do not appear in the case of disabled elements, so we have to use the container element around it to show the tooltip. This approach is used in the case of the reply button, where the span element wraps the button. We used to have two titles for the reply button: one is the usual 'Reply to selected message', and the other is for the disabled state. However, in the case of recent conversations, it makes more sense to have a new tooltip title: 'Reply to selected conversation'. To ensure that the tooltip content changes dynamically, it is required to destroy the tooltip instance and then reinitialize it every time. Fixes: #25096 --- web/src/compose_closed_ui.js | 60 ++++++++++++++++++++++++------------ web/src/tippyjs.js | 9 +++++- web/templates/compose.hbs | 26 +++++++++++++--- web/tests/compose.test.js | 1 + 4 files changed, 72 insertions(+), 24 deletions(-) diff --git a/web/src/compose_closed_ui.js b/web/src/compose_closed_ui.js index 82f09964b2..ff30a868b3 100644 --- a/web/src/compose_closed_ui.js +++ b/web/src/compose_closed_ui.js @@ -53,32 +53,41 @@ export function get_recipient_label(message) { return ""; } -function update_reply_button_state(disable = false, title) { +function update_reply_button_state(disable = false) { $(".compose_reply_button").attr("disabled", disable); - if (!title) { - const title_text = $t({defaultMessage: "Reply to selected message"}); - title = title_text + " (r)"; + if (disable) { + $("#compose_buttons > .reply_button_container").attr( + "data-tooltip-template-id", + "compose_reply_button_disabled_tooltip_template", + ); + return; + } + if (narrow_state.is_message_feed_visible()) { + $("#compose_buttons > .reply_button_container").attr( + "data-tooltip-template-id", + "compose_reply_message_button_tooltip_template", + ); + } else { + $("#compose_buttons > .reply_button_container").attr( + "data-tooltip-template-id", + "compose_reply_selected_topic_button_tooltip_template", + ); } - $(".compose_reply_button").prop("title", title); } -function update_stream_button(btn_text, title) { +function update_stream_button(btn_text) { $("#left_bar_compose_stream_button_big").text(btn_text); - $("#left_bar_compose_stream_button_big").prop("title", title); } -function update_conversation_button(btn_text, title) { +function update_conversation_button(btn_text) { $("#left_bar_compose_private_button_big").text(btn_text); - $("#left_bar_compose_private_button_big").prop("title", title); } -function update_buttons(text_stream, disable_reply, title_reply) { - const title_stream = text_stream + " (c)"; +function update_buttons(text_stream, disable_reply) { const text_conversation = $t({defaultMessage: "New direct message"}); - const title_conversation = text_conversation + " (x)"; - update_stream_button(text_stream, title_stream); - update_conversation_button(text_conversation, title_conversation); - update_reply_button_state(disable_reply, title_reply); + update_stream_button(text_stream); + update_conversation_button(text_conversation); + update_reply_button_state(disable_reply); } export function update_buttons_for_private() { @@ -87,25 +96,38 @@ export function update_buttons_for_private() { !narrow_state.pm_ids_string() || people.user_can_direct_message(narrow_state.pm_ids_string()) ) { + $("#left_bar_compose_stream_button_big").attr( + "data-tooltip-template-id", + "new_stream_message_button_tooltip_template", + ); update_buttons(text_stream); return; } // disable the [Message X] button when in a private narrow // if the user cannot dm the current recipient const disable_reply = true; - const title_reply = $t({ - defaultMessage: "You are not allowed to send private messages in this organization.", - }); - update_buttons(text_stream, disable_reply, title_reply); + $("#compose_buttons > .reply_button_container").attr( + "data-tooltip-template-id", + "disable_reply_compose_reply_button_tooltip_template", + ); + update_buttons(text_stream, disable_reply); } export function update_buttons_for_stream() { const text_stream = $t({defaultMessage: "New topic"}); + $("#left_bar_compose_stream_button_big").attr( + "data-tooltip-template-id", + "new_topic_message_button_tooltip_template", + ); update_buttons(text_stream); } export function update_buttons_for_recent_topics() { const text_stream = $t({defaultMessage: "New stream message"}); + $("#left_bar_compose_stream_button_big").attr( + "data-tooltip-template-id", + "new_stream_message_button_tooltip_template", + ); update_buttons(text_stream); } diff --git a/web/src/tippyjs.js b/web/src/tippyjs.js index 7f831a2e37..eac833a094 100644 --- a/web/src/tippyjs.js +++ b/web/src/tippyjs.js @@ -199,11 +199,18 @@ export function initialize() { delegate("body", { target: [ + // Ideally this would be `#compose_buttons .button`, but the + // reply button's actual area is its containing span. + "#compose_buttons > .reply_button_container", "#left_bar_compose_mobile_button_big", + "#left_bar_compose_stream_button_big", "#left_bar_compose_private_button_big", ], - delay: LONG_HOVER_DELAY, + delay: EXTRA_LONG_HOVER_DELAY, appendTo: () => document.body, + onHidden(instance) { + instance.destroy(); + }, }); delegate("body", { diff --git a/web/templates/compose.hbs b/web/templates/compose.hbs index bc37332f2a..2b1338acbd 100644 --- a/web/templates/compose.hbs +++ b/web/templates/compose.hbs @@ -16,12 +16,22 @@
- + + + + + + {{#unless embedded }} diff --git a/web/tests/compose.test.js b/web/tests/compose.test.js index 91e75f020f..4b41ce66a2 100644 --- a/web/tests/compose.test.js +++ b/web/tests/compose.test.js @@ -825,6 +825,7 @@ test_ui("DM policy disabled", ({override, override_rewire}) => { test_ui("narrow_button_titles", ({override}) => { override(narrow_state, "pm_ids_string", () => "31"); + override(narrow_state, "is_message_feed_visible", () => true); compose_closed_ui.update_buttons_for_private(); assert.equal( $("#left_bar_compose_stream_button_big").text(),