The simplebar core documentation, recommends to not style the element
initalising the simplebar at all and use an inner element instead.
Following the recommendation, we move the max-width property from the
popover tippy options, to the `.simplebar-content` element via the
`--popover-menu-max-width` custom property.
While doing so, we also simplify the max-width to `350px`, since the
responsiveness for smaller screen is already been taked care of in the
shared popover styling.
This prevents the issue where the content overflows and gets hidden
instead of wrapping, when the width of the popover reaches the set
max width (if any).
Following ca9b1060b7, we allow the content of popover menu items to
control the width of the popover.
While using `white-space: nowrap` works, we should instead use the
`max-content` intrinsic sizing so that, if necessary, we can still
provide a `max-width` to the popover which would then force the popover
menu content to wrap.
Added `tippy.js/dist/border.css` along with some custom CSS override,
to add arrows which inherit the border color and width of the popover,
while also supporting all placements.
Also consolidates the CSS styling of the popovers to the `tippy-box`
element, which is the recommended way to theme the element according to
https://atomiks.github.io/tippyjs/v6/themes/#creating-a-theme.
This further helps in unifying the styling of the popover and the arrow,
and prevents inconsistencies such as shadow of the popover being casted
onto the arrows.
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.
Sayam Samal
CIC4DA
Mahhheshh
shashank-23002
Aman Agrawal
Pratik
Sahil Batra
Prakhar Pratyush
Vector73