Wire-desktop: Feature: show colorful smileys / emojis in desktop app (Linux) and add a smiley selection menu

[EgbertW]

I'm using the Desktop Wire app on Linux, but I really miss the colorful emoji's in the chats. If someone sends me a emoji it will show up as the unicode black-and-white icon.

Also, a popup menu showing all available emojis would be very helpful.

[DragonzMaster]

I think this depends on the font is being used.

[Suggestion] We can find a way to use this font (open-source) from EmojiOne - their GitHub Repo
It can be found here : http://emojione.com/developers/

• For me I prefer this one, they look really nice and cool.

* They are used by Firefox and Photoshop.

[Suggestion] OR we can use Noto (emoji) font (from google and open-source)
It can be found here : https://www.google.com/get/noto/#emoji-zsye-color

Hope this will help.

[ConorIA]

Yes please then I could use my favourite emoji of all time

[mohammadrafigh]

also Firefox recently added Emojis support natively using Emoji One font

[maximbaz]

FYI: you can install an SVG-based font (like the one from EmojiOne) in your system and get _nicer_ emojis today (nicer comparing to default unicode symbols).
No special configs were required in my case, it all just worked out of the box after restarting Wire.

Emojis are still black and white though:

This is a limitation of Chromium (and therefore Electron) that the icons are black and white. There is an article that claims that it's possible to get colorful Noto emojis work in Chromium by using a special font file, I didn't try it as I'm not a fan of Noto emojis, but someone could try it and tell us the results.

[ConorIA]

@maximbaz, thanks for the hint! There is a super quick solution to get colour emojis working from OMG! Ubuntu!. Works with the Google Noto font as well.

[maximbaz]

I believe it works only with Google Noto font, but let me know if I'm wrong and you managed to get colorful EmojiOne emojis as well :wink:

[ConorIA]

Oops. Looks like you're right! Sorry for the confusion. Hadn't even noticed that you'd linked the same article! :stuck_out_tongue_winking_eye:

[peterpanondrugs]

Wire doesnt show all emojis. That's what i receive when someone sends me a unkown emoji: 👶🏻

[anatoli26]

An botton that would open a popup with smileys selection is something that most users _expect_ to be there.

[sbuller]

I downloaded the EmojiOne font, followed the link (which now says 'updated'), and installed noto and configured fontconfig as indicated. With these actions colour emoji are now working, thanks for the pointers. Additionally, one of the comments on the linked article mentions changing 2 of the bindings in fonts.conf to 'weak' instead of 'strong', which avoids causing issues with (in my case) Thunderbird.

[JumpOverWires]

Sorry. I'm quite new in Linux. I installed the Google Noto Emoji Font in Linux Mint, but I can't see how to use it in the Wire App for Linux. Any suggestions?

[ConorIA]

@JumpOverWires, installing the Noto Font won't activate any new emoji functionality, but it should make any emojis that you receive look a little prettier. Did you follow the instructions in the linked article?

[maximbaz]

Do configure a nice emoji font, emoji autocomplete was just merged in master 😉
https://github.com/wireapp/wire-webapp/issues/541

Soon we will be able to send emojis full speed 😜

[lipis]

So I think that's the best we can do for that issue.. :) Therefore I'll close this issue..

[maximbaz]

Just a final note, to get colorful emojis on linux you have to create a font using specific technology. That's why Noto is colorful, and that's why it's the only colorful font as of today.

For example, to express your desire to get colorful EmojiOne (or maybe even help implementing it!), follow https://github.com/eosrei/emojione-color-font/issues/57 and https://github.com/Ranks/emojione/issues/441

[maximbaz]

EmojiOne is coming to Linux soon, in color 😉 A sneak preview:

[maximbaz]

So both emojione-apple.ttf and emojione-android.ttf provide colorful EmojiOne, the first one has emojis v3.0 but as of now glyphs are positioned incorrectly (at least on my box), the second one is positioned correctly, but as of now has emojis v2.0.

Enjoy 🙂

[ConorIA]

@maximbaz: purveyor of fine emoji

[anatoli26]

Maxim, thanks a lot for your contribution! Nice work!

[anatoli26]

This change is already available on linux via PPA, I'm using it and it works fine!

Though it's quick and easy for advanced users, I see it difficult to explain to mainstream users. Another issue from a general UX PoV is that I have to constantly check the cheat-shit with the icon codes, otherwise I don't know what code to enter for an icon. And one more issue is that if my current keyboard layout for the chat window is not Latin, I have to constantly switch the layouts just for the smileys.

I would suggest to expand this work and add a button to open a typical emojis selector. There, on moving mouse over each smiley its code could be shown in a tooltip so one learns them without leaving the app.

Also, some typical char combinations could activate the selector too: :) > 🙂 (or show the list with all smiling faces), :D > 😀, XD > 😆, (Y) > 👍, etc.

[maximbaz]

Another issue from a general UX PoV is that I have to constantly check the cheat-shit with the icon codes, otherwise I don't know what code to enter for an icon.

