Commit Graph

5261 Commits

Author SHA1 Message Date
Sayam Samal ad121335e3 user_card_popover: Add medium avatar back on mount. 2024-07-12 13:03:40 -07:00
Tim Abbott df1fc71685 user_card_popover: Skip copy icon for keyboard focus.
It's invisible unless the email is cropped, and even if it weren't,
the menu is more likely of interest to a keyboard user.
2024-07-12 13:03:40 -07:00
Tim Abbott 94a0941b0c user_card_popover: Fix on_mount hooks not being called.
The extra undefined parameter appears to be a bug introduced in
5142f1279a45d00320904b369b092f0c9c116b90; when the show_as_overlay
parmater was dropped, the other callers to show_user_card_popover did
not have their extra argument removed.

This had the effect of not setting initial keyboard focus when opening
the popover.
2024-07-12 13:03:40 -07:00
Sayam Samal 6ee491697f user_card_popover: Improve outline styling for focused elements.
- Adds focus outline to the custom profile field links.
- Replaces the grey outline of the copy and status buttons with the
  blue one used across the popover options.
- Adds hover state styling to the focus state styling for the copy
  buttons.
2024-07-12 13:03:40 -07:00
Sayam Samal 7232ff68f8 user_card_popover: Enable keyboard nav for custom field copy buttons. 2024-07-12 13:03:40 -07:00
Sayam Samal 8ead2035bf user_card_popover: Enable keyboard navigation for email copy button. 2024-07-12 13:03:40 -07:00
Sayam Samal 2ee9d80c7f user_card_popover: Add tooltip for status clear button.
Previously, the tooltip for the status clear button was scoped to only
the personal menu popover. This commit moves that logic to `tippyjs.ts`
and adds support for the status clear button in the user card popover.
2024-07-12 13:03:40 -07:00
Sayam Samal 1f6fcb81e8 user_card_popover: Cleanup user card popover after redesign.
As a follow-up to the user card popover redesign, this commit removes
the unused code and styles from the user card popover.

- Removed tooltip logic for user name and user type, since we now
  display them in full without any ellipses.

- Removed unused css whose class names are no longer used in the
  user card popover.

- Removed additional styling needed to handle font awesome and zulip
  custom icons, used in the older design.
2024-07-12 13:03:40 -07:00
Sayam Samal 5a123e57ce user_card_popover: Align user info to popover header's vertical center.
This commit aligns the user info, which contains the user's full name
and type, to the vertical center of the user card popover's header.

With this, the user info is aligned in the center of the popover header
for short names, and then for the longer names, the user info eventually
aligns to the top and the rest of the content are pushed down.
2024-07-12 13:03:40 -07:00
Sayam Samal dd2739a7e1 user_card_popover: Update the hover and active colors of copy button.
Using the new color palette defined in the previous commit, this commit
updates the hover and active colors of the copy button in the user card
popover.

This also adds a background to the copy icon on hover and active states.
2024-07-12 13:03:40 -07:00
Sayam Samal 84bf694257 css: Add Zulip color palette to app_variables.css.
This commit adds the new Zulip color palette, as css custom properties
to the app_variables.css file. Defining it in the app_variables.css file
allows us to visualize the colors in the editor's autocomplete dropdown
when we use these color values for defining other component based css
variables.

Since hex color values are used in defining the color palette, we
disable the `color-no-hex` stylelint rule for that part of the file.
2024-07-12 13:03:40 -07:00
Sayam Samal d707c9f779 user_card_popover: Change success behavior of the email copy button.
Previously, when the email was successfully copied via the email copy
button, the email in the user card popover was replaced with a "Email
copied!" message.

This commit replaces this behavior with a more subtle approach, where
only the tooltip of the email copy button changes to "Copied!".
2024-07-12 13:03:40 -07:00
Sayam Samal eb5bef8ff5 user_card_popover: Redesign user card popover for unknown user.
This commit extends the user card popover redesign to the case where
the guest is not allowed access to view some of the other users'
profiles due to a change in the
"Who can view all other users in the organization" permission.

