53 Commits

Author SHA1 Message Date
Sahil Batra
e10f1ef260 user-profile: Rename class for edit pencil buttons.
This commit renames classes used for edit pencil button in
the profile modal header so that class names are clear enough
to specify what the buttons do. This rename is needed because
admins can now see "Edit profile" tab, i.e. the "Manage user"
tab for other users, in their own profile modal.

Co-Authored-by: Aman Vishwakarma <vishwakarmarambhawan572@gmail.com>
2025-10-20 16:40:01 -07:00
whilstsomebody
f5af6f9d7f user_profile: Use "Edit profile" label for user's own profile.
This commit renames tab heading, tooltip and aria-label for the
pencil edit icon in the profile modal header from "Manage user"
to "Edit profile" for admin's own profile.

Fixes part of #34830.
2025-10-20 16:40:01 -07:00
Sahil Batra
c58ae7f4f0 user-profile: Update header edit icon for admin's own profile.
For admin users, clicking on pencil edit icon in the profile
modal header opens the "Manage user" tab.

For non-admins, "Profile" settings panel is opened as before.

Fixes part of #34830.

Co-Authored-by: Aman Vishwakarma <vishwakarmarambhawan572@gmail.com>
2025-10-20 16:40:01 -07:00
whilstsomebody
9813f11abf user_profile: Show manage profile tab for admin's own profile.
Previouly admins did not see "Manage user" tab in their own
profile modal. This commit updates it to show the "Manage user"
tab to admins in their own profile modal as well.

Fixes part of #34830.
2025-10-20 16:40:01 -07:00
Anders Kaseorg
0dbe85fd34 user_profile_modal: Fix invalid <div> inside <h1>.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2025-09-10 09:57:56 -07:00
Anders Kaseorg
9e8c9b68f6 templates: Fix invalid <div class="modal__spinner"> inside <button>.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2025-09-10 09:57:56 -07:00
Sayam Samal
e9bd974760 user_profile_modal: Update add and subscribe button to action buttons.
This commit updates the add and subscribe button in the user profile
modal to use the action button component.

Fixes part of #33027.
2025-04-04 12:26:36 -07:00
Sayam Samal
0e7a5c1774 user_profile_modal: Use icon button component for modal header buttons.
This commit updates the modal header buttons to use the icon button
component.

Fixes part of #33027.
2025-04-03 17:35:05 -07:00
Shubham Padia
d18593b5be settings: Rename Filter x to Filter for channel and group settings. 2025-02-25 22:02:07 -08:00
Maneesh Shukla
faa8b0d4a5 user_groups: Allow adding a user to groups via user profile.
Fixes: #32488.
2025-01-28 15:19:21 -08:00
Maneesh Shukla
3ce9c558b2 user_groups: Add search input to the user group.
Fixes part of #32488.
2025-01-28 15:13:19 -08:00
Maneesh Shukla
18e5ede3c3 user_groups: Change the data-empty value.
Fixes part of #32488.
2025-01-28 15:13:19 -08:00
Harsh
93efaaff4c popovers: Use 'zulip-icon-close' instead of 'fa-remove' in search box. 2025-01-07 17:22:47 -08:00
Harsh
4b5e578b9f Rename "clear_search_button" to "old_clear_search_button".
This temporary change allows us to preserve these old styles
while iteratively move all the close buttons to new styles.
Once the migration is complete, `old_clear_search_button` won't
exist anymore and there will be new styles for `clear_search_button`.
2025-01-07 17:22:47 -08:00
Harsh
f19730b899 settings: Update activate/deactivate/manage users and bot tooltips.
Tooltip changes:

In organization settings
- "Edit user" -> "Manage user"
- "Edit bot" -> "Manage bot"
-  "Deactivate" -> "Deactivate user"
- "Reactivate" -> "Reactivate user"

In profile modal
-  "Manage user" -> "Manage bot" (for bots)

fixes part of #32887.
2025-01-04 08:51:22 -08:00
Karl Stolley
de3aa9e8dd user_circles: Introduce icons into layout-corrected user modal. 2024-12-13 14:33:24 -08:00
Karl Stolley
67a67897f9 user_circles: Introduce status-based hyphenated classes. 2024-12-13 14:33:23 -08:00
Sahil Batra
c4058ffc22 user_profile: Use grid layout for stream search input.
This commit updates CSS to use grid layout for stream
search input in user profile modal so that we can have
clean CSS and do not have different values for padding,
right and margin properties at different places.

