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

popover_menus: Fix user card moves to top left of screen. 

When the user card is displayed via right sidebar, the reference
can be lost due to it being updated or hidden on window resize.

To fix it, we show user card as an overlay when we cannot find
the reference.

Another solution would have been to relocate the reference and
update it for the popover but that is not naturally supported by
tippy once the popover has been displayed.
This commit is contained in:
Aman Agrawal 2024-07-24 08:20:58 +00:00 committed by Tim Abbott
parent 829212a76a
commit 66da0a0945
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/popover_menus.ts
View File

@ -191,16 +191,26 @@ export const default_popover_props: Partial<tippy.Props> = {
const instance = (state.elements.reference as tippy.ReferenceElement)._tippy!;
const $popover = $(state.elements.popper);
const $tippy_box = $popover.find(".tippy-box");
if ($tippy_box.hasClass("show-when-reference-hidden")) {
return;
}
// $tippy_box[0].hasAttribute("data-reference-hidden"); is the real check
// but linter wants us to write it like this.
const is_reference_outside_window = Object.hasOwn(
$tippy_box[0]!.dataset,
"referenceHidden",
);
if ($tippy_box.hasClass("show-when-reference-hidden")) {
// Show user card popover as an overlay if we are not sure about position of the
// reference. This can happen when popover reference has been replaced or hidden.
if (
is_reference_outside_window &&
$tippy_box.find("#user_card_popover").length > 0
) {
$("body").append($("<div>").attr("id", "popover-overlay-background"));
instance.setProps(get_props_for_popover_centering(instance.props));
}
return;
}
if (is_reference_outside_window) {
hide_current_popover_if_visible(instance);
return;