Commit Graph

139 Commits

Author SHA1 Message Date
Harshit Bansal 60b0e0f801 emoji_picker: Add `get_alias_to_be_used()` function.
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.
2017-09-16 08:24:05 -07:00
Harshit Bansal dae51b821d message_controls: Don't auto-hide message control if a popover is open.
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.
2017-09-16 08:17:41 -07:00
Harshit Bansal afba03f84e emoji_picker: Change reaction popover's base element.
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.
2017-09-16 08:17:41 -07:00
Harshit Bansal 16885ef0a7 emoji_picker: Correctly restore the title attribute of base element.
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.
2017-09-16 08:17:41 -07:00
Harshit Bansal 918e2519b0 emoji_picker: Bring focus back to filter on typing while navigating.
Fixes: #6112.
2017-09-16 08:14:47 -07:00
Harshit Bansal c864816f64 emoji_picker: Extract `register_popover_events()` function. 2017-08-29 14:09:35 -07:00
Harshit Bansal aebb49b18c emoji_picker: Move some functions to avoid lint errors.
Move `render_emoji_popover()` and `toggle_emoji_popover()` to bottom
to avoid lint errors.
2017-08-29 14:09:35 -07:00
Harshit Bansal 90d8b0f520 emoji_picker: Fix the two different titles appearing for each emoji.
Fixes: #6286.
2017-08-27 17:22:44 -07:00
Harshit Bansal cd2f41dbb1 popovers: Extend the `compute_placement()` function.
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.
2017-08-27 12:27:53 -07:00
Harshit Bansal f24582576a emoji_picker: Further improve emoji picker navigation.
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.
2017-08-27 12:04:10 -07:00
Vaida Plankyte b2c0ff68c2 frontend: Add hotkey information to title/inline text.
This should make many Zulip hotkeys significantly more discoverable.
2017-08-23 17:12:09 -07:00
Harshit Bansal 1a43728b1e emoji_picker: Fix tracebacks in navigation if search results are empty.
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.
2017-08-22 14:48:02 -07:00
Aditya Bansal 0dcbacdbc6 emoji_picker: Refactor toggle_emoji_popover to split out to functions. 2017-08-22 08:46:55 -04:00
Aditya Bansal e1cc0455ee emoji_picker: Fix issue with emoji tab shifting.
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'.
2017-08-18 12:18:39 -04:00
Aditya Bansal 7beeef9782 emoji_picker: Export emoji_collection and complete_emoji_catalog. 2017-08-16 19:18:26 -04:00
Aditya Bansal 406806b7df emoji_picker: Start using current emoji categories for rendering. 2017-08-16 19:18:26 -04:00
Aditya Bansal 505262ca0b emoji_picker.js: Export initialize function. 2017-08-16 19:18:26 -04:00
Aditya Bansal 85fe355ba7 emoji_picker: Move click handler out from global scope.
In this commit we are moving the .emoji-popover-emoji.reaction
click handler to register_click_handlers() so as to have parity
with rest of the code design.
2017-08-16 19:18:26 -04:00
Tim Abbott dac7cfa026 emoji picker: Fix exceptions with regex characters in emoji filter.
Previously, the Zulip webapp would throw an exception if you used a
character like "+" in your search query, since we were using regular
expressions, when really we should have been just searching for
characters.
2017-08-16 13:06:05 -07:00
Harshit Bansal 99d3668523 emoji_picker: Change emoji picker to be category based. 2017-08-14 12:52:35 -07:00
Jack Zhang bbe8f73c23 popovers: Reimplement compute_placement.
compute_placement utilizes the dimensions of the viewport, viewport location of
an element, and dimensions of an element to determine if a popover will fit
horizontally and/or veritically given its orientation. The default placement
is now viewport_center, which displays the popover, without an arrow, in the
fixed center of the viewport.

This should be particularly useful for hotspots on mobile or large popovers
that contain a lot of content. The property hotspot.location.popover can be
optionally set to fix the orientation of a popover (most likely to
VIEWPORT_CENTER).
2017-08-05 18:32:37 -07:00
Jack Zhang d951375d6c Move compute_placement utility from emoji_picker to popovers. 2017-07-28 16:34:15 -07:00
digi0ps 9a179b486b emoji: Allow searching of emojis using spaces in emoji picker. 2017-07-26 09:27:17 -07:00
Steve Howell bd59b91faa reactions: Simplify markup related to message ids.
Because of local echo, message ids can change in message rows.
Having reactions use markup to indicate their message id just
creates more moving parts, since we would need to handle
message_id_changed events.