This also fixes the alignment of "x" button.

Also, the heading and search input were not aligned
perfectly, so changed the CSS to they align better.
2024-12-10 09:47:01 -08:00
Pratik Chanda
16e9099015 user_profile: Add remove button to each group row in groups tab.
Earlier, only group name were shown in user profile groups tab.

This commit adds a remove button to each group row if current user
has permissions to remove the user from groups.

Fixes part of zulip#32487.
2024-12-03 17:18:27 -08:00
Sayam Samal
cf672ad939 modal: Rename modal__btn -> modal__button.
This commit is a part of the efforts to rename btn-related classes
and variables to align with Zulip's no-abbreviations policy and
streamline the search results.
2024-11-14 12:03:36 -08:00
Maneesh Shukla
9ad85445f8 settings: Add a class to the target span.
This commit adds a specific class to the target span element, making
 the code more robust and less reliant on generic selectors.

Fixes part of #26691.
2024-11-01 12:10:28 -07:00
Karl Stolley
554221e3c8 cleanup: Remove structural .new-style references. 2024-09-11 14:22:45 -07:00
Karl Stolley
7a94d484ff settings: Remove unused or unnecessary center classes from .new-style cluster. 2024-08-30 14:06:27 -07:00
Sayam Samal
96a105b315 bots: Display bot role in lowercase in user card and user profile modal. 2024-08-27 15:52:39 -07:00
Sayam Samal
051221002a user_profile_modal: Display detailed bot role in the "Role" field.
The "Role" field previously only displayed "Bot" for the  non-system
bot users, this commit adds the detailed bot role to the "Role" field
in the format "Bot ({role})".
2024-08-27 15:52:39 -07:00
Kislay Verma
cc7df6d85b presence: Sync presence indicators across the frontend.
User circles indicating their presence are now synced across
all the places they appear, except for:
- navbar_personal_menu_popover - since the status
   there will never change.
- typeahead_ist_item - because it is short-lived.

Fixes #30536
2024-07-10 11:01:44 -07:00
Shubham Padia
43eebbf9c6 scroll: Set tabIndex to -1 for simplebar content wrapper.
Fixes #30403.
Having tabIndex set to 0 led to keyboard focus being put on
a scrollbar container, which led to users having to tab twice
to skip a container.
This commit also removes instances of tabIndex being set to
-1 programatically for certain cases, since it is -1 by default now.
This commit also removes `outline: none` for simplebar since
that property is not needed anymore because the wrapper is
not focusable anymore.
2024-06-20 10:25:51 -07:00
sanchi-t
ca74c95c60 user_profile: Display Saved feedback.
Visually confirms successful profile changes with a clear
`Saved` message.

Fixes part of #26692.

Co-authored-by: Kunal Sharma <v.shm.kunal@gmail.com>.
Co-authored-by: Angelica <angelica.ferlin@gmail.com>.
2024-05-28 14:34:57 -07:00
Pratik
982097f0a7 user_profile_modal: Change "edit" icon and "copy link" icon.
This commit replaces the fontawesome "edit" and "copy-link" icon found
in the user profile modal with the corresponding zulip icons.

It also moves the functional classes like
user-profile-manage-own-copy-link-button from the icon element to its
container, including adding a new div wrapping the icon in
user-profile-manage-others-edit-button.
2024-05-06 18:14:40 -07:00
Pratik
3b2bf7b2b9 modal_css: Refactor css of header of user profile modal.
This commit enhances the layout of user profile modal header by using
flexbox properties.
2024-05-06 18:14:40 -07:00
Pratik
fdbce9d889 profile_modal: Replaces underscore style classes with hyphenated one.
This commit replaces the underscore-style classes of user profile modal
with the hyphenated one.
2024-05-06 18:14:40 -07:00
Lauryn Menard
d7f9f8333e web-stream-settings: Update strings for stream rename channel.
Updates a chunk of translated strings that overlap between files,
with the streams settings overlay being the starting point for
finding these strings, to use channel instead of stream.

