Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(web): keyboard shortcut handling #7946

Merged
merged 5 commits into from Mar 14, 2024
Merged

Conversation

michelheusschen
Copy link
Contributor

Keyboard shortcuts are currently handled pretty inconsistently and maybe in an unexpected way. Let's look at an example listening for the escape key using on:keydown={(e) => e.key === 'Escape'}. This not only triggers when pressing escape, but also with any combination of modifier key (ctrl, alt, shift or meta). Another issue may arise when listening for a key that is entered in an input field, where the event handler will still execute.

In some cases these issues are accounted for, but not everywhere. A new action use:shortcut and function executeShortcuts are added that manage these pitfalls. However, they aren't yet used everywhere as it would make this PR a bit large.

Copy link

cloudflare-pages bot commented Mar 14, 2024

Deploying immich with  Cloudflare Pages  Cloudflare Pages

Latest commit: f2464a2
Status: ✅  Deploy successful!
Preview URL: https://6b2b5d28.immich.pages.dev
Branch Preview URL: https://fix-web-keyboard-shortcut-ha.immich.pages.dev

View logs

Copy link
Contributor

@jrasm91 jrasm91 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome work. Eventually would it be possible to automatically show a list of registered shortcuts when you press ?? Like make that modal, which is currently static, dynamic?

web/src/lib/components/asset-viewer/asset-viewer.svelte Outdated Show resolved Hide resolved
@michelheusschen
Copy link
Contributor Author

It can be done, but it's a little tricky. You need to register all shortcuts and add some logic for filtering out duplicate and irrelevant shortcuts such as enter or escape. Hoewever, this PR should make it a lot easier to implement that.

@jrasm91
Copy link
Contributor

jrasm91 commented Mar 14, 2024

It can be done, but it's a little tricky. You need to register all shortcuts and add some logic for filtering out duplicate and irrelevant shortcuts such as enter or escape. Hoewever, this PR should make it a lot easier to implement that.

Yeah that makes sense. I assumed we'd have to add something like title: string and/or description: string to the ones that would be included. I also think you'd need to register them all directly, instead of using the deferred executeShortcuts implementation, which looks just like shorthand for shortcut aliases.

Copy link
Contributor

@alextran1502 alextran1502 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing work! Thank you

Copy link
Member

@danieldietzler danieldietzler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dang this is amazing! Really awesome! ❤️

@jrasm91 jrasm91 enabled auto-merge (squash) March 14, 2024 23:11
@jrasm91 jrasm91 merged commit eed8e6b into main Mar 14, 2024
24 checks passed
@jrasm91 jrasm91 deleted the fix/web-keyboard-shortcut-handling branch March 14, 2024 23:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants