The import of recent_topics_ui.js from unread.js generates an import
loop. To remove this, we need to move the logic for rerendering recent
topics after update_message_for_mention out of the low-level unread.js
data module.
Since the logic was conditional on `content_edited` being true, and
that parameter is only passed in the message_events.js code path, we
can do this by just making the function return a boolean for whether
this rerender may be required, and moving the rerender logic to that
calling module.
The mutation handler was correct for user list in the right
sidebar but was incorrect for pms list in the left sidebar.
Since the left sidebar is updated differently, we need to
check for mutations on the element actually being updated.
This also required using a target node that is always present
for the pms list which otherwise throws an exception.
The `.integration-lozenges` children may contain
non-`.integration-lozenge` elements; if there were no matching
integrations, attempting to fetch the css `display` property of those
failed.
Switch to using jQuery to find the full set of visible lozenges
directly; this does the right thing if there are no such elements.
With the autocomplete dropdown, some users face trouble or uncertainty
while selecting topics. The autocomplete dropdown may encourage users
to find and select an existing topic rather than starting a new topic.
The changes adds a hint text to the topic typeahead dropdown to
encourage users to either start a new topic or select an existing
topic.
Fixes#23295.
This gives more comprehensive support of new and future CSS features
that can be transpiled for older browsers.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This reverts commit e16e7630e6 (#19542).
This was compiling to
a.messagebox-content .message_time {
z-index: 1;
}
which did nothing, because .messagebox-content is a <div>, not an <a>.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Since the message time of locally echoed messages were not displayed
and their width was restricted by `notvisible` CSS class, it
resulted in width available to message text changing after the message
was successfully sent and the time was displayed.
To fix this, we just try to set opacity of the message time to 0
for locally echoed messages.
`{{#tr}}` supports HTML and allows translators to accidentally
introduce HTML, so it’s safer to use the `{{t}}` helper unless HTML is
needed.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This implements a helper that parses an array that possibly contains
falsy elements into undefined when it does have at least one falsy
element, or returns a type narrowed array of non-undefined elements.
We use this in people.js, which achieves the same check we have using
"arr.every(Boolean)", but with type safety since it is not based on
validation.
Signed-off-by: Zixuan James Li <p359101898@gmail.com>
Returning undefined as opposed to false makes more sense in the context
of this function. This also will simplify the type annotation.
Signed-off-by: Zixuan James Li <p359101898@gmail.com>
Fixes#23588
When a new message arrives in an inactive stream, it will lead
to stream being marked as active from inactive which leads to
stream list being rearranged which zooms out the user since the
active stream is reset momentarily. To avoid this, we delay the
stream list redraw until user zooms out and only update the topics
list.
Having active streams greyed out can be confusing to the user. This
is especially useful when the app is still fetching messages on
a reload and the active stream has no messages and is thus marked
as `inactive`.
This makes our frontend code less verbose, and makes this name
consistent with the names of other visibility policies (which
do not have the `VISIBILITY_POLICY` prefix).
Currently, there is a checkbox setting for whether to
"Include realm name in subject of message notification emails".
This commit replaces the checkbox setting with a dropdown
having values: Automatic [default], Always, Never.
The Automatic option includes the realm name if, and only if,
there are multiple Zulip realms associated with the user's email.
Tests are added and(or) modified.
Fixes: #19905.
Prevents multiple simultaneous requests to the API when adding or
removing reactions. This commit blocks emoji state changes until
the request is executed.
Fixes part of #21213
The loading message that appears at the
top of the page when loading the Bots/
Uploaded Files/Users/Deactivated Users
page under Settings appears to be misaligned.
We fix this by changing the height of the
loading-spinner to match the line-height
of loading text.
We now set the width of dropdown menu opened for dropdown-list-widget
elements such that it is enough for all the options. For smaller
screens the dropdown menus are wide since the settings panel and
modal content can be scrolled horizontally.
This change is done only for dropdown-list-widget elements in
"Organization settings" panel and in bot-owner widget in bot edit
modal.
We don't do this change for move topic modal now as it cannot be
scrolled horizontally and appears beneath the button due to position
property.
This commit sets width of toggle buttons for dropdown list
widget elements same as select elements in both organization
settings. We set the min-width to be 325px and max-width to
100%.
The height of stream edit panel in stream settings panel was set
incorrectly for width less than "$md_min" so one could not scroll
to the bottom. This commit fixes the height to set it same as it
is for normal width screens since the height of elements above
the scrollable container does not change with screen width.
We make settings page horizontally scrollable such that
the user can see the complete dropdown by scrolling in
case the dropdown is wider than the screen.
This commit fixes width of dropdown-list-widget used for
can_remove_subscribers_group stream setting. The button width
is set as per the selected option with min-width being 325px.
The dropdown-menu width is set as per the longest option and
the menu becomes scrollable if the whole menu doesn't fit on
screen.
We also change the position of dropdown-menu slightly such that
its top border matches with the top border of button.
This commit sets width of select elements in stream settings
page to "auto" such that the width adjusts to fit the options
as required in different languages and we also keep minimum
width of 325px to maintain consistency of width across elements
in the page to not look ugly.
This commit sets width of select elements in settings page
to "auto" such that the width adjusts as required in different
languages and we also keep minimum width of 325px to maintain
consistency of width across elements in the page to not look
ugly.
We also remove the CSS for overriding width of various role
based select elements and a couple of others which was added
to adjust the widths for different languages. Since we have
now set the width to auto, the browser will automatically
adjust width to fit the options.
Picking up the work from where 65aa1070 left off, this commit adds a
meta state to the hotspots module. This allows us to keep track of
whether or not a hotspot's overlay is currently open from within
javascript. With this in place, is_open is then modified to look at this
new state rather than query the DOM, providing a significant performance
boost.
Fixes#24261
In preparation of fixing the performance issues associated with
hotspots.is_open, this commit moves the various handlers for hotspots'
overlay from click_handlers.js into the hotspots module. This will set
us up to cleanly keep track of the open state from within the module
(instead of needing to look at the DOM).
Since we are migrating from JavaScript to TypeScript
some files in the documentation are still with their
old extension. This commit changes those file extensions.
Added a separate template file for banner
messages in bots panel under personal and organisation
settings.
Banners for bots panel under personal
settings are shown only when user cannot add bots.
Banners for bots panel under organisation settings are shown
only when user cannot add bots or user is administrator.
Fixes#24155
Added a 1000ms fadeout timer to the success banners for the 'Emoji'
theme and 'user-list-style' checkbox, to match the other banners in
display settings.
Fixes: #23288.
Move the 'user-list-style' checkbox from the 'Emoji' section to the
'Advanced' section, and update the 'settings_display.js' file by
replacing the 'theme-settings' classname with 'advanced-settings'
classname to display the success banner of 'user-list-style' checkbox
with the 'Advanced' title.
Rename 'Sync with computer' to 'Automatic (follows system settings)',
'Light Theme' to 'Light' and 'Dark Theme' to 'Dark', and rename the
color scheme label to 'Theme'.
Reorder the dropdown menu to have light theme before dark theme.
Rename the 'Theme' section to 'Emoji'. Since there is no 'Theme' section
anymore, replace the 'theme-settings' classname with
'emoji-display-settings' in the 'settings_display.js' file.
The existing "Theme" selector dropdown is moved from the now the
'Emoji' section to the 'General' section.
Rename the 'language-time' title to 'General'. As the 'language-time'
section no longer exists, replace the 'lang-time-settings' classname
with the 'general-settings' classname in the 'settings_display.js' file.
Updated the 'change-the-time-format.md' and 'change-your-language.md'
documentation files to reflect these changes.
To pass the puppeteer_test Replaced the 'lang-time-settings-status'
classname to 'general-settings-status' inside 'settings.test.ts' file.
This is a Prep PR for #24426.
Removes direct dependency cycle between 'popover.js'
and overlays.js by creating popover.initialize method
called from 'ui_init.js' that calls
overlays.register_pre_open_hook(hide_all) and
overlays.register_pre_close_hook(hide_all).
Created a function call_hook that loop call all
registered hooks at the start of 'open_overlay' and
'close_overlay'.
This commit changes the "Show API key" modal to use a more intuitive
description of the user's password field, and also to put the reset password
option, which should be the less common case, at the end.
Fixes: #24506.
When the 1st line of a draft message took up the maximum horizontal space
possible, the last character was way too close to the pencil icon. More
noticeably, when a message began with a code block, it's right edge would
touch the icon.
To space the message contents and the restore draft button, now a margin
of 5px has been added to the draft message content. This makes the message
content narrower by 5px.
Until now, whenever the hash was updated using the `set_hash` function,
the new url was always pushed into the browser history, even if the current
hash was same as the new hash. This lead to multiple duplicate entries in
the browser history, when using the `z` hotkey to zoom to a message
repeatedly, which is very inconvenient when navigating through history.
This is now fixed by simply returning prematurely from `set_hash` if the
new hash is same as the current one. This fix will also prevent any future
features like `z` from causing duplicate browser history entries.
Fixes: #24468.
In narrow screens, the save/discard widget was incorrectly shown
even with no changes, due to the CSS intended to switch it from `inline-block`
to `block display.
Fixed by adding `display: none` to `.hide` class for @media(width < 575px)
to hide buttons on screen width less than 575px.
Fixes#24589.
Zulip already has integrations for server-side Sentry integration;
however, it has historically used the Zulip-specific `blueslip`
library for monitoring browser-side errors. However, the latter sends
errors to email, as well optionally to an internal `#errors` stream.
While this is sufficient for low volumes of users, and useful in that
it does not rely on outside services, at higher volumes it is very
difficult to do any analysis or filtering of the errors. Client-side
errors are exceptionally noisy, with many false positives due to
browser extensions or similar, so determining real real errors from a
stream of un-grouped emails or messages in a stream is quite
difficult.
Add a client-side Javascript sentry integration. To provide useful
backtraces, this requires extending the pre-deploy hooks to upload the
source-maps to Sentry. Additional keys are added to the non-public
API of `page_params` to control the DSN, realm identifier, and sample
rates.
Currently, when a user marks messages as unread in a stream/topic
and unsubscribes from the stream, both subscribe button and compose
banner will remain visible. This change will hide the compose banner
when the user unsubscribes from the stream and hopes to create a
better flow and reduce confusion.
Previously, when you did a "mark as unread from here" operation, we triggered
a full rerender of both the recent topics view and the message feed. This was
needlessly expensive, on and a large server with a somewhat busy CPU from
other applications, can cause a visible lag, even when the message feed that
you're looking at only has like 3 messages in it.
Improve this by passing the set of modified messages to the rerender.
There's likely further improvements to be made here -- we shouldn't need to
do more than toggle the unread markers -- but this should be good enough to
eliminate the visible lag.
Fixes#24263.
Previously the 'Support Zulip' option linked to Github Sponsors.
We now link to our own https://zulip.com/help/support-zulip-project,
which describes more options for how to support the project.
Fixes#24230.
Adds a `div` wrapper with the `rendered_markdown` class to the
content in `confirm_emoji_settings_warning.hbs`, so that the
inline code element has the intended CSS rules applied.
Because the `p` element also has the `rendered_markdown` class,
the margins for this element in the modal are slightly changed
(3px on top/bottom). Previously, the margins for this element were
being set from a bootstrap rule (10px on bottom).
This function was mistyped; it was used in practice both accepting
string[] and number[], with the implementation taking advantage of the
fact that number.parseInt(<int>, 10) = <int>.
The only string[] callers were some overly defensive typing_data tests
that don't match the actual typing_data interface, so we remove the
string[] support and adjust the function's type, as well as those
tests.
When someone hovers over the Github username in the popover
with dark theme, a background will appear. These changes
ensures that the `background-color` isn't overwritten by
other CSS.
This commit adds inline_decorated_stream_name component
which is used to show stream name along with its privacy
type icon. This component is added such that we can align
the icon and stream name properly as there are many
instances where the icon and name are not aligned in the
current UI.
This component is only used in "Archive stream" modal for
now and will be used for other UIs as well in future.
Revises descriptive text and examples at the top of the code
playgrounds tab in the organization settings overlay to be shorter,
have only one example that includes the name field.
Also, adds the `rendered_markdown` class to the HTML code elements,
via an HTML span element so that the specific CSS rules for code
elements with that class will be applied to these examples.
Revises descriptive text and examples at the top of the linkifiers
tab in the organization settings overlay to be shorter, have only
one example and updates help center link text for capitalization.
Adds a link to the help center in the form/input area for adding
a new linkifier, which is consitent with the code playgrounds tab,
and means the link would be there if the form was converted to a
modal.
Also, adds the `rendered_markdown` class to the HTML code elements,
via an HTML span element so that the specific CSS rules for code
elements with that class will be applied to these examples.
Updates `markdown.css` to remove border styling from code
elements, and instead use background-color (as well as
font-family) to visually highlight inline code elements
as distinct from regular text.
Updates code element font-family to be the same as in
`zulip.css`.
Makes padding on the left and right the symmetrical for
inline code elements. Previously there was 4px padding on
the right, but not on the left.
Maintains anchor font-color styling for code elements that
are also links.
Updates `markdown.css` and `rendered_markdown.css` for the rules
in `bootstrap.css` that were being used to style code elements and
removes the now redundant/ignored rules from `bootstrap.css`.
After b21f533af, we now update the organization bots
list on receiving realm_user events since non-admins
can also see bots not owned by them in the list.
But the functions to update bot list should be called
only for bot users and not for others, otherwise it
results in an error.
This can be reproduced by first opening the organization
bots list and then just updating the name of the user.
Calling `redraw_bots_list` on receiving "realm_user/add"
event for non bot users will not raise any error but
still we avoid redrawing the whole list when not required.
This commit fixes the code to call functions to update
bot list only when the event is received for a bot.
This added functionality will be used to compare pygment_language from
Code Playgrounds.
There is a choice of how to sort languages with popularity versus
without popularity. I chose to sort the Code Playground custom language
after other pygment languages based on the reasoning in the comments.
In preparation for adding logic for Code Playground languages, which has
no popularity score, extracting the popularity comparison part of the
logic out to evolve it in future diffs.
compare_by_popularity() actually does two things:
1. compare A and B by their popularity
2. then if needed, compare alphabetically to break ties
Someone reading the function name might not be clear about that detail.
I'm renaming this function to remove the "by_popularity" wording, which
can mislead readers. I also added comments to clarify the detail.
The goal in future diffs is to break this up and make it more self
explanatory.
The `get_pygments_typeahead_list()` function is only used by
`settings_playgrounds.js`. It isn't used by the autocomplete of the
composebox.
Renaming this function to make it clear where it's meant for.
We use "checkbox" class for label elements. We have already
added the CSS for these elements in components.css and thus
we can remove this CSS from bootstrap.css.
We hide most of the native checkbox type input elements using
"clip: rect(0, 0, 0, 0)", as we instead make our custom checkbox
using span element. Native checkbox is used in emails page in
development environment for which we have already added CSS
in previous commit.
This commit removes the CSS rules set for checkbox type inputs
as part of our bootstrap removal project.
This commit adds min-height property added by bootstrap
to the label.checkbox elements in components.css.
We do not need to add padding-left property added by
bootstrap since we already set padding to 0.
After adding this CSS, we can safely remove the CSS from
bootstrap.css.
This commit adds bootstrap CSS rules for checkbox element in
emails_log.html as we would remove the bootstrap CSS for checkbox
inputs in furhter commits. We add only required CSS rules.
This commit changes the design of checkbox in deactivate user modal
to be same as others in the app. We have added parent element with
".new-style" class for now, since we have this for all other checkbox
in the app and this seems to be the simplest solution.
In future, we plan to remove the "new-style" class and instead add
CSS based on a component for checkbox elements.
We do not have any checkbox inputs inside any element with
form-inline class, so we can remove the CSS in bootstrap
which is used to set rules for checkbox inputs inside
form-inline element.
The code for hiding and showing email field in the user
deactiavtion modal was added in dialog_widget.js.
This commit removes it and instead add the code to its
relevant module (settings_user.js), since the email field
is present only in one modal and not all modals.
750ms is long enough that it's unlikely to occur without a user
intending to hover the element, reducing distraction for relatively
commonly used elements.
Also define a couple delay constants to provide a more semantically
meaningful configuration.
Drop the "last_active" column in the users section of the
organization settings, and the "Bot_type" column in the bots
section on sm_min (576px or less). Also, drop the "Date_muted"
column in the muted topics section of the personal settings
on ml_min (425px or less).
Added new className "topic_date_muted" for the date_muted
column, and "bot_type" for the bot_type column, to hide them
using display none when the viewport is small.
Fixes: #24320
Earlier, if the content of the modal (apart from the header and footer)
overflowed, the whole modal would become scrollable which would hide
the modal header and footer on scrolling. This commit makes only
the modal content scrollable and keeps the modal header and
footer static.
It was added in 85fc8d5472 to prevent
the dropdown list widget from being clipped off due to overflow.
This is not needed now since the `dropdown-menu` has a
`position: fixed` property which avoids it from being clipped off.
Close the user or bot popovers in Users, Deactivated users, bots tab of
Organization settings, on clicking Edit user button, Deactivate button
or Reactivate button.
Make .stream-header div a flex container and adjust max-width
of .sub-stream-name to take up 100% of available space.
Add 1rem margin-left to .button-group for spacing.
Fixes: #24507
I am not sure why I added this change in flex-direction
but right now, it doesn't seem to be correct since it force
the footer to overflow mobile width.
Zulip has long had the behavior that opening a stream or topic via
narrowing automatically scrolled the left sidebar to the conversation,
so that you can see it and adjacent ones readily.
When we moved private messages into the left sidebar, we didn't
implement this similar behavior; this resulted in users having to
manually scroll the sidebar in order to browser private message
conversations.
Fix this by using the standard scroll_util helpers, with some extra
care to expand the heading when going to "all private messages".
Fixes#23609.
Co-authored-by: Tim Abbott <tabbott@zulip.com>
Some code blocks in the help center have lines that are too long
to fit, and wrap onto the next line. This can look awkward, and
may cause confusion. An horizontal scroll bar is added to the code
blocks to help fit everything into their own lines and clear up
confusions.
Fixes#24004.
Implemented date localization using native Intl object.
Created special function get_localized_date_or_time_for_format
Made necessary string formatting changes in 'timerender.ts'.
Fixed tests and added some localization tests too.
Tested on my local development server, with some random languages.
Fixes#23987.
Earlier PATCH user_groups/<int:user_group_id> required
both name and description parameters. So we had to send
them in patch requests even if just one of the attribute
was updated.
As the endpoint is now updated we send only those parameters
that are changed.
Added `mark_read: false` as it doesn't make sense to
read/undread a message when just muting or unmuting a stream.
It is to make sure that we never consume a unread message
when just muting/unmuting streams.
Extended else if statement responsible for reselecting messages
to include check `!recent_topic_util.is_visible()`.
Before without this check, this code was consuming 1 unread
message on muting/unmuting a stream even when we were in
"Recent Conversations" view.
Updates frontend user-facing strings with "private message" or "PM" to
use "direct message" or "DM" respectively instead.
Note that this updates translated strings as well as a few that
are not translated like search suggestions.
Updates `tools/lib/capitalization.py` for some specific strings
that are impacted by these changes, and removes "PM" and "PMs"
from checked strings.
We now allow user to change email_address_visibility during user
signup and it overrides the realm-level default and also overrides
the setting if user import settings from existing account.
We do not show UI to set email_address_visibility during realm
creation.
Fixes#24310.
Same template fike is used to show user custom profile fields in
both profile page in settings and in manage user modal. For select
elements in modals, the CSS is handled using modal_select class.
This commit adds modal_select class to the select element used for
custom user field, which already has settings_select class, so that
the CSS are also applied to the select element in manage user modal.
The "display: flex" property was added to ".modal__title"
element in 9e4aa19ac in #24194 to fix overlay of long
name in user profile modal (#23781).
Due to this change, the space between words in heading of
"Archive stream" modal is being removed.
This commit fixes it by adding "display: flex" only to the
title of user profile modal and not all the modals. The
heading in "Archive stream" modal is not perfect but there
is ongoing work to fix it and till then this commit changes
it to be the same as it was before adding flex property.
There is no major change in other modals, except that the
space between heading and help-link widget has increased
which was anyways the case before adding the flex property
and that can be modified later if we want to.
Added a 'Deactivate Organization' button inside the
'Personal Settings > Account & Privacy'. This button only appears
when the organization owner is the only user present. To verify this,
I used the 'get_active_human_count' function from the 'people.js'.
To remove duplication, a function has been created inside settings_org
file to handle the click event for the two buttons present inside
personal_settings and organization_settings that perform the same
action of deactivating organization. The click handler is defined in
the click_handlers.js file, which calls the dialog for deactivating
the organization. Previously, the error used to appear at the top of
the organization_settings, but now it appears inside the dialog box
itself.
To remove the duplication of two buttons having the same IDs,changed
the Id `deactivate_realm_button` to a className.
Fixes: #24105
A new hotkey, lowercase `z` (for `zoom`) has been implemented to allow
the user to go to the near view of the selected message with 1 keypress.
Documentation has been added for this both in the help center, and the
in-app `Keyboard shortcuts` menu.
The effect is identical to clicking on a message's timestamp, which
links to that message's near view.
Fixes: #24227.
This lets us simplify the long-ish ‘../../static/js’ paths, and will
remove the need for the ‘zrequire’ wrapper.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Ever since we started bundling the app with webpack, there’s been less
and less overlap between our ‘static’ directory (files belonging to
the frontend app) and Django’s interpretation of the ‘static’
directory (files served directly to the web).
Split the app out to its own ‘web’ directory outside of ‘static’, and
remove all the custom collectstatic --ignore rules. This makes it
much clearer what’s actually being served to the web, and what’s being
bundled by webpack. It also shrinks the release tarball by 3%.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Hardik Dharmani
Aman Agrawal
Alex Vandiver
Joelute
Anders Kaseorg
Lauryn Menard
Zixuan James Li
Palash Baderia
Abhijeet Prasad Bodas
Prakhar Pratyush
SameepAher
Daniil Fadeev
Sahil Singh
Alya Abbott
Sahil Batra
Steve Gattuso
sbansal1999
Akarsh Jain
Ujjawal Modi
Manas Jayaswal
N-Shar-ma
evykassirer
Tim Abbott
Haridarshan Choudhary
Pranav Joglekar
Lalit
Trident Pancake
Ganesh Pawar
David Rosa
Ilikepizza2
Daniil Fadeev
m-e-l-u-h-a-n