I have an idea to make Wire learn your favorite emojis, so that maybe first time you had to look up how to enter "😜", but next time this emoji is higher in the selection list, it is suggested immediately after you type :w. It will not solve the issue entirely, but I think it will help. The code is already implemented and waiting to be reviewed, by the way: https://github.com/wireapp/wire-webapp/pull/1126

Also, some typical char combinations could activate the selector too: :) > :slightly_smiling_face: (or show the list with all smiling faces), :D > :grinning:, XD > :laughing:, (Y) > :+1:, etc.

+1, also already implemented, just waiting to be merged: https://github.com/wireapp/wire-webapp/pull/1142

And one more issue is that if my current keyboard layout for the chat window is not Latin, I have to constantly switch the layouts just for the smileys.

Yeah I struggle with that too 🙂 The previous suggestion will hopefully make it a bit easier.

I would suggest to expand this work and add a button to open a typical emojis selector. There, on moving mouse over each smiley its code could be shown in a tooltip so one learns them without leaving the app.

Good idea, there was even a separate feature request for this button ( https://github.com/wireapp/wire-webapp/issues/408 )... but it was closed.

[anatoli26]

That's a great progress! Just though about the layouts switching issue. Maybe some combination could activate the recently used list? Like "::" or ":!". These special chars exist in almost all layouts, so no need to switch, also you get the favorites list easily and no need to remember the codes.

With respect to the favs list itself, I would suggest to count somehow the usage for each symbol for some time, e.g.: among the last 1000 chars selected, 😆 was selected 250 times, 👍 180, 😏 150 and so on - these numbers determine their order in the fav list.

[lokesh-krishna]

@maximbaz it seems like you have some experience with fonts so could you contribute back to EmojiOne by helping fix #477 so that Android too would have the 3.0 artwork?

I know this issue isn't the right place to make this request and I'm sorry but I couldn't find any other way to contact you.

[maximbaz]

@anatoli26 that's an interesting idea about showing most used emojis with something like :: or :!, I'll explore it after existing PRs get merged.

among the last 1000 chars selected, :laughing: was selected 250 times, :+1: 180, :smirk: 150 and so on - these numbers determine their order in the fav list.

That's exactly what I implemented in https://github.com/wireapp/wire-webapp/pull/1126. When one emoji was used more than another, it will be placed higher in the suggestion list. When two emojis have exactly the same usage count, then their order is determined alphabetically. I think it is very natural, however there is a concern that some people will not understand this behavior and get confused (see the last few messages in https://github.com/wireapp/wire-webapp/pull/1126)

@Lokesh-Krishna I really wish I could, but I don't know enough to create the font, I can't even figure out how to adjust the existing font and center glyphs on the line. I'm also following https://github.com/Ranks/emojione/issues/477 for when some kind person helps creating the font, I'll be happy to test it 🙂

[anatoli26]

@maximbaz, I've checked the discussion in 1126. I agree with you there (both on the implementation and on communicating it on medium), whatever icon that is more used would be more useful on top of any list (if it's not too long). Nevertheless, I can live with alphabetically sorted general list.

My last proposal was to create a favorites list specifically for the purpose of ordered-by-use list only with already used entries (I would show max 10 icons). This way what others ask in 1126 could be fulfilled (alpha-sort) and at the same time we'd have a sorted-by-use list. The 🐺 are sated and the 🐑 intact 😏

[maximbaz]

I think you (like me) basically want "sorted-by-use" list of favorite emojis for most times, and for rare events "alphabetically-sorted" list of all other emojis. The cool thing about the current code in #1126 is that after a few days of usage, the one and only list will become exactly what we need most, "sorted-by-use" (especially when combined with idea of ::, which I like more and more). But the same list can also find any other emoji when you begin to type unusual name.

So... because of that, I really want to try the current approach, to get it merged as it is and to see users' feedback - I feel this would be very natural and solve all problems 🙂 Also because Slack is using this, and many people are pretty happy with it.

And if for some reasons people dislike this way of sorting, we can always adapt and implement another, more sophisticated approach, for example two different lists like you suggest.

By the way, I already tried to suggest to increase the list to 10 elements, @markesaaremets suggests not to do it for now as it covers the content too much. It makes sense, the current layout is very "vertical", comparing to Slack which shows emojis horizontally, and thus can show more emojis while covering less content.

[anatoli26]

Maxim, I agree with you completely, though I don't mind having 2 lists as you describe in the 1st sentence.

Also, IMO, with the current user base of Wire, that (my guess) consists mostly of advanced users enthusiastic about a new secure messenger, I think your approach of releasing the changes as-is and receiving users feedback, then reiterating with new changes is completely reasonable. Also I don't mind the smileys list overlapping anything as (again guessing) nobody is reading the previous messages and typing a new one at the same time.

In any case, if the decision makers insist on having the main list alpha-sorted, I wouldn't block the new code with a dead-locking discussion for weeks and release the 2 lists: the alpha-sorted main list and a favs list that would be activated with :: or :!. After releasing this change and receiving users feedback, we could propose new changes.