We now use `fix_positions` to avoid cropping the emoji
picker. You can see cropping pretty easily on a short
screen if you click the smiley icon for reactions on a
message. It's a bit tricky to repro, since some
of the current top/bottom placements are correct, but
it's definitely reproducible.
I think there are opportunities to both simplify
and optimize `popovers.compute_placement`, so that it
plays nicer with `fix_positions`. For example, I would
bias it even more strongly toward favoring right/left
placement. But there are complicating factors--it is
also used by the hotspot code.
And I wanted to especially preserve the current
behavior when you launch the picker from the compose
box. That's one place where it looks pretty bad if
you select "right" instead of "bottom".
Since the bootstrap popovers are destroyed asynchronously so opening a
emoji popover in quick succession like by clicking the reaction button
on another message was causing a race condition which was causing some
operations to be applied on a destroyed emoji popover. This commit
fixes it by making sure to apply any operations only to the currently
active popover.
Fixes: #9851.
This code will correctly render emoji to the message textarea based on
whether emoji was selected from message composition form or message
edit form.
Fixes part of #11188.
In between releases, the following commit introduced
a bug where we agressively scroll to the top every
place we call `ui.update_scrollbar`:
092b73d0b7
The main symptoms were that the left and right sidebars
would go to the top for things like selecting a topic,
getting activity updates from the server, and resizing
the window. It was very jarring.
The recent commit looked innocuous--the root of the problem
was the original API expressed an intent to scroll to the
top, but didn't actually do it, so it was a bug in hiding.
There are **some** occasions where it's actually appropriate
to scroll to the top, mostly around search filtering, and
in those places we now call the new `ui.reset_scrollbar`
function.
This is a bit of an emergency fix, so particularly with
the settings stuff, we may get more reports of glitches here.
The important thing here is that you almost never want to
reset the scrollTop for sidebars.
Apparently, we didn't have one of these, and thus had a moderate
number of generally very old violations in the codebase. Fix this and
clear the ones that exist..
All of our data related to emojis is in emoji.js.
Now typeahead_helper no longer depends on emoji_picker.
Generally we want typeahead_helper to only depend
on data modules to avoid complicated circular
dependencies (or at least mitigate them).
I think it's a known problem that we don't match
on common aliases for our top N emojis, but I don't
attempt to address that here. I just made the
comments reflect the names we use in our
current data structures.
This commit moves the `emoji_collection` datasource in the emoji
picker to emoji.js and renames it to `emojis_by_name`. It is a
mapping from emoji name to object where each object describes an
emoji. This is an effort in the direction of de-duplicating and
unifying the datasets being used by various our widgets(like
emoji picker and composebox typeahead) in the webapp. Migrating
all the widgets to a single datasource will help us in removing
the whole class of annoying bugs which causes some emojis to be
missing from some widgets.
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 commit prepares the frontend code to be consumed by webpack.
It is a hack: In theory, modules should be declaring and importing the
modules they depend on and the globals they expose directly.
However, that requires significant per-module work, which we don't
really want to block moving our toolchain to webpack on.
So we expose the modules by setting window.varName = varName; as
needed in the js files.
This is preparation for enabling an eslint indentation configuration.
90% of these changes are just fixes for indentation errors that have
snuck into the codebase over the years; the others are more
significant reformatting to make eslint happy (that are not otherwise
actually improvements).
The one area that we do not attempt to work on here is the
"switch/case" indentation.
We were using underscore as a delimiter in `emoji_id` in emoji picker
but since `emoji_type` also contains underscores, it seems wrong to
use underscore as a delimiter. This commit switches `emoji_id` to use
comma as a delimiter instead of underscore.
Currently when hovering on an emoji it will focus it, which makes
the browser by default scroll down or up to include the entirity
of the focused element. This corects the scrollTop to what it was
before the focus event adjusted the scroll position.
This is a follow-up to #6869.
Previously, you had to hover over the smaller area where the emoji
image was to select it, whereas the user expectation is that hovering
the emoji's padding should select it as well.
This commit makes the arrow key navigation and mouse hover affect the
same state such that for example if one moves the mouse over some emoji
and then hits down-arrow the cursor will move down by one from where he
left the mouse at rather than beginning from the top-left corner.
Fixes: #6827.
Emoji showcase refers to the space at the bottom of the emoji
picker we use for showing name as well as aliases of the currently
focused emoji.
Fixes: #6110.
This adds a centered layout for mobile and responsive screens where the
emoji picker is guaranteed to be in the center of the screen, and the
rest of the screen darkens behind it.
Fixes: #6291.
Given a `message_id` and `emoji_name` this function returns the
alias of the emoji user used for reacting to this message, otherwise,
if he has not reacted returns the passed `emoji_name` as it is.
If a reactions picker is open then don't auto-hide the element over
which it is based off. Earlier we were inconsistently auto-hiding
some elements while keeping others visible.
Change the reaction popover to be based off the container elements
for the various message control icons. This will enable us to easily
control the visibility of the base element when the popover is opened
or closed. Also removes redundant `reactions_hover` class.
Bootstrap's `fixTitle()` function removes the base element's original
title attribute. This commit fixes some weird behaviors by restoring
the original title of the element on which the popover is based off.
This commit extends the `compute_placement()` function in
`popovers.js` to take into account height/width of popover as well as
positioning preference. If vertical positioning is desired and the
popover fits in either 'top/bottom' positions then we don't check for
`left/right' positions. Earlier the behavior was to prefer
'left/right'positions over 'top/bottom' positions, which resulted in
the emoji picker popping incorrectly to the left.
This further improves the emoji picker by introducing two new behaviors:
1: If the cursor is at the end of the input box then pressing `right_arrow`
moves the focus down into `emoji_catalog.
2: If the currently focused emoji is the first emoji in the `emoji_catalog`
then pressing `left_arrow` moves focus back to search filter.
This fixes 2 bugs:
* If you perform a search and search results are empty then if you try
to navigate using arrow keys, page-down/page-up etc. it will give a
traceback.
* Search for example 'a' and then navigate to the last of the search
results using arrow keys. Now press 'tab' to go back the search box
and restrict the search to for e.g. 'ab' and now try to navigate
using arrow keys, page-up/page-down etc you will get a traceback.
In this commit we basically do these things:
* Clear up section_head_offsets before pushing stuff in it so that
its size doesn't keep on growing indefinitely with time and users
opening emoji picker.
* Make use of popover element to find the correct element in DOM
to scan for section elements. This prevents us from filling stuff
twice into section_head_offsets because of presence of two
elements for '.emoji-popover-subheading' in DOM since popover
destroy is an async call.
* Using this popover element also helps in avoiding manuplation
of the DOM elements of the popover that was destroyed (Because
popover destroy is async it still maybe around). One instance of
this is associating scroll event with the right instance of
'.emoji-popover-emoji-map'.
Steve Howell
Harshit Bansal
Abhinav Singh
Tim Abbott
Aditya Bansal
Armaan Ahluwalia
Shubham Dhama
Utkarsh Patil
gooca
Brock Whittaker
Vaida Plankyte