Emoji picker toolbar item

Feature
1

I am horrible at finding the right Emoji that properly expresses what I mean using the traditional hunt-and-peck model.

The secondary, go-to-other-index-website-model also does not work great for me, I have way too many windows and tabs open.

What would be cool would be some sort of Emoji toolbar widget…

It could allow me to pick an Emoji, gangnam Apple style:

work in progress: not finished yet, but you get the idea

:imp:

My plan is to add pagination and sections, groups are already defined, 50 emojis per page seems reasonable, any more and you are both flooded with info and http requests.

16 Likes
2

Cool, fits with the other emoji work @zogstrip is doing for 1.2.

I suggest we follow the slack model here as well:

Pasted image427×682 50.7 KB

  • show the name on mouseover at the bottom so you can learn the shortcut text too
  • tabs at the top for different “categories”
13 Likes
3

I like this but would it be possible to turn it off in the admin settings until the functionality settles?

Also, as I wrote elsewhere, I see there’s a new emoji popup in the editor, but I got confused by it at first - it can’t be closed once opened except by choosing an emoji or clicking in the greyed out area outside the emoji selector. Hitting ESC minimizes your post and there is no X available to close it.

2 Likes
4

I’m sure @sam can knock out the closing logic pretty fast.

1 Like
5

This is now fixed, also CTRL E will bring up the emoji selector

also

  • refactored emoji plugin so we don’t load stuff we don’t need on the server
  • position of emoji being added is now correct and cursor does not do funny things

:imp:

1 Like
6

OK we have more progress

:hatching_chick: :hatched_chick: :baby_chick:

3 Likes
7

Hmm I like the improvements very much but…

  • Slack dialog is 7 tabs with 14 rows of 8 emoji = 784

  • Ours is 5 tabs with 6 rows of 10 emoji = 300

That is a big discrepancy!

(I would also copy the Slack tab categorizations and maybe even order directly)

8

I need to add pagination we have all the emojis :innocent:

1 Like
9

Still, should be more tabs – ala the Slack model. Better to be wide (widescreen) than tall. Particularly because our editor default is so very wide with preview side-by-side.

And none of the toolbar stuff is visible on mobile, deservedly so.

10

And using ESC closes it too :slight_smile: That is an important improvement :smile:

1 Like
11

@sam I really like your work on the emoji picker toolbar item - nicely done! I can already tell this is going to be a well loved feature. :cat:

… that said, I am not keen on the :mask: emoji and am wishing it were not featured so prominently… esp as I am now launching a forum including people in Sierra Leone who are grappling with ebola. Just conjures up unnecessarily negative images. Can this list be admin editable?

Or can the emoji toolbar item be disabled while it is still experimental?

12

I can bump it to the end of the list, if you really need to I can give you a miniscript to disable that you can add to the footer (1 liner)

1 Like
13

We now export Discourse.Emoji.groups so you can amend that in a footer script if needed.

1 Like
14

Yay, we now have pagination: :tada: :confetti_ball:

So you can find emojis like :kiss: which are tucked away in the last page.

Additionally

  • I made the UI wider
  • Added a group for “foods” - yum :hamburger: :fries:
  • Corrected bugs when it was bust in Firefox ( :w was broken if Firefox for quite a while)
  • Corrected the phantom }) stuff
  • Added caching for emojis so UI does not take :arrows_counterclockwise: years to load every time
  • Cleaned up internals so we now use a handlebars template to render the page

Overall this is getting there.

Mixed feelings on modal vs non-modal. Going to change it so it remembers your last position and see if that solves the majority of the issue.

3 Likes
15

Still needs more top level tabs IMO. And should probably be a bit wider and 1 or 2 rows taller to show more emoji at once.

1 Like
16

Now that we have caching working its practical, before that it would have been asking for a :train2: :boom:

Will amend the UI again :soon: but probably not today.

2 Likes
17

Ahh, the Ctrl+E shortcut is freaking me out miserably. Even in the five seconds it has taken me to come here and complain, I accidentally just opened it twice in the process of trying to write the first sentence of this post. Ctrl+E goes to end of line on Mac (and Emacs), the opposite of Ctrl+A. I hit it all the time, so linking it to the emoji popup is rather – ah, jarring is the word (I just did it again).

Can we use another shortcut, or disable the shortcut and just show the toolbar item, or have a way to disable the shortcut without disabling the emoji plugin? (If it’s just me, I’m fine just disabling the plugin; not sure how many others use the shortcut, but it seems pretty basic to me.)

3 Likes
18

What shortcut do you suggest?

19

I suggest something involving colon key since colon and semicolon (same key) are the start of :) and ;)

2 Likes
20

If you were looking for a letter - looking at the default keyboard shortcuts from these:

Would leave you with only these remaining: M Q Y

Didn’t spot any use of Ctrl+: in those.