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.
This commit serves as the base commit for redesigning the alert banners
by migrating them to use the new banner component. We use a new name
to refer to these banners — "Popup banners", which is more descriptive
about their behavior.
The Popup banners are appended to the container in a stacking order,
i.e., the most recent popup banner appears on the top and the oldest one
is sent to the bottom of the stack. These banners also inherit the
animations from the alert banners for visual appeal.
This commit also fixes the bug where clicking on the "Try now" button
in the popup banner resulting from an error in the `/json/messages`
endpoint resulted in call to restart_get_events in server_events.js
instead of load_messages in message_fetch.ts.
Fixes#31282.
Note that the puppeteer tests only tested
copying whereas the node tests only tested
pasting, which is why the puppeteer tests
for pasting and node tests for copying are
absent after this split.
A button has been introduced to launch a modal
for creating todo-lists directly from the compose box.
The modal features a form that, upon submission,
generates a message using the `/todo` syntax and the data
inputted in the form. Subsequently, the content of the compose box
is set to this message, which the user can then send.
This modal closely parallels the UI for adding a poll; therefore,
the poll and todo code has been shifted to a newly created
file named `widget_modal.ts`, and `poll_modal.ts` is now deprecated.
Co-authored-by: Sujal Shah <sujalshah28092004@gmail.com>
Fixes#29779.
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 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.
This commit allows users to be assigned to custom groups when
inviting them to join Zulip, similar to how channels are handled.
The implementation follows a similar pattern for adding pills,
ensuring consistency, as user groups and channels are parallel
in nature.
Fixes#24365.