Now our handlers just call row.get_message_id() as needed.
2017-07-21 11:38:25 -07:00
Harshit Bansal 598535717b emoji_picker: Extract `add_scrollbar()` function.
Calling this function with  an element will cause a `perfectScrollbar` to
be added to it.
2017-07-05 13:14:40 -07:00
Harshit Bansal c4ec9523fc frontend: Make sure deactivated emojis don't appear for use anywhere.
Deactivated emojis should not appear at any of the following places for
use:
1: Emoji pickers.
2: Composebox autocomplete.
3: Custom emoji settings page.
2017-07-05 13:00:14 -07:00
Cory Lynch d5bcfc415d emoji_picker.js: Fix popover icon that persists after exit.
Another manifestation of #4329, as this bug
also applied to the emoji popover.
2017-06-20 06:28:25 -04:00
Tejas Kasetty cabcdabfbc emoji-picker: Update scrollbar after each search filter.
Fixes #4825.
2017-06-11 10:15:48 -07:00
Rafid Aslam 4f482834b4 deps: Upgrade and move `perfect-scrollbar` from `static/third` to `npm`.
- Remove `perfect-scrollbar` from `static/third` and fetch it from npm.
- Upgrade `perfect-scrollbar` to 0.7.1.
- Bump up the `PROVISION_VERSION` to 5.6.

Changed `wheelSpeed` in "static/js/scroll_bar.js" to 0.5, because when it
20, the scrollbar scrolls very fast.

Changed 'wheelSpeed' in "static/js/emoji_picker.js" from 25 to 0.68
(based on tabbott's testing of scrolling through the emoji list).

Part of #1709.
2017-06-11 10:15:48 -07:00
Tejas Kasetty 1415efea55 emoji-picker: Order emoji filter list after each search.
* change emoji-container to 'flex' display inorder to support ordering
  of the contents (emojis).
* order emojis after each filter. The ordering is based on search string
  and is similar to the ordering in emoji typeahead.

Fixes #4806.
2017-06-07 21:54:07 -07:00
Steve Howell ecbbc8788a Move code from reactions -> emoji_picker.
This moves all the code dealing with emoji_picker
navigation and click/enter events to emoji_picker.js.

Some of the code still delegates back to reactions.js
in some way.

The navigate() code really does nothing reaction-specific,
nor does filter_emojis(), nor do some of their helpers.

This was mostly moving code, but I also did some
s/reaction// or s/reaction/emoji/ in names.
2017-05-29 17:10:05 -06:00
Harshit Bansal a549013c50 emoji_pickers: Fix broken flag emojis.
Due to differences between the codepoints of flag emojis in
`emoji_map.json` and iamcal's dataset, we need to patch the
css classes for the flag emojis temporarily until the migration
to iamcal's dataset is complete inorder to render them properly.
There is a difference between the images of flag emojis in our
old emoji farm and iamcal's spritesheets and since we have not
yet switched to using spritesheets for displaying emojis in
messages, there is a difference between the flag emojis as
rendered in messages and in emoji pickers.
2017-05-17 08:09:50 -07:00
Tejas Kasetty 5dd5c84854 Add support for emoji picker hotkeys in compose context.
This is a follow-up to merging the compose and reactions emoji
pickers.  The logic for what happens when the user picks an emoji via
the hotkeys (i.e. hits `enter`) was still attempting to add a reaction
to the currently selected message unconditionally.

This commit adds a check in the two `enter` key code paths, and does
the correct thing in each case.

Fixes #4736.
2017-05-10 16:26:58 -07:00
Jack Zhang df817f12f4 emoji: Rename reaction-popover to emoji-popover.
The name emoji-popover should now be more appropiate, as there's no more
need to distinguish between reacting to messages and composing messages.
2017-04-30 15:15:33 -07:00
Jack Zhang a9505654da emoji: Replace the old compose emoji picker with the reactions picker.
This removes the old compose emoji picker in its entirety, changing
the few callbacks needed to launch the reactions-style emoji picker
instead and hook it up properly.

Callbacks for reactions and composing messages are distinguished by
selecting for, respectively, the .reaction and .composition classes.

Fixes #4122.
2017-04-30 15:14:42 -07:00
Tim Abbott 87d06268ca toggle_reactions_popover: Support being passed no message ID.
This is intended to facilitate calling this function for the compose
picker, where there is no message yet.
2017-04-30 15:08:51 -07:00
Jack Zhang 3c257a19c0 emoji-picker: Extract generate_emoji_picker_content.
This is a pure refactor, with no functional changes.
2017-04-30 15:02:12 -07:00
Tim Abbott 66f927762b emoji_picker: Extract compute_placement function.
Thanks to Jack Zhang for identifying this useful refactoring.
2017-04-30 14:41:54 -07:00
Jack Zhang f8b3ce7d15 emoji: Move all emoji picker logic/events into emoji_picker module.
Added emoji_picker.js to static asset pipeline.
2017-04-30 14:13:36 -07:00