Part of stream to channel rename project.
2024-04-24 14:35:04 -07:00
Pratik
4f89a0f605 user_profile: Add "copy link to profile" button in user_profile_modal.
This commit adds a "copy link to profile" button in user_profile_modal.
Clicking on this button copies the user's profile link and displays a
"Copied!" tooltip.
2024-02-15 17:17:38 -08:00
Vector73
6dd7efae85 user_profile: Fix alignment and color of edit icon. 2023-10-26 13:17:28 -07:00
Vector73
4a4b8dff99 user_profile: Add deactivated user indicator in the profile header.
Fixes: #26861
2023-10-26 13:17:28 -07:00
Sahil Batra
49a047c27f users: Add "(guest)" to names for guest users.
This commit adds code to add "(guest)" to user names of guest
users in the following places -
- right sidebar
- user pills, including the pills in search suggestion typehaead
- typeaheads for user
- sender names in message feed
- user profile popover and modals.
- user name in not subscribed warning banner.

Note that the indicator is shown only if enable_guest_user_indicator
setting is set to true.

As a result of this change, we now translate "deactivated" text
shown in user pills for deactivated users.

Fixes part of #26700.
2023-10-12 12:06:10 -07:00
Hemant Umre
0f5f7109b4 templates: Display a different message for empty search results.
In this commit, we introduce the `data-search-results-empty`
dataset to certain templates. This dataset, along with `data-empty`,
is used by `render_empty_list_message_if_needed` to present different
messages when there are no items matching the applied filter and
no items to display, respectively.

Co-authored-by: Akarsh Jain <akarsh.jain.790@gmail.com>
2023-10-11 18:03:53 -07:00
Hemant Umre
5eb784a652 list_widget: Add functionality to display empty list message.
This commit introduces a function in list_widget.js that allows
displaying a message when the list is empty using the `data-empty`
dataset. The function checks the container type to determine the
appropriate wrapper for the message and appends it to the container
body.

Fixes a part of #23072.
2023-10-11 18:03:53 -07:00
palashb01
db47f675f0 user_profile: Add tippy tooltips to edit pencil button.
This commit adds Tippy tooltips to the edit pencil button
in the user profile. Now, when a user opens another user's
profile, they will see the tooltip 'Manage user', and when
they open their own user profile, they will see the tooltip
'Edit profile'.
2023-09-11 10:39:00 -07:00
palashb01
1c049ab5f4 user_profile: Replace the id with class for pencil button.
This commit replaces the id attribute with class attribute for the
edit pencil button in user profile modal.
2023-09-11 10:39:00 -07:00
palashb01
f9dd2db3e4 user_profile: Move bot icon to the left of the name.
This commit moves the bot icon to the left of the name in the user
profile and adds a margin-left and margin-right to the name to ensure
there is enough space between the icon, name, and edit pencil.
2023-09-11 10:39:00 -07:00
palashb01
c6bb7b9169 user_profile: Redirect edit pencil to manage user tab.
This commit redirects the edit pencil in the user profile modal to
the 'manage user' tab whenever a user with permission to manage
other users via the user profile opens another user's profile.
However, we still want to redirect the edit pencil to
'settings/profile' if the user opens their own profile. The user
management permission is granted if the user is an admin or the
owner of the bot. However, we do not want system bots to have
access to the edit pencil or the 'manage user' tab. Therefore,
a new variable called 'can_manage_profile' has been introduced
to manage all these permissions, and the CSS has been updated
accordingly.

To redirect to the manage user tab without opening another modal,
I have extracted the toggler. This toggler will store the
component, and if the edit pencil button is clicked, we can use
the goto function to redirect to a different tab.

Changed the id names of both the edit pencil icons to explain
better of what they do.
2023-09-11 10:39:00 -07:00
palashb01
c2f878638b user_profile: Fix inconsistent height of user profile switching tabs.
This commit fixes the inconsistent height of the user profile when
switching tabs. We now have four tabs in the user profile:
"Profile," "Streams," "User Groups," and "Manage User." However,
the "Manage User" tab has footer buttons that need to remain
sticky at the bottom without changing the overall height of
the modal.

To achieve this, we wrapped the footer inside a div element and
assigned it a class called "manage-profile-tab-footer." The main
body of the user profile is given a height of 60vh. However, for
the "Manage User" tab, we decreased this height to 52vh and
allocated the remaining 8vh height to the div element to
accommodate the footer buttons. This ensures that the user
profile maintains consistent height when switching between tabs.

