This commits ports the `search_operators.html` file from
./templates to handlebars, essentially creating a new file
as `search_operators.hbs` within /static/templates which is
then rendered using info_overlays.js.
As part of this migration, we rewrote the way internationalization was
done, since the previous implementation incorrectly did not support
languages with a different word order than English.
We also not consistently use periods at the end of the descriptions.
Co-authored-by: Tim Abbott <tabbott@zulip.com>
Fixes#18504.
This commits ports the `keyboard_shortcuts.html` file from
using the Django template to handlebars, essentially creating
a new file as `keyboard_shortcuts.hbs` within /static/templates
which is then rendered using info_overlays.js.
Fixes part of #18792.
This keeps it consistent with other widgets in message body area.
Set the display position to top to be consistent with
compose control buttons.
Changed the tooltip content to be more readable like
Thursday, May 18, 2017
7:12:53 AM India Standard Time
Also changed timerender.get_full_datetime() to consider
users' 24 hour format preference.
When a user tries to send a (group) private message to a deactivated
user, a compose error is displayed.
Fixes#13766.
Co-authored-by: Signior-X <b19188@students.iitmandi.ac.in>
This modifies the appearance of pills for deactivated users
in the following ways:
* Adds `(deactivated)` with the deactivated user's name.
* Add a tooltip to the deactivated user's pill stating
that one can't send a message to this user.
* Color the deactivated user's pill reddish.
This now also adds tests for user_pills.
Part of #13766.
Co-authored-by: Signior-X <b19188@students.iitmandi.ac.in>
This commit treats deactivated users as valid users
for compose box which prevents the PM list to collapse
when a deactivated user in the PM list is clicked.
Part of #13766
Co-authored-by: Signior-X <b19188@students.iitmandi.ac.in>
The waiting time of 5000ms was probably added for testing UI of
spinner in 2f99e6b7b2 and was missed in review. This commit removes
the waiting time and now the user is deactivated almost instantly when
the button is clicked.
This also migrates from loading the modal dynamically rather than
statically once at page initialization.
With styling changes by tabbott to preserve the original look of the
UI.
Fixes#18278.
This prevents a bug where keypresses are received by recent_topics view
even if a modal is present on it, which prevents, for instance, the modal
from receiving text input.
This commit modifies the linkifier-edit modal to use newly added
edit_fields_modal framework.
One important change is that we remove the "edit-linkifier-status"
element as the corresponding "edit-fields-modal-status" element
is added in edit_fields_modal.hbs and we also modify the css
accordingly. This "edit-fields-modal-status" is used only for
this modal and remains empty for others, so this change does not
cause problems with other modals.
There is another element which uses "edit-linkifier-status" as a
class, but the css we defined was for "edit-linkifier-status" as
id, so the css change is also safe.
This commit modifies the modal for editing bot information to
use edit_fields_modal framework.
We also change the id of form element of this modal such that
it makes sense with the actual use of modal and there is no
problem with this change as styling of this modal is not
affected.
We create a new widget edit_fields_modal such that this common
framework can be used in bot-edit modal, linkifier-edit modal
and user-edit modal, which have very similar implementations.
The "edit-fields-modal-status" is used only for edit-linkifier
modal and remains empty for others, so this change does not
cause problems with other modals.
This commit moves the compose_error function to its own module, which
will be useful for future work splitting the compose module.
We also simplify compose_not_subscribed_error to call the
compose_error show function.
This commit fixes the bug with the delete button of both profile
picture and realm-logo buttons. The button was shifted downwards
and was caused due to line height change in 5d64c21c38.
Found the correct value of 20px by checking the line-height in
one test organization on zulipchat.com where the button position
looks correct.
This commits adds the support to copy a topic link
to the clipboard by introducing a new "Copy link to topic"
topic sidebar action which is placed below the
"Mark all messages as read" action.
Basically, this does the same job as right clicking upon the
topic name and selecting "Copy link".
Closes#18946
We show a spinner inside the button instead of hiding the button
and then showing the spinner in the bottom area. We also disable
the button to avoid repetitive clicking by user.
Click handler added for cancel button in stream creation form
incorrectly assumed data-dismiss to be present only in that
form inside `.subscription`. We now handle editing stream
properties like stream privacy and stream name/description
by making use of modal widget. So this assumption creates
a bug where closing these edit modal closes complete stream
edit pane. It was added in 1886f0a015.
We fix this by binding this handler to data-dismiss element
inside stream creation form.
We had our input elements for stream settings inside li tags
and their alignment was managed using CSS. We move away from
this HTML structure to have inputs and labels inside divs for
two reasons. First is that if we want to later refactor the HTML
to have some different design, then having them inside `ul`
requires complex changes to CSS and eventually we would have
to move away from using `li`s for the part that is changed to
have a different design. Second `li`s are generally not used
to organize input elements.
Above is an explanation of why this change is a preparatory
commit for shifting to have a tabbed design in the stream edit page.
So following changes are done to have a more consistent
HTML structure in stream types modal:
* Added modal-body and removed the non-standard
usage of the unordered list for settings header and inputs.
* Updated relevant CSS rules to have the same design during refactor.
Co-authored-by: Pragati Agrawal <pragati22066@gmail.com>
We had a lot of functions and click handlers that were only
involved with user profile modal and were not related to
popovers logic in any way. So we extract these functions
into a separate module `user_profile.js`.
It can happen that reactions are re-rendered while we are
in the process of showing tooltip for them. In that case,
we setup MutationObserver for an element not present in DOM
which results in weird behaviour. We avoid it by checking the
element again before setting up MutationObserver for it.
See https://chat.zulip.org/#narrow/stream/6-frontend/topic
/tippy.20bug/near/1206316 for details on the issue.
We used name parameter in tab component callback to handle our
custom logic when switching tabs in profile modal. Using name
here invites a posible bug as these name are tagged for
translation. So to avoid this we switch to use key (html id
for these tabs) for this as they are always constant.
We had stream and group tab inside a common div with class
`subscription-group-list` due to this adding any info
elements like alert boxes that were specific to one of them
became difficult. To fix this we keep them in their own
`.tabcontent` div. This change also makes the handling of
display of different tabs a lot easier and cleans
up unnecessary javascript code that was handling the
display of common parent div of stream and group tab.
We show stream tab before user-group tab but in the template
this order was reversed that created confusion while editing
any one of them. So we correct their order in the template
to reflect the order we show in UI.
This refactor changes two things - position of the modal, as it
is moved up by some amount because of using confirm_dialog and
also loading spinner of confirm_dialog widget is used.
We turn off the eslint no-use-before-define for TypeScript files
because it does not work correctly for types. There is already
a typescript-eslint version of it that is enabled for TS.
We also update the error handler on window to use instanceof check
for ErrorEvent instead of checking the error property.
We also update the tippy.js mock in tests to expect a element
(zjquery FakeElement function) instead of zjquery instance, and get
rid of setting _tippy property itself to a noop function.
The plan for type annotating the page_params is to set it to
Record<string, unknown> for now and then annotate individual
properties on it as we use it in typescript modules.
We use a simpler approach here which is to let it be undefined if
nothing was passed and use that in the if condition. This has two
benefits. There is no edge case where the condition will evaluate to
false if 0 was passed and it is easier to type annotate.
The ‘t’ helper operates on text strings, not HTML. The ‘&’ works
fine, and is correctly escaped for output by Handlebars, like any text
string interpolated with ‘{{}}’.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Moved the `delete_message` user-confirmation modal to
the `confirm_dialog` folder and renamed the modal to `confirm_delete_message.hbs`
to follow the common naming convention.
Moved `revoke_invite` user-confirmation modal to the
`confirm_dialog` folder and renamed the modal to
`confirm_revoke_invite.hbs` to follow the common naming convention.
Moved `resend_invite` user-confirmation modal to the
`confirm_dialog` folder and renamed the modal to
to `confirm_resend_invite.hbs` to follow the common naming convention.
Moved `emoji_settings_warning` modal to the `confirm_dialog`
folder and renamed the modal to `confirm_emoji_settings_warning.hbs`
to follow the common naming convention.
Moved `deactivation_user` modal to the `confirm_dialog`
folder within `/static/templates` and renamed the modal to
to `confirm_deactivate_user.hbs` to follow the
common naming convention.
Moved `deactivation_stream` user-confirmation modal to
the `confirm_dialog` folder and renamed the modal to
`confirm_deactivate_stream.hbs` to follow the common naming convention.
Moved `deactivate_realm` modal to the `confirm_dialog` folder
within `/static/templates` and renamed the modal to
`confirm_deactivate_realm.hbs` to follow the naming convention.
Moved `delete_topic` modal to `confirm_dialog` folder and
renamed the modal to `confirm_delete_topic.hbs`
to follow the confirm_dialog naming conventions.
Moved `subscription_invites_warning` modal to `confirm_dialog`
folder and renamed the modal to `confirm_subscription_invites_warning.hbs`
to follow the naming convention.
Moved `unsubscribe_private_stream` modal to the newly created
`confirm_dialog` folder found within `static/templates`.
Later renamed the modal to `confirm_unsubscribe_private_stream.hbs`
to follow a common naming convention.
The user deactivate button is also present in the "Deactivated users"
tab, a sibling element of the current modal_parent, #admin-user-list.
Adding the confirm_dialog modal to #admin-user-list won't have any
effect in the "Deactivated users" tab.
Move it one level up, i.e. to the parent element of #admin-user-list
and #admin-deactivated-users-list.
Fixes#18928.
We now encode resolved topics with just:
U+2714 HEAVY CHECK MARK, SPACE
Previously, the encoding was unintentionally this:
U+2714 HEAVY CHECK MARK, U+FE0F VARIATION SELECTOR-16, SPACE
There are several benefits of using tippyjs here:
* Removes dependency on bootstrap.
* We don't have to manually handle show/hide of popover.
* There cannot be any memory leak since we don't store
the instance.
Since the instance.popper can return same elements as the
instance may be used again by tippy, we use `one` to ensure
that we do not define multiple event handlers for the same element
repeatedly.
This fixes the following bug:
* Open the streams modal.
* Click and hold in the word "Streams" at the top.
* Move pointer up out of the modal.
* Release.
* Expected: Some text is selected, but nothing else happens.
* Actual: The modal disappears.
We use the same fix we use for this class of issue in other places:
checking for whether a range is selected, and if so, doing nothing.
We previously had a mix of "Filter users" and "Search people" for this
widget. "Search" is more correct because the right sidebar can only
show a subset of the organization in some settings.
Earlier, when a user clicked on any stream name from the
user_popover, the stream page would open in the background,
but the user popover wouldn't close.
Fixed it by explicitly binding it to a click handler,
which closes the user popover before redirecting to stream
page.
It is a class provided by bootstrap and one of its most
important job is to set the display of inputs and labels in
the form in such a way that if there is sufficient
horizontal space then they are shown side by side.
As we override most of the bootstrap classes to organize
content, CSS rules set by it were not applied. So we remove
these safely without having any visual changes. Also, we had
only three instances of this class in the complete template
directory.
The language_list_dbl_col parameter in the page_params
is used by only the web client frontend. The value is
calculated in the backend and then passed as a page_param
which is unnecessary considering that the whole process
is beneficial for the front_end only. Hence move the entire
calculation code to the frontend.
Fixes part of #18673.
default_language_name was a part of page_params which is actually
redundant considering that we already have language_list and
default_language available to frontend which can be used to
get the default_language_name and hence prevents the backend
from sending an additional parameter.
Fixes part of #18673.
Previously, there wasn't any error message if a user tries to
upload a custom emoji with a name that already exists.
This commit essentially displays a error using `ui_report`
when the user tries to do so.
Fixes#18269.
Co-authored-by: yasiruRathnayaka97 <yasirurathnayaka97@gmail.com>
This avoids the issue of all the topics in recent topics marked
as yesterday after mid-night.
This change also affects other pieces of UI using this function
like buddy list in a similar way.
This commit replaces the allow_community_topic_editing boolean with
integer field edit_topic_policy and includes both frontend and
backend changes.
We also update settings_ui.disable_sub_settings_onchange to not
change the color of label as we did previously when the setting
was a checkbox. But now as the setting is dropdown we keep the
label as it is and we don't do anything with label when disabling
dropdowns. Also, this function was used only here so we can safely
change this.
For this extraction, we need to move some context
parameter (from home_real in `views/home.py`) to extra
page_params parameter (of
build_page_params_for_home_page_load in
`lib/home.py`) so handlebars template can access them.
While moving I confirmed that these parameters are not
used elsewhere if some parameter is used elsewhere
(like `apps_page_url`) then I didn't remove it from the
context list, I just added it to the page_params list.
Fixes: #18795.
This is a prep commit to extract the gear menu as a
handlebars template.
We are renaming `enable_marketing_emails_enabled` to
`corporate_enabled` as it will be also used in the
handlebars template of the gear menu.
This results in moving the `zulip_merge_base` parameter to
page_params, so that it's available to JavaScript.
Since this is technically a tiny overlay, it needs to be initialized
before hashchange.js.
We only need to bump up indexes if inbound
events suggest that we have incremented our
personal index from another device.
We don't want somebody else's runaway index
to affect our index.
(For both widgets the sender_id is part of
the key, so uniqueness across all senders is
not required for the integer part.)
We now ignore question edits if the sender of the submessage
is not the message author.
The webapp UI prevents folks from editing the question for
somebody else's poll, but a determined person could use our
low level API to do it. We will add safeguards on the server
side for this, but this change is sufficient to protect the
webapp (and mobile when they upgrade the library).
The Microsoft browsers such as IE and Edge has their own
show password that is a bit bugy and also conflicts with
the show password in Zulip that was added in #17305.
This fixes the issue by making the display none for the
ms-reveal that comes in the input.
More details can be found at
https://chat.zulip.org/#narrow/stream/101-design/topic/Show.20password/near/1173890
This tippyjs event listener was active on 'add emoji reaction'
option in sender's popover menu of a message but it was only
intended for the add reaction button in message reactions bar
at bottom of a message.
Both of those having common selector `.reaction_button` caused
errors in tippyjs near `observer.observe` having wrong args.
Edited the css selector to be more specific to only target
add reaction button in reactions row of message.
This was introduced in 99e6f25.
Functions in pill_typeahead.js assumed the type of required pills
to be user by default. But this created several readability
issues with its code, as a result, this codebase appeared
hard to change because of hacky checks involved due to this
assumption.
To improve these we use `include_users` check wherever possible
and simplify the code to clarify the logic involved in typeahead
functions in this module.
Also updated existing stream_edit tests to adjust them with changed
code.
We remove the small CSS class, which set the font size as something
tiny, and also restructure it with a fixed height and more natural
markup for the reset link.
Previously, this used a slightly smaller font size than the default.
Given that it looks visually fine to use the default font size, it's
better to remove this inconsistency.
It's also worth noting that we plan to move this component to be
parallel to STREAMS in a way that is likely to also want the new font
size, so this is a step towards that goal.
This fixes a regression in 16bd6e6b1d
that caused the user profile modal to display "Last active: Last active: ...".
I'm not convinced these are the best visuals, but the whole modal
needs a visual refresh.
We split recent_topics module into recent_topics_(ui + data + util).
This allows us to reduce cyclical dependencies which were
created due to large list of imports in recent topics. Also, this
refactor on its own makes sense.
`user-profile-modal` is shown using `overlays.open_overlay` which
disables mouse pointer events. The user can't click anywhere while a
modal is present, except to close it.
We use `hide_all_except_sidebars` and `hide_all` to hide popovers.
But since the user can't interact while a modal is present,
closing it manually is redundant.
In d0f8515b50, it was noticed that
Bootstrap's `hide` and `show` calls can cause race conditions.
So, migrate to our `overlay` calls to handle Bootstrap modals.
This should make it more intuitive to add
new elements to the compose box (such as
banners), and it also makes it a bit more
clear for styling purposes that the same
geometry happens whether the compose box
is open or the buttons are visible.
I lifted the #compose_container div into
the server template. It's not totally
clear to me why we need both #compose
and #compose_container, but there are
some scary comments about 1400px that
made me too timid to address that quirk.
In passing I removed a clearly redundant
click handler.
For create stream icon specially, this is useful to allow user having
some extra space around the icon to click.
This fixes the bug that you can have the tooltip of "Add streams" and
by hovering at the bottom of `+` icon but clicking on it shows stream
search.
When message for which tooltip is active has reduced opacity in
an interleaved view due `.message-fade` class being applied to
it, then the tooltip used stack vertically under the recipient_row
which looked awful.
Appending the tooltip to document.body and manually fixing the
bug of tooltip persisting after the reference element is no
longer visible in DOM using MutationObserver does the trick
for us.
Instead of prepending the alert's content to the
navbar alert wrapper HTML it's better to pass the
rendered alert content as a parameter to the wrapper
template.
This is done so that it can be shared by more generally
by different filter widgets used in web-app. An extra parameter
is added to it that helps to get text representation of of items
to be sorted, as items passed to it could be of different format.
Instead of just depending upon clicks of certain buttons to
show the right section, we also show them when user is
creating a new stream or viewing settings of a specific stream.
This fixes a bug where user lands on `#streams/new` via url change
without clicking of any buttons and sees on left section of the
overlay in medium width (756px) devices.
We add a popover on click which allows user to create or browse
streams too.
Reason for doing so:
At present, it is hard to discover how to join streams
and create new streams. In particular:
Users have a hard time finding the gear in the STREAMS
header in the left sidebar and realizing that it's relevant for them.
Even once a user is in the STREAMS menu, the Create
stream button is hard to spot.
Fixes#18694.
The Help Center article talks about these using similar terms, which
may need further work, but it seems clear that undoing "set
unavailable" should be "set available", not "set active".
This moves this block of HTML templates, which are dynamically
rendered with some user data, to be managed by the frontend handlebars
template system.
This migration involves only displaying active alerts in the DOM, and
thus we no longer need navbar_alerts to have display: none by default.
This is important for showing popovers/menus with a light background
in Zulip's light theme.
We extend light-theme to show dark colours in night theme.
Rapidly clicking a button that shows a modal cause a race condition
in Bootstrap. Specifically, Bootstrap adds an "in" class to a modal
on the "shown" event and removes it on the "hide" event. Frequent clicks
cause the "hide" event to trigger before the "shown" event. Therefore, the
"in" class isn't removed. We use the "in" class to check if a modal is
active in overlays.js
For now, we manually remove it once the modal is hidden.
Newer versions of Bootstrap probably handle this better internally.
Look into removing this once it's upgraded.
Fixes#15463
In commit 9ce9c2f9db, we added `maybe_show_keyboard_shortcuts`
function which triggered through hotkeys.js when a user
presses the keyboard shortcut hotkey.
However, within commit 8b29c38e62, we migrated to use
hashchange.go_to_location method in order to open info_overlay, leaving the
`maybe_show_keyboard_shortcuts` function orphaned/dead.
This commit essentially removes the dead
`maybe_show_keyboard_shortcuts` code.
Rename poll_timeout to event_queue_longpoll_timeout_seconds
and change its value from 90000 ms to 90 sec. Expose its
value in register api response when realm data is fetched.
Bump API_FEATURE_LEVEL to 74.
This commit renames `delete_draft_after_send` to
`delete_active_draft` for two main reasons:
1) This function does the job of deleting the draft that we
are currently using in compose box and it is independent
of the message sending functionality.
2) This is prep refactoring for new drafts behavior where
we delete the draft if the compose box is cleared and
closed.
This changes the button text from "Reply" to "Reply to selected
message". Here's the thinking:
* The title "Reply" was a little confusing/inconsistent with the
button's label.
* If you're hovering over the button, it's because you want more
information about what it does -- not just a repeat of the button's
label.
* The "Message foo > bar" content of the button already cleanly
expresses what the button will do if you click it right now.
* The hover text "Reply to selected message (r)" explains to you what
that button's role is in all situation, not just with the current
selection, and thus documents the concept. And it also gives you
clarify if you're thinking "but how do I reply to something in
Zulip?" and try hovering over the buttons at the bottom to find out.
This commit divides the user_invite_restriction setting dropdown to
a checkbox and a dropdown.
The checkbox is used for 'realm_invite_required' setting and dropdown
for 'realm_invite_to_realm_policy'.
This separation of UI elements is fine as these two settings are
separate in database also and also helps in removing excess if-else
conditions and switch cases.
We do not require values of realm_create_stream_policy,
realm_invite_to_stream_policy, realm_private_message_policy
and realm_wildcard_mention_policy in the organization settings
templates, as we handle the dropdown values of these settings
in javascript code (settings_org.js) only and these values
are not used anywhere in templates.
Previously the logic to show save button considered only topic
and content edit. This commit fixes it to show the save button
when only stream edit is possible and content and topic edits
are not.
This commit only introduces a simple fix, in long-term we would
want to change the logic of get_editability to include stream
edits as well but it would also require discussion on when to
show the edit icons at different places, so it is better to do
it in a separate commit later.
The message-editing section of settings is moved from "Organization
Settings" to "Organization Permissions", which feels like a more
natural place for these settings.
Previously, we had this complicated layering where the right sidebar
logic would display "Last active: foo" but the user popovers would
just display "foo", which doens't make any sense, since the two
settings have equal context about the string.
We deduplicate that and also arrange that the "Last active:" prefix is
used when it's not clear what we're talking about; i.e. all the values
except for "Active now".
There is no clear reason to not use a button element here. According
to the spec pharasing content, which includes the <span> element,
are allowed in the button element.
Manually tested both buttons to make sure it works and made sure all
the selectors are updated by grepping all the selector classes/id in
the handlebars templates that are parents of the button or are
present on the button.
(One of the jQuery handler code got reformatted due to it fitting
the line limit due to one character deletion for the selector)
Modified resend_invite modal heading to remove the email
field to avoid it's duplication, since the email feild is
also displayed within the actual modal body.
Tested by the adding a console log to the handlers and typing Tab
and Enter in the group PM and stream compose box. This two event
handlers are attached to form#send_message_form which is the compose
box form.
The tests set keyCode to 42 previously, which does not represent a
valid key, so I assume they were trying to test a random key, and
replace it with "a".
There is no functionality change caused by this change. We turn the
event key to lowercase so hotkeys work even when Caps Lock is on as
it did before.
Tested by using the keybinds with and without Caps Lock in compose
box:
- "Ctrl + B" and "Ctrl + Shift + B",
- "Ctrl + I", and
- "Ctrl + Shift + L".
(Also tested that "Ctrl + Shift + I" and "Ctrl + L" do not work.)
Tested by doing the following in the compose box input for PMs:
- "Enter" works as expcected with and without input
- "Backspace" when there is no input deletes the last pill
- Left arrow in the input focuses last pill
- Comma works as expected for correct and incorrect input
- Left arrow, Right arrow and Backspace work correctly for pills.
We use e.key for our side of code and still pass e.keyCode and
e.which to the custom jQuery event we trigger. The event is handled
by our patched copy of outdated bootstrap and it still requires the
e.keyCode and e.which properties.
One of the places this widget is used is in the settings panel, at
Manage Organization > Organization Settings > Notifications > New
stream notifications. One of the handler is attached to the
dropdown menu items that shows up when you click the "#announce"
button. The other one is attached to the search button. The second
one triggers the custom jQuery event and passes the event data to
bootstrap unless the Up & Down arrow or Esacape is used. The first
event handler handles the Enter click on one of the items and saves
it. Verified that the widget works as expected.
Tested by making sure Enter is treated as click at one of the places
this function is used, recent topics view. Using the keyboard to
focus the mute or read button and click Enter treats it like a
click.
aryanshridhar
Aman Agrawal
akshatdalton
Dinesh
Hashir Sarwar
sahil839
Anders Kaseorg
Ganesh Pawar
Priyam Seth
m-e-l-u-h-a-n
Riken Shah
Priyank Patel
Tim Abbott
Gaurav Pandey
Wesley Aptekar-Cassels
Steve Howell
Signior-X
Vishnu KS
Robert Imschweiler