This commit closes a long pending issue which involved moving the
`EMOTICON_CONVERSION` mapping to build_emoji infrastructure so
that there is only one source of truth. This was pending from the
time when this feature was implemented.
Pressing `Esc` did not blur a contenteditable div by default, while
an input field was blurred by default. Due to this when a user tried
to unnarrow using `Esc` key when the searchbox had focus, the focus
remained stuck in the div itself and no further action was taken.
If search pills are not enabled, the text present in the search bar
will be selected on pressing '/' and writing someting without deselecting
the text will clear the search text. Since selecting the pills would
not make sense in this context, the search box is focused instead.
Adds box-shadow to `#searchbox` when either `#search_query` or any
of the pills have focus. Uses jquery instead of pure css as the
`:focus` event occurs on `#search_query`, while we want to add
box-shadow to `#searchbox`. This could have been done with
`:focus-within` CSS selector, but it is not supported in IE or Opera.
`#search_query` already had an onfocus/focusout listener, adding
listeners to `#searchbox.pills` for those events wouldn't have worked
as you don't want the focusout event to fire when the focus shifts
from input to pill.
Also adds `focusin`, `focusout` and `css()` to zjquery. `css` is
same as `val`, except it returns an empty object in case of no value
instead of an empty string. I don't think `css()` is valid syntax
in actual jquery.
After adding search pills, suggestions were based only on the
current input and no validation against the existing pills was done.
operator_subset_suggestions have been removed. Default suggestions
for base_operators have also been removed.
Handle multiple operators:
if `is:starred stream:Ver` was typed without selecting the typeahead
or pressing enter in between i.e search pill for is:starred has not yet
been added, then the description of `is:starred` will act as a prefix
in every suggestion.
Also makes changes re-enabling person suggestions for names with spaces.
This large function will need to be modified significantly as part of
the pills effort, and copying it lets us preserve behavior in
production until we're ready to cut things over.
tab_bar.js becomes redundant after implementation of search pills.
This commit adds a comment to tab_bar.initiliaze, so the event
listeners related to it do not get initiated. This does not remove
any code related to tab_bar.js.
Also adds left and right border around the search icon.
Following points have been implemented in this commit:
1.) Add search pill on selecting typeahead.
2.) Re-narrow after removing a search pill.
3.) Add quiet optional parameter to removeLastPill.
4.) Pre populate search pills in narrow.activate.
5.) Clear existing search pills on narrow.deactivate.
Description of above points:
1.) I tried out using the description from suggestions.lookup_table
to append a pill using appendValidatedData so that the description
had not to be calculated again. But the description in the suggestions
lookup contains html due to highlighting. This html is escaped when
inputed in a pill. An attempt was also made to remove the higlighting
by replacing the tags. But other espaced characters like < also
popped up, so it was better to use append_search_string.
3.) If one wants to refresh the pill using pill.clear and wants to
repopulate them, evaluating the event_handler associated with the
action of removing the pill may not be desired.
4.) Pill population code is added to narrow.activate. Pills are not
populated if the narrow was triggered by search as search handles the
addition and removal of pill by itself. The reason for not handling
search too in narrow.activate is to avoid clearing the pills and
repopulating them. Example of some of the triggers for narrow.activate
include `restore draft`, `topic change`,`sidebar`.
Also modifies tests for search.js
Adds an optional parameter `quiet` to removeLastPill and removeAllPills.
If `quiet` is a truthy value, the event handler associated with the
pill will not be evaluated. This is useful when using clear to reset
the pills.
The letter-spacing was changed last in commit
fc4d80d941 which is about a 5 year old
commit at the point of writing. The change is removed as I did not
notice any visual change on removing it. Changing the letter spacing to
normal lets the text in the pills be seen legibly, otherwise the characters
were overlapping.
Input pills require a contenteditable div with a class named input
to fall inside the pill container. On converting the input tag into
a div, the size of the input decreases which is compensated by a
line-height of 40px. Comment above letter-spacing:normal was removed
as chrome and firefox do not change the letter-spacing to normal
for a div via the default browser stylesheet.
NOTE: Currently writing something into the div will call the action
corresponding to that key in the keyboard shortcuts. The input will
work fine once the pills have been initiated.
For the casper tests, for now, we just use the legacy search code.
When we change that, $.val() cannot be used on contenteditable div, so
$.html() will need to be used instead in select_item_via_typeahead.
Also adds the file to the static asset pipeline.
search_pill_widget.js will be used to access the pills object for
the search query box. It will act in a similar way to
compose_pm_pill.js. Why is this needed: Consider you've initiated
a pills object in search.js for the search query box. Now you want to
also access that pills object to pre-populate pills after a reload in
hashchange.js. search_pill_widget.js makes this easy without the use
of events.
The `tr` block does clones the `options` array (which contains the
entire subscriptions data set) very inefficiently, which leads to the
rendering being very slow.
We don't need a `tr` block here, as there is no dynamic content that
needs to be replaced.
When Pan & Zoom (canvas) is enabled, the `v` hotkey does not work due to
`LightboxCanvas` overriding the `keydown` event. Add `v` as an option in
the new listener.
Fix#9777.
This commit updates the `emoji-datasource` packages to version 4.0.4.
This update brings following changes to emoji infra:
1: Fix for the bleeding sprite sheets.
2: The category of some emojis has been changed. Categorywise breakup of
net gain or loss is as follows:
Travel & Places: 58 (gain)
Symbols: 47 (loss)
Smileys & People: 52 (gain)
Objects: 11 (loss)
Food & Drink: 3 (gain)
Animals and Nature: 46 (gain)
Activities: 9 (loss)
3: There were some changes in the image farm of the package which were
breaking our old emoji farm. I fixed them by modifying the remapped
emoji map.
Fixes: #8235.
This behavior was originally implemented in commit 6993f89, but due to not
specifying a toggle option, the Subscribed/All streams switcher tab was
focused after the input was focused, leading to the input's loss of focus.
Fixes#9981.
The current code for detecting which image to add the `selected` class
to is `preview_source.match(src)`. With the new thumbnails, this no
longer works because thumbnail URLs include a `?`, which has its own
RegEx significance. To solve this, check for equality instead of using
RegExes.
Various pieces of our thumbor-based thumbnailing system were already
merged; this adds the remaining pieces required for it to work:
* a THUMBOR_URL Django setting that controls whether thumbor is
enabled on the Zulip server (and if so, where thumbor is hosted).
* Replaces the overly complicated prototype cryptography logic
* Adds a /thumbnail endpoint (supported both on web and mobile) for
accessing thumbnails in messages, designed to support hosting both
external URLs as well as uploaded files (and applying Zulip's
security model for access to thumbnails of uploaded files).
* Modifies bugdown to, when THUMBOR_URL is set, render images with the
`src` attribute pointing /thumbnail (to provide a small thumbnail
for the image), along with adding a "data-original" attribute that
can be used to access the "original/full" size version of the image.
There are a few things that don't work quite yet:
* The S3 backend support is incomplete and doesn't work yet.
* The error pages for unauthorized access are ugly.
* We might want to rename data-original and /thumbnail?size=original
to use some other name, like "full", that better reflects the fact
that we're potentially not serving the original image URL.
Previous commits have fully implemented the logic for stream email
notifications; this final commit adds support for configuring it to
the UI.
Fixes#6511.
This migrates Zulip to use a dramatically better set of names and
aliases for our emoji set, defined in emoji_names.py (which is in turn
manually generated from our hand-curated CSV file).
This should significantly improve the experience of using Zulip's
emoji picker and emoji typeahead for finding what one is looking for.
This changes the icon indicating that you can drug the custom
profile field rows in settings to be the double rows of dots
typically used to indicate draggability. It also gives those
rows the "move" cursor on hover.
This is essential for using simplebar, since simplebar doesn't account
for parent <div> paddings, which might cause scrollbars to be mispositioned
if not considered.
When you hover above the navbar, the cursor focuses on the page
body and scrolls the entire page, breaking the positioning of the
fixed sidebar and page content.
We disable scrolling on the body but allow the sidebar and Markdown
content page elements to be scrolled to fix this bug.
Fixes#7665
In case of invitation events, 'invites_changed' event without
any real payload is sent to all the realm admins and the user.
The event is handled by reloading the list to view recent changes.
Commit tweaked by shubhamdhama:
* Send an `invite_changed` event when an user accept an invite.
Also, added the test for the same.
* No need to delete the invite list in frontend, current logic
handles the case when the invite data is changed properly.
* Extracted the common logic for sending an event into
`notify_invites_changed`.
It seems to have been there to paper over a styling problem that was
actually caused by slightly mismatched font sizes (em vs. rem).
Signed-off-by: Anders Kaseorg <andersk@mit.edu>
This commit adds a Markdown tree-processor extension that renders
multi-line code blocks that are nested inside lists with the
formatting. Note that the code block could be nested inside multiple
list levels and would still get rendered correctly.
Tim: This fixes the need for unpleasant workarounds like
f5bfa4e793 and makes nested code blocks
in our documentation look exactly how users would expect them to.
This was used for the very early-stage Zulip "ask for invite" form,
which was built around a stamped envelope concept. The form was
removed from Zulip a couple years ago in
bded0d9d54, but this CSS was missed in
the removal.
We can now theoretically use this for any textarea
that supports our markdown (besides the compose box),
plus we keep the RTL code a bit more self-contained.
This hides the up and down arrows that appear in the year input
of the Flatpickr-provided datepicker. (This is only used in
settings for now, but the arrows will be hidden anywhere Flatpickr
is used.)
The JavaScript click handler for this feature was fragile in a way
that would break with upcoming changes to how we display the X
element. We clean this up with a replacement implementation that
should be much less fragile.
Previously, commit e5d2e95 attempted to change the styling of the user
profile pill containers to match the inputs above it. However, it used
an incorrect selector (#settings_page), resulting in all other pill
containers on settings pages being changed to match it as well
(example: User groups pill containers in Organization
settings). Additionally, its selector's specified background attribute
resulted in problems in dark mode.
To correctly style the user profile pill containers to match the other
input's styling, we apply the uneditable-input class native to
Bootstrap so that we don't need to create an entirely new selector to
style it.
Note that the .custom_user_field .pill-container selector was added so
that it could match the padding of inputs. Also, the
.custom_user_field .pill-container:focus-within selector was added
with attributes straight from Bootstrap's input:focus selectors so
that .custom_user_field .pill-container would have a blue outline
while users were typing in the input pill, just like the other inputs.
Fixes#9842.
Enables avatar images in pills wherever user_pill.js is used.
(e.g composebox, user group settings)
Changes to search_pill.js are not made as search pills haven't been
added yet completely and search_pill.js just contains the preparatory
code right now.
No change to compose_pm_pill.js is not required as it uses
`user_pill.create_item_from_text` in its `create` function.
Adding the 20*20 image inside the pill caused a minor increase in
pill height. Making the image 19*19 causes some increase in the height
under different zoom conditions. I'm not sure about the reason behind
this, so this can be counted as a hack.
Allow passing image link in the item passed to appendValidatedData.
When passing image link via any of the append* functions, make sure
that create_item_from_text for that pill also adds the image link to
the item created.
This commit does not make any visual change to the current app.
Changes to user_pill.js are necessary to enable user avatars for
pills.
Harshit Bansal
Shubham Padia
Tim Abbott
Sampriti Panda
Yashashvi Dave
Marco Burstein
Cynthia Lin
Steve Howell
Akash Nimare
Abhigyan Khaund
Aditya Bansal
Sarah
Max Nussenbaum
Aastha Gupta
Joshua Pan
Anders Kaseorg
Eeshan Garg
Rohitt Vashishtha
Anupam Dagar