So far, we were only considering elements at the the reference element's
bounding box top-left corner, to check if the reference element was
covered by other elements. This led to a bug where the popover wouldn't
show up even if a very small part of the reference element was covered.
Now we consider elements that are at both the top-left and bottom-right
of the reference element's bounding box, as those covering the reference
element.
The popover didn't open since sticky_header is part of message feed
and we were hiding popovers if `elements_at_reference_position`
had `sticky_header`. Now, we just don't do that check if the
reference is part of sticky_header.
If the popover reference is in an overlay, the below check:
```js
elements_at_reference_position.some(
(element) =>
element.id === "navbar-fixed-container" ||
element.id === "compose-content" ||
element.classList.contains("sticky_header"),
)
```
would make the popover not appear if the reference was above them.
To make things simpler for us to check, we only handle popover
references inside message list which we know for sure will
always be below the elements checked above in stacking context.
Hiding popovers for other view is done good enough by
`data-reference-hidden` check that we don't need to manually
handle them.
Since `#compose` occupies full width of the window, it is a
part of `elements_at_reference_position` if the reference is
under it.
Since `#compose-content` only occupies the part of window where
compose box is actually visible, we use it decide if the
popover should be hidden.
Tippyjs is equipped to handle reference element moving from
its initial position so that the popover moves / changes
along with the reference / window size.
Pressing `r` to open compose box, or search via hotkey didn't work
for gear menu while it worked for other popovers. So, this is an
attempt to unify that behavior so that if the hotkeys are not
handles the navbar_menus popovers, then can be handled elsewhere.
Add a personal menu dropdown that opens on clicking user avatar icon
in navbar added in previous commit.
The args passed to render_personal_menu() in onShow() are returned by
get_personal_menu_content_context() in popover_menus_data.js so that
they can be unit tested.
Additionally, added CSS to get a custom arrow for dropdown menu.
Added a `?` hotkey in keyboard shortcuts option in personal_menu
dropdown in a style similar to our tooltip's hotkey by adding
? in a span with class .tooltip-hotkey-hint and adding some CSS.
Fixes part of #22802.
Since we only have tippy popovers now, functions calling
not_hide_tippy_instances have been removed.
Also, all of emoji_picker, stream_popover, user_card etc popovers
are tippy popovers so calling hideAll is enough to hide them all.
This is a follow up to #26728, which disables buttons in preview mode
for any message being edited.
Care is taken to pass the correct preview state (compose vs the message
row being edited) to the popover menu so the buttons in it too can be
disabled as needed.
Buttons which change the content in the compose textarea were so far
enabled even in preview mode, and would work, but those changes would
not be reflected in the visible preview. This is extremely confusing,
and can lead to the possibility of a user accidentally changing the
content of the compose textarea while previewing, and sending that.
Now we disable those buttons in preview mode, both when composing a new
message and when editing an existing one. We still show the tooltips,
but grey them out and make them unclickable.
Fixes: #20962
By default, Tippys with the `data-reference-hidden` attribute aren't
displayed. But when we render them as centered overlays on mobile and
use `getReferenceClientRect` for a virtual reference, Tippy slaps this
hidden attribute on our element, making it invisible. We want to
bypass this in scenarios where we're centering popovers on mobile
screens.
The offset modifier is tricky and its calculations is related to the
placement of the popover. So, to prevent inconsistency, we should fix
the placement to some value.
This commit lets us render popovers centered on the screen with a
background overlay. It's the same thing we did with Bootstrap
popovers, but optimized for use with Tippy.
This commit removes the 'View Edit History' option from the three-dot
menu since we have already implemented this feature through the
edited/moved label in the message. Therefore, we no longer need this
option in the three-dot menu. This commit aims to simplify the
three-dot message menu.
Fixes: #23077
N-Shar-ma
Karl Stolley
Aman Agrawal
Hardik Dharmani
Anders Kaseorg
Tim Abbott
yogesh sirsat
Daniil Fadeev
Palash Baderia