This commit adds a tippy tooltip to the lightbox title which enables the
user to view the filename of an image if the filename is different than
the image title.
Fixes: #21333
This commit adds a tippy tooltip for inline image previews in messages.
There exists some (reasonable) logic in `static/js/util.js` which
overrides all title attributes for links to user-uploaded content to
ensure they always display "Download <filename>". This doesn't make
sense for inline images specifically because they will be opened in a
ligthbox, so we prevent that.
There is an additional tippy instance created in `static/js/tippyjs.js`
to add tippy tooltips to inline images, which takes advantage of the now
preserved title attribute of the parent link.
Muted streams are now greyed out in the personal settings,
also changes to the notification settings of a muted stream are
not possible anymore.
Also, add a bell-slash icon after the stream name of muted streams,
clicking on it unmutes the stream.
Fixes#19780.
An attacker could maliciously craft a full name for their account and
send messages to a topic with several participants; a victim who then
opens an overflow tooltip including this full name on the recent
topics page could trigger execution of JavaScript code controlled by
the attacker.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Show/hide scroll to bottom button when the last message is
not visible in the current scroll position.
We adjust the bottom offset of the button based on compose box
height.
Fixes#19862
When users tabs through the message action icons, they used to
persist even when the focus is not on them. We manually
destroy them on blur event since tippy has some issue with
handling elements with opacity hiding effect.
Use a popover which displays both the options instead of long text.
We only use a small text indicating the current state which user
can click on to trigger the popover.
Having tooltip `appendTo` to parent causes it to be trimmed by
the size of parent container if the parent doesn't have enough
size to include the tooltip. To fix this, we append tooltip
to `document.body`.
The timestamp in edit history ui also has .message_time.
We had a tippy hover event attached to .message_time
whose code assumes it to belong to an actual message
which caused an error on hovering the message timestamp
in edit history.
This commit fixes it by making the selector more specific.
We handled tooltips for failed message action buttons separately
through our default tippy-zulip-tooltip class because of
a diffrent html structure for these buttons. But as we refactored
html for those buttons to have same structure as for other buttons
in message action this extra check is no more needed.
Generally, tooltips placed at top look good. If the tooltip cannot
fit at top, it will by default be placed at opposite side.
Removed the unnecessary top placement definitions.
Similar to the previous commit, the tooltip was not
completely visible in this case and this bug was
similar to the one corrected in recipient bar icons.
Here, the tooltip was partially visible. This bug was similar
to the one that is corrected for recipient bar icons.
I have removed the class attribute `tippy-zulip-tooltip`
for Filter stream title as this will be handled by the
new changes.
Additional changes are added in `tippyjs.js` to ensure
that the tooltip doesn't hide behind the message
box or it is not limited by the parent container, in
case of recipient bar icons.
This keeps it consistent with other widgets in message body area.
Set the display position to top to be consistent with
compose control buttons.
Changed the tooltip content to be more readable like
Thursday, May 18, 2017
7:12:53 AM India Standard Time
Also changed timerender.get_full_datetime() to consider
users' 24 hour format preference.
It can happen that reactions are re-rendered while we are
in the process of showing tooltip for them. In that case,
we setup MutationObserver for an element not present in DOM
which results in weird behaviour. We avoid it by checking the
element again before setting up MutationObserver for it.
See https://chat.zulip.org/#narrow/stream/6-frontend/topic
/tippy.20bug/near/1206316 for details on the issue.
There are several benefits of using tippyjs here:
* Removes dependency on bootstrap.
* We don't have to manually handle show/hide of popover.
* There cannot be any memory leak since we don't store
the instance.
Since the instance.popper can return same elements as the
instance may be used again by tippy, we use `one` to ensure
that we do not define multiple event handlers for the same element
repeatedly.
This tippyjs event listener was active on 'add emoji reaction'
option in sender's popover menu of a message but it was only
intended for the add reaction button in message reactions bar
at bottom of a message.
Both of those having common selector `.reaction_button` caused
errors in tippyjs near `observer.observe` having wrong args.
Edited the css selector to be more specific to only target
add reaction button in reactions row of message.
This was introduced in 99e6f25.
When message for which tooltip is active has reduced opacity in
an interleaved view due `.message-fade` class being applied to
it, then the tooltip used stack vertically under the recipient_row
which looked awful.
Appending the tooltip to document.body and manually fixing the
bug of tooltip persisting after the reference element is no
longer visible in DOM using MutationObserver does the trick
for us.
We add a popover on click which allows user to create or browse
streams too.
Reason for doing so:
At present, it is hard to discover how to join streams
and create new streams. In particular:
Users have a hard time finding the gear in the STREAMS
header in the left sidebar and realizing that it's relevant for them.
Even once a user is in the STREAMS menu, the Create
stream button is hard to spot.
Fixes#18694.
Tooltips in message action buttons for failed message were
not shown properly because they were initialized two times
first because of general tippy-zulip-tooltip class and then
because of message_control_button class. So to avoid showing
an extra empty tooltip for failed message icons we return
false from onShow() method of message_control_button class
initialization of tooltip.
This check was not needded as it is possible to have even zero
edit message buttons in cases when a message is fails. So it
raises unncesary errors on hovering over icons of those failed
messages.
The inconsistent style between these three buttons looked bad.
We have to take some care with the "Starred messages" and "Edit" ones,
to make sure they live-update properly.
This allows us to hide tooltips automatically when the
parent container is hidden while tooltip is active.
In an overlay, when a tooltip is active and `esc` is pressed,
the tooltip will remain active without this commit.
This has side effects of some properties of parent applying to
tooltips if property is directly set to `div`. Through manual testing,
only area where this was found was fixed.
Instead of inserting tooltip inside `body`, we directly insert
it inside the `reference` element. This helps us to automatically
hide the tooltip when we hide the `reference` element.
This avoids the bug of tooltip persisting when the message reaction
is removed while the tooltip is active.
To reproduce:
* React 👍 to a message.
* Hover over the reaction.
* Press `+` from keyboard.
You will see reaction tooltip persisting while the reaction is hidden,
also "Add emoji" icon is displayed with tooltip.
Doing the same for elements which are inside a simplebar container
and for which tooltips can span outside the simplebar container,
makes the tooltips not visible or cut at the edges of simplebar
container since simplebar containers have overflow set to `hidden`.
This is something that cannot fixed as per
https://github.com/Grsmto/simplebar/issues/347
So, for simplebar contained elements we insert the tooltip to
`body`.
`reference` element: Element for which tooltip is displayed.
Tippyjs automatically places it to bottom.
NOTE: placement of tooltip is changed from 'bottom' to `auto`.
Custom css was set here to avoid tooltip being partially hidden
on small screens. This change automatically takes care of it
by showing the tooltip on right side of message_reaction on
small screens if it is partially hidden from the left or
vice versa.
Our aim is to use this library to remove use of bootstrap-tooltip
for showing popovers and tooltips. This will remove our
dependency on bootstrap for showing tooltips. Thus, bootstrap
can be upgrade more independently.
Austin Riba
Anders Kaseorg
Julia Bichler
Aman Agrawal
My-Name-Is-Nabil
Dinesh
m-e-l-u-h-a-n
akshatdalton
Tim Abbott