Refactor awards handler / emoji menu
Why
Refactor this emoji menu to be more usable and more performant.
Proposal
See below for the designs of the proposal. With this proposal we will also refactor into Vue. The Vue component should be able to be plugged into any part of the app so this needs to be taken into consideration when creating this component.
Also some thing to consider is make it use a virtual scroller to save us rendering X amount of emojis. But this can be considered at a later time if it requires too much work.
Steps
These are very high level steps for this issue and may change:
-
Create a Vue component for the emoji dropdown - Instead of the Vue component handling adding the emoji to the note/issue/merge request etc. consider emitting an event.
- Also something to consider is to create a wrapper that will add it to the note/issue/merge request with GraphQL if available.
-
Tabs with intersection observer. -
Virtual scrolling
Images & Mockups
Below is the designs to refactor this menu to use tabs. However the plan shouldn't be to use traditional tabs, instead to be anchors (See this comment #23390 (comment 329937475))
Edited by Phil Hughes