* 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.
Adds a message length limit indicator similar to the one in the compose box.
The tooltip message for the disabled save button now appears dynamically
based on whether the message exceeds the length limit or the editing time
has expired.
Fixes#25271.
Adds general class names in `compose.hbs` so that these elements can be
more easily expanded for use in the edit message UI as well. These
classes will be used in the `check_overflow_text` function of
`compose_validate.ts`, allowing this function to handle both the edit
message UI and compose box UI.
This commit is a part of the efforts to rename btn-related classes
and variables to align with Zulip's no-abbreviations policy and
streamline the search results.
All similar elements in the compose box--the channel/DM widget, the
pill container on DMs, and the compose textarea--all use a 4px
border-radius, correcting the topic box's outlier status.
Previously, no custom styling was being applied to the enter send
choice options, which led to uneven styling from the other popover
options, as well as the outline ring being cut-off from the edges of
the popover. This commit fixes these issues by adding custom styling
for the outline ring when the enter send choice options are focused.
We refactor the following inputs to use a `placeholder-shown` CSS selector to
show/hide the close button, rather than custom JS logic:
- Filter topics field in the left sidebar
- Filter direct messages field under direct messages
- Stream message topic
Zulip production suite / ${{ matrix.name }} (zulip/ci:bookworm, --test-custom-db, Debian 12 production install with custom db name and user, bookworm) (push) Has been cancelled
Zulip production suite / ${{ matrix.name }} (zulip/ci:jammy, , Ubuntu 22.04 production install and PostgreSQL upgrade with pgroonga, jammy) (push) Has been cancelled
In the 2024 redesigned button configurations, the compose buttons
become outliers. This retains their previous style inherited from
.button, allowing that base component class to move forward.
This keeps colors uniform between edit and preview modes, and also
ensures no bleedthrough of the editor when in preview mode.
ID selectors have been used for those colors to both keep the text
color declaration in the same place, and to avoid a dark-theme
specificity problem where the generic textarea took precedence over
the colors specified on the compose box's own textarea.
With the refactoring of the rendered-Markdown area to use only
margin bottom, including in message-edit previewsk, these expensive,
general selectors are unnecessary.
Headings and horizontal rules, which do have margin-top, are zeroed
out elsewhere in the rendered-markdown file.
For buttons in the compose box using `.small`, all properties except
min-width were already being overriden in compose.css. So we added
`min-width: inherit` to compose.css and remove the `small` class.
Preparatory commit for #30895.
To increase the number of options available for the user to pick from,
we increase the limit of options shown to 50 for all typeaheads, and
make the menu scrollable. The max height is set to original height of
the composebox typeahead menu, which fit 8 options or to 95% of the
window height, whichever is smaller.
Fixes: #20620.
As part of the popover menu redesign, this redesigns the compose send
options popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
Fixes#25117.
At widths under 400px, buttons in the popover were running off the edge,
which is fixed by removing the dividers between them.
For the new info density, buttons in the original row, even despite
removing the dividers, were still not fitting, so their width has been
slightly reduced.
The space above and to the left of the recipient area is now matched
to the space below it, and this is also the space above and on the sides
of a collapsed compose row.
Due to a wrong CSS selector, the expected red outline flashing effect
was not being applied to the compose box when the user tried to send a
message that was longer than the maximum allowed length. Also, the
iteration count is set to 3 instead of relying on the duration the CSS
class is applied, to ensure exactly 3 flashes without any glitches.
A new css variable is created with the same blue color in light theme as
`color-outline-focus`, and gray color in dark theme, and is used for the
focus-visible state of the compose control buttons, the compose close
button, and the send later vdots button.
As part of the popover menu redesign, this redesigns the mobile message
buttons popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
Fixes part of #28699.
Apart from the normal (collapsed) and full screen sizes, a new expanded
state with the same size as the maximum a normal compose box can stretch
to when full (40% of the screen height) is now available. Now a user can
expand the compose box without it covering the full screen with a click.
The vertical resize icon in the bottom right corner of the compose box
is rendered useless so has been removed.
All three states can be cycled through by clicking the compose resize
button in the order: collapsed -> 40% of the screen -> full screen. When
a message naturally causes the compose box in its normal state to expand
up to 40% of the screen, clicking the resize button will take it to full
screen state.
Fixes: #29966.
The row of buttons is placed using CSS grid template areas so that
visually it is now inside the bottom edge of the textbox. The color of
the buttons row and individual buttons is changed to match the color of
the textbox. All textbox border / box shadow properties are now applied
to its parent instead which is extended under the buttons' row, so that
its border snuggly fits around the buttons row too.
Notable side effects:
- In dark mode the textbox in focused state now has a light border which
does not match the recipient input's current border which doesn't change
when focused. Likely, the recipient input should be updated to match the
textbox's border color.
- The dividers in the formatting buttons row are not vertically centered
now. This should be figured out soon.
Fixes: #28702.
For the compose control buttons, the compose close button, and the send
later vdots button, we show the focus ring only on `focus-visible` and
not on `focus`.
Fixes part of: #27117.
We now right align recipient input (even at very narrow widths) and
banners to the textbox, and move the close button to the absolute top
right corner of the compose box, updating the icon to be slimmer, bigger
and purplish, and adding a background highlight on hover.
This involved refactoring the send control area width into a responsive
css variable, and simplifying the html structure of the compose box.
Fixes: #28792.
The messagebox-wrapper div is removed, and it's only style `flex: 1` is
applied to the messagebox div. The `height: 100%` and `margin-top: 5px`
styles on the messagebox div were earlier causing it to move 5px down,
outside the messagebox-wrapper div, when the compose box was expanded.