Fixes #27338.
2024-07-12 13:03:40 -07:00
Sayam Samal 9bd8a0c72c user_card_popover: Move manage user menu options to user card popover.
This commit removes the manage user menu popover and moves the
options contained within it directly to the parent user card popover.
2024-07-12 13:03:40 -07:00
Sayam Samal 7a903e6336 user_card_popover: Align status emoji to the top for multi-line status. 2024-07-12 13:03:40 -07:00
Sayam Samal 258e2a7297 user_card_popover: Fix clear status icon padding.
The clear status icon was not properly aligned with the text in the user
card popover, due to additional padding on the icon. The reason for this
padding was to ensure correct focus ring offset, so to fix this issue,
without breaking the focus ring, this commit sets the `outline-offset`
to `0`.
2024-07-12 13:03:40 -07:00
Sayam Samal 58357dfd75 user_card_popover: Fix user avatar shrinking on long status text. 2024-07-12 13:03:40 -07:00
Sayam Samal 60d1993ed8 user_card_popover: Redesign popover using the new `popover-menu` theme.
As part of the popover menu redesign, this commit redesigns the user
card popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
2024-07-12 13:03:40 -07:00
Shubham Padia c5d70cdc1d settings: Do not execute hotkey inside any users tab filter input.
We changed the scope of the selector to just the switcher. This means
that the hotkeys will only run when the user focuses on that element.
This follows the same pattern as the `Personal` and `Organization` tab
switchers which limit the hotkey area to their tab list and not the
content. If we want to use hotkeys inside the content, just filtering
out INPUT elements in keydown_util might be better.
Fixes https://chat.zulip.org/#narrow/stream/9-issues/topic/.F0.9F.8E.AF.20Org.20settings.20user.20search.20does.20not.20work.20with.20vim.20hotkeys.2E/near/1882313
2024-07-12 11:51:40 -07:00
Shubham Padia a2f2b52c2d left_sidebar: Stop event propagation on DM filter click.
Before this, in the onclick event for
`#direct-messages-section-header.zoom-in`, we were filtering out the
class for the direct messages filter, and not activating a narrow on
trying to input on the filter. This was fragile, so we've added an
onclick listener to the direct messages filter which will do nothing
else than stopping the event propagation upto direct messages section
header.
Fixes https://github.com/zulip/zulip/pull/30332#discussion_r1669198527.
2024-07-12 11:32:49 -07:00
Shubham Padia 6c3707f484 left_sidebar: Move DM section header id to top level in css file.
This is a refactor and should not introduce any visual changes.
Fixes https://github.com/zulip/zulip/pull/30707#discussion_r1669110661.
2024-07-12 11:32:49 -07:00
Aman Agrawal 135f31468f bootstrap_typeahead: Fix not being displayed on mobile.
`$container` was not mounted when `show` called on mobile, likely
due to slower processing on mobile compared to web, so we ensure
$container is mounted to fix the `show` call having no effect.
2024-07-12 11:08:47 -07:00
Aman Agrawal e75ac2bfd1 dropdown_widget: Fix dropdown not displayed on mobile.
This was due to reference being hidden by keyboard or scrolled
offscreen. We fix it by showing the dropdown even if the reference
is hidden for mobile devices.
2024-07-12 11:08:47 -07:00
Sahil Batra ebf9105a51 settings: Make sure sorting arrows are visible correctly.
This commit adds right padding, approximately equal to the
size of the sorting arrow, to the table headers which show
sorting arrows to make sure that arrows are visible clearly
at different font sizes and in different text languages.
2024-07-12 10:35:22 -07:00
Sahil Batra 5e5633b5ee settings: Remove user_role class from bot owner column.
We do not allow wrapping text randomly for user role values,
but since bot owner names can be long we do not want to do
that for bot owner column. So, this commit removes the
user_role class which is responsible for adding the required
CSS rule for role values.
2024-07-12 10:35:22 -07:00
Sahil Batra 91cf69f6a1 settings: Set min-width of table columns for narrow screens.
This commit adds minimum width property for different columns
such that the columns do not get too small for narrow screens
and the tables can be scrolled horizontally to view the content.
2024-07-12 10:35:22 -07:00
Sahil Batra 42a5ae76bb settings: Do not allow table headers to wrap randomly. 2024-07-12 10:35:22 -07:00
Sahil Batra 9c9c8dc058 settings: Do not allow text to wrap randomly in some columns.
There are some columns where the text is not user dependent
and we know how long the text can be like user role, bot type
and custom profile field type. In such cases, we can just avoid
wrapping the text randomly.
2024-07-12 10:35:22 -07:00
Sahil Batra 9fab65f4b0 settings: Do not restrict width for table columns.
This commit removes width or min-width properties set for
different table columns so that the column width can adjust
themselves based on the text in different font sizes.

