Create actions menu and render when right-clicking an event

[tyler-dane]

As a user, I want to be able to right-click on an event and change its priority, so that I don't have to spend extra time doing so by opening the full event form.

Implementation

Must-Haves: These are the minimum enhancements needed to close this issue.

Actions component

• Create actions menu component that roughly* matches the below design and includes the following functionality
  • The current priority is filled in (unless the priority is unassigned)
  • When clicking a different priority, the previous priority is unselected. (We're not supporting multiple priorities yet)
  • Clicking 'Edit' closes the actions menu and opens the event form
  • Clicking 'Delete' deletes the event without prompting for confirmation

Opening and closing

• Render actions menu on right-click
  • This'll require you to prevent default right-click context menu when right-clicking an event. A few ways to do this:
    - use preventDefault() when the event is of type contextmenu (reference this example)
    - Check for the code on the button property of a MouseEvent
    - 0 for the primary button (usually the left button).
    - 1 for the middle button (usually the wheel button).
    - 2 for the secondary button (usually the right button).
    - Confirm whether this approach meets accessibility conventions
• Closes when left-clicking on any other element (similar to how the normal event form works)
• Closes when pressing ESC
• Preserve normal right-clicking behavior when clicking anything that is not an event (eg. empty space on the grid or the header)

---

Nice-to-Haves: These additional enhancements can be added if the above is finished before the designed End date in this issue. If there is not enough time to finish these, create a new issue, copy-paste them to the new issue, and mention it in the comments. This'll help us prioritize that work in another milestone.

• Actions menu opens relative to where the event was clicked -- not always in the same place.
  • This helps save users time by having to move the mouse less before using the menu
• When hovering over a priority circle, its label (eg, Work) shows up above the the circle
• Uses the following icons: pen-nib and trash from phosphoricons
  • trash is already wrapped in Delete.tsx. A new icon wrapper is needed for the pen icon.
• Animation renders after changing priority. This animation could be on the event and/or the priority circles in the actions menu. It's up to you what kind of animation to use. The goal is to incentivize the user to make changes by giving them a pleasant UX when they do so.

Designs

** These are rough designs. Your implementation doesn't need to be pixel perfect. If you find ways to improve the design, feel free to adjust. You should also use the colors in the current theme rather than using the colors here.