This commit introduces the change of rendering private messages
section as collapsible, whose data-fetching logic came with zulip#21357.
We now have separated out `Private messages` from `top_left_corner`
section and shifted it below the `global_filters` in a different
separate section along with stream list with common scroll bar
in left-sidebar.
The new PM section will be opened by-default on loading the page
and will have a toggle-icon in its header, clicking on which makes the
section collapse/expand accordingly.
In default view, only recent 5 PM threads would be shown
and would append the active conversation as the 6th one at last
if not present in those 5, similar to how topics list work.
In PM section with unreads, a maximum of 8 conversations
would be shown and rest of them would be hidden behind
the 'more conversations' li-item, clicking on which takes
to the zoomedIn view of PM section where all the present
PM threads would be visible and rest of the sections of left-sidebar
will get collapsed.
Fixes#20870.
Co-authored-by: Aman Agrawal <amanagr@zulip.com>
This avoids an error being triggered if `instance.reference` gets
remvoed from the DOM and `rows.get_message_id` is called on it in
`onShow` later.
This is an untested bug fix since I was not able to reproduce
this on live server or locally.
Previously, we showed "View source" icon if content editing was not
allowed, now we show the move message icon instead if moving message
is allowed but content editing is not. We remove the hotkey from
tooltip for now and would add a different hotkey for moving
messages in further commits.
We also add a common class for all the three icons in this commit
to avoid duplication and use different class if required for click
handlers.
Custom profile fields table `CSS` changed to fit the new "Display"
column of checkboxes, checkboxes are for select/deselect custom
profile field to display in profile popover.
New option "Display in profile summary" added in create and edit
custom profile fields form, with the help of this the user can
pick max of 2 custom profile fields except for `LONG_TEXT` and
`USER` fields to display in his user profile popover.
Checkboxes will go in a disabled state, with an explanatory tooltip,
if we've already passed the limit of 2 fields with this setting
enabled.
Fixes#21215.
Spamming the `s` shortcut when hovered on an image can cause the
tooltip to be displayed at the top left corner. This is caused by
original reference of the tooltip being removed from DOM. The
re-rendering is happening so quickly that tippy is not able to hide
the tooltip in time.
This'll be shown only when in a different narrow from what
you're composing to.
Takes care of updating display of the button on moving from
one narrow to another and also on changing inputs. This is
what contributes to majority of js code in this commit.
We are not displaying this for private messages since we do not
have a consistent design for both stream and private compose areas.
See https://chat.zulip.org/#narrow/stream/101-design/topic/narrow.20to.20topic.2Fpms.20when.20composing/near/1318548
Thanks to Vlad Korobov for the icon and for proposing various
designs.
Render tooltip to stream_sorter_toggle buttons using
appendTo method of tippy.js to ensure that tooltip doesn't
get hidden behind the parent container and is visible
completely.
Fixes#21329.
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.
Lauryn Menard
jai2201
Aman Agrawal
Sahil Batra
Yogesh Sirsat
Dinesh
Austin Riba
Anders Kaseorg
Julia Bichler
My-Name-Is-Nabil
m-e-l-u-h-a-n
akshatdalton