Add Shortcuts Dialogue and Update Shortcuts

[joshuajames-smith]

Problem

Relates to gliff-ai/roadmap#79.

Solution

Depends on #306.
Relates to gliff-ai/style#86, gliff-ai/annotate#653, gliff-ai/curate#335, gliff-ai/audit#130, gliff-ai/manage#269.

• Add dropdown menu to ? [located in the topbar]
• Add keyboard shortcuts' dialogue with All shortcut Assignments [list dictated by current interface location]

---

^ action: click on Help opens dropdown menu [same UI + UX pattern as Account] showing Help Centre [opens new tab to gliff.ai DOCUMENT] and Keyboard Shortcuts [opens dialogue]

^ the dialogue opens top right and is comprised of two sections: [1 – static] search bar with user hint, and; [2 – scrollable] list of keyboard shortcuts

^ search bar allows users to type tool / action in and should alter the list of keyboard shortcuts to display shortcuts that mean the search input, e.g. user inputs 'zoo' which tailor the results and display tools /actions such as 'Zoom In'.

^ list of keyboard shortcuts is divided into sections separated by a thin, full-width grey line with category header and the associated list if shortcuts alongside the corresponding tooltip visuals – this section should be scrollable but search bar should not move.

^ list of keyboard shortcuts section should be scrollable but search bar section MUST remain static for a better UX

^ users can action: hover on the shortcut tooltip visuals to get a tooltip of it's own, benefiting UX as users can double check what we mean by any of the icons or abbreviations and avoid confusion between '0' [zero] and 'O' [letter o]

---

ANNOTATE

Category	Tool/Action	Assigned Shortcut
Topbar	Help	F1
	Support Centre	F2
	Shortcuts	F3
	Mark Annotation as Done	Enter [icon]
	Previous Image	CTRL / CMD + Right Arrow
	Next Image	CTRL / CMD + Left Arrow
General	Select Annotation	A
	Select Previous Annotation	Down Arrow [icon]
	Select Next Annotation	Up Arrow [icon]
	Add New Annotation	=
	Delete Annotation	-
	Annotation Labels	CTRL / CMD + L
	Undo Last Action	CTRL / CMD + Z
	Redo Last Action	CTRL / CMD + Y
	Save Annotations	CTRL / CMD + S
	Plugins	P
	Close Dialogue	ESC
	Upload Image	U
	Download Annotations	D
Minimap	Open Minimap	ALT / OPT + 1
	Close Minimap	ALT / OPT + 2
	Zoom In	ALT / OPT + =
	Zoom Out	ALT / OPT + -
	Fit to Page	ALT / OPT + 0
Tools	Paintbrush Toolbox [opens submenu of tools]	1
	Paintbrush	B
	3D Paintbrush	CTRL / CMD + B
	Eraser	E
	Fill Active Paintbrush	F
	Annotation Transparency	T
	Convert Stroke to Pixels	C [annotation layer dependent to prevent conflict]
	Spline Toolbox [open submenu of tools]	2
	Spline	S
	Bezier Spline	Z
	Lasso Spline	L
	Close Active Spline	O
	Convert Spline to Paintbrush	C [annotation layer dependent to prevent conflict]
	Delete Spline Point	Backspace [icon]
	Deselect Spline Point	ESC
	Rectangle Boundary Box	R
	Background Settings Toolbox [open submenu of tools]	3
	Brightness	\
	Contrast	/
	Channels	;

CURATE

Category	Tool/Action	Assigned Shortcut
Topbar	Help	F1
	Support Centre	F2
	Shortcuts	F3
	Project Settings	CTRL / CMD + S
General	Upload Image	U
	Download Dataset	D
	Plugins	CTRL / CMD + P
	Small Image View	1
	Medium Image View	2
	Large Image View	3
	Image View	I
	Grid View	G
	Sort Data	S
	Label [image(s) selected]	L
	Assign Users [image(s) selected]	A
	Delete [image(s) selected]	Backspace [icon]
	Create Collection [image(s) selected]	C
	Select Multiple in Range	Shift [icon] + Click [icon]
	Select Multiple by Individual	CTRL / CMD + Click [icon]
	Open Image in ANNOTATE	Enter [icon]
	Deselect Image	ESC
	Close Dialogue	ESC

AUDIT

Category	Tool/Action	Assigned Shortcut
Topbar	Help	F1
	Support Centre	F2
	Shortcuts	F3
General	Close Dialogue	ESC

MANAGE

Category	Tool/Action	Assigned Shortcut
Topbar	Help	F1
	Support Centre	F2
	Shortcuts	F3
Pages	Projects	1
	Team	2
	Collaborators	3
	Plugins	4
General	Close Dialogue	ESC

---

---

Considered Alternatives

In my development process, I have trialed the keyboard shortcuts dialogue location and design [use of tool icons for visual understanding, categorising tools / actions for refined searching]. See below:

In my ideation process, I thought around the UX experience of interacting with the shortcuts dialogue. A really nice feature could be similar to macOS search, where upon searching for a tool / action the user can hover over and the UI then highlights where this tool / action exists (a spin off from placing tool icon next to shortcut list to help demonstrate). See below: