This also migrates from loading the modal dynamically rather than
statically once at page initialization.
With styling changes by tabbott to preserve the original look of the
UI.
Fixes#18278.
We had a lot of functions and click handlers that were only
involved with user profile modal and were not related to
popovers logic in any way. So we extract these functions
into a separate module `user_profile.js`.
We used name parameter in tab component callback to handle our
custom logic when switching tabs in profile modal. Using name
here invites a posible bug as these name are tagged for
translation. So to avoid this we switch to use key (html id
for these tabs) for this as they are always constant.
We had stream and group tab inside a common div with class
`subscription-group-list` due to this adding any info
elements like alert boxes that were specific to one of them
became difficult. To fix this we keep them in their own
`.tabcontent` div. This change also makes the handling of
display of different tabs a lot easier and cleans
up unnecessary javascript code that was handling the
display of common parent div of stream and group tab.
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.
Earlier, when a user clicked on any stream name from the
user_popover, the stream page would open in the background,
but the user popover wouldn't close.
Fixed it by explicitly binding it to a click handler,
which closes the user popover before redirecting to stream
page.
`user-profile-modal` is shown using `overlays.open_overlay` which
disables mouse pointer events. The user can't click anywhere while a
modal is present, except to close it.
We use `hide_all_except_sidebars` and `hide_all` to hide popovers.
But since the user can't interact while a modal is present,
closing it manually is redundant.
In d0f8515b50, it was noticed that
Bootstrap's `hide` and `show` calls can cause race conditions.
So, migrate to our `overlay` calls to handle Bootstrap modals.
We convert the following elements to use a class instead of
id for accessing them across the codebase:
* markdown_preview
* undo_markdown_preview
* markdown_preview_spinner
* message_edit_content
* preview_content
Converted them together since changes to one impacted the other in
some modules like click_handlers.
Also, added a function in rows to get `message_row`.
Since the "mute users" feature isn't complete yet,
this UI is shown only in development setups.
Ideally we should have had this commit after the whole
feature was completed and merged, but doing so makes it
difficult to test and merge subparts of the feature one by
one (which is a better workflow, while we still decide what
exactly we want this feature to do).
This commit adds a new button in the user info popover
to mute or unmute the user, and uses a confirmation
dialog while muting, because muting a user accidently can lead
to the muter losing out on a lot of information.
TODOs when making this UI visible in production-
1. Make a /help page and link to it from the confirmation
dialog and the API docs.
To prevent breaking of the hardcoded playgrounds, we resort
to checking if realm_playgrounds is empty and falling back
to the hard-coded list if so. This logic is removed in the
followup commit which introduces the UI to add a playground.
This sorts the members imported within each individual declaration; we
use import/order for sorting multiple declarations.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Fixes#17466
This commit will change encoding logic. Initial logic
was not encoding parenthesis, and this creates conflicts
with the markdown link format. To resolve this while encoding,
we're now replacing parenthesis with ".28" and ".29."
There is no need to change decoding logic because before
decoding any URL, we first convert all the “.” to “%.”
optimization: No need to replace parenthesis in popovers.js.
This is a prep commit, which renames some variables
and functions involved in topic muting to include
the word "topic" in them.
This is done to have clarity when similar code
will be added as a part of the mute-user in
future commits.
Replaced methods/functions of moment.js with date-fns library.
The motive was to replace it with a smaller frontend timezone library.
Date-fns ~ 11.51 kb
moment.js ~ 217.87 kb
Some of the format strings change because date-fns encodes them
differently from how moment did.
Fixes#16373.
This commit introduces the UI model for the 'view in playground' feature.
The option is a 1-click UX if only one playground link has been configured
for the programming language in the code block. If multiple such playgounds
have been configured, we display a popover with the different playground
options.
The actual code extraction logic occurs here and we set the target href
combining the url_prefix and the extracted code for both these scenarios.
Fixes: #11618
Instead of prohibiting ‘return undefined’ (#8669), we require that a
function must return an explicit value always or never. This prevents
you from forgetting to return a value in some cases. It will also be
important for TypeScript, which distinguishes between undefined and
void.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
We remove handle_bot_owner_profile function and we handle the opening
of popover of bot owner from a single click handler in popovers.js
using 'view_user_profile' class.
We also rename 'view_user_profile' class to 'view_full_user_profile'
for the button in popover, which is used to open full user profile.
This commit enables keyboard support for user info popovers for
navigating through popover options using up/down keys.
We add get_user_info_popover_items function, whose implementation
is different from other similar functions. Instead of using
popover_data.$tip we directly use $("div.user-info-popover")
because when we open the popover of bot owner from the bot
popover, the element which opens the popover is removed from
DOM and popover_data is undefined.
We should show normal popover instead of extended profile one for the bot
owner in bots section of organization settings.
A new function show_user_info_popover is added, as it makes sense to keep
it separated from the function used to open popover for sender of a
message, which uses the message from which the popover is opened.
This added function can further be used for showing popover for
"invited_by" in invites table.
This commit replaces the "Reply mentioning user" option with "Copy mention
syntax" for user info popovers that are not opened from a message.
Clicking on "Copy mention syntax" will copy the mention syntax of user to
clipboard.
This change is done because user popovers not opened from message are not
linked to any message.
We rename data-bot-owner-id and data-owner-id, used to open user
profile of bot owners, to data-user-id such that we can make a
global click handler for all of them by making a separate class
in next commit.
We rename user_info_popover_handle_keyboard and get_user_info_popover_items
to user_info_popover_for_message_handle_keyboard and
get_user_info_popover_for_message items to differentiate it from functions
that will be added for bot-owner popovers.
This commit renames the show_user_info_popover function to
show_user_info_popover_for_message, as it is used to open
the popover for users which are essentially related to a
particular message, like message sender and mentioned user.
ES and TypeScript modules are strict by default and don’t need this
directive. ESLint will remind us to add it to new CommonJS files and
remove it from ES and TypeScript modules.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This is a preparatory commit that exports user_sidebar_popped function
so that it can be used in hotkey.js for keyboard navigation support in
popover in right sidebar.
This commit is a preparotory commit to add support of keyboard
navigation by enabling movement using arrow keys and clicking of items
using enter key. So popover_items_handle_keyboard function so that it
can be resused other places.
This commit is preparatory commit to adding support for keyboard
navigation by focusing om first menu item of all of our popovers. So
exporting focus_first_popover_item so that it can be reused in other
places.
Commit a9ca5f603b (#15863) incorrectly
converted these too; indexing a jQuery object gives you a DOM element.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Note that require("moment") and require("moment-timezone") resolve to
the same thing, but the latter adds timezone support as a side effect.
So I went with the latter in every file where .tz is used.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Prettier would do this anyway, but it’s separated out for a more
reviewable diff. Generated by ESLint.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Prettier would do this anyway, but it’s separated out for a more
reviewable diff. Generated by ESLint.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Prettier would do this anyway, but it’s separated out for a more
reviewable diff. Generated by ESLint.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Prettier would do this anyway, but it’s separated out for a more
reviewable diff. Generated by ESLint.
Signed-off-by: Anders Kaseorg <anders@zulip.com>