Previously, the action buttons container was only hidden via
conditional rendering in the template. This commit adds a CSS-based
approach to also hide the container when it becomes empty, using the
:empty pseudo-class. This ensures correct behavior if we later have a
class of banners where the buttons area is dynamically updated, and
buttons are removed dynamically.
This commit fixes the asymmetric margin on banners by conditionally
rendering the action buttons only if buttons are present. Otherwise,
empty action buttons were being rendered in the DOM, applying the gap
property between the banner label and the empty action buttons.
Fixes: https://chat.zulip.org/#narrow/channel/9-issues/topic/asymmetric.20margin.20on.20banner.
This is done to later render the subscribe
success and error messages using the banner
template instead of using the banner classes
in the subscription/memebership templates
which requries us to duplicate the changes
in banner.hbs at these places to avoid
regressions.
Signed-off-by: apoorvapendse <apoorvavpendse@gmail.com>
This commit improves the responsiveness of normal banners by adopting a
flexbox layout for the label and action buttons. This change better
accommodates varying text lengths and button counts in the banners, due
to the natural flowy nature of flexboxes.
The key logic shift involves using `flex-basis` to manage layout
transitions: the label and the group of action buttons now wrap to
separate lines when the label's width is less than 60% of the banner
query container's width (60cqw).
This commit also updates the CSS for navbar banners to align with the
new flexbox layout between the label and the group of action buttons,
while also ensuring that the layout behavior of these banners remains
consistent with the previous implementation.
This commit serves as the base for the ongoing effort to standardize
redesigned input elements throughout the Zulip Web UI. It introduces a
new Handlebars partial block for inputs, located at
web/templates/components/input.hbs.
The partial can be used with the partial block syntax: {{#> input}},
allowing contributors to pass in the input element as a template. This
approach wraps the input with a consistent structure that includes
support for an icon and an action button. It also applies the necessary
styling to ensure visual and functional consistency across the web UI.
This commit also implements the filter input component at
/devtools/inputs/ showroom page for design discussions and prototyping.
Currently, we are using type to describe the attention level of the
action button. We want to rename the type parameter to attention
as we need the type parameter separately for describing the type of
button.
This commit restyles the profile, account and privacy settings buttons
as follows:
- "Preview profile": action-button-quiet-brand
- Pencil for email editing: icon-button-brand
- "Change your password": action-button-quiet-brand
- "Deactivate account": action-button-quiet-danger
- "Manage your API key": action-button-quiet-brand
Fixes part of #33130.
This commit restyles the profile, account and privacy settings buttons
as follows:
- "Add a new bot": action-button-quiet-brand
- "Add alert word": action-button-quiet-brand
Fixes part of #33130.
This commit improves the design of the inline topic edit UI by making
the following changes:
- Increases the dimensions of the text input element.
- Fixes the font scaling inside text input element.
- Replaces the old save and cancel buttons with the new icon buttons.
Fixes#33155.
As part of the banner redesign project, this commit applies the new
banner styles to the desktop notifications navbar banner.
This commit also acts as a base for the following banner redesign
commits by defining the `banners.ts` module, which now acts as the
centralized module to handle the banner rendering and sets up the
common event listeners.
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.
