This removes scaling from the emojis by changing the background size to
a lower value and then allowing for the widths and heights of the
emojis to be proportionally smaller.
The transform: scale property would cause many more repaints in Chrome
and other browsers than should have been necessary which would render
messages above and below the feed light grey boxes that would
momentarily flash as blank before filling with content.
Modified by tabbott to use a percentage in the background-size.
Fixes#4660.
This fixed the fact that the scrollbar for this popover was super ugly
on Linux, while also ensuring that we have a consistent 6 emoji per
row in the popover (an important detail for the arrow hotkeys).
This currently only supports this in emoji reactions, not in actual
emoji in message bodies, but it's a great start for people who want a
text-only view.
Tweaked to update the text by tabbott.
Fixes#3169.
This provides a fairly intense highlighting of when you're hovering
over a given emoji reaction element.
We may want to tone down the color a bit; I'm hoping for some feedback on this.
This fixes CSS issues such as removing padding with negative margins
and then re-adding padding back later. It also ensures the width of the
picker is exactly six columns wide and does not shift around when zoom
is enabled in the browser.
Emoji styling was broken in Firefox browser due to its lack of support
for the zoom property.
This replaces the zoom property with the transform property that now
scales the emojis down to 70% of their original size.
This fixes two issues:
* If you had around 10 distinct emoji reactions on a message (enough
to force a line wrap if the add-your-emoji button was visible),
Zulip would add that button into a new row on hover, jolting the
message feed. This fixes that problem by leaving a blank last line
for the add-your-emoji button.
* We were incorrectly showing the padding for the emoji reactions
region even if there were no emoji reactions, causing messages to
have too much padding.
This commit replaces the placeholder "clipboard" button with a reaction button.
This is done on any message that can't be edited. Also, on messages sent by
the user the actions popover (toggled by the down chevron icon) contains
an option to add a reaction.
When clicked, a popover with a search bar and a list of emojis is displayed.
If the right sidebar is collapsed (the viewport is small), the popover is placed
to the left of the button.
Focus is set to the search bar. Typing in the search bar filters emojis.
Emojis with which the user has reacted to this message are highlighted.
Clicking them sends an API request to remove that reaction.
Clicking on non-highlighted emojis sends an API request to add a reaction.
When the popover loses focus it is closed.
The frontend listens for reaction events. When an add-reaction event is
received, the emoji is displayed at the bottom of the message with a
count initialized to 1. If there was an existing reaction to the message with
the same emoji, the count is incremented.
Old messages fetched from the server contain reactions.
They are displayed (along with title and count) at the bottom
of each message.
When clicking the emoji reaction at the bottom of the message, if the
user has already reacted with that emoji to this message, the reaction
is removed and the count is decremented. Otherwise, a reaction is added
and the count is incremented.
Hovering over the emoji reaction at the bottom of the message displays
a list of users who have reacted with this emoji along with the
emoji name.
Hovering over the emoji reactions at the bottom of the message displays
a button to add a reaction.
Fixes#541.
Rishi Gupta
Tim Abbott
Brock Whittaker
Cory Lynch
Jack Zhang
Sourav Badami
hackerkid
Brock Whittaker
Tommy Ip
Arpith Siromoney