However, we have a 1px border in the footer, so to ensure that
the height is consistent, we reduce the height of the modal
content by 1px, making it calc(52vh - 1px).

To implement this, CSS code was added to the "popover.css" file
and accessed through the class specified in the "user_profile.js"
file.

The default padding of the buttons inside footer is 20px, but
with the above solution on large screens the buttons are not
aligned properly, so removed the padding top and bottom
and instead applied the flex box and property to align the buttons.
2023-09-11 10:39:00 -07:00
palashb01
218bde443a profile_modal: Migrate manage user footer buttons to user profile.
This commit migrates the "Manage User" footer buttons to the user
profile modal. We made this change because we don't want the buttons
to scroll with the content; instead, we want them to be sticky at
the bottom at all times. Therefore, we moved the buttons to the user
profile modal.
2023-09-11 10:39:00 -07:00
palashb01
61cca84b17 settings_users: Migrate manage user modal to full profile modal.
This commit migrates the "manage user" modal to the "Full Profile"
modal. Refactored the show_edit_user_info_modal function since
earlier, we used to have a separate "Manage User" modal.
Consequently, we checked if we were coming from the
user_info_popover and then built the dialog widget accordingly.
However, with this new change, we no longer need to build the
dialog widget. Therefore, removed that part and now just pass
the container of the 'user profile modal' to get the content.

Previously, for deactivation, we used to have a separate dialog
widget. But now, since we have a dedicated function to handle
this case, refactored the deactivation code to use the
'confirm_deactivation' function.

Additionally, created two new functions to handle the loading
spinner. Since we will need these functions in the future for
the "Manage Bot" modal, we marked them as exported.

"Since we do not want to show the 'Manage User' tab to the user
looking at their own profile, in the 'can_manage_user' function
that we use to render the 'Manage User' tab, we check if the user
profile popover belongs to the same user. If it does, we set it to
'false' instead of 'true,' ensuring that the 'Manage User' tab is
not visible.

Added a new tab in the user profile modal 'manage user'.

Fixes: #21806
2023-09-11 10:39:00 -07:00
palashb01
1765ce23b0 user_profile: Adjust the stream tab headings to look good.
With the previous commits, we have now implemented the subscribe
widget with a separate heading. However, the font size and the gap
of both the heading of the widget and the streams list look bad,
so this commit fixes that.

Since the heading of both the widget and the list have the same CSS,
instead of duplicating it, we used the same class for both and
reduced the font size.
2023-09-10 11:20:15 -07:00
palashb01
4e786293ae user_profile: Add the subscribe widget to user profile.
This commit adds a subscription widget to the user profile,
including the logic to prevent non-admin users from seeing the
subscription widget of other users. Additionally, as it is not
possible to subscribe generic bots to streams, and the user should
not be a deactivated user, we check for these conditions before
displaying the subscription widget.

To ensure that the alert for both subscribing and unsubscribing
appears on top of the subscribe widget, changed the location of
the alert to be displayed at the top.

Additionally, considering that no stream will be initially selected,
we have made the decision to disable the subscribe button. Once the
user selects a stream, we will enable the subscribe button
accordingly.

Changed the add_user_ids_to_stream function inside subscriber_api.js
to support self subscribe also, so that we don't have to duplicate the
logic in user_profile.js

Created a separate file for the subscribe widget called
user_profile_subscribe_widget.hbs.

Fixes: #18883
2023-09-10 11:20:15 -07:00
palashb01
bb4d2f5f5b profile_popover: Remove the display presence dot for bots.
This commit removes the presence dot display for bots and fixes
the gap between the bot name and bot icon in the user profile
popover. It also fixes the alignment of the bot icon.

Fixes: #25066
2023-04-28 19:14:00 -07:00
Sahil Batra
1c6bed55e4 modals: Add modal_text_input class to text inputs.
This commit adds modal_text_input class to text inputs
in modals to set width of them as set by bootstrap.
This class is used to set the width of inputs to 206px,
as we will be removing the boostrap rule which sets width
of the input in further commits.
2023-03-27 22:34:30 -07:00
SameepAher
6211939020 css: Change the selector name of the <i></i> tag.
Changed the id name of the <i></i> tag to user_profile_edit_button_icon
in the user profile modal, as earlier it was edit-button, which is too
vague of a selector name.
2023-03-24 15:47:54 -07:00