Renames the class name in `web/src/unread.js` from `UnreadPMCounter`
to `UnreadDirectMessageCounter` and renames the associated instance
of `unread_pm_counter` to `unread_direct_message_counter`.
This was missed in #26005. The user popover button does not appear
for bot users. We complete the TODO here and simplify the
calculation for show_manage_menu so that we always show it if not in
spectator view and not showing the popover for self.
This commit changes a few things:
* Using `scrollHeight` instead of `offsetHeight`, which explicitly
also measures content not visible on the screen due to overflow.
* Measures the height of `.message_content` which is the div with
the full message height.
* Only resizes messages that are visible on the screen, i.e. only
those in `message_lists.current`.
This traverses the DOM to the <pre> element containing the
copyable material of interest.
The button is attached to the .codehilite element to ensure
that the button does not move with horizontally-scrolling
code content that exceeds the width of the content column,
as happens frequently at mobile scales or for very long
lines of content.
Fixes#26093.
The `tabbed_instructions` widget used for both language toggles in our
API documentation and app toggles in our Help Center documentation
misleadingly calls the identifier for the tab `language` in local
variables and its interface.
- Renames local variables `language` -> `tab_key`.
- Renames HTML data attributes `data-language` -> `data-tab-key`.
Fixes#24669.
This commit removes settings_text_input class from url type inputs
and we instead add the width property to settings_url_input.
Note that we might instead have a single class for all type of inputs
instead of having different classes for url, password and text type
inputs in further commits.
We remove the modal_text_input class from password and url type inputs
in modals and add the width property CSS to modal_password_input and
modal_url_input instead.
Note that we might instead have a single class for all type of inputs
instead of having different classes for url, password and text type
inputs in further commits.
We use url type inputs in the add and edit custom field modals
and also to show the url type custom fields in "Profile" panel
and "Manage user" modal.
This commit re-adds the bootstrap CSS rules to these specific
input elements using modal_url_input and settings_url_input
class and thus removes the CSS for url type inputs from
bootstrap.css.
We might replace the new class added here with a common class
for all type of inputs in further commits.
We use email type inputs only in portico pages and
the bootstrap CSS is already overridden by CSS
defined in portico_signin.css. Only outline property
was being applied by bootstrap on focusing the input
which has been added to CSS in portico_signin.css in
the previous commit as password and email type inputs
have common CSS.
Thus, we can remove the bootstrap CSS for email type
inputs safely.
We use password type inputs for API key and password
change modal in the main app and in login, register
and password reset pages.
For the portico pages, i.e. login, register and
password reset pages, the bootstrap CSS is already
overridden by our custom CSS defined in
portico_signin.css and some of the CSS added by
bootstrap is redundant. Only outline property was
being applied by bootstrap on focusing the input
which has been added to CSS in portico_signin.css
in this commit.
For the inputs used in app, i.e. API key and password
change modal, we have already added the CSS rules of
Bootstrap using "modal_password_input" class.
Thus, we can remove the CSS for password type inputs
from bootstrap.css.
This commit adds specific CSS styles from bootstrap to password
type inputs in modals using modal_password_input class. This
change helps us in removing the bootstrap CSS for password type
inputs in further commits.
We might replace the new added class with a single class which
will be used for all type of inputs in further commits.
The "pull-left" class was used for hidden file type input
in compose_control_buttons.hbs and in the copy code button
in codeblocks. It was only used to set the float property
in CSS, but we do not need to set it and removing it does
not make any change in the position of these elements.
So, this commit removes the pull-left class and its CSS
from bootstrap.css as well.
For the file type input, it is already hidden and after
removing the float property also, it is positioned at the
same place due to ordering of elements in HTML.
For the copy code button in codeblocks, it is postioned
using "position" and "right" attributes and removing
"float" property has no effect.
We use pull-right class for copy button with the multi-use
invite link only and this commit adds CSS for that specific
element. This commit then removes the bootstrap CSS for
pull-right class and also removes pull-right class from the
copy button since it is no longer required.
This commit adds the required bootstrap CSS rules for fieldset
elements to the specific selector in portico_signin.css and
removes the CSS from bootstrap.css.
We use input-block-level class only for search input
and this commit adds the required bootstrap rules for
it to the specific elements in search.css. So, we can
safely remove the CSS defined for this class in
bootstrap.css.
In commit #25837, we added in a check for the user's mark as read
policy in the frontend for `by_topic` and `by_recipient` narrowing.
In that change, the assumption was that for both functions, it was
sufficient to check only for whether the user policy was to never
mark as read.
But because the `by_recipient` function may narrow to an interleaved
stream view, it is possible that message will be marked as read
when the user did not expect it to be (e.g. they marked all the
messages in a topic narrow as unread and then used the `S` key
shortcut to navigate back to the stream view) when they have
conversation views only as their mark as read policy.
Here we move the check for the user's mark as read policy to be in
the two cases for `by_recipient` so that the mark as read behavior
here matches the user's setting.
This commit introduces a seperate `page_params` file for billing module
since we only use certain page_params in billing module only that it does
not make sense to include them in the main `page_params.ts`.
Also introduced `zpage_billing_params` for proper testing new `page_params`
in billing module.
The `initialize` function registers a click handler, and
previously it was being registered another time each time
one of these calls to `initialize()` happened. The only
other thing that happens in `initialize` is a call to
`render_title_area`, so this commit replaces the extra
calls to initialize with that.
This commit remove the Saving/Saved notices when editing the stream
name and/or description. Instead, it replaces the "Save changes" button
with a spinner while the changes are being saved.
Fixes#24535.
This commit fixes an issue where the button height increases while
it has the spinner on modals with long text on the submit button. The
issue occurred due to the button height being calculated after hiding
the span element, which resulted in an incorrect height. To overcome
this, the commit suggests computing the span element's height before
hiding it to ensure that the button height is accurately set.
Previously, we used to have top and bottom paddings of 4px to
the select elements but it was removed in a208da9c4d to make
sure that text for the selected option is aligned properly.
All other select elements have height set to 30px, but the
select elements in stream settings page had height set to
"fit-content" and so they looked ugly after removing the
padding.
This commit sets the height of select elements in stream
settings to 30px.
Refactored `recipient` family of variables to better names like
`recipient_ids` which also aligns with the type of these variables.
Also, refactored `typing_status.test.js` to use array of user ids
instead of string names like `alice` and `bob` to stay consistent with
the actual type of these parameters.
fields set.
This commit refactors the `state` object to either be null or has all
the fields set at the same time because they are note really decoupled.
This helps us to clean our code a little bit as well as makes it easier
to migrate this module to TypeScript.
This commit cuts the dependency on `compose.js` module for
`compose_actions.js` module by introducing a hook system for
registering different hooks from external modules.
This commit adds a "Followed topics" row to the 'Notification Triggers'
table in the 'Personal settings > Notifications' panel and the
'Organization settings > Default user settings' panel.
This adds support to control email, push, wildcard mention,
visual desktop, and audible desktop notifications for messages
sent to followed topics by toggling corresponding global
notification settings.
The "Followed topics" row is available in the development
environment only.
Removed the HTML title tooltip from Reactivate bot button as it was
not adding any new infromation to the button.
Converted all other tooltips in bot profile card to Tippy tooltips.
Fixes#25977.
Previously, the HTML structure of unread banners continued to utilize the
old stylings. We are currently in the process of simplifing both the
compose banner and unread banner stylings into one. These change will
update the HTML structure to be the same as the compose banner and use
the new stylings.
Previously, we have duplicate stylings in compose banner and unread banner.
This is rather messy and creates a lot of styling rules. We should define
an abstraction for them. This change will rename compose_banner
to main-view-banner.
Previously, we have duplicate stylings in compose banner and unread banner.
This is rather messy and creates a lot of styling rules. We should define
an abstraction for them. This change will rename compose_banner_action_button
to main-view-banner-action-button.
Previously, we have duplicate stylings in compose banner and unread banner.
This is rather messy and creates a lot of styling rules. We should define
an abstraction for them. This change will rename compose_banner_close_button
to main-view-banner-close-button.
Added a copy-to-clipboard button to the code blocks in the API and
Help Center docs. Previously, copying code from the docs required
manual copying, which was cumbersome.
Used the same copy-to-clipboard svg icon as the one used in
web/src but manually created the button within the js function instead
of using a template. Updated the pre CSS element to have relative
positioning and gave the copy-codeblock element absolute positioning
to ensure the button stayed in the top-right corner.
Fixes#25726.
These changes appear to correct the keyboard-navigation repro
from #25907, and it makes it possible for users without the
permission to create streams to exit the streams modal by
hitting Esc.
This reorganizes logic within the Tippy `onShow` method to
ensure that nothing is set or called for those users without
stream-creation privileges.
These changes probably require broader testing to determine
whether the fix addresses only that specific reproducer, or
the broader problems #25907 addresses with malfunctioning
j, k, Esc, and Return keys (when Ctrl + Return to send is
enabled).
Fixes a part of #25907.
This commit darkens the text-message color in the light theme
to the HSL equivalent of a dark gray (#262626).
This is the first time in the Zulip codebase where one CSS
custom property is set to another: the dark theme preserves
its use of `--color-text-default` in this way, but can be
adjusted independently of the reset of the theme in the future
by setting a different color value on
`--color-text-message-default`. Related reading on this
technique:
https://css-tricks.com/a-complete-guide-to-custom-properties/#aa-properties-as-properties
Fixes a part of #22022.
We need to call `rerender_ui` once on the initial page load, hence we
need to initialize `starred_message` module and call `rerender_ui`
together.
Fixes#25935.
This in-progress feature was started in 2018 and hasn't
been worked on much since. It's already in a broken state,
which makes it hard to iterate on the existing search bar
since it's hard to know how those changes will affect search
pills.
We do still want to add search pills eventually, and when
we work on that, we can refer to this diff to readd the
changes back.
This commit revamps the invite type section of the "Invite user" modal
to provide a more intuitive user experience. The section now includes a
radio button option with two choices: "Send an email" and "Generate an
invite link." The email input box is hidden when the "Generate an invite
link" option is selected.
Fixes#24692.
The theory here is that we should prefer to give component callbacks a
simple interface relative to what happened in the component, rather
than a simple implementation relative to what the parent context will
do with that information. Components should be designed to support
being embedded in many possible contexts, including unit tests and
Storybook pages. We’re nowhere near that future but we might as well
take steps in that direction.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Undo a debugging commit
db5f39c506 (#21476) that was made to
help diagnose the issue eventually fixed in commit
6242602276 (#22728). Also remove an
unnecessary mutable variable.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Previously, if the drafts modal was open in two different tabs and
if the user deletes one or more drafts in one tab, then the count of
drafts wouldn't get updated on the other tab.
The right long-term fix likely involves moving drafts from local storage to
the cloud. But we can greatly reduce the impact of the bug by updating the count
whenever the overlay is opened or closed.
It was throwing error while schudiling a message having wildcard mention,
because the function `open_send_later_menu` was using param instance to track down
interval, but the parametere instance was not passed from when it was
called from warning banner action. This commit removes the instance
param as it is of no use, and uses a variable to track interval.
* Remove `box-sizing` and `min-width` properties which have no
effect on `inline` positioned element. Modified class selector to
add `span` which reflects this while reading the CSS.
* Remove `2px` vertical padding and `line-height` which combined
are fighting for space??
If the stream settings is open but the stream which was
subscribed/unsubscribed wasn't open (say user unsubscribed
from a different tab), `$settings_button` would
be `undefined` here.
Since we want the same space in recent topics to display the
compose box without overlapping with any other topics, it makes
sense to use a common variable.
Othwersie, compose banner will overlap with any breadcrumbs
we have below the last message when user is fully scrolled up
and compose is at max-height.
This ensures that the click event on the mobile `+` button for
showing the compose tooltip is registered on a different element
from the tooltip for showing the `C` shortcut menu.
In commit a93598c22e, we removed, in `narrow.by_topic` and
`narrow_by_recipient`, calls to `unread_ops.notify_server_message_read`
because that would have marked messages as read for users who had
set their preference in the web-app to never mark messages as read.
We add those calls back now, but with a check for that user setting.
This allows the recipient box to take 100% of the available
horizontal space, up to 175px. The effect is that the
compose-box buttons are available to users at mobile scales
(viewports of 400px wide or less).
Commit 903dbda79b (#25370) introduced a
cross-site scripting vulnerability in the tooltips for the stream and
topic in the recipient bar. An attacker who can send messages could
maliciously craft a topic for the message, such that a victim who
hovers the tooltip for that topic in their message feed triggers
execution of JavaScript code controlled by the attacker.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit fixes the vertical alignment of "x" button in the
alert to be more closer to the center. We can still improve it
by probably using something like flexbox layout instead of
hard coding paddings or margins.
We were not showing the error, if any, when resolving and
unresolving the topic using topic popover in left sidebar
or using the banner in compose box. This commit adds code
to show the error in the message feed where we show other
errors like connection error, etc.
This moves selection of the correct input box / textarea to
a `on_hidden_callback` of dropdown widget, which also allows us
to just simplify `on_compose_select_recipient_update` to only
call `switch_message_type` when necessary so that it doesn't
interfere with setting focus.
Fixes#25779
We move the simplebar scroll on the right sidebar to a little left
when there is an overlay scrollbar present so that user can drag
either of them.
It is unusal to use a hack to close overlays when there is a method
to do it.
This fixes a bug where user is unable to scroll message feed
after opening an overlay and then using browser back button.
This could have easily cause other bugs too.
This fixes a bug where reducing the height of the window, reduces
the size of textarea and doesn't instroduce scrollbars, making
the textarea not scrollable.
This commit adds a long hover delay [750,20] to recipient bar icons.
Doing this prevents the situation when the tippy tooltips are left
floating when the icons suddenly disappear as you enter the topics
according to the organization settings and the references are removed.
Adding an additional delay ensures that the icons disappear and then
the tooltips appear.
When overlay / modal is displayed, scrollbar is hidden due to
the disabled scrolling on `html`. Reduce width of fixed elements
that will be visible in background and `html` so that they don't
occupy that extra space.
Also, I was over-thinking how we can get the scrollbar width. The
moment we allowed scrolling on `html`, it was easy to get the
scrollbar width.
This fix prevents the active-message outline from being obscured
under certain conditions, such as when setting a browser to zoom
out at 90% or less.
Suggested-by: Anders Kaseorg <anders@zulip.com>
Setting empty hash `#` scrolls user to the top of message feed if
done via `window.location.hash` or using browser back / forward button.
To avoid this, we set don't set `hash` after org URL for default view
when user uses `escape` key or clicks on org logo.
In other situations, we explicitly set the hash of the view.
When creating new streams or groups, open up user card when
a user's name is clicked on. This behavior now matches
other settings tables elsewhere.
Fixes#25725.
The JavaScript engine used by zulip-mobile on Android is still some
four years out of date, apparently.
This reverts commit a3d6c47b7d (#25734)
and part of commit 54f90e41c0 (#25554).
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit keeps the height of the dropdown consistent, even when
it's adjacent a multiline collection of pills in a group DM.
It also keeps the righthand buttons and narrows top-aligned, too.
Additional markup and CSS ensures that the < marker always stays
vertically centered with respect to the dropdown.
While this commit achieves what the subject advertises (fixing the
input box's height to match the recipient drop-down), but it does
so by relying heavily on flexbox's behavior to manage the height
of the elements and vertical centering, where necessary, rather
than positioning hacks or vertical padding.
This commit also removes some additional styles that do not make
sense (e.g., `min-width: 0`) or that need not be set.
This commit will enable us to use the API we developed for Tippy
popovers, allowing us to integrate them into any external modules
that require a Tippy popover.
This avoids a bug where during a browser initiated hashchange
(via back/forward/manually typed URL) browser sets the scroll
position of the current hash based on its memory of the scroll
position of the new hash.
This commit addresses the issue of relying on `compose_state` for
retrieving the `stream_id` to display warning banners. Previously,
warnings were shown for syntax in the message edit box based on
whether that syntax would trigger a warning for the draft content (if
any) currently in the compose box.
We fix this by using a new `get_stream_id_for_textarea` function to
obtain the correct `stream_id` value for the check being done.
Fixes: #25410.
Previously, hovering over the disabled subscribe button
would not display any tooltip due to an undefined object
being passed to the function that created the tooltip.
Animating `box-shadow` and `top` is slow since the browser
drops frames when animating them. We can fix it by using `will-change`
property but it is just better to not animate them and instead
use transform.
zulip-mobile currently requires Android ≥ 7 and iOS ≥ 14, both of
which support replaceAll. The code change was in commit
54f90e41c0 (#25554).
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Previously, if the user closes the settings modal by pressing
the "Esc" key and if any date-pickers were open then they would
remain on the screen. This commit fixes that and now date-pickers
are closed when the settings modal is closed.
Also added a puppeteer test to verify the said behavior.
Fixes part of #25097.
The nav bar's bottom border was being hidden by the search
bar. This makes the search bar slightly less high to fix this
issue.
Soon this code will be replaced with the changes in #24345.
This just ensures that the mention-pill color selectors are children
of `rendered_markdown`, which class appears both in the message-
preview area as well as individual message rows.
Fixes#25720.
This commit adds bootstrap CSS rules for number type inputs
in billing and upgrade page to billing.css as we will be
removing them from bootstrap.css in further commits.
This commit adds bootstrap CSS rules for number type inputs
in activity page to activity.css as we will be removing them
from bootstrap.css in further commits.
We use "submit" type inputs in dev login page. Only "cursor"
CSS was applied to those elements from bootstrap and this
commit adds it to those elements in portico_signin.css and
removes the CSS in bootstrap.css and bootstrap-btn.css.
We use "input-xxlarge" class for search box in activity
support page only. This commit adds the width property
in activity.css for the search box and rest of the CSS
applied using this class was redundant and can be removed
safely.
We had the `3px 0 1px` padding before migration to use grid,
then I switched it to use `4px 0 1px` since we were planning to
use blue box border which seemed to have helped that case.
Since we switched to using outline for blue box, it makes sense
to just use equal padding.
Backend incorrectly renders @everyone and @stream as `user-mention`
while they are clearly `group_mention`. To fix this, we use
`data-user-id` property of @everyone and @stream which are
set to `*` for them.
Removed the sorting functions which were sorting under the assumption that
our comparison items were a list instead I used the generic sort functions
functionality of our `list_widget` module.