Commit Graph

87 Commits

Author SHA1 Message Date
Aman Agrawal c55eaf2bec css: Set tippy-arrow color same as background in light theme. 2023-11-23 10:33:23 -08:00
Sahil Batra ada0fcf299 popovers: Increase popover width to fit avatar inside it.
The user avatar flowed out of the popover and this commit
fixes it by increasing the popover width by 2px and making
it 242px (240px for avatar and 2px for borders). This
also changes the width of user group popovers, but it is
only a slight change so should be fine.
2023-11-21 12:20:25 -08:00
Aman Agrawal f6516cba89 personal_menu: Add opacity hover effect on clear status button. 2023-11-08 10:19:24 -08:00
Aman Agrawal 66276d88ef personal_menu: Add different colors for status text. 2023-11-08 10:19:24 -08:00
Prakhar Pratyush 5697084832 css: Improve the css of popover used to change visibility policy.
This commit improves the CSS of popovers in the recipient bar,
recent conversations, and Inbox, which are used to change the
visibility policy.
2023-11-06 10:16:53 -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
Aman Agrawal 18a165fa97 personal_menu: Indicate no status text in italics.
If user has only set emoji as status, we show a placeholder
text to indicate no status text has been set.

Fixes #27362
2023-10-25 11:09:08 -07:00
Aman Agrawal 6f6a53c909 help-menu: Center align keyboard shortcut hint. 2023-10-24 13:06:11 -07:00
Aman Agrawal 75c874fef6 personal_menu: Fix focus outline of clear status icon. 2023-10-23 14:15:13 -07:00
Aman Agrawal 87c87ed41f personal_menu: Rename clear_status class. 2023-10-23 14:15:13 -07:00
Aman Agrawal c5564668c5 help_menu: Use new style to show hotkey.
This is according to Vlad's design in figma which differs from the
style we have in `tooltip-hotkey-hint`.

I used font-weight: 500 instead of 400 as it looked nicer and since
Vlad used Source Sans Pro as font-family which we don't have.
2023-10-23 14:15:13 -07:00
Aman Agrawal 3d870a1f7d popovers: Use fixed height for navbar-dropdown items.
This helps us add elements like hotkey hint which can take more
space that available for text. There are no visual changes.

Removed some duplicate properties too.
2023-10-23 14:15:13 -07:00
Aman Agrawal 8f716cd64a help_menu: Extract help items from gear menu into a separate popover.
Fixes #27202
2023-10-23 14:15:13 -07:00
Aman Agrawal af271be1bd navbar-dropdowns: Use specific classes for everything.
Replaced element selectors with specific selectors, those that
remain are intentionally left.

This is to avoid inner-most selectors as element selectors.
The reason being is that browsers evaluate selectors from right
to left, meaning that every time a selector ends in an element,
the browser has to work that much harder whenever and wherever
on a page it encounters the element.
2023-10-20 12:36:39 -07:00
Aman Agrawal 2efc2a5eb5 gear_menu_dropdown: Use better class name for theme buttons. 2023-10-20 12:36:39 -07:00
Aman Agrawal f9e7b814d6 navbar-dropdown-menu: Use focus-visible instead of focus. 2023-10-20 12:36:39 -07:00
Aman Agrawal 1e3e70576b gear_menu: Extract the new gear and personal menu style as a theme.
This also fixes some misalignment happening at some widths for gear
menu. Like at XL widths for spectators.
2023-10-20 12:36:39 -07:00
Aman Agrawal bc3d48616e gear_menu: Migrate to use tippy. 2023-10-20 12:36:39 -07:00
Aman Agrawal d75df10729 gear_menu_popover: Move *-theme class to the li element.
It will help us hide the whole `li` element instead of just
`a` tag for spectators.
2023-10-20 12:36:39 -07:00
Aman Agrawal 897c19d17d css: Add box-shadow to navbar dropdown menu as per figma design. 2023-10-20 12:36:39 -07:00
Aman Agrawal 41c06e2989 CSS: Extract common CSS for .navbar-dropdown-menu. 2023-10-20 12:36:39 -07:00
Aman Agrawal b542984869 personal_menu: Fix semantics of personal menu HTML structure.
Only valid tag inside `ul` is `li`. So, we use `ul > li > ul > li`
structure here.
2023-10-18 22:02:38 -07:00
Aman Agrawal b2dd2d6d29 personal-menu: Rename dropdown-menu to navbar-dropdown-menu.
This will contain common css to be used between navbar dropdowns
gear menu and personal menu.
2023-10-18 22:02:38 -07:00
Prakhar Pratyush 5e3b8f5393 css: Improve the css of icon-based tab picker used in topic popover.
Remove the solid outline around hovered tabs.

Minor tweaks in height and padding for tabs.
2023-10-17 16:21:06 -07:00
Aman Agrawal 4db331ed21 empty_list_widget: Use class instead of id.
We were using id before to increase their specificity, but
since it is possible for multiple empty_list_widget_for_list/table
to be in DOM at the same time, we should use a class here. Used
`!important` here so that we can force our padding where these
classes are used.
2023-10-17 11:55:41 -07:00
Hardik Dharmani 49f7f02a0a personal_menu: Add tippy personal_menu dropdown.
Add a personal menu dropdown that opens on clicking user avatar icon
in navbar added in previous commit.

