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.
The space wasn’t visible because it was narrower than the padding on
`.rendered_markdown time`, but it showed up in copy-and-paste.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This style is currently only used for search suggestions. Soon,
styling for those suggestions will become more specific, and so
for now we'll keep those styles in search.css to be more clear
about what the new styles affect. If we want to repeat something
like this in the future somewhere else in the app, we can come
up with a generic styling then once we have a better idea of
what that will look like.
Removes some CSS rules used in the invite user modal that were
already being applied via the shared `modal_select` class.
Co-authored-by: Lauryn Menard <lauryn@zulip.com>
Fixes#30403.
Having tabIndex set to 0 led to keyboard focus being put on
a scrollbar container, which led to users having to tab twice
to skip a container.
This commit also removes instances of tabIndex being set to
-1 programatically for certain cases, since it is -1 by default now.
This commit also removes `outline: none` for simplebar since
that property is not needed anymore because the wrapper is
not focusable anymore.
Rename `show_all_private_messages` to `show-all-direct-messages`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
Rename `toggle_private_messages_section_icon` to
`toggle-direct-messages-section-icon`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
Rename `private_messages_section_header` to
`direct-messages-section-header`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
Rename `private_messages_section` to `direct-messages-section`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
Rename `private_messages_sticky_header` to
`direct-messages-sticky-header`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
This fixes half of #23665. It shows all user pills when making
a group suggestions as the active new suggestion, but still
doesn't show user pills for the first parts of suggestion lines.
A bug was observed on Safari where the visibility policy switcher
popover was shrinking beyond the width of the policy switcher, hiding
a portion of the switcher component.
This was due to the presence of the `width: min-content` on the
popover for supporting dynamic popover menu sizing based on the content
of the menu items, in tandem with some issue in Safari since it worked
fine on other browsers.
This commit adds the `.popover-menu-label` class to the visibility
policy switcher's label to enforce `max-content` width on the label
element, which in turn fixes the popover shrinking issue on Safari.
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.
When left sidebar is hidden between 1200px and 768px, we show
smaller realm icon logo instead of the full realm logo. Also,
we use the new space to expand the middle column to better show
the narrow description.
This commit also sets all popover labels to flex grow into the remaining
available space. This allows us to align the unread counters, if any
to the rightmost corner of the menu option. This change, however, does
not lead to visual changes in any popover.
Fixes part of #28699.
Create the is:followed search operator.
Fetch all messages that are from followed topics
using exists.
Update API documentation and changelog.
Co-authored-by: Kenneth Rodrigues <kenneth.nrk123@gmail.com>
Fixes#27309.
Previously, there were three different sections for managing active
users, deactivated users and invitations.
This commit combines users section has into a single tabbed panel.
Fixes: #26949.
Co-authored-by: shashank-23002 <21bec103@iiitdmj.ac.in>
Since we are uniting the user settings into a single panel in the
upcoming commits, we are naming the invites tab as `invitations`.
We also replace `invites` with `invitations` on all user facing
strings on this page.
This commit is a preparatory commit for that.
See https://github.com/zulip/zulip/pull/30268#issuecomment-2155213539
Changed the title of the first panel to
"Create channel: configure settings" and title of second panel to
"Create channel: add subscribers".
Implement logic in stream_create.js to show and hide both the panels.
Add two buttons to facilitate switching between the tabs or panels.
Added new descriptions to 'stream type descriptions'.
Removed the "Stream permissions" heading to simplify the panel.
Moved the "Announce new stream in {stream}" option just above
"Default stream for new users".
Implement a collapsible "Advanced configurations" section,
collapsed by default, to accommodate less commonly changed settings.
This allows for future expansion of stream permission configurations.
Fixes part of #29403.
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.
The compose expand / collapse button is moved from the top right of the
compose area to the top right corner inside the compose textarea /
preview.
The textarea / preview and the button area shares the same grid parent.
25px extra padding is added to and margin is subtracted from the right
of the element so the button is visually inside it. It appears only on
hovering the compose area, and uses a new custom icon.
Fixes: #28791.
This commit, adds the `.popover-menu-tab-group` class to the tab pickers
that appear together with the other popover menu options and thus
need to match their spacing and margins for a uniform look.
This removes the need to maintain a cluttered list of tab pickers that
need to be styled as such in the `popovers.css` file.
As part of the popover menu redesign, this updates the topic visibility
popover to use the new "popover-menu" popover theme and improves
accessibility by using appropriate ARIA attributes.
This also moves the `:focus-visible` CSS rule to apply to any tab
picker in a popover, removing the need to explicitly add it to each
tab picker.
Fixes part of #28699.
Create has:reaction search operator and search suggestions.
Create sidebar view for the user to view their messages that
have reactions using has:reaction sender:me operators.
Add custom heading for the view and tooltip in the sidebar.
Add documentation for the new operator.
Fixes: #27328.
Fixes#17933, #27517
Instead of `recent_view_table`, we make `html` as our scroll container.
This fixes an important bug for us where filters sometimes disappear
due to them scrolling under navbar which is unexpected. Since we are
now using separate containers to display rows and
filter (while includes table headers), where filters use sticky
positioning, this bug will be fixed.
We immediately navigate the user to the conversation they just
sent a message to if they are not already in the appropriate
conversation view.
This commit adds a first-time banner to explain the same.
Fixes#29575.
The chevron arrow icon before the topic / dm user field now also acts as
a go to conversation button. Whenever the functionality is available,
the plain icon changes to look and behave like a button. The old go to
conversation button on the right of the field is removed.
Fixes: #28697.
This commit updates the sidebar topic actions popover to use the new
sliding tab switcher for the topics visibility policy switcher.
This also includes changes such as hiding the popover only on
successful request completion, and adds error feedback by indicating
it via the sliding animation.
In the "not-subscribed" tab, when there are no channels to show, we
display a text message saying "No channels to show. View all channels"
along with a link that redirects the user to the "All channels" tab
(All channels(#channels/all)).
Updated the update_empty_left_panel_message function in
stream_settings_ui.js to modify and determine which banner to display
when no channels are available to show, modified that function to also
display the banner of the "not-subscribed" tab using a new classname
called 'not_subscribed_streams_tab_empty_text'.
This refactors popover list structure to use a flattened `ul > li`
structure along with aria-related additions, enabling screen reader
accessibility and announcing menu length and position (`# of n`).
Added ARIA roles:
- `role="menu"` to the parent `<ul>` element, indicating it is a widget
offering a list of choices.
- `role="menuitem"`, `role="menuitemcheckbox"`,
or`role="menuitemradio"` to child elements based on their function.
- `role="group"` to the topic visibility picker, identifying it as a
container for related menu items.
- `role="none"` to `<li>` elements, removing the implied `listitem`
role that conflicts with the parent menu structure.
This refactors popover list structure to use a flattened `ul > li`
structure along with aria-related additions, enabling screen reader
accessibility and announcing menu length and position (`# of n`).
Added ARIA roles:
- `role="menu"` to the parent `<ul>` element, indicating it is a widget
offering a list of choices.
- `role="menuitem"`, `role="menuitemcheckbox"`,
or`role="menuitemradio"` to child elements based on their function.
- `role="none"` to `<li>` elements, removing the implied `listitem`
role that conflicts with the parent menu structure.
This refactors popover list structure to use a flattened `ul > li`
structure along with aria-related additions, enabling screen reader
accessibility and announcing menu length and position (`# of n`).
Added ARIA roles:
- `role="menu"` to the parent `<ul>` element, indicating it is a widget
offering a list of choices.
- `role="menuitem"`, `role="menuitemcheckbox"`,
or`role="menuitemradio"` to child elements based on their function.
- `role="none"` to `<li>` elements, removing the implied `listitem`
role that conflicts with the parent menu structure.
This refactors popover list structure to use a flattened `ul > li`
structure along with aria-related additions, enabling screen reader
accessibility and announcing menu length and position (`# of n`).
Added ARIA roles:
- `role="menu"` to the parent `<ul>` element, indicating it is a widget
offering a list of choices.
- `role="menuitem"`, `role="menuitemcheckbox"`,
or`role="menuitemradio"` to child elements based on their function.
- `role="group"` to the theme switcher, identifying it as a container
for related menu items.
- `role="none"` to `<li>` elements, removing the implied `listitem`
role that conflicts with the parent menu structure.
This refactors popover list structure to use a flattened `ul > li`
structure along with aria-related additions, enabling screen reader
accessibility and announcing menu length and position (`# of n`).
Added ARIA roles:
- `role="menu"` to the parent `<ul>` element, indicating it is a widget
offering a list of choices.
- `role="menuitem"`, `role="menuitemcheckbox"`,
or`role="menuitemradio"` to child elements based on their function.
- `role="none"` to `<li>` elements, removing the implied `listitem`
role that conflicts with the parent menu structure.
This refactors popover list structure to use a flattened `ul > li`
structure along with aria-related additions, enabling screen reader
accessibility and announcing menu length and position (`# of n`).
Added ARIA roles:
- `role="menu"` to the parent `<ul>` element, indicating it is a widget
offering a list of choices.
- `role="menuitem"`, `role="menuitemcheckbox"`,
or`role="menuitemradio"` to child elements based on their function.
- `role="none"` to `<li>` elements, removing the implied `listitem`
role that conflicts with the parent menu structure.
Also removes the unused `should_display_reminder_option` code, which
should have been removed in f40855bad2.
In `custom_user_profile_fields.hbs`, the name attribute has been
introduced to profile fields to facilitate the future use of the
`get_current_values` function in retrieving field values.
Fixes part of #26692.
Co-authored-by: Kunal Sharma <v.shm.kunal@gmail.com>.
Co-authored-by: Angelica <angelica.ferlin@gmail.com>.
We use "prop-element" class only to handle save-discard widget
and not anywhere else, so there is no need to have this class
for elements that do not use save-discard widget.
This commit refactors code to handle realm authentication methods
in a better way. We remove the get_complete_data_for_subsection
function and instead let populate_data_for_request handle the
request data for authentication methods.
We also remove the "prop-element" class from each authentication
setting checkbox and instead add it to the container div as a
the list of those checkboxes represent a single field, i.e.
the realm_authentication_methods field received from the server
and the authentication_methods field sent to 'PATCH /realm'
endpoint.
This commit fixes the bug when updating
"Restrict email domains of new users?" setting by
adding data-setting-widget-type attribute to the select
element as get_input_element_value now expects every
element to have that attribute after 64c8262eaf.
Due to this change, we also need to update the code in
populate_data_for_request function to not send invalid
parameter in the request. This change resulted in some
refactoring which now helps in not passing in the
"disallow_disposable_email_addresses" and
"email_restricted_to_domains" when these fields are
not changed.
This commit fixes the bug when updating realm default
language setting by adding data-setting-widget-type
attribute to the relevant element with "prop-element"
class as get_input_element_value now expects every
element passed to it to have that attr after 64c8262eaf.
As a result we can now remove the code from
get_complete_data_for_subsection to handle realm
default language and just let get_input_element_value
handle it and it also helps in passing the parameter
unnecessary to request when the setting is not changed.
While rendering input pills in input_pills.create function,
pass in the user_id or group_id accordingly.
Display the id as an html attribute in input_pill.hbs.
Co-authored-by: Pieter CK <pieterceka123@gmail.com>.
Updates instances of default-streams-list to instead be
default-channels-list as the data-section for the organization
settings overlay is part of the URL hash.
Adds description in views styled like stream descriptions also adds a
help center link to the appropriate page at the end of each
description.
Fixes#29769.
Earlier, the compose textarea and the preview (container) occupied the
same grid area, 1 at a time. Now, they are both children of a common div
which is assigned the same grid area. This allows adding more elements
to the same grid area in the future.
This is purely a code change and should have no visible effects.
This is a prep commit for relocating the compose expand / collapse
buttons to the top right inside corner of the textarea / preview.
For more discoverability, the keyboard shortcuts for preview, and bold,
italic and link formatting are now displayed in the tooltips of those
compose buttons.
This commit replaces the fontawesome "edit" and "copy-link" icon found
in the user profile modal with the corresponding zulip icons.
It also moves the functional classes like
user-profile-manage-own-copy-link-button from the icon element to its
container, including adding a new div wrapping the icon in
user-profile-manage-others-edit-button.
We now use "settings-field-label" and "modal-field-label"
class on label elements in settings and modals respectively
to add the bottom margin which was previously done by
"dropdown-title" class as it is better to have more
generic names to use on label for all type of inputs.
This commit adds bottom margin to label elements of
different inputs by adding "modal-field-label" class
to the label elements. Some of them already have the
margin due to having dropdown-title class.
This commit adds bottom margin to label elements of
settings inputs in personal, organization, stream
and group settings using the recently added
"settings-field-label" class.
Most of the settings are dropdown settings, so the
label for them already had a margin as they use
"dropdown-title" class.
There is no need to have hr element below the "Field choices"
heading in custom profile edit form and this also makes it
consistent with the new custom profile field form.
This commit removes classes like "title", "input-label"
and "emoji-theme" from label elements in settings and
modals as these are classes are neither used in JS
nor to apply any CSS.
For onboarding banners, we replace the close button with
"Got it" button.
Also, the banner is marked as read for the user only after
the "Got it" button is clicked. Earlier it was marked as read
as soon as it was displayed.
Updates the base hash for the streams setting overlay to be
"channels" instead of "streams".
Because there are Welcome Bot and Notification Bot messages that
would have been sent with the "/#streams" hash, we will need to
support parsing those overlay hashes as an alias for "/#channels"
permanently.
Part of the stream to channels rename project.
Additionally, the text colors have been updated for both light and dark
themes, it starts showing when 900 or less characters are left, as 999
was too soon, and has a tooltip to show the maximum characters limit.
Fixes: #28706.
In spectator mode, the separators encapsulating the topic visibility
switcher wasn't being hidden since the `hidden-for-spectators` class
was being applied only to the `popover-menu-inner-list-item` element.
As a follow-up commit to c3e4358, this removes the additional
separator by shifting the `hidden-for-spectators` class to the
`popover-menu-outer-list-item` element instead, which is responsible
for showing the separators.
Fixes#29750.
- We introduced an argument called `custom_profile_field` similar to
`sub` and `group` in `check_property_changed` and
`populate_data_for_request`.
- We could've introduced `field` param in `get_input_element_value`,
but I've kept it clean since it didn't have any similar kind of data input.
The performance difference due to this should be negligible.
- Introduced a span that would be parent to all `field_data` params
since it is needed by the diff infrastructure.
- If there is no data to be changed, we display our success status
without sending the PATCH request since save changed button is
always enabled.
Following the topic sidebar action popover menu redesign using the new
"popover-menu" tippy theme, we update the icons of the menu options to
match the new UI.
Fixes part of #28699.
Following the stream sidebar action popover menu redesign using the new
"popover-menu" tippy theme, we update the icons of the menu options to
match the new UI.
Change compose_reply_button tooltip logic to show the correct tooltip.
Earlier in organizations where DMs were disabled, a stale tooltip was
being displayed.
Earlier if the user hovered over the compose_reply_button when it was
disabled and switched to a stream in which it was enabled before waiting
for the tooltip delay, the next time the user hovers over the
compose_reply_button the stale disabled tooltip is displayed instead of
the enabled one.
This is fixed by checking if the compose_reply_button is enabled on the
fly while rendering the tooltip via instance.setContent().
Fixes#29238.
Updates the search suggestions in the web app to use the modern
convention of "channel" and "channels".
Also, updates the "from" search suggestions to use the modern
canonical convention of "sender".
Part of stream to channel rename project.
Updates translated strings in web/ that do not need updates to any
tests. The majority of these strings are also unique to the file/
template that they are in. A few have overlap with one other file.
Some changes here update placeholders/variables in these strings to
no longer use stream so that all the translation updates for this
rename happen at the same time.
The exception to this are cases of "<z-stream>" placeholders in
these translated strings.
Part of the stream to channel rename project.
Updates warning string when linking to a private stream/channel when
composing a message in the web app to use channel instead of stream.
Updates error banner when using a stream/channel wildcard mention
when composing a message in the web app to use channel instead of
stream.
Part of stream to channel rename project.
Updates a chunk of translated strings that overlap between files,
with the streams settings overlay being the starting point for
finding these strings, to use channel instead of stream.
Part of stream to channel rename project.