The most notable change here is that when you are adding
subscribers to a stream as part of creating the stream,
you can now use the same essential pill-based UI for
adding users as we do when you edit subscribers for an
existing stream.
We don't try to exactly mimic the edit-stream UI or
implementation, since when you are adding subscribers
during create-stream, we are just updating a list in
memory, whereas in the edit-stream UI, we immediately
send info to the server.
Fixes#20499
The effective date on the DPA should have been February 7, because we
didn't actually update the zulip.com website until that day.
(This commit was added to the internal zulip.com branch during
deployment of the last DPA update, so users always saw the correct
information).
This unfortunately requires somewhat ugly duplicated code, but I think
it's the best option for now.
I expect we will somewhat soon work on the transition to no longer
have two duplicate fetches here, and doing so will let us remove this
secondary code path.
Fixes#21304.
I made the header sections above all our settings
panel lists more consistent.
Before this change:
* some lists had titles, others didn't
* the placement of the filter box was random
* alerts strangely went between the filter box
and the list
* filter boxes were too large
* CSS was haphazard
* forms were squished against tables
Now all the settings with list have consistent
HTML, CSS, and look-and-feel in the area directly above
their list of items.
With the exception of Custom Profile Fields, all the
lists with headers above them happen to be based on
ListWidget, but the header styling is not coupled
to ListWidget, because we want consistent headers
even if Custom Profile Fields has a non-ListWidget
list (due to its drag&drop features).
Previously, this had different hover behavior from the adjacent
elements, which seems like a bug.
The CSS for this component is shared with Recent Topics; we migrate
the styling for on_hover_topic_read for consistency.
Fixes#21273.
Because Zulip Mobile supports some older iOS browser versions that
don't have replaceAll support yet, and mobile is averse to doing the
infrastructure work required to add a, polyfill we avoid using them in
the shared module for now.
See https://caniuse.com/mdn-javascript_builtins_string_replaceall
Prefer a regexp match over using String#replace to strip expected
prefixes and suffixes because (a) it implicitly verifies that the
input has the expected format and (b) it won’t unexpectedly strip from
the middle of the string.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
You generally only need to type a few characters to filter
down to just a few folks, even in gigantic realms.
I tried not to make it **too** small, just in case, but
the default width was kind of gaudy.
The header was more confusing than helpful, and we
want the create-stream UI to be less cluttered.
We don't really need the help-center text here, since
we already have ? icons next to the relevant headings
for the sub-sections.
We kill off some CSS, but we won't kill off stream-title
until the big upcoming changes for stream pills.
Muted streams are now greyed out in the personal settings,
also changes to the notification settings of a muted stream are
not possible anymore.
Also, add a bell-slash icon after the stream name of muted streams,
clicking on it unmutes the stream.
Fixes#19780.
Previously, updating the UI when streams are muted was split between
two places: The server_events.js code path, which updated the checkbox
state and other parts of the app, and checkbox click handler, which
toggled the disabling of the notification settings checkboxes.
Move these to all live in a single place.
With the recent changes to lightbox image handling in #21145 and #20788
it is no longer necessary to have panning and zooming disabled by
default. This commit removes the enable/disable button and instead
replaces it with a "Reset Image" button, and enables panning and zooming
as the default state of the lightbox.
This commit attempts to prevent images with long filenames,
descriptions, or author names displayed in the lightbox from altering
the layout of the page.
It also adds a title prop to both the filename and author, allowing a
user to hover and see a tooltip of the full text in the case where the
text is truncated.
Fixes#21058.
Make the unread marker lines at the side of messages continuous by
adding "height: 100%" to ".unread-marker".
This provides a nicer visual experience by not highlighting the
boundaries between messages. (One can see that information using the
timestamps or by moving the selection cursor, where appropriate).
Fixes#20981.
Hides 'disable' button of any kind when nothing is selected
in dropdown list widgets by removing ':enabled' selector from
the button, the button is not actually a button, it's an <a> tag which
doesn't support "disabled" attribute.
Fixes part of #20831.
We use Label as the heading for the field label column in the custom profile
fields table; but for some reason the edit UI called this "Name" instead.
Fixes#21260.
It's 2022 and the WHATWG no longer recognizes the term URI. Everything
is now a URL or a type of URL. Which is great because it's way less
confusing. Details here:
https://url.spec.whatwg.org/
Moves hash_util.by_stream_uri and hash_util.by_stream_topic_uri to
internal_url so they can be used by external codebases. Due to these
functions being called in many places in the web codebase, wrappers
for both functions are left in hash_util in order to keep these
calls simple.
Also adds test for explicitly testing each function.
Move hash_util.encode_stream_id to internal_url, so it can be shared
with external codebases. Also add a test that explicitly tests escaping
special characters in stream names.
Move stream_data.id_to_slug to internal_url, making it shareable. The
function has been renamed to stream_id_to_slug to reflect that it
operates on a stream id.
Moves the encodeHashComponent and decodeHashComponent functions out of
hash_util and into internal_url which belongs to shared. This is to
accommodate sharing of this code with mobile or any other codebases that
do not wish to duplicate logic.
In order to accommodate the sharing of hash_util with other codebases
including mobile, UI and web specific code should be removed. In this
commit, we remove exception handling for the decodeHashComponent
function and instead add the UI handling of it further up the call
stack.
The stream_data.id_to_slug and stream_data.name_to_slug
functions mistakenly used Javascript's String.replace method,
this commit changes it to use String.replaceAll, the result
being slugs generated from streams with names greater than
2 words are now properly formatted.
An attacker could maliciously craft a full name for their account and
send messages to a topic with several participants; a victim who then
opens an overflow tooltip including this full name on the recent
topics page could trigger execution of JavaScript code controlled by
the attacker.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Inherit uses the settings of the parent element; we actually want to
just undo the `display: none` we'd set for this CSS property, which is
what revert is for.
The previous `display: unset` logic didn't work with dividers in the
gear menu. This new version should be correct -- what we want to do
here is just override the `display: none` default for this class, not
revert to the default browser styling for that element type.
In open_edit_form, we had an initialization order bug where we called
set_up_external_account_field_edit_form, which clears the field name
field if the external account is of the "custom" type, after
populating the initial values for edit form.
This resulted in these fields being displayed as empty in the UI for
this field type. Fix the issue by reordering the initialization.
Fixes: #21262.
This reverts commit f3964673e7.
It broke drafts_scroll by confusing jQuery object APIs with DOM
element APIs.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This should increase its visual priority in the UI. We plan to move
"Private messages" to a different component more similar to STREAMS
soon.
Fixes#20869.
This commit removes the unnecessary `data-list-widget` attribute
present in the <div> and <tbody> tag for muted_topics and muted_users table.
It became unnecessary/useless in 19cf6d0e04 and
then was renamed while still useless.
Also uses the correct variable name `muted_topic` and `muted_user`
instead of `muted_topics` and `muted_users` to render a item of their list
in DOM through Listwidget.
This changes the method of rendering list of alert words in DOM,
earlier it was rendered using 'for' loop over the array of alert_words
which is now changed to render using ListWidget, which gets a array
of objects from get_word_list() in alert_words.js.
The use of ListWidget helps to define a parent_container and $container
in table-body of alert-words-table using which we can now apply sorting over
alert words with the help of handle_sort() function in list_widget.js
Changed the method of adding alert_word_settings_item row in table body
through {{#with}} loop because of rendering through ListWidget, which was done
earlier using for loop over each alert-word in while rendering the list.
this commit also mocks template of render_alert_word_item
while mocking ListWidget.create() function in render_alert_words_ui().
and checks that ListWidget.create() is not called when variable `loaded`
is set as false.
Fixes#21142.
We follow how other apps present older messages, e.g. Gmail,
Facebook Messenger, etc. display it.
Specifically, the logic we use is:
If the time is <24hr ago, show an absolute time, like "21:30" (or "9:30pm").
Otherwise, show what day it was, and not a time
If the day was yesterday, say "Yesterday".
Otherwise, if it was <7 days ago, say the day of week, like "Friday".
Otherwise, if it was <1 year ago, say the month and day, like "Sep 6".
Otherwise, say the year, month, and day, like "Sep 9, 2020".
With some tweaks from Tim Abbott to better handle the future case.
Fixes#19775
Previously, update_user_data was called when deactivating
bots, but it was removed in 58b612a4f0.
Now, update_user_data is only called for 'type="realm", op="update"'
events, but these events are not sent when deactivating or
reactivating a user or bot, so this code is not used.
This commit changes the code to call update_view_on_deactivate function
from server_events_dispatch.js on receiving the user/bot remove event
instead of having it repeatedly in the success_continuation method
of click handlers.
We also add check to make sure we return early if the relevant settings
page is not opened yet.
This commit adds a width of 10px to fa-square and fa-check-square
icons in recent-topics table, so that on toggling between these icons
we can prevent the change in width of the whole button to make it look
good visually.
This commit adds option to deactivate user to "Manage user" modal.
A modal is opened on clicking the option to confirm the deactivation
and the "Manage user" modal is closed.
The error from the server, if any, is shown in the modal itself
and in case deactivation is done successfully, the modal is closed.
Fixes#18944.
We pass handle_confirm function as an argument to confirm_deactivation
because we will use confirm_deactivation to deactivate the user from
user-info popover and the popover case will have a different handle_confirm
function (which is called after clicking "Confirm" button of the modal)
since error handling in that case will be different as there will be no
overlay in the background.
This commit adds a method to detect whether the draggable element has
moved out of view and if it has, move it back into view.
The panzoom library does have a `bounds` option that is supposed to
provide the functionality, but at the time of the commit it does not
appear to work correctly. Upstream bug:
https://github.com/anvaka/panzoom/issues/112
This PR changes the library used for panning and zooming in the lightbox
module from timmywil/panzoom to avanka/panzoom.
The original (timmywil) version of the library contains a bug where if
you have a high resolution touchpad and Firefox and you zoom in and out
repeatedly on an image, the image may drift. avanka/panzoom does not
appear to display this behavior.
Restores the behaviour from before 5f83bc5cfe, where clicking
outside the image closes the lightbox, primarily by way of swapping
out the panzoom library.
Fixes: #21163.
We are going to move to this code organization for
managing streams:
stream_create.js
stream_create_subscribers.js
stream_edit.js
stream_edit_subscribers.js
The modules stream_create.js and stream_edit.js historically
manage the entire process of creating and editing stream
data (respectively).
Going forward both will delegate most of the subscriber-specific
pieces to either stream_create_subscribers or stream_edit_subscribers.
The stream_*_subscribers modules will be somewhat similar in
nature, but the way that we manage subscribers at creation time
is a bit different than how we manage subscribers at edit time.
This will help us avoid some duplicate code when
we use input pills for stream-create.
See the long comment in set_up_handlers() for
more context.
We also rename:
submit_add_subscriber_form -> subscribe_new_users
Ideally set_up_handlers() would also extract the
concept of clearing the pills as soon as you either
hit enter or clicked on the Add button, but our
current paradigm for clearing pills when you edit
subscribers for an existing stream on the Subscribers
tab is that we wait for the server to acknowledge
the request. I believe this is a bit of a misfeature,
but I am punting on that change for now.
This is mostly a pure code move. A few small tweaks:
* The create() function is new.
* The new module doesn't assume a `pill_widget`
global.
This module represents the truly re-usable code
that can be shared during these two user actions:
* edit-stream subscribers (now)
* create-stream subscribers (future)
In both situations the input pill has (or will have)
essentially the same behavior, and the next commit
will tighten up the abstraction.
(The two processes will both also use fairly similar
ListWidgets, but the mechanics of managing the list
are going to be different, so we do not intend
to keep around stream_subscribers_ui in its current
name. More on that later.)
This simplifies some of our dependencies.
As an example, we really don't want compose.js
to depend on stream_subscribers_ui.js, since
the former doesn't use any actual UI code from
the latter.
We also rename the two functions here:
invite_user_to_stream -> add_user_ids_to_stream
remove_user_from_stream -> remove_user_id_from_stream
(The notion of "inviting" somebody to a stream is
somewhat misleading, since there is really no invitation
mechanism; you just add them.)
Apart from naming changes this is a verbatim code move.
Finally, we eliminate a little bit of test cruft--the
`override` helper already ensures that a function gets
called at least once during a test.
Edit history of message was rendered directly without passing
it through rendered_markdown.js. Due to this several visual
features for dynamic elements like time, spoilers, mentions
etc were not available.
To fix above issues we pass the content of edit-history
through rendered_markdown before showing edit history modal.
Fixes: #16029.
Improves rendering of drafts to make it look more closer
to normal messages. This is done by passing the draft content
through rendered_markdown so that dynamic elements in the content
get updated before showing drafts modal.
Moves the profile avatar to the top when the viewport is narrowed down.
Tweaked by tabbott to add the 20px bottom margin in a more consistent
way, which also lets us deduplicate some code.
Fixes#21000.
d6fb439c7a removed the option to remove owner from the edit form available
to admins, but the option was still present in the edit form available to
the owner of bots in "Bots" section of personal settings. This commit
removes the option from form in "Bots" section of personal settings as well.
Previousy, we used to show or hide the digest weekday setting after
saving the emails setting, but now we show/hide as soon as we check
or uncheck the email setting checkbox like we do for other settings.
Notifies user when messages are not being marked as read through a
banner that lets them mark all messages in the narrow as read. Note
that the banner is only displayed if the user's actions, like
scrolling, would've actually marked the messages as read.
This avoids distracting the user when viewing a thread they've already
read.
tabbott has verified that if new messages come in, the banner will reappear.
Fixes: #18768.
There are a few instances where we check if messages can be marked
read and mark that list as read when scrolled to bottom. Using
this would be nicer and also this function can be extended later to
display a banner when messages are not being marked.
The class `sidebar-topic-check` has a minimum width assigned for the
`topic-resolved` icon to create an appropriate space for that column
whether or not there are resolved topics present.
Add a corresponding `margin-left` to align `more topics`
appropriately.
Show/hide scroll to bottom button when the last message is
not visible in the current scroll position.
We adjust the bottom offset of the button based on compose box
height.
Fixes#19862
We save the preferred theme in localstorage so that user doesn't
have to re-select the theme on every reload. Users on slow
computers might see flash of a theme change, if it happens.
This change was not aimed at popovers that use tippy. Since
popovers use light theme and tooltips don't, we use this
`not[data-theme]` selector to exclude popovers from being
affected by this change.
For filters that cannot be applied locally, we don't know if the
messages are still a part of the filter. So, we remove the
existing message that were updated and let `maybe_add_narrowed_messages`
treat them all as new messages to the filter.
This fixes the bug where existing messages that were present in
the narrow were not updated.
In the dark theme, disable the hover behavior to display sorting options
for actions column in tables (Which doesn't support this).
Matches existing behavior in light theme.
Fixes: #21137
Added a property `mouse_moved_since_typeahead` to the typeahead class
which tracks whether the mouse has been moved since the typeahead
menu appeared.
The hovered over menu item is highlighted on `mouseenter` only if
`mouseMoved` is true. Otherwise, the cursor is hidden temporarily.
Code substantially reorganized by tabbott.
Fixes: #21018.
For our Subscribers tab we want to enclose our
add-subscriber widget in a form for now, and we
continue to do so, but now we have the form tag
getting created in the parent template, not the
child.
Here is why:
We want to re-use our add-subscriber widget in an
upcoming commit for when you create streams.
In our create-stream UI, there is already an outer
<form>...</form> section of the HTML for the entire
process of creating a stream.
HTML does not yet you nest forms, and even though
browsers just silently ignore an inner form, we won't
want to create semantically incorrect HTML.
Therefore, we want the child template not to have
the form tags around them.
It's possible that we don't really even want to
enclose the input-pill widget and Add button inside
a form for the Subscribers tab, but tweaking that
for now is too risky. (We don't really take advantage
of the form tag in any meaningful way, since we
don't directly submit form data to the server, and
we can't use a single submit handler for the Enter
key and Add button due to some magic in our input
pills.)
We want to avoid submit handlers here, because we may
have embedded widgets that have their own forms or
buttons.
We use "finalize" here to distinguish the two Create
buttons related to streams. You hit one button to
start the UI and then the second button to finalize
the process.
I also fix the bad test idiom of clicking on the
sea-green button.
You don't start auto-completing user groups with an @,
so the previous placeholder text made no sense.
There might be a better way to do autocomplete in
these add-subscriber input pills, but that is beyond
the scope of my current efforts.
This adds tabindex='0' in anchor tags for allowing the message menu
popover box to be focusable using hotkey 'i' through keyboard.
This is a necessary follow up to
729c09074a, which removed the href
attribute from anchor tags to which click-handlers were attached,
which resulted in making them non-focusable as jQuery doesn't allow
anchor tags to be focusable without tab-index or href attribute.
Fixes#21125.
This seems to have no negative effect, and substantially improves the
visuals in situations where we're displaying a user's name.
While we're at it, switch to a relative font size.
When viewing a narrow such as a search or `sender:` view, where
consecutive messages in the view may not be consecutive in their
original stream/topic context, we should avoid displaying the messages
with a shared sender/recipient bar header, as that creates the
incorrect perception that they are consecutive.
Back in 2013 (bc8bc8567b), we
implemented this via the collapse_messages flag, but it appears more
recent refactoring (no more recent than
dbffb2a614) made it always true.
The original logic was incorrect, in that it only considered full-text
search views, and not other views with this property.
I originally planned to use the existing logic for
can_mark_message_read designed for this purpose, but I think there
might be product reasons why might want the logic to be independent.
Removes the 5px `margin-right` on images, replacing it
with a 5px `margin-left`. This change aligns the images
with the message content while making sure they do not
stick stick together in other layouts.
Add a margin below the subscription link for it to be visible when we
hover over links, where the browser will display the URL in the
bottom-left corner of the screen.
Previously the emoji_status set by the user would only be seen in a
few places, it was decided that it would be useful to show the
emoji_status in a couple of other additional places as well.
As such this commit uses the status_emoji template to show the status
emoji in the compose_pm typeahead and the mentions typeahead.
Status emoji changes do not live update these, but neither do user
renames, so there's bigger problems if that's a concern.
Fixes: #19865.
Previously the emoji_status set by the user would only be seen in a
few places, it was decided that it would be useful to show the
emoji_status in a couple of other additional places as well.
As such this commit uses the status_emoji template to show the status
emoji in the compose_pm pills. Due to the fact that we use the same
pills system to render in the user_group, we need to add a
conditional to prevent rendering there since the user status is not
valuable there.
Status emoji changes do not live update these, but neither do user
renames, so there's bigger problems if that's a concern.
Previously the emoji_status set by the user would only be seen a few
places, it was decided that it would be useful to show the
emoji_status in a few additional other places as well.
Use the status_emoji template to show the status emoji in the
message_body and also implement live update behavior.
With refactor and minor edits by Yash RE.
Co-authored-by: YashRE42 <33805964+YashRE42@users.noreply.github.com>
Previously the emoji_status set by the user would only be seen in the
buddy list, it was decided that it would be useful to show the
emoji_status in other places as well.
As such this commit uses the status_emoji template to show the status
emoji in the PM list and also implements live update behavior.
With refactor and minor edits by Yash RE.
Co-authored-by: YashRE42 <33805964+YashRE42@users.noreply.github.com>
Previously, when the user clicked the `Add streams` icon in the
streams list sidebar, we provided a popover offering to create or
subscribe. This was confusing for users who did not have permission
to create streams.
Redirect users that don't have stream creation permissions
directly to browse streams without going through this popover.
Fixes: #20676.
Previously, if the user changes any stream color and updates it back
to the default color without reopening the change color popover, the
second color change didn't take effect.
Fix bug by destroying the colorpicker object and rebuilding it again
every time a color change is triggered by the confirm button.
Fixes: #21055
Previously, we would call `rerender_messages_view()` in order to
rerender messages after user renames or avatar updates. This would
lead to rerendering the entire message list for every change,
regardless of whether any specific message had changed or not.
This used to be acceptable because user renames and avatar updates
were rare events, however, as we plan to show user status emoji near
user names and updates to those would be more frequent than is
affordable, this commit implements
`rerender_messages_view_for_user(user_id)` which only rerenders
messages which have actually been changed.
This commit is, thus, both an optimisation for the existing code and a
prep-commit for the user status emoji.
Previously, we used to only calculate sender_is_bot, sender_is_guest,
small_avatar_url and background_color on the message_container via
build_message_groups (ie via .render, which also gets called from
.rerender_with_target_scrolltop).
This would mean that if we tried to use `_rerender_message` to update
just a single message (which is something we'd like to do, in order to
make rerenders more efficient), these values would not update.
(This could lead to avatars not light-updating properly).
As such, this commit moves assignment of these values into
`set_calculated_message_container_variables`.
This reverts commit 8e06335788 (#21048).
It regressed the ↑ and ↓ keys because drafts.drafts_scroll was not
updated to use ui.get_scroll_element. Also, styling the native
scrollbar as hidden is not the right workaround because the hidden
native scrollbar still exists and can be scrolled independently of the
SimpleBar.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
In the topic changing UI, the 'Change later messages to this topic'
and other options in the drop down were cut off when selected in some
languages like Russian.
Make the selection box width adjust appropriately according to the
length of the text, and also place it on its own line unconditionally.
users.
With tweaks by tabbott to use the same approach we already use in the
"Move topic" modal to have the bottom margin for the color block match
that of the dropdown_list_widget itself, of having them share CSS.
Fixes#19739.
There is no problem in behavior of browser back button we open stream settings
overlay using UI elements since they are appropriately linked to "#streams/all",
"#streams/subscribed" and "#streams/new", but someone can directly go to a
link with "#streams" and in this case we want to fix the browser back button.
This commit replaces "#streams" entry with "#streams/subscribed" which is the
default section opened, such that pressing back when on "#streams/subscribed"
does not go to "#streams" and instead go back actually.
When we open settings overlay we first go to "#settings" hash and
then to "#settings/profile" or hash according to the last opened
section. Now when a user presses back button from "#settings/profile"
it goes to "#settings" which agains then changes to "#settings/profile"
and thus the browser back button does not work as expected.
This commit fixes this by replacing the "#settings" entry in history
with "#settings/profile" or to the hash as per last opened section,
using replaceState and thus there is no entry of "#settings" in history.
Fixes#19820.
We use button element instead of <a> element for the button used to change
stream permission. This change fixes the focus problem where the container
was focussed when closing the permission modal.
The problem here was because Micromodal focuses the element which was just
focused before opening the modal, on closing the modal. And in this case the
focused element before opening the modal was the "simplebar-content-wrapper"
element as <a> tah without href is not focusable element.
Related issue - #20223.
Greg Price
Steve Howell
Dinesh
Tim Abbott
Junchen Liu
Greg Price
Austin Riba
Anders Kaseorg
Julia Bichler
Austin Riba
NerdyLucifer
jai2201
Yogesh Sirsat
Aman Agrawal
yogesh sirsat
Sahil Batra
Mateusz Mandera
Purushottam Tiwari
Sayam Samal
Alya Abbott
Jai soni
N-Shar-ma
ditsuke
YashRE42
AnushaNathRoy
Mr.mad
Parth