With the larger, flexibly sized right sidebar, we want to allow
for the middle column to expand to fill its place even outside of
the "Use full width on wide screens" setting.
In our css variables, we were using sidebar and column interchangably.
But, sidebar is 10px less wider than the column. This commit makes no
behaviour change, but renames variables to use column where necessary
and uses variable for sidebar instead of a fixed 240px value.
This commit redesigns the link styles based on the Figma designs by
Vlad Korobov, and implements them in the navbar banners. This also
removes the `--color-text-link` which was being used in the custom
profile field links in the user card popovers while the variable did
not exist previously.
We update max_avatars on rerenders based on recent view width
to prevent participant avatars from overflowing their width.
We use resize event to update `--recent-view-max-avatars` which
is checked on `complete_rerender`.
This commit adds the redesigned banner component to the codebase along
with a storybook-style page in /devtools/banners to view and test the
redesigned banner component.
Any banner using the new redesigned styles, requires two classes,
- First, the base `banner` class which defines the structure and
behavior of the banner.
- Second, a modifier class like `banner-info` which defines the styles
for the particular banner type.
The navbar alert banners also have a custom class `navbar-alert-banner`
which is used to define the specific style and structure for these
banner types.
This commit also makes the `banner`, `action-button` and `icon-button`
components into handlebar templates to maintain consistency in their
usage in the codebase.
Added colors to notify users when the message length is near
the limit or has exceeded it. Used distinct colors for each
case to provide clear feedback.
Fixes: #32171.
This commit replaces the spectrum color picker used in the stream
popover and stream settings with a custom color picker popover, which
contains a grid of predefined color swatches and a custom color option.
The custom color option uses the HTML5 <input type="color"> which shows
the native browser color picker UI.
Fixes#14961.
Previously, due the uneven width between the icons and the user
presence indicator, the icons and presence indicator were misaligned
with each other.
This commit uses the grid and subgrid layout systems to fix this
misalignment issue.
This commit adds the icon-only button styles to the codebase along with
appending this new button style to the storybook-style page in
`/devtools/buttons` to view and test the icon-only button component.
The redesigned icon button component, uses the `icon-button` class to
follow Zulip's no-abbreviation policy, and to avoid conflicts with the
pre-existing `button` and bootstrap `btn` classes.
A button using this new style, should use the following classes,
- First, the base `icon-button` class which defines the structure
and behavior of the button. (Required)
- Second, a `icon-button-square` class, to be used in conjecture
with the `icon-button` class which provides the style for the squared
button style of icon button. (Optional)
- Third, a modifier class like `icon-button-neutral` which
defines the colors for the particular icon button type. (Required)
* css: Extract invalid input outline and shadow colors to variables.
We will use these colors in future for input pills and it would be
convenient to have them in a variable.
* group_setting_pill: Show outline on invalid input.
We could have manipulate the class directly from user_group_pill. But
it felt better to have `show_outline_on_invalid_input` as a param for
the input_pill prototype since we can have a consistent error state for
other pill input boxes if we want to.
* input_pill: Widget should not show as pending after pill creation.
* group_settings: Disable save changes button if pill widget is pending.
This will disable the button for group, realm and stream group settings.
* user_group_create: Don't go to next step with pending group widget.
We just show the red outline and shaking animation as an indication that
a group widget setting is pending when the user tries to go to the add
members step.
* stream_create: Don't go to next step with pending group widget.
Fixes#32113.
We just show the red outline and shaking animation as an indication that
a group widget setting is pending when the user tries to go to the add
subscribers step.
This, as well as increasing the spacing by 5px, ensures that the left
sidebar bottom elements aren't overlapped by URLs that the browser
shows in the corner when hovering links.