We still have the width property set on "actions" column
though to keep it at the right when a table has only 2/3
columns.

Further commits would be added to handle wrapping of
text in some columns and also to make sure that sort
arrows are visible correctly.
2024-07-12 10:35:22 -07:00
Sahil Batra 19cc948573 settings: Fix custom profile fields UI for narrow screens.
This commit adds "progressive-table-wrapper" class so that
the width property is correctly set and UI is correct for
narrow screens. Also, other properties added by that class
are fine.
2024-07-12 10:35:22 -07:00
Sahil Batra 025d4cc288 settings: Remove unused admin-table-wrapper class.
This class is not used anywhere, so there is no need for
this.
2024-07-12 10:35:22 -07:00
Sahil Batra 3f5fa70223 user_groups: Show only system groups in setting dropdowns in prod.
This commit adds code to show only system groups in the dropdowns
for group permission settings in production for now. We continue
showing user defined groups for the settings that allow them in
development environment.

"can_mention_group" setting can be set to user defined groups
because some of the realms already do that in production.
2024-07-12 09:51:49 -07:00
Anders Kaseorg 4d34a902c9 ui_init: Initialize timerender before information_density.
information_density.initialize uses timerender.stringify_time, and
thus requires timerender.initialize to have been called first.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2024-07-11 17:23:30 -07:00
Lauryn Menard b50cd3a75f invite-users: Use "invitation" instead of "invite" for strings.
Updates strings in the user invite modal to use invitation as the
noun/adjective in strings, instead of invite.

Also use "…" rather than three "." characters for ellipses.
2024-07-11 16:50:02 -07:00
N-Shar-ma 82c2da8aae typeahead: Make menu scrollable with up to 50 options.
To increase the number of options available for the user to pick from,
we increase the limit of options shown to 50 for all typeaheads, and
make the menu scrollable. The max height is set to original height of
the composebox typeahead menu, which fit 8 options or to 95% of the
window height, whichever is smaller.

Fixes: #20620.
2024-07-11 16:05:30 -07:00
adnan-td 4cb925a9c8 typeahead: Fix typeahead position using carets.
Utilize textarea-caret package to offset the typeahead position.
Now typeahead is close to the cursor.

Fixes: #29974
2024-07-11 16:04:15 -07:00
Shubham Padia 2becb41931 settings_users: Reactivated user should not get un-greyed on sort.
On reactivate or deactivate, we add appropriate class through JQuery.
But that class only remains there until sort, on sort any of these added
classes will be removed. We did not face the problem of un-greying for
active users page, because deactivated_users class was added to the HTML
always if `is_active` was false for the user.
In this commit, we rename `reactivated_user` to `active-user` and this
class will be present for all active users, even on the active users
table. For the deactivated users table, we will have scoped css that
will grey out the row with `active-user` class.
2024-07-11 12:16:12 -07:00
dhruv-goyal-10 0dc8402221 settings: Don't show last active in deactivated users table.
Fixed #29894.
We were using `is_active` to determine whether to show that column or
not. In case of deactivated table, on reactivating a user, `is_active`
will become true for that user, but we still don't want to show that
column and mess up our layout. Same would happen in the active users
table when a user was deactivated and the `is_active` would become
false. It is better to control the column to be shown on a per-table
basis and we introduced `display_last_active_column` to control that.

Co-authored-by: shubham-padia <shubham@zulip.com>
2024-07-11 12:16:12 -07:00
Aman Agrawal 13f2e7b7be help: Fix help center loading scrolled down.
We were trying scroll the highlighted element but it also scrolls
the parent elements leading to scrolling of the help doc.

