compose: Add tooltip over compose-reply button.

This commit adds the tooltip content for disabled stream reply button.

Fixes part of #28410.

Co-authored-by: Kunal Sharma <v.shm.kunal@gmail.com>
This commit is contained in:
Maneesh Shukla
2024-11-03 19:31:18 +05:30
committed by Tim Abbott
parent d8c5dcb41d
commit b024e71dc0
2 changed files with 31 additions and 6 deletions

View File

@@ -52,6 +52,14 @@ export function initialize(): void {
instance.setContent(pick_empty_narrow_banner().title); instance.setContent(pick_empty_narrow_banner().title);
return; return;
} }
case "stream_disabled": {
instance.setContent(
parse_html(
$("#compose_disable_stream_reply_button_tooltip_template").html(),
),
);
return;
}
case "selected_message": { case "selected_message": {
instance.setContent( instance.setContent(
parse_html($("#compose_reply_message_button_tooltip_template").html()), parse_html($("#compose_reply_message_button_tooltip_template").html()),
@@ -74,13 +82,19 @@ export function initialize(): void {
} }
} }
}, },
onTrigger(instance, event) {
assert(event.currentTarget instanceof HTMLElement);
if ($(event.currentTarget).attr("data-reply-button-type") === "stream_disabled") {
instance.setProps({delay: INSTANT_HOVER_DELAY});
}
},
onHidden(instance) { onHidden(instance) {
instance.destroy(); instance.destroy();
}, },
}); });
tippy.delegate("body", { tippy.delegate("body", {
target: "#new_conversation_button", target: "#compose_buttons .compose_new_conversation_button",
delay: EXTRA_LONG_HOVER_DELAY, delay: EXTRA_LONG_HOVER_DELAY,
// Only show on mouseenter since for spectators, clicking on these // Only show on mouseenter since for spectators, clicking on these
// buttons opens login modal, and Micromodal returns focus to the // buttons opens login modal, and Micromodal returns focus to the
@@ -88,12 +102,20 @@ export function initialize(): void {
trigger: "mouseenter", trigger: "mouseenter",
appendTo: () => document.body, appendTo: () => document.body,
onShow(instance) { onShow(instance) {
const $elem = $(instance.reference); const $new_conversation_button = $("#new_conversation_button");
const conversation_type = $elem.attr("data-conversation-type"); const conversation_type = $new_conversation_button.attr("data-conversation-type");
if (conversation_type === "stream") { if (conversation_type === "stream") {
instance.setContent( if ($new_conversation_button.prop("disabled")) {
parse_html($("#new_topic_message_button_tooltip_template").html()), instance.setContent(
); parse_html(
$("#compose_disable_stream_reply_button_tooltip_template").html(),
),
);
} else {
instance.setContent(
parse_html($("#new_topic_message_button_tooltip_template").html()),
);
}
return undefined; return undefined;
} }
// Use new_stream_message_button_tooltip_template when the // Use new_stream_message_button_tooltip_template when the

View File

@@ -10,6 +10,9 @@
{{t 'Scroll to bottom' }} {{t 'Scroll to bottom' }}
{{tooltip_hotkey_hints "End"}} {{tooltip_hotkey_hints "End"}}
</template> </template>
<template id="compose_disable_stream_reply_button_tooltip_template">
{{t 'You do not have permission to post in this channel.' }}
</template>
<template id="compose_reply_message_button_tooltip_template"> <template id="compose_reply_message_button_tooltip_template">
{{t 'Reply to selected message' }} {{t 'Reply to selected message' }}
{{tooltip_hotkey_hints "R"}} {{tooltip_hotkey_hints "R"}}