Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Keyboard shortcut to open the sticker picker #7985

Merged
merged 6 commits into from
Mar 8, 2022

Conversation

andybalaam
Copy link
Contributor

@andybalaam andybalaam commented Mar 4, 2022

Inspired by the desire to reduce the pain of element-hq/element-web#20887 this adds a keyboard shortcut to open the sticker picker.

image

Notes for reviewer:

  1. It was difficult to find a suitable key combination. I went for Ctrl-comma Ctrl-semicolon in the end, but suggestions welcome. (Ctrl-S=save, Ctrl-T=new tab, Ctrl-I=Italic, Ctrl-C=copy, Ctrl-K=search, Ctrl-E=toggle webcam, Ctrl-R=refresh)

  2. I followed the pattern of KeyBindingAction.SelectPrevSendHistory in my code, so this shortcut only works when the composer is focussed. Ideally it would work from more places, but my brain is not working brilliantly today and I feared running out of time before I made this work. Suggestions of how to do it better would be welcome, or we might decide needing to focus in the composer is right and fine?


This PR currently has no changelog labels, so will not be included in changelogs.

A reviewer can add one of: T-Deprecation, T-Enhancement, T-Defect, T-Task to indicate what type of change this is, or add Type: [enhancement/defect/task] to the description and I'll add them for you.

Preview: https://pr7985--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

@andybalaam andybalaam requested a review from a team as a code owner March 4, 2022 16:10
@t3chguy t3chguy requested a review from a team March 4, 2022 16:11
@t3chguy
Copy link
Member

t3chguy commented Mar 4, 2022

Given how scarce remaining handy shortcuts are (and how awful destroying someone's muscle memory is by changing them later), things have to pass by product

src/accessibility/KeyboardShortcuts.ts Outdated Show resolved Hide resolved
@andybalaam
Copy link
Contributor Author

andybalaam commented Mar 4, 2022

So, relevant Product person: any suggestions for keyboard shortcuts to open the sticker picker? See above: Ctrl+S, T, I, C, K, E, R are all gone, as is Ctrl+comma, which was my first attempt.

@andybalaam
Copy link
Contributor Author

Ctrl+; (semicolon) appears to be free (CMD+; on Mac).

@t3chguy
Copy link
Member

t3chguy commented Mar 4, 2022

Ctrl+; (semicolon) appears to be free (CMD+; on Mac).

Worth also checking other messengers e.g slack, discord so we don't conflict with a different behaviour users may expect.

@jakewb-b
Copy link

jakewb-b commented Mar 4, 2022

Do we have a list of shortcuts anywhere? I feel like that would be useful.

If semi-colon is free then I'm happy using that. I agree that now we've hidden some often-used items in the composer, adding shortcuts for them is a worthwhile use of the remaining handy key combos.

@SimonBrandner
Copy link
Contributor

Do we have a list of shortcuts anywhere? I feel like that would be useful.

Yes, press Ctrl + /

@andybalaam andybalaam requested a review from t3chguy March 4, 2022 16:33
@t3chguy
Copy link
Member

t3chguy commented Mar 4, 2022

Do we have a list of shortcuts anywhere? I feel like that would be useful.

Yes, press Ctrl + /

Or Settings > Keyboard which is far more discoverable

Copy link
Contributor

@SimonBrandner SimonBrandner left a comment

Choose a reason for hiding this comment

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

Thanks!

@andybalaam
Copy link
Contributor Author

Confirmed that Ctrl-; does nothing in Slack or Discord.

@andybalaam
Copy link
Contributor Author

@jakewb-b if you are happy to go ahead, please could you tick the review?

Copy link
Member

@t3chguy t3chguy left a comment

Choose a reason for hiding this comment

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

LGTM otherwise

src/accessibility/KeyboardShortcuts.ts Show resolved Hide resolved
@andybalaam andybalaam enabled auto-merge (squash) March 8, 2022 13:20
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
@andybalaam andybalaam merged commit a792097 into develop Mar 8, 2022
@andybalaam andybalaam deleted the keyboard-shortcut-for-sticker branch March 8, 2022 15:05
@HarHarLinks
Copy link
Contributor

HarHarLinks commented Mar 8, 2022

How will this work on a German QWERTZ keyboard? We need to press Shift+, to write ;.

Similarly, Ctrl+/ does already not work because / is actually Shift+7.

@andybalaam
Copy link
Contributor Author

@HarHarLinks does Ctrl+Shift+; work? You can try this now at https://develop.element.io

@HarHarLinks
Copy link
Contributor

@andybalaam It Ctrl+Shift+, does not work. Which I expected since Ctrl+Shift+7 has not been working for a long time either. I seem to remember however that it used to work at some point. Issue: element-hq/element-web#21067

@andybalaam
Copy link
Contributor Author

@HarHarLinks I'm really sorry - that is very frustrating. I think the existing issue element-hq/element-web#21067 is the right place to deal with this.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants