paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

compose: Fix buggy tooltip hotkey hint placement in compose send button.

Browse Source 
This commit eliminates a bug, introduced in commit
7bc04bb829, where the send button's
tooltip hotkey hint would have incorrect placement when the user had
triggered a tippy instance on the send button while it was disabled.

The reason behind this bug was the conflict between code in the
previously mentioned commit which set the tooltip content to
`display: block` to account for the inline italicized empty topic name
in the error message, and the need for `display: flex` to ensure the
hotkey hint was positioned correctly.
This commit is contained in:
Sayam Samal
2025-07-08 09:05:58 +05:30
committed by Tim Abbott
parent ea48a283b1
commit 1c58dcddfa
3 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/compose_tooltips.ts
View File

@@ -270,9 +270,6 @@ export function initialize(): void {
if (instance.reference.classList.contains("disabled-message-send-controls")) {
const error_message = compose_validate.get_disabled_send_tooltip_html();
instance.setContent(parse_html(error_message));
// `display: flex` doesn't show the tooltip content inline when <i>general chat</i>
// is in the error message.
$(instance.popper).find(".tippy-content").css("display", "block");
if (!error_message) {
blueslip.error("Compose send button incorrectly disabled.");

14
web/src/compose_validate.ts
View File

@@ -56,10 +56,17 @@ export const NO_PRIVATE_RECIPIENT_ERROR_MESSAGE = $t({
defaultMessage: "Please add a valid recipient.",
});
export const NO_CHANNEL_SELECTED_ERROR_MESSAGE = $t({defaultMessage: "Please select a channel."});
export const get_topics_required_error_message_html = (): string =>
render_topics_required_error_message({
export const get_topics_required_error_tooltip_message_html = (): string => {
const error_message_html = render_topics_required_error_message({
empty_string_topic_display_name: util.get_final_topic_display_name(""),
});
// The `.tippy-content` element uses `display: flex`, which prevents the empty
// topic name from appearing italicized and inline within the error message text.
// To resolve this, we wrap the message in a `.tooltip-inner-content` div,
// allowing inline formatting and benefiting from the line height adjustment
// accompanying the class suitable for multi-line tooltips such as this one.
return `<div class="tooltip-inner-content">${error_message_html}</div>`;
};
export const get_message_too_long_for_compose_error = (): string =>
$t(
{defaultMessage: `Message length shouldn't be greater than {max_length} characters.`},
@@ -858,7 +865,8 @@ function validate_stream_message(scheduling_message: boolean, show_banner = true
compose_banner.topic_missing_error(util.get_final_topic_display_name(""));
}
if (is_validating_compose_box) {
disabled_send_tooltip_message_html = get_topics_required_error_message_html();
disabled_send_tooltip_message_html =
get_topics_required_error_tooltip_message_html();
}
return false;
}

6
web/src/tippyjs.ts
View File

@@ -849,11 +849,9 @@ export function initialize(): void {
onShow(instance) {
const $elem = $(instance.reference);
if ($($elem).find(".topic_edit_save").prop("disabled")) {
const error_message = compose_validate.get_topics_required_error_message_html();
const error_message =
compose_validate.get_topics_required_error_tooltip_message_html();
instance.setContent(ui_util.parse_html(error_message));
// `display: flex` doesn't show the tooltip content inline when <i>general chat</i>
// is in the error message.
$(instance.popper).find(".tippy-content").css("display", "block");
return undefined;
}
instance.destroy();