We don't need to scroll here at all actually since focused element
is scrolled to be visible by default. Tested in chrome, firefox
and safari on mac.
2024-07-11 10:01:04 -07:00
Prakhar Pratyush 909a2efb43 channel: Don't show "You subscribed to" bookend on channel creation.
Three events i.e. 'stream create', 'subscription add', and
'message' event are received by client on channel creation.

Earlier, we were narrowing to channel while processing the
'stream create' event. This was resulting in fetching messages
for that narrow even before adding subscription. This resulted
in a bug where "You subscribed to" bookend was visible in the
message feed after the "channel events" message.

This commit updates the logic to narrow ONLY after adding
subscription i.e. while processing "subscription add" event.

Note: A channel creator who is not going to subscribe to the
channel themselves is NOT narrowed to the channel view.

This fixes the incorrect behavior.
2024-07-11 09:51:55 -07:00
Shubham Padia 6c152b3adc account_settings: Make change password similar to other setting buttons.
Fixes #30691.
We've removed the pencil icon and renamed the button to `Change your
password`. We've also removed the `.small` and `.btn-link` classes.
We also changed the `Password` label to use the `.settings-field-label`
class, same as the other labels for settings.
2024-07-11 09:49:27 -07:00
Shubham Padia 73e9d9da64 account_settings: Make change email similar to other settings buttons.
We removed the pencil icon, `.btn-link` and `.small` classes.
We also changed the `Email` label to use the `.settings-field-label`
class, same as the other labels for settings.
2024-07-11 09:49:27 -07:00
Shubham Padia 6085212574 settings: Make change language button similar to other settings buttons.
We've removed the pencil icon and removed the `.small` class from the
button.
This setting button is being used in two places: Changing your personal
language and changing the org-wide language for emails. That is why
we have used the `Change the language` generic tooltip instead of
`Change your language` tooltip.
2024-07-11 09:49:27 -07:00
Shubham Padia 08ee4be121 account_settings: Remove unused id and classes for password field.
`.change_password_button` and `#pw_change_link` were unused.
I've not checked for any other unused classes in this page, only
the password field. This was noticed when trying to make a layout
change for the password field and the change was moved to a preparatory
commit for the same.
2024-07-11 09:49:27 -07:00
Sayam Samal 6b5618b9d8 stream_popover: Link to channel settings' "Personal" tab conditionally.
This commit adds a link to the "Personal" tab of the channel settings
modal from the "Channel settings" link in the channel actions popover
when the user doesn't have the permission to change the channel
permissions.

Fixes #30529.
2024-07-11 09:44:57 -07:00
Sayam Samal 15e26b9f32 stream_popover: Enable popover for spectators.
This enables the stream popover for spectators, by unhiding the triple
vertical dots button in the stream sidebar row.

In the spectators' version of the popover, we only show the
"Copy link to channel" option.

Fixes part of #30529.
2024-07-11 09:44:57 -07:00
Sayam Samal 2c604666f9 stream_popover: Add menu option to copy channel link to clipboard.
Now that the channel name in the left sidebar links to the topmost
topic, we add a new menu option that lets us copy the channel feed link
to the clipboard.

Fixes part of #30529.
2024-07-11 09:44:57 -07:00
Sayam Samal b3be4150d9 stream_popover: Reorganize the menu options in the channel popover.
This commit reorganizes the channel actions popover to group related
actions together.

As noted by Alya Abbott in CZO, the logic behind the grouping is as
follows:
* The top section is things you might do as part of your workflow for
  using Zulip.
* The second section is for managing the channel itself.
* "Change color" is kept independently in the last section because of
  how the color picker takes over a big chunk of the menu when opened.

Fixes part of #30529.
2024-07-11 09:44:57 -07:00
Sahil Batra c313a85e25 stream-settings: Fix stream privacy update event handling.
There was a bug when updating stream privacy with message list
not narrowed to a stream as 'narrow_state.stream_sub().stream_id',
added in 933195f7a5, tried to access stream_id field even when
`narrow_state.stream_sub()` returned undefined.
2024-07-11 09:27:59 -07:00
Alex Vandiver 4bc563128e thumbnail: Use a consistent set of supported image types. 2024-07-11 07:31:39 -07:00