Fixes position of unsubscribed icon so that it appears in the same line
as the list item of the typeahead and prevent typeahead to increase in
width when the icon is shown.
Objectives are to make the width of overlay scale with font size and
reduce too much gap between text end of first column and
text start of the other column.
As part of the popover menu redesign, this redesigns the playground
links popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
Fixes part of #28699.
Fixes#29825.
Clicking on remove button will not delete the row anymore. We will
add a strikethrough to the user pill and email text. `Remove` button
will change to `Add` on click to undo this action.
Re-adding a user explicitly should will not undo the soft remove on
their row. e.g If `Iago` was added as part of a group and crossed out.
Now, adding another group with Iago as part of it should not undo the
soft remove.
We maintain a seperate set of soft removed users, but we will not
remove those users from the main user list on clicking `Remove`.
That list can only be modified by actions with the input pills.
We will subtract the soft removed user ids from main user id list
when sending the request to add subscribers to the new channel.
I've not added extra puppetteer tests, since adding users was
not part of the existing tests.
Instead of displaying contextual options in the message buttons popover
based on the message type, we instead abstract the logic behind the
scenes and instead just show the "Start new conversation" with the
relevant hotkey hint.
This also removes the `is_in_private_narrow` parameter which now serves
no purpose in the popover template, as we display the
"New direct message" option in all cases.
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.
This commit standardizes the naming of the day and night themes to light
and dark, respectively. This makes the codebase more consistent with
the naming used in the settings and the user interface.
Standardize theme selection across the web app by replacing separate
light/dark theme menu options being used in the spectator view with the
new 3-way theme switcher.
Fixes#30318.
In this commit, a help center link to follow-a-topic and mute-a-topic
has been added in SETTINGS / NOTIFICATIONS > Topic notifications
so that users can understand thier options.
Fixes#30562
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.
Since we don't want col_focus to be on the time column as we don't
track it in recent view, we simply mark it as an element user
cannot focus to avoid any confusion.
The elements which received focus didn't have tooltips attached to
them, thus when blur was triggered on `a`, the tooltip didn't hide
as it was not listening on it for the blur event.
We move the toolip to `a` elements so that when focus and blur
are triggered tippy is able to capture them.
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.
Vector73
Aman Agrawal
Sayam Samal
Shubham Padia
Karl Stolley
Sayam Samal
codewithnick
N-Shar-ma
adnan-td
Alya Abbott
Anders Kaseorg
sanchi-t
Sahil Batra
evykassirer
Ujjawal Modi
opmkumar
Tim Abbott
nimish
sujal shah
Kislay Verma
Kenneth Rodrigues
Prakhar Pratyush
ecxtacy
Lauryn Menard
Prakhar Pratyush
Pratik