This commit introduces a theme switcher feature within the personal
menu popover. The implementation begins with the development of a
tab picker, which has the following features:
* Utilization of radio buttons to emulate the tab picker.
Radio input buttons provides the native way in HTML to select one
value out of a set.
* Support for both horizontal (default) and vertical orientations.
Vertical orientation can be achieved by appending the
`.tab-picker-vertical` class.
* Respects the `prefers-reduced-motion` option set by the user.
Disables the sliding tab animation to improve accessibility.
Additionally, the theme switcher component incorporates error handling
mechanisms. In the event of a server/network error, the tab slider
reverts to the previous theme option after a delay of 500ms. This
behavior visually communicates the occurrence of an error to the user,
improving the UX.
Fixes: #22803.
To achive this the `stream_header_colorblock` div was removed from
`dropdown_widget_with_stream_colorblock.hbs` template. this change made
the file name irelevenet so it was necessary to rename the file to
`dropdown_widget_wrapper.hbs`. After removing the html strcuture for
colorblock from templates the css for colorblock was also removed.
followed by the javascript which was used to add colorblock to the
stream picker. After removing javascript tests were updated.
Fixes: #28796.
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.
The paragraph tag was being used along with the bold tag to style the
topic and stream in the popovers. The semantic meaning of these tags
are more specialized and should not be used in this context. Replaced
the <p> tags with the more general <div> tags and accounted for the
bold text via the `font-weight` CSS property.
The `.topic-name` class, used to style the topic/stream name in the
topic list in the left sidebar, was also being used to the style the
topic/stream name in the topic/stream popover. This lead to irrelevant
properties being applied to the popover > topic/stream name. Through
this commit, the styling for both of these different cases are now
separated using the appropriate selectors.
Fixes#27562.
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.
Sayam Samal
Mahhheshh
shashank-23002
Aman Agrawal
Pratik
Sahil Batra
Prakhar Pratyush
Vector73
Hardik Dharmani