Following important changes are being made here:
* color_class lib is removed since it not used anywhere now.
* We don't need the `dark_background` class since the background
color is already adjusted based on color scheme. So, all
instances of it being used is removed.
stream_privacy template has conditions to show stream privacy icon
for all the cases, so we use it here since we also want to show
`#` icon for public streams.
Until now, lists with 3+ digit markers would have their beginnings cut off
to align with 2 digit markers. We fix that by having custom styling for
markers where we align markers only up to 2 digits, and let larger numbers
take up more space pushing the list item content forward as required to fit
the marker.
Despite the timestamp being hidden while sending the message, the link
on the timestamp (message url) was still hoverable and clickable, and
had a tooltip.
Here we disable the tooltip, but
https://github.com/zulip/zulip/issues/25069 remains open for the link
part.
At times, it might get confusing for users who are on
slow connections if their messages has not been sent
even after 5s. Including a spinner that will only show
up after 5 seconds has elapsed will keep user informed
about their slow connection.
5s is set as minimum time because showing up a spinner
before than might be distracting for users on normal
connections.
Fixes: #19328.
This commit changes behaviour of banners
in user groups panel and emoji settings panel
under organization settings.
Now banner in these panels is only
shown when user is an administrator or user
does not have permissions to perform actions
on panel.
Fixes#24157.
The flatpickr keyboard UI functions are very confusing. We previously
had a bug where typing keys that were not keyboard shortcuts or
numeric values could throw an exception due to accessing hotkey.name
when hotkey was undefined.
Fix this, and add a bundle of comments improving the documentation of
this confusing code path. Unfortunately, the implementation is still
somewhat mysterious; we leave debugging that to future work.
Fixes#24773.
Co-authored-by: Tim Abbott <tabbott@zulip.com>
In `insert_syntax_and_focus`, we now explicitly focus the textarea
before inserting the content, rather than relying on insert() to do
this for us. A comment is added documenting the quirks of insert that
require this.
This fixes a bug where the compose box might not be focused after
inserting video call links, emojis from the picker, GIPHY gifs, and
some other buttons.
Following the issue #23380 and PR #25038, this commit changes all
occurences of `uri` into `url` in all comments, local variables,
handlebars templates (.hbs) function names and their callers in
all `.js` and `.ts` files.
When there are no operators to narrow down
the search to, pass into `deactivate()` if
we're in `recent conversations`.
If we are, it will go to `all messages`.
This is done by using `is_visible()`
function of `recent_topics_util`.
Removes undefined `time_input` from `invite_users_modal.hbs`.
The default input value for the expiration custom time limit is
not set until the "custom" option is selected from the dropdown.
Removes the undefined `csrf_input` from the same template. And
imports `csrf.ts` into `invite.js` to get the csrf token and
add it to the request data, which is the current pattern used
in other `/web/src` modules.
This commit breaks the cyclic dependency between "topic_list.js"
and "topic_list_data.js".
It achieves this by passing "search_term" generated by the
"get_topic_search_term" function to "topic_list_data.js" directly
through the function call from "topic_list.js".
This commit fixes the alignment of the `search_close` icon on devices
with a width less than $sm_min (576px) by removing a top padding
of 5px and adjusting the position to top 5px from the previous 4px.
Incresase the max number of stream topics shown when not zoomed
into the stream for more topics in the left sidebar to be a max
of 8 unread conversations and 12 when there are unreads.
This commit breaks the cyclic dependency between "top_left_corner.js"
and "unread_ui.js".
It achieves this by shifting the "animate_mention_changes" function
from "unread_ui.js" to "top_left_corner.js".
When a user opens a profile modal, the overlay is clicked
through in responsive mode, which results in unintended button/link
clicks. This commit removes the causing CSS properties
`pointer-events:none;` which was passing pointer-events to other
elements and `pointer-events:all` which is experimental and do no
effect.
This commit toggles the gear_menu on pressing the `g` keyboard hotkey,
if it's already open.
Fixes: #24417.
Co-authored-by: Tim Abbott <tabbott@zulip.com>
On mobile, the tooltip is triggered at the same time when right
sidebar is hidden when user clicks on a user name in the buddy
list. So, `instance.reference` node no longer exists in DOM.
This commit moves the code to select option on pressing "Enter" in
dropdown_keyboard_events as we handle other "keydown" events there.
This change is done for both MultiSelectDropdownListWidget and
DropdownListWidget components.
We also remove the usage of now depreceated "keypress" event with
this change.
This commit updates the code for MultiSelectDropdownListWidget and
DropdownListWidget components to select the first option on pressing
enter when focus is on search input.
Fixes#25024.
This commit renames dropdown_focus_events function in
DropdownListWidget and MultiSelectDropdownListWidget
components to dropdown_keyboard_events, as we will be
adding other keyboard events to select an option in
this function further commits.
Updates `Filter.describe_is_operator` to use switch/case instead
of if/else and adds case for "is:resolved" narrow so that it is
not shown as invalid when used with other search narrow filters.
In commit aa002f5c6d, a handlebars template was created for empty
narrow feed messages, which removed a number of div element ids,
and updated `narrow_banner.show_empty_narrow_message` to first
empty the main empty narrow div of any previous message content.
Removes the helper function for hiding the empty narrow messages
as `narrow_banner.show_empty_narrow_message` should empty the
empty message div of any text before rendering the updated empty
narrow for the new empty narrow banner text.
Also, cleans up a missed instance of 'uri' from commit b22578f
in the same test.
This commit adds a message and link to view or create streams on
empty streams panel. It conditionally renders the message when
there is no stream to show and also when any stream
event (delete,create,subscribe) occurs.
Co-authored-by: Tim Abbott <tabbott@zulip.com>
Fixes#21870.
The dropdown icon for direct messages is partially visible
on small screens. This was due to removing padding when the
screen size is below a certain size by media query.
The intent of the original code appears to have been to remove top
padding, so make the CSS do just that.
The vertical shifts in message body was due to the <p> tags it gets when
converted to markdown. Removing the top margin from the first <p> child
and bottom margin from the last <p> child resolves this issue as due to
those default margins in <p> tags there was vertical shifts in message
body.
Fixes: #21276.
Added type annotations to function parameters, function return
values and local variables. Added neccessary `if` statements to
enforce the objects having proper type before executing the later
operations.
An error type check in the catch block in `update_favicon`
function is added because the statement in the catch block requires
error to be a type `Error` in order to access `error.stack`.
This commit refactors the topic_menu visible check and hide logic,
since we have already migrated the popover from stream_popover.js.
This last bit of code related to topic_menu is also migrated to
popover_menus.js, and the code is refactored to use the new logic,
which is more common for the popover_menus.js system.
To hide the popover, one possible solution could be to use the
hideAll method from TippyJS. However, this could lead to
unintentional behavior for all the popovers. To prevent this, the
hide method is used for the topic_menu only.
This commit removes the use of a separate keyboard handler for
the topic_menu, as we are already using a common keyboard handler
for all Tippy popovers.
This commit migrates the topic_menu popover from stream_popover.js
to popover_menus.js. Since the data required for rendering is large,
it has been moved inside popover_menus_data.js to improve code
readability.
Getting the link of the topic for the clipboardJS inside the onMount
instance was not working with the existing method. To make it easier
to work with, a new attribute, data-clipboard-text, is added to the
'Copy link to topic' anchor tag. This allows the clipboardJS to catch
the URL. The value of data-clipboard-text is sent from popover_menus.js
to the topic_sidebar_actions template.
Fixes: #23891
This is a prep commit for migrating the topic popover to a Tippy
popover.
'elem_to_stream_id' function is used for the topic menu to find the
stream_id of the target topic menu.
In this commit we remove any explicit references to the polyfills and
replace all the color codes to the hsl() format. We also remove any
other redundant code, after testing for any regressions.
In this commit, we move the progress bar styling out of the legacy
bootstrap.css and move it to a dedicated CSS file. This is a step
forward towards the ongoing effort to remove the use of Bootstrap
from the Zulip codebase.
The new CSS file, progress_bar.css, is added to common.ts, since it
is used in both the webapp and portico pages.
Fixes#23628.
Changed the `.enter_sends` css selector for launching tippyjs popover from
`compose.hbs` because it was colliding with `.enter_sends` selector present in
`organization_user_settings_defaults.hbs`.
Before this change when an admin tried to change user realm default setting of
`enter_sends` it was opening a tippyjs popover despite being a checkbox and it
was hitting `/json/settings` endpoint instead of `/json/realm/user_setting_defaults`.
Converted `emoji.js` to TypeScript by adding relevant type definitions,
also modified `target` option in our tsconfig to 'ESNext' so that types
for object methods like `hasOwn` which is being used in `emoji.js` are
included.
This is a prep commit for typescript migration of `emoji.js`. This
commit refactors the code for generating emoji rendering details such
that we avoid writing an ugly code which will involve writing an
incomplete type object when we migrate to TypeScript.
This reverts commit 5f4bdfe6bc (#24630).
This was causing Webpack to trigger type checking with the TypeScript
compiler, which is very expensive.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit increases width of text inputs in settings, stream
settings and user group settings to be 325px, which is the
minimum width of select elements on these pages.
We now add settings_select class to custom field select elements
in "Profile" section and modal_select class to select elements in
"Manage user" modal.
The tooltip of the compose_close_button changes only when something
is typed into the input box. However, the state of the tooltip
remains the same until someone types into the input box again, even
if they close and reopen the compose box.
The function 'expand_compose_box' from 'compose_actions.js' is
called every time the compose box is opened. Since the input field
is emptied every time the compose box is closed, this function is
used to set the default tooltip for the close button. We want it to
say 'Cancel Compose' every time the compose box is opened since the
input field is always going to be empty whenever the compose box
reopens.
There are two different tooltips for compose close button
in compose box. One is when there is no text in the inputbox
that says 'Cancel compose' and if there is text in the inputbox
then it says 'Cancel compose and save draft' however the logic
of these two tooltips was reversed. This commit fixes that.
Created `WidgetConfig` type which has all the parameter that can be
passed launch(). Except html_heading, html_body, and on_click all
other fields are optional. Therefore, removed checking of undefined
mandatory fields as it will be done by typescript.
Co-authored-by: Hardik Dharmani <Ddharmani99@gmail.com>
Refactored some code as well to avoid unneccesaary `undefined`
checks in `overlays`. To be exact created an action_overlay
object of type `Overlay` such that the `reset_state` is just
`action_overlay = undefined` and having attributes like `$element`
and `close_handler`.
This would ensure that if you have an `active_overlay`, there will
be a registered `close handler` attached to it without needing to
write additional checks for `close_handler` just to satisfy type
checker.
TypeScript doesn't understand Array.prototype.slice.call; rather than dealing with the
type-checking issues around it, we remove it; it was only necessary for ancient browsers where
NodeList isn’t directly iterable.
Remove the winjs specific `getScrollbarWidth` property while we're at it;
WinJS isn't relevant anymore.
Reorders methods due to TypeScript files enforcing define-before-use when
this commit was drafted.
When referring to <div id="my-id" class="my-class">:
- my-id is an id
- #my-id is a selector
- my-class is a class name
- .my-class is a selector
When an id or a class name is interpolated into a selector, it needs
to be escaped with CSS.escape.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
We expect the URL to be of stream if it is opened in right panel.
As archiving a stream extracts stream id from hash,
but while a stream is opened and we switch between `All Streams` or
`Subscribed` tabs, the url changes, causing bug in archiving the stream.
As as fix for this issue if a stream is opened in the right
panel the hash of the URL remain of the stream and doesn't update.
If it is archived then the URL updates accordingly.
Fixes#23855.
Cleans up node test to use helper functions when setting a filter
and narrow state for private messages and when checking the return
value for `pm_list_data.get_list_info`.
Also, reduces the number of users in the test by creating more
group direct message conversations.
The logic for whether one needs to scroll down to view messages sent
by the current client was incorrectly not checking whether a message
feed was visible at all.
This replaces one of the our larger remaining blocks of code with
explicit logic for message_lists.home with logic that should correct
if we support maintaining a different set of rendered message lists.
This should have identical behavior to the previous implementation
given that all_rendered_message_lists is either just
message_lists.home or that plus the current narrowed message list;
can_apply_locally() is always true for the home message list, and the
list === message_lists.current check is equivalent to the more complex
narrow_state.active() check.
Because we don't call this function with home_msg_list, I believe the
existing msg_list !== message_lists.current check would have always
been false when the new check is false, but this is more explicit
about the logical intent.
The flex-direction property for modal__content should
be set to column as we want to display the elements.
This does not affect most of the modals since they
do not have multiple direct child elements that are
visible at same time and the data-simplebar attribute
already sets the "flex-direction: column" property to
the elements where it is used.
But in the email address visibility modal on user
registration page, there are multiple direct child
elements for the "modal__content" element and we need
to set "flex-direction: column" property for them to
work correctly. We also change the width of select
element in the modal to "fit-content" to avoid it
taking the whole width even when not required.
This commit also fixes the bug in login_to_access
modal, since the `modal__content` for it also
has two direct child elements.
This PR adds a modal to warn when user unchecks a box on the "PMs,
mentions, and alerts" line of notifications panel that will result in
all notifications for private messages and mentions being disabled.
Fixes#24151.
`topic_row_top = $(topic_row).offset().top;` returns an error
while calling `topic_offset_to_visible_area` since we cannot
find the `topic_row` for some reason which doesn't seem logically
possible but we add logic to handle that case as well.
The compose send button spinner (which disables the send button while
present) was correctly hidden in both the happy case of a sent message
as well as for all locally echoed message, in both cases via
clear_compose_box to reset the compose box for a new message.
But for a message that was not locally echoed, and failed to send,
nothing hid the compose spinner, resulting in the user being unable to
attempt to resend the message.
Disabling the send button was intended to prevent sending the same
message twice in immediate succession via the enter key.
Since a13058223d, this logic duplicates
the compose_spinner_visible check inside finish(), and more
importantly, was not cleaned up correctly if the message fails to send
without having been locally echoed, resulting in the compose box not
allowing you to send further messages after such a failure.
For successfully sent messages, the disabled state was cleared by
clear_compose_box calling check_overflow_text, which unconditionally
sets the disabled state on the send button based on whether the
message is too long.
Rather than try to clean this state up in the right places, remove
this duplicate mechanism for disabling the compose box.
Earlier in recent conversations panel full name
was displayed in group PMs huddle even if the user
was muted.
This commit change the display name of such users to
`Muted Users`.
Previously, the emoji size was fixed to 20px by 20px irrespective of
whether the emojis were inside a heading or not. This looked weird when
a small emoji was rendered next to a large h1 text.
This commit fixes that by setting the emoji height to 1.4em
which proportionately increases the size of the emojis as the text size
increases for different headings.
Fixes#12857
The dropdown-menu for "Who can unsubscribe others" was not wide
enough to fit the options in stream creation form. This commit
fixes it to be wide enough to fit the options like we do in
stream edit form.
The dropdown menu for notification stream, default code block
language, etc. was not looking good for short options due to
width being set to fit-content. This commit adds min-width
property to make them look good for short options as well.
This commit removes the width property for inputs from
bootstrap.css. We have already set the width for the
specific text inputs in previous commits. For other
type of inputs (like checkbox, radio, file, etc.),
there is no need to set the width as they are hidden
or we already set width for them.
This is a part of bootstrap removal project.
This commit adds width property CSS rule for text inputs in
integrations_dev_panel.css to 206px, as we are going to remove
the bootstrap CSS rule which sets width in further commits.
This commit adds width property CSS rule for text inputs
in billing.css to 206px, as we are going to remove the
bootstrap CSS rule which sets width to 206px in further
commits.
This commit adds width property CSS rule for text
inputs in activity.css to 206px, as we are going to
remove the bootstrap CSS rule which sets width to
206px in further commits.
This commit adds CSS to set width of text inputs in
poll and todo widgets to 206px as we will be removing
the bootstrap CSS rule which sets width of inputs to
206px in further commits.
This commit adds width property to CSS for "#inline_topic_edit"
element in zulip.css to set it to 206px, as we will be removing
the bootstrap CSS for it in further commits.
This commit adds settings_text_input class to text inputs in
settings, stream settings and user group settings pages. This
class is used to set the width of inputs to 206px, as we will
be removing the boostrap rule which sets width of the input
in further commits.
This commit adds modal_text_input class to text inputs
in modals to set width of them as set by bootstrap.
This class is used to set the width of inputs to 206px,
as we will be removing the boostrap rule which sets width
of the input in further commits.
This commit increases the width of url field, displayed for
custom external account type fields, in edit profile field
form. The width of the input is increased as urls are generally
long enough and did not fit in the width set previously in most
cases. We increase the width to match the width in add custom
profile field form.
This commit converts "portico/team.js" to TypeScript as well
as adds the required type definitions.
Some values were extracted into variables for type-checking.
The `tab_name` parameter is supposed to ensure that if you're looking
at a tab for repository that's not zulip/zulip, that the GitHub links
for authors without an associated GitHub username goes to the commits
for that repository.
This also fixes the color on these icons in the stream-specific rows
of the notification settings table.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
For some reason, browser is treating clicking on the button as
submitting the form, which results in the page getting redirected
to the same page with an additional empty query `?` in the URL.
In previous commits, we updated the realm creation flow to show
the realm name, type and subdomain fields in the first form
when asking for the email of the user. This commit updates the
user registration form to show the already filled realm details
as non-editable text and there is also a button to edit the
realm details before registration.
We also update the sub-heading for user registration form as
mentioned in the issue.
Fixes part of #24307.
We now show inputs for realm details like name, type and URL
in the create_realm.html template opened for "/new" url and
these information will be stored in PreregistrationRealm
objects in further commits.
We add a new class RealmDetailsForm in forms.py for this
such that it is used as a base class for RealmCreationForm
and we define RealmDetailsForm such that we can use it as
a subclass for RegistrationForm as well to avoid duplication.
This commit updates the ID for form element in create_realm.html
to "create_realm" as we would need to update the error handling
for this page in further commits and we do not want to break it
for other forms using "send_confirm" as ID.
Uptil now, 1 new line was added before and 1 after a quoted message. Now
for more breathing room around a quoted message, new lines are inserted
to space it from any content before and after by at least 2 new lines.
Fixes: #23608.
Forms using upload widget were using the
same css for image preview.
We fix this by assigning a class to the
widget and applying specific styles to it.
Previously, there is a bug where the position of the typeahead is off
whenever the user switches from stream typeahead to topic typeahead
in the compose box. The typeahead header was not hidden before
calculation of the position based on container height. These changes
will include the header before calculating for the position.
Previously this was only available on the upgrade page - meaning an
organization that already bought a plan wouldn't be able to request a
sponsorship to get a discount or such, even if qualified.
Added a width for the Change Email and Password dialogs at
sm_min (576px) and ml_min (425px) to make them more responsive
on narrow screens.
Fixes: #24339.
This bug made it impossible to scrub realms where the string_id was a
number, e.g. 123.zulipchat.com because
confirmed_string_id === actual_string_id comparison failed due to one
being a string and the other a number.
Per http://api.jquery.com/data/#data-html5:
Every attempt is made to convert the attribute's string value to a
JavaScript value (this includes booleans, numbers, objects, arrays, and
null).
To retrieve a data-* attribute value as an unconverted string, use the
attr() method.
postcss-preset-env transpiles this back as necessary. (It does a
better job than we did, in fact: we had several four-argument hsl()
calls that should have been hsla().)
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This adds a new search icon which we prefer over the one made
available from bootstrap, and replaces search icons in navbar
search with the Ionic icon.
Changed the id name of the <i></i> tag to user_profile_edit_button_icon
in the user profile modal, as earlier it was edit-button, which is too
vague of a selector name.
Close user profile modal on clicking the space around edit button, by
calling hide_user_profile() on clicking the hover box around the edit
button.
Also, modified the hover box to center around the edit button.
Some well-intentioned adblockers also block Sentry client-side error
reporting. Provide an endpoint on the Zulip server which forwards to
the Sentry server, so that these requests are not blocked.
Added condition for when a user clicks anywhere in a typeahead menu, be
it the header or empty space at the top and bottom, to not collapse the
compose box.
This fixes the bug where clicking anywhere on the typeahead except the
options would result in the compose box collapsing, but the typeahead
menu staying open and still working (on selecting a option in this state,
it would be inserted at the start, as visible on reopening the compose box).
The localstorage machinery can fail for totally arbitrary reasons,
including filesystem breakages on the part of the client, or
capricious access control.
Wrap accesses to localstorage with try/catch blocks to do our best,
but continue execution in the event that the localstorage API errors
out; it is better to continue with the rest of our intended actions
than get hung up on those failures.
This improves the error message captured, from the mildly inscrutable
"Non-Error promise rejection captured with keys: currentTarget,
isTrusted, target, type".
We have the information about all of these failures from the server
side, and Sentry groups all 5xx failures together with no stacktrace,
which makes them very difficult to get signal out of.
The CSS for our first Tippy popover, actions_popover, incorrectly did
not split the CSS that is meant to be applied to all popovers from
that CSS that is only for that specific popover.
Reorganize this with some clarifying comments.
Safari denies user from playing audio without an interactive
trigger like a button by default. So, when user received a
notification in Zulip via Safari, it triggers an error when
trying to play the notification sound.
Our goal for this commit is to simply handle the error.
When marking an unread topic as read with `unread` filter selected,
we don't need to move user a row down since removing the selected row
will automatically move the user down.
Without this, the user goes down twice which is not intended.
Removed a redundant call to bootstrap typeahead's `lookup` function when
the `automated` function returns true, which was causing the streams
typeahead to show up briefly before the topic typeahead on pressing `>`
immediately after a stream name.
When we converted the change email form to a dialog widget modal,
in commit f43d3b9986, the page_params value for delivery email
that was being referenced in the handlebars template
`change_email_modal.hbs` was not set, so instead an empty string
was the initial input value. Because the email change dialog
widget post_render callback sets the input value to the same
delivery email, the fact that the email was not being set when
the template was initially rendered was not noticable.
Passes the page_params.delivery_email to the html parameter in
dialog_widget.launch so that the template has the initial value
set when the form is initially rendered. Removes the now redundant
post_render callback, which resets the initial input value to the
same delivery email.
When the password change form was converted to a dialog widget
modal, in commit f5fbf5f0e0, the page_params values for
password_min_length and password_min_guesses that were referenced
in the handlebars template `dialog_change_password.hbs` had no
value to set, which meant the password quality bar was no longer
checking the input value against those organization settings.
Passes the page_params values for password_min_length and
password_min_guesses to the html parameter in dialog_widet.launch
for the password change modal so that those values are available
and set when the template is rendered.
The previous hide-date CSS class had a semantic meaning of "this
recipient row has the same date as the previous one"; since we're now
having logic read that value, it's worth giving it a semantic name
that makes that code easier to understand.
Previously, when a user view the message source of a message at the
very top with the blue box around, the tooltip for the button will
be partially hidden by the recipient bar. Ths cause is some legacy
CSS from, for example, 3cd33c0fea,
which increased the z-index for the bodies of selected messages.
The intent of that code appeared to be something around handling overlaps
between unread indicators and the blue selected message box. It's logically
incorrect, and testing demonstrates that the blue box works fine next to unread
messages without this change, so we can safely remove these z-index values.
webpack-dev-server 4.12.0 introduced a global handler that shows a
full-screen overlay for all runtime errors, but it’s redundant with
our blueslip_stacktrace handler and less functional at this time.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit adds a period ('.') at the end of the default banner
in the narrow empty search for multiple filters. This is required
to maintain consistency among all banners, as for most banners, we
use punctuation at the end of the banner to create complete and
meaningful sentences.
This commit improves the display of the narrow banner when there are
multiple filters used in a narrow search and no results are found.
The banner will now only display the title 'No search results'
The node tests have been updated to reflect this change.
Removing browser_history.js import in overlays.js
helps to completely solve the dependency cycle issue for
importing dialog_widget.js in upload_widget.ts in PR #24426.
Removed the only use of browser_history in overlays.js
which was 'browser_history.exit_overlay()'cin open_settings
function by defining open_settings_overlay function in settings.js
and calling 'browser_history.exit_overlay()' in settings.js.
also removed overlays.js import in admin.js as the only use of
overlays was to call open_settings function which is now shifted
to settings.js and is called as settings.open_settings_overlay.
Moved the initialize function in popover.js at end of file to
follow 'no-use-before-define' for function 'hide_all' being called
in initialize function and to follow convention to put
initialize at the end of the file.
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>
Aman Agrawal
N-Shar-ma
Lakshay Mittal
Mateusz Mandera
Ujjawal Modi
Elizabeth Funk
Tim Abbott
AcKindle3
Lauryn Menard
sbansal1999
Hardik Dharmani
brijsiyag
Deekshith S Shetty
Ujjawal Modi
Sahil Batra
atharmohammad
xoldyckk
palashb01
Ishita Gupta
Anders Kaseorg
Lalit
Alex Vandiver
human
aparna-bhatt
evykassirer
nzai
Daniil Fadeev
Pranav2612000
Karl Stolley
Sahil Singh
Joelute
Ganesh Pawar
YashRE42
SameepAher
David Rosa
Joseph Ho
Zixuan James Li
Abhijeet Prasad Bodas
Prakhar Pratyush
Alya Abbott
Steve Gattuso
Akarsh Jain
Manas Jayaswal
Haridarshan Choudhary
Trident Pancake
Ilikepizza2
Daniil Fadeev
m-e-l-u-h-a-n