UX: Use arrow keys to navigate in edit dialog - #3623
Conversation
|
|
|
Thank you very much for your contribution! We will have a look at this once the recently merged pull requests have been successfully released :) |
|
@graciousgrey Any updates :) ? |
|
Please note that we are out of the office until October 3 to get some rest after working on the new release. 🏝️💬 |
|
The first tests look good so far :) It works in all browsers I have tested. |
|
@tomplast We found one thing we need to resolve before we can merge this: The app must only navigate to the next edit dialog when the focus is not on an input field. |
|
@graciousgrey Functionality wise I think have fixed the issues you mentioned. |
|
Thank you! I will test your changes as soon as possible :) |
|
I just tested your latest changes.
I have not observed this anymore 🎉
I still see this behavior. The strange thing is that sometimes it works and sometimes it doesn't. One way around this could be to use a key combination that has no other function assigned to it, such as navigating in an input field. For example: shift key + arrow key. I also realized that we need to prevent navigating to the next edit dialog when there are unsaved changes. For example, if a user has edited a field and not clicked Apply or Done, the changes will be lost when navigating to the next edit dialog. We could either prevent navigation without a message, or add a dialog that informs the user that there are unsaved changes and lets him save or discard them. |
|
Sorry for the late reply, I will try to look into it the coming week. |
|
No need to hurry :) We are currently busy with 2FA and OpenID Connect support, so we only have limited time to review changes over the next weeks. |
lastzero
added
in-progress
|
I'd love to give this a try now that the frontend has been upgraded from Vuetify v1.5 to v3.7! 👌 |
lastzero
added
frontend
lastzero
changed the title
Signed-off-by: Michael Mayer <michael@photoprism.app>
|
@tomplast Thanks again for your contribution! Based on your request and proof-of-concept, the above commit adds support for navigating with the arrow keys in the edit dialog. To ensure that this only happens when no input element has focus, navigating with the keys is only possible when the active element is a div, the dialog is active, and the model data is unchanged. Since we also support right-to-left languages like Arabic and Hebrew, another thing to keep in mind was to flip left and right when using the keys. Related Issues: I'm sorry we couldn't take care of this sooner! But now it's finally done, so we can close the PR (since it's no longer needed) and set the status to Preview for final testing. |
|
I've created a follow-up issue to take care of the remaining issues we found while testing (getting help from our community for this would be awesome): |
Signed-off-by: Michael Mayer <michael@photoprism.app>
Signed-off-by: Michael Mayer <michael@photoprism.app>
|
It seems that the arrow keys stopped working after pressing the Apply button because disabled elements cannot have focus, i.e. the browser automatically focused the |
Signed-off-by: Michael Mayer <michael@photoprism.app>
graciousgrey
added
tested
4 participants
What does it implement / fix / improve? Why?
I thought it would be useful (and intuitive) if you could use the keyboard arrows to navigate to previous and next image while in the photo edit dialog.
Are the changes related to an existing issue?
Nope.