typedb / typedb-studio

TypeDB Studio (IDE)
https://typedb.com
Mozilla Public License 2.0
191 stars 44 forks source link

Dialog window close ux (autofocus on close button, outside click close) #586

Open gitvge opened 2 years ago

gitvge commented 2 years ago

Problem to Solve

The Dialogs (e.g. Manage Databases) can only be closed by clicking the Close button.

Current Workaround

click the Close button

Proposed Solution

Autofocus to close so that the user can use Enter to close the dialog (e.g. type database name --> Enter creates it --> Enter again to close the dialog.

Plus allow to close the dialog window by clicking outside of it.

alexjpwalker commented 2 years ago

The Dialogs (e.g. Manage Databases) can only be closed by clicking the Close button.

This isn't true:

Autofocus to close so that the user can use Enter to close the dialog (e.g. type database name --> Enter creates it --> Enter again to close the dialog.

This is already the default behaviour for most dialogs where it is the logical process to follow: i.e. the "Create File" dialog, the Open and Save file dialogs, and the "Connect to TypeDB" dialog when a connection has been opened.

The exception I found is Type Browser's "Select Database", but in this case, it's not clear-cut whether the user would want to change their selection or confirm their selection, so we stick with not automatically switching focus to the "Close" button.

For the "Manage Databases" dialog, there is no "primary workflow" as it is a generic database management dialog. You can create databases, you can delete databases and you can view and refresh the list of databases. Therefore it does not make sense to linearise the workflow by auto-focusing "Close" immediately after creating a single database.

allow to close the dialog window by clicking outside of it

This might be a nice-to-have feature for some users, however I can find no precedent for it in the IDEs we use (namely IntelliJ and VS Code). There is an example of a non-modal dialog [Help > Open Process Explorer] in Code (ie: one that is essentially a separate window, allowing free navigation back to the main window), but it has a poor UX: it actually stays on top of the main window even after you click outside of it.

"Close dialog by clicking outside" has certainly become standard for modern Web apps but remains unclear for modern desktop apps, perhaps because it can actually lead to a bad UX; you go into the dialog, make some changes, and accidentally click outside the window causing you to lose your changes.

Thoughts?