When a stream name becomes very long, it may stretch the popover menu
by a lot. We prevent this by allowing the stream name to wrap onto
multiple lines.
We set the streams popover width to be equal to the width of the longest
menu item, via the min-content intrinsic sizing. We also set all the
menu items to `white-space: nowrap` to prevent them wrapping. These
two changes allow the menu items to dictate the width of the popover
instead of a static max-width property, and thus helps with languages
where the length of the translated item may be long enough to wrap.
We set the topics popover width to be equal to the width of the longest
menu item, via the min-content intrinsic sizing. We also set all the
menu items to `white-space: nowrap` to prevent them wrapping. These
two changes allow the menu items to dictate the width of the popover
instead of a static max-width property, and thus helps with languages
where the length of the translated item may be long enough to wrap.
As per the intended design, the font size of the org plan should
be equal to the font size of other similar links such as org version.
It should not be one size smaller than it, such as those of the
upgrade links.
Some organizations may have long names that could blow up the gear
menu width, in those cases we want to prevent it by wrapping the
org name by explicitly setting the white-space property, and thus
enabling any soft-wrap opportunities.
Through this commit, we set the width of the navbar dropdowns to be
equal to the longest menu item, via the min-content intrinsic sizing.
Note, that the min-content width takes into account all soft-wrapping
opportunities, which could result in the wrapping of the menu items in
many cases. To prevent this, we use the white-space property to prevent
menu items from wrapping in any case.
We currently don't have appropriate padding applied to the lists and
links in the org info section of the gear menu popover. This becomes
an issue when we have a long org name, org url or org version, as
text starts touching the edges of the popover.
This commit adds the missing padding to the items in the org info
section of the gear menu popover.
The cursor should be a pointer for the whole visibility policy options;
since the whole option is selectable and not just for the anchor tag
within it.
This commit updates the user group popovers to change the icon
and text of ".manage-group" option to match what we have in
gear menu and also change the heading and ".manage-group"
option to be left-aligned.
We already had the code to override the margin but it was not
being applied due to CSS specificity. This commit fixes it.
Due to this change, there was too much space on the left of
member names, so this commit also decreases the left padding.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Sayam Samal
Sahil Batra
Aman Agrawal
Prakhar Pratyush
Vector73
Hardik Dharmani
Hemant Umre