This commit refactors the css for subscriber list in channel
settings and group settings by moving the css rules that were
initially used to format the bottom border of the table to
the wrapper div (.subscriber_list_container) around the table.
On specific screen height, this wrapper div will overlap the
actual bottom border of the table and make it look like it's
cut-off. This commit makes it look like the table have consistent
bottom border accross all screen sizes.
This commit adds new functions which will be used to discard
changes for all the settings in a subsection when clicking
on discard button. This change will help in avoiding code
duplication when they will be used to discard changes in
a subsection if some other user changed a setting in the
same subsection.
If the filter was changed due to topic move, the hash was not updated
due to `browser_history.state.changing_hash` being true. To bypass
it, we set trigger as `retarget message location`.
If the topic was renamed but the `near` link contains the name
of the old topic and we have the `near` message in the current
list, we can still narrow without re-rendering.
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.
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.
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.
Earlier, new users were narrowed to the interleaved
DMs view on the first visit.
This commit updates the behavior to narrow new users
in DMs with Welcome Bot.
Reason for the change:
It makes more sense overall as an interleaved DMs view
is a power user view and it would also prevent the
message fading banner #29076 from showing up if the
user DMs Welcome Bot right away.
When posting a message in an empty resolved
topic, the `Unresolve topic` button in the
compose banner unresolves the topic
and then renarrows to the unresolved topic
if currently viewing the old (resolved) topic.
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.
As a follow-up to the previous commit renaming the `dark_theme.ts`
module to `theme.ts`, this commit renames the following functions:
- `enable` -> `set_dark_theme`
- `disable` -> `set_light_theme`
- `default_preference_checker` -> `set_automatic_theme`
This commit centralizes the logic for setting a user's theme preference,
both for regular users and spectators, into the `dark_theme.ts` module.
This simplifies theme handling throughout the codebase and ensures that
the theme is set consistently across all modules.
Instead of relying on various call sites to update the recipient bar's
background color and switch between the light/dark realm logo after a
theme change, this commit modifies the `set_theme_and_update` function
to include these calls after every theme change. Before this commit,
some modules used to update the realm logo after a theme change, while
others did not. This led to inconsistencies in the UI depending on
which method was used to change the theme.
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.
Before this, the realm logo was not being updated instantly when the
theme was changed through the gear menu, and instead required a page
reload to take effect.
Similar to the light/dark theme support for the spectators, this adds
the automatic color scheme support by storing the user's preference
in the local storage.
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
Fixes#27500
It is hard to reproduce the bug but this should fix any bugs
involving topic order when moving messages since we are updating
the data again from the server.
It is hard to maintain the concept of `historical` topics locally,
thus, we remove them entirely to simplify what we can do here.
This commit can introduce bugs when are addressed in the next commit.
We did not remove the deleted messages from message_store
previously. This commit adds the code to remove the deleted
messages from message_store.
Co-authored-by: Sahil Batra <sahil@zulip.com>
We will now just run the actual template if not mocked, such that code
that ends up rendering a template incidentally does not need to mock
templates.
Co-authored-by: Tim Abbott <tabbott@zulip.com>
This commit updates the CSS to makes the label for disabled
checkbox less faded such that it is faded enough to figure out
that the setting is disabled but the text is also visible clearly.
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.
We divide functionality into that for "full_size" and "expanded", which
are identical for now.
This is a prep commit for adding an intermediate expanded screen size.
We previously had two CSS rules for control-label-disabled
class, one in settings.css and one in subscriptions.css
and the rule in subscriptions.css was being used by all
the elements with that class.
This commit refactors the code to have only single CSS rule
for that class with the value being set to the one used in
subscriptions.css, because that was the one being used and
that also looks better in terms of design, and the CSS is
defined in settings.css since it can be considered more
general file for writing CSS used in organization/personal
settings along with stream settings.
This commit also removes the unused code for
".control-label-disabled.enabled" selector since we no
longer use that selector.
When narrowing to a DM with their own user pill in recipient, a
duplicate DM row gets rendered.
This commit fixes this behaviour and doesn't render a separate row
when one's own email is included in recipient.
Fixes regression from zulip#29175.
When narrowing to an existing topic name with different casing, left
sidebar renders duplicate topic rows for the existing topic name and
one with the different casing. Since topic names are case insensitive,
it should narrow to the existing row only.
Fixes regression from #29175.
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.
Tabbing through the navbar elements, `Hide user list` tooltip
stays visible even if focus is moved away from it.
We move tooltip to the element receiving focus and blur event
to fix it. See previous commit for more details.
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.
This commit refactors code such that we do not add separate
if condition block for each realm group based settings using
the new API format to send the request accordingly. We now
use a single if-block to update the request data for realm
group permission settings using new API format.
The #**stream>topic** syntax generates broken links for
topics containing two backticks or ending with *, because of
architectural flaws in the backend markdown processor.
So we avoid generating the syntax for such topics and instead
generate the normal link syntax in markdown.
Fixes#19873
The generic argument of InputPillContainer should not be
InputPillItem<…>, as InputPillContainer already uses InputPillItem
where applicable.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
If the new narrow has the same terms except `near` message id,
then we select the message if it is already rendered in the
current message list.
Tested by sending link to two different messages in a narrow and
clicking to ensure we don't have any loading indicators active.
Tested we are scrolling to target message too if it was not in the
visible viewport but is rendered above.
Before commit fd253539e0 (#30519), each
part of state_data was removed by pop_fields, to ensure that it was
only used by its associated module and not manipulated directly.
Restore this guarantee by removing page_params.state_data itself.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
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 variable is renamed to is_target_element_editable. This makes it
explicit that this variable is referring to HTML structure and not a
property of the field.
This is a prep commit for #22883 which allows admins to restrict users
from modifying field values.
Earlier the `data-conversation-type` attribute of the new conversation
button was being set to `direct` only if dms were enabled. As a result a
stale tooltip was being shown when dms were disabled.
This commit updates the attribute to `direct` reagardless of dms being
enabled or not.
Fixes#29916.
These styles were from before opting to work with themes maintained
by the Pygments project. Their removal will make it much easier to
upgrade Pygments themes in the future, and more importantly,
reduce the effort required to square syntax highlighting in the web
and mobile apps.
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.
As per the new presence API, we don't get presence info for
users if they went offline after `last_update_id`. This results
in webapp not updating presence info for them.
To fix it, we loop over all the active / idle status users and
update presence status for them as per the latest server time.
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>
If `disable_for_spectators` is true, the widget text is greyed out
but the tippy instance is still delegated, causing it to appear
on click/enter.
This commit fixes that by not delegating tippy if the
`disable_for_spectators` is true.
This bug was surfaced when it was found that the
topic type filter in Recent conversations has disabled
styling for spectators, but a spectator could still click on it to
open the dropdown.
Fixes#30461
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.
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.
The css variable `--color-outline-focus`, which affects focus rings
throughout the app, now has a different value defined for the dark theme
but this should have no visible effect, and help clean up the code.
This is a prep commit for the next, which shows focus rings only on
`focus-visible` and not on `focus` for composer buttons.
The margin properties in question were getting overridden by other
css, so they were not important. The width was not making a difference
in case of channel filter, since its parent was a flexbox. For the
topic list, the width was getting overriden by
`#stream_filters .input-append.topic_search_section input`.
This bug can be reproduced by scrolling anywhere where list widget
is used except recent view.
`$scroll_container` was used before
371cd0da6c
to listen to scroll events which was incorrectly replaced by
`opts.$simplebar_container` in the above commit. To fix this,
we use the same function `scroll_util.get_scroll_element` to
get the correct scroll element.
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.
Rename `active_private_messages_section` to
`active-direct-messages-section`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
The `get_all_rows` call should be scoped inside `#inbox-main` otherwise
it used to query all the elements in the DOM which is quite expensive.
Also, we don't need to handle scroll events in Inbox view if it
is not visible.
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.
As reported in a bug report, the tooltip on the DM collapse/expand
toggle was reappearing after switching in and out of the browser window.
This commit destroys the current instance of the tooltip when it is
hidden. This clean up ensures that the tooltip does not appear again
unless the triggered explicitly by the user.
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.
Previously, the typing notifications used to appear between the
message list and the mark as read banner in a thread. This would
cause the banner to shift down whenever someone starts typing,
and shift back up if everyone stops typing.
This frequent bouncing of the banner could be distracting, and hence,
is fixed by moving the typing notifications to below the mark as
read banner.
This commit refactors the "update_unread_banner", so that
the "mark_read_on_scroll_state_banner" innerHtml is
set using a separate method by passing the necessary
template.
This is a preparatory commit.
Owing to logic added in #30050, which accounts for the legacy line-
height value, toggling dense mode requires recalculating the
typography vars--otherwise, a non-legacy line-height value will
not be picked up until a refresh.
Add new app variable for .notification-table class.
This variable is responsible to set the tables' thead
background color in dark theme. Previously it depended
on a genral CSS rule in dark_theme.css for its thead
color, however that cluster of rule has been deprecated
in #29859.
Note: The `thead` background color for the notification
table in the light theme is transparent, so the new
variable in `app_variable.css` does not have a
corresponding value for the light theme.
This optional commit also fixes#30431. It refactors the CSS
for the .table-bordered class, which is used directly by the
tables in the info_overlay menus (keyboard_shortcuts,
search_operators, markdown_help). This approach differs from
PR #30431, where the CSS for .overlay_body—a wrapper div
around these tables—was edited instead.
This commit make the CSS rules for .table-bordered class
use a new CSS variable for its border color where appropriate.
This is aligns with how we organizes CSS in #29859 and in
cd63e8d93cb0f84ec1e4ead348a225cb798f9cf0.
Fixes#39431.
This is a prep commit to an optional commit. It rolls back the
changes from #30431 because #30449 tries to fix a wider regression
that included the issue #30431 tried to fix.
This commit fix the regression for tables at uses the
.table-striped css, which are primarily used at the
settings menu.
In #29859, we began organizing CSS into more specific
variables and selector, which led to the deprecation of
several general CSS rules that affected these tables.
The fix switches the border-color value used by the
.table-striped css rules to a new CSS variable that
contains both dark and light theme values.
Fixes#30449
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.
As a follow-up to the previous commits redesigning the left sidebar
popovers using the new `popover-menu` theme, this moves the `theme`
prop from all the individual left sidebar popovers to the shared
`left_sidebar_tippy_options` object.
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 we generated the search_string and display_html as we
generated suggestions. This commit changes the way Attacher works
to generate these strings once we want the final result. This gives
more flexibility, and will let us replace the last item of `result`,
which will be required for implementing search pills.
This is preparation for search pills.
The X button for user pills will be a click target
that disappears from the DOM. We don't want to
look for the parent of a click element that might
not exist, since that would give us a false positive
and lead us to reset the search bar when removing a
user pill. This commit brings this click handler to
a more stable state.
This commit also adds an extra $elem argument to
`settings_panel_menu.set_key_handlers` which defaults to $mail.elem.
This argument helps us specify a specific element to attach the key handlers
to, instead of the entire settings panel.
We will redraw the list on every deactivation or reactivation.
While that might seem expensive to redraw on each user, the other
option we have is to have some logic run each time the tab is selected
and redraw if the user list has changed.
Since deactivation and reactivation is not something that an admin
would do multiple times a day, redrawing on each user should be fine
for now.
We will continue displaying the reactivated/deactivated users in a
greyed out column after the live-update, since it is weird for a user
to disappear suddenly from the list.
Karl Stolley
PieterCK
Aman Agrawal
roanster007
Sahil Batra
afeefuddin
Shubham Padia
N-Shar-ma
Sayam Samal
Prakhar Pratyush
Kislay Verma
Sayam Samal
codewithnick
sanchi-t
Anders Kaseorg
adnan-td
evykassirer
Pratik Chanda
Alya Abbott
Lauryn Menard
tnmkr
Varun Singh
Kenneth Rodrigues
Ujjawal Modi
sujal shah
opmkumar
Shubham Padia
Tim Abbott
nimish