Element-web: Emoji picker UI

[ara4n]

[ara4n]

Once upon a time a suggested design wireframe for this was:

[AndrewJDR]

Much preferred over the text-based search method for emoji as it stands!

[superdump]

:+1: or in general, I feel that GitHub do a pretty good job with emoji UX-wise.

[joelostblom]

This would be a very helpful addition!
I was having troubles writing emojis initially, as autocomplete didn't work until I enable the experimental Rich Text Editor. Now I can get emojis for :smile: etc, but I still can't autocomplete emojis on :) and similar. An emoji selection UI would make this much more straightforward and the design suggestion above looks great!

[lukebarnard1]

@lukebarnard1 wonders if we're going to change the current emoji picker to look more like this

[MurzNN]

At now Riot already have popup frame with list of smileys via typing :, but it contains very little items, because items shows with text: http://i.imgur.com/Q3RedkP.png
Will be good to show only image without text, and add scroll for view all items.
Also will be good to add separate Smiley button for select smiley in bold-italic-quote panel, because not all users knows about : hack.

[MurzNN]

Good implementation of Emoji picker we can see in VK.com (Vkontakte):

and Telegram:

[MurzNN]

Here is React implementation of Slack Emoji picker: https://slack.engineering/rebuilding-slacks-emoji-picker-in-react-bfbd8ce6fbfe?gi=37f3b106bb90 but seems it not opensource :(

[MurzNN]

And here is another React implementations of Emoji picker:
https://github.com/tommoor/emojione-picker
https://github.com/missive/emoji-mart
https://github.com/ealush/emoji-picker
https://github.com/conorhastings/react-emoji-react

[floviolleau]

Hi, I like links from @MurzNN.

Can s.o. have time to implement it?

KR

[pafcu]

As a data-point, Mastodon has switched to using emoji-mart

[Hoeze]

Are there any updates on this?

[MightyCreak]

There is a pretty important bug in the latest 1.0.x releases: we don't see which smiley is currently selected any more. So we just need to hit tab until we get the right one.

[eMPee584]

emoji-mart still seems to be well maintained and thus a good candidate for integration:
https://github.com/missive/emoji-mart/graphs/contributors

[aleex5]

this feature is necessary, it will give more life to the application

[MurzNN]

Riot moved to Emojione, so here Emoji Picker is good react emoji picker integrated with Emojione, and React Emoji Picker V2 is other alternative.

[lalomartins]

@MurzNN you're a little late 😅 Riot just moved away from Emojione

[eMPee584]

emoji-mart still seems to be well maintained and thus a good candidate for integration:

… Is it not?
having the sticker function sit behind that smiley face and no picker still is really somewhat confusing..

[juliusv]

I do have to agree, it's hard to sell a chat app (on the web) to people if it doesn't have an emoji picker. The current smiley face not leading to an emoji keyboard (but to some unwanted sticker store) was confusing for me as well.

[Ezwen]

Quick question: is it planned to also use the fancy new reaction emoji picker for writing emojis in the message composer? Would be really neat :)

[turt2live]

it's been requested a lot, and I don't think anyone is opposed to it. Best to keep the discussion on https://github.com/vector-im/riot-web/issues/9484

[Ezwen]

Thanks for the link! sorry I did not find the other issue with my first search

[t3chguy]

https://github.com/vector-im/riot-web/issues/9484#issuecomment-489096947 sets out the overarching plan

[Letterus]

Just want to push this issue. Current UI/UX is not consistent and confusing. Several of our users reported that.

[Hoeze]

Can we just have something working? It does not need to be pretty, things can always be improved.

This (seemingly simple/essential) functionality is discussed for four (!) years now :laughing:

[fti7]

With the current speed we can expect something for Christmas :-)

[t3chguy]

Designs are almost ready actually.

[nadonomy]

@t3chguy just to unblock this specific issue, we can lift the icons from the new Composer work in Figma (which still has some validation left to do):

https://www.figma.com/file/WM63nhWpzWUrVhEYgFRUpt/Composer?node-id=8%3A680