Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

compose_tooltips: Improve tooltip logic for compose_reply_button. 

Change compose_reply_button tooltip logic to show the correct tooltip.
Earlier in organizations where DMs were disabled, a stale tooltip was
being displayed.

Earlier if the user hovered over the compose_reply_button when it was
disabled and switched to a stream in which it was enabled before waiting
for the tooltip delay, the next time the user hovers over the
compose_reply_button the stale disabled tooltip is displayed instead of
the enabled one.

This is fixed by checking if the compose_reply_button is enabled on the
fly while rendering the tooltip via instance.setContent().

Fixes #29238.
This commit is contained in:
Kenneth Rodrigues 2024-04-09 11:26:36 +05:30 committed by Tim Abbott
parent 47e9e770a6
commit 110ca73545
3 changed files with 53 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/compose_closed_ui.js
View File

@ -67,20 +67,20 @@ function update_reply_button_state(disable = false) {
$(".compose_reply_button").attr("disabled", disable);
if (disable) {
$("#compose_buttons .compose-reply-button-wrapper").attr(
"data-tooltip-template-id",
"compose_reply_direct_disabled_button_tooltip_template",
"data-reply-button-type",
"direct_disabled",
);
return;
}
if (narrow_state.is_message_feed_visible()) {
$("#compose_buttons .compose-reply-button-wrapper").attr(
"data-tooltip-template-id",
"compose_reply_message_button_tooltip_template",
"data-reply-button-type",
"selected_message",
);
} else {
$("#compose_buttons .compose-reply-button-wrapper").attr(
"data-tooltip-template-id",
"compose_reply_selected_topic_button_tooltip_template",
"data-reply-button-type",
"selected_conversation",
);
}
}

47
web/src/compose_tooltips.ts
View File

@ -21,7 +21,6 @@ export function initialize(): void {
target: [
// Ideally this would be `#compose_buttons .button`, but the
// reply button's actual area is its containing span.
"#compose_buttons .compose-reply-button-wrapper",
"#left_bar_compose_mobile_button_big",
"#new_direct_message_button",
].join(","),
@ -35,6 +34,52 @@ export function initialize(): void {
instance.destroy();
},
});
delegate("body", {
target: "#compose_buttons .compose-reply-button-wrapper",
delay: EXTRA_LONG_HOVER_DELAY,
// Only show on mouseenter since for spectators, clicking on these
// buttons opens login modal, and Micromodal returns focus to the
// trigger after it closes, which results in tooltip being displayed.
trigger: "mouseenter",
appendTo: () => document.body,
onShow(instance) {
const $elem = $(instance.reference);
const button_type = $elem.attr("data-reply-button-type");
switch (button_type) {
case "direct_disabled": {
instance.setContent(
parse_html(
$("#compose_reply_direct_disabled_button_tooltip_template").html(),
),
);
return;
}
case "selected_message": {
instance.setContent(
parse_html($("#compose_reply_message_button_tooltip_template").html()),
);
return;
}
case "selected_conversation": {
instance.setContent(
parse_html(
$("#compose_reply_selected_topic_button_tooltip_template").html(),
),
);
return;
}
default: {
instance.setContent(
parse_html($("#compose_reply_message_button_tooltip_template").html()),
);
return;
}
}
},
onHidden(instance) {
instance.destroy();
},
});
delegate("body", {
target: "#new_conversation_button",

2
web/templates/compose.hbs
View File

@ -13,7 +13,7 @@
<div id="compose_controls" class="new-style">
<div id="compose_buttons">
<div class="new_message_button reply_button_container">
<div class="compose-reply-button-wrapper" data-tooltip-template-id="compose_reply_message_button_tooltip_template">
<div class="compose-reply-button-wrapper" data-reply-button-type="selected_message">
<button type="button" class="button small compose_reply_button"
id="left_bar_compose_reply_button_big">
{{t 'Compose message' }}