The args passed to render_personal_menu() in onShow() are returned by
get_personal_menu_content_context() in popover_menus_data.js so that
they can be unit tested.

Additionally, added CSS to get a custom arrow for dropdown menu.

Added a `?` hotkey in keyboard shortcuts option in personal_menu
dropdown in a style similar to our tooltip's hotkey by adding
? in a span with class .tooltip-hotkey-hint and adding some CSS.

Fixes part of #22802.
2023-10-12 15:31:01 -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 eeec8f06e9 templates: Stop using `::after` to render empty list message.
This commit removes all instances of the `required-text` class,
which utilizes the `::after` pseudo-element to render empty list
message. To avoid inserting non-decorative content using a pseudo-
element, we will now use `list_widget.render_empty_list_message_
if_needed` introduced a few commits back to display the empty list
message.

Fixes #23072.
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
Hardik Dharmani 7e776b9c76 refactor: Make variable for unread counter's background colors.
This is Prep commit that introduces 2 new CSS variable
`--color-background-unread-counter` and
`--color-background-unread-counter-popover-menu` that has value
`hsl(105deg 2% 50% / 50%)` in dark theme and `hsl(105deg 2% 50%)`
in light theme for unread counter and `hsl(200deg 100% 40%)`
for unread counter in popover menus to match its blue theme.
2023-10-10 16:48:20 -07:00
Aman Agrawal c69fe4b6a0 popover: Remove `.popover` class.
Since we are not using bootstrap popover, we don't have popovers
with that class.
2023-10-09 11:39:12 -07:00
Aman Agrawal 8430674aee popovers: Remove unused popover-content class.
Fixes #26821
2023-10-09 11:39:12 -07:00
Aman Agrawal a04117b6d3 user_group_info_popover: Remove bootstrap popover classes.
Added a `group-info-content` inplace of them and added the required
CSS.
2023-10-09 11:39:12 -07:00
Aman Agrawal 04c4b6e8b8 giphy: Move `popover-content` styles to `giphy-scrolling-container`. 2023-10-09 11:39:12 -07:00
Aman Agrawal 094ac010fb user_card_popover: Remove popover content class.
Added CSS styles that were removed due to this back. No visual
changes.
2023-10-09 11:39:12 -07:00
Aman Agrawal 0976b9006e popover-title: Remove class.
Remove bootstrap-tooltip class `popover-title` from code.

It was only used in user_card_popover for showing user avatar,
so cleaned up properties that were duplicated or not required.
2023-10-09 11:39:12 -07:00
Hardik Dharmani 4ee515a245 user_profile_modal: Abbrevate long URLs of custom fields.
Abbreviated long URL for custom field in the user profile modal
and user card popover. Added a copy-to-clipboard icon at
the end of the URL. When hovering over the copy button, it displays
a tippy tooltip with the text `Copy URL`. Clicking the copy button
displays a `Copied` tippy tooltip for 1 second.

Fixes #21680
2023-09-28 15:15:57 -07:00
Hardik Dharmani f27adec02d refactor: Rename `custom_profile_fields_link` to use kebab-case.
This is a prep commit. This commit renames
`custom_profile_fields_link` to `custom-profile-fields-link`
to follow kebab-case, which is the preferred style in Zulip.
2023-09-28 15:15:57 -07:00
Daniil Fadeev 8de397b37f user_card_popover: Migrate all user card popovers to Tippy. 2023-09-25 06:29:47 -07:00
Daniil Fadeev 91d2b5ed81 user_group_popover: Migrate popover to Tippy.
Fixes part of #23632.
2023-09-15 13:40:53 -07:00
Daniil Fadeev a678aee467 popovers: Apply styles for `hr` tag not just when nested under `.nav`.
We've got `hr` elements not just under `ul.nav`, like in
`user_group_info_popover`, so we need to apply styles there too.
2023-09-15 13:40:53 -07:00
Daniil Fadeev b9e1537ee6 user_card_popover: Rename `user_info_status_text` class. 2023-09-15 12:24:00 -07:00
Daniil Fadeev d5f731f0bd user_card_popover: Rename `user-info-popover` class. 2023-09-15 12:24:00 -07:00
Daniil Fadeev ff892925ce user_card_popover: Rename `info_popover_actions` class. 2023-09-15 12:24:00 -07:00
Daniil Fadeev 7c3f79df0d user_card_popover: Rename `user_info_popover_manage_menu_btn` class. 2023-09-15 12:24:00 -07:00
Daniil Fadeev a8bce8e178 user_card_popover: Rename `user_info_popover_action_buttons` class. 2023-09-15 12:24:00 -07:00
Karl Stolley b86b7ab067 vdots: Place new more-vertical icon on user card. 2023-09-14 17:13:58 -07:00
Daniil Fadeev 2f1561e3b8 giphy: Fix giphy popover rendering on narrow screens.
We should render the giphy popover as a centered overlay for
mobile-sized screens.
2023-09-13 12:20:35 -07:00
Daniil Fadeev 08aec5ac41 stream_popover: Migrate from Bootstrap to Tippy. 2023-09-13 10:55:40 -07:00