Add Ability to Pin the Labels Dialogue

[joshuajames-smith]

Problem

The current UX of the Labels dialogue within ANNOTATE means once a user clicks away it closed - this was to preserve visual retail space allowing for a clear focus on the image. This however may mean that some users have to keep clicking to open the Labels dialogue, making for a more annoying UX.

Solution

Add the ability to pin the dialogue which then stays open. This was originally designed but never implemented. The original solution was to have a pin icon where the close icon now exists within the popper dialogue. This is a toggle button, which when on means the user can click away without the dialogue closing.

Considered Alternatives

N/A

[joshuajames-smith]

We now have 2 types of containers: pin and close.

1. pin allows the user to force a popover to remain open when they click away - normally this action cause the popover to close.
2. close allows the user to force a dialogue to close when they click - normally if they click away this should do nothing, i.e. this should not close the dialogue.

---

There is 4 selector states for the pin popover: default, hover:default, active and hover:active.

1. default defines the pin icon as black.
2. hover:default defines the cursor property as pointer with the tooltip 'Pin Open'.
3. active defines the pin icon as black with a white circle - this is constant`.
4. hover:active defines the cursor property as pinter with a tooltip 'Turn Off Pin'.

---

There is 2 selector states for the close dialogue: default and hover.

1. default defines the close icon as black.
2. hover define the cursor property as pointer with the tooltip 'Close'.3.

---

[joshuajames-smith]

There is 4 pin popover components located within ANNOTATE.

• Annotation Labels
• Plugins
• Image Channels
• Keyboard Shortcuts (awaiting implementation > Update Shortcuts #653)

---