Global Gmail style keyboard shortcuts

keyboard

(skisulli) #1

WIP - Opened Pull Request early to get feedback on design

Related to the following topics (can’t link them because I am new on the site)

  • Hotkeys aka Keyboard Shortcuts
  • Keyboard shortcuts?

I would like Discourse to have Gmail style keyboard shortcuts, and have begun implementation using Mousetrap. Below are my proposed shortcuts. The jump to shortcuts have been implemented, but not tested yet.

I am opening this PR early to get feedback on the following:

  1. Best place to organize the code. I currently added a Discourse.KeyboardShortcuts class under components and initialize the bindings on start, after bindDOMEvents

  2. How to best test the shortcuts. I am new to testing Ember and using QUnit, so any feedback or advice on how to best test the keybindings would be appreciated.

  3. The shortcuts themselves, am I missing anything, do they all make sense?

Jump To

  • g then h - Home (Latest)

  • g then l - Latest

  • g then n - New

  • g then u - Unread

  • g then f - Favorited

  • g then c - Categories List

Navigation

  • u - Back to topic list

  • k / j - Newer/Older conversation or post

  • o or Enter - Open selected conversation

  • ` - Go to next section

  • ~ - Go to previous section

Application

  • c - Create a new topic

  • n - Open notifications menu

  • / - Search

  • ? - Open keyboard shortcut help

Actions

  • f - Favorite topic

  • s - Share topic

  • <Shift> + s - Share selected post

  • r - Reply to topic

  • <Shift> + r - Reply to selected post

  • l - Like selected post

  • ! - Flag selected post

  • b - Bookmark selected post

  • e - Edit selected post

  • d - Delete selected post

  • m then m - Mark topic as muted

  • m then r - Mark topic as regular

  • m then t - Mark topic as tracking

  • m then w - Mark topic as watching


List of Hotkeys
Document keyboard command to link a URL
(Sam Saffron) #2

A couple of suggestions:

Can you get help going like gmails ? key.

Can you try getting this going as a plugin, it would make it way easier to test it out.


(Jeff Atwood) #3

Yes seconding what @sam said. Good ? help key support is an absolute must. Here’s Twitter:

Beyond that, I am not sure this needs to be a plugin @sam I think it should be a core feature we always support and ship. I cannot see any reason whatsoever I would want to be on another Discourse forum anywhere on the Internet and see broken, non-functional, or non-standard keyboard shortcuts as I have come to expect on every Discourse forum.

(Unless explicitly disabled by the forum operator, of course, which is fine… but on by default, shipped by default.)


(Sam Saffron) #4

The only reason I want this as a plugin is to make it easier to experiment and try out, agree we should ship it as a core feature.


(skisulli) #5

A help light window is defiantly part of the plan, I forgot to mention in the original post other than listing that ? would open help. I will take a look at making it into a plugin.


(Kane York) #6

Don’t forget Home and End on the topic view.


(Lowell Heddings) #7

I would definitely like to see this as a default option.


(Sam Saffron) #8

FYI we now have the initial implementation by @skisulli merged and implemented here. Big thank you.

@zogstrip is helping refine it.

In particular j and k are a bit rough both in the topic page and topic list. The wrapping in the topic list needs to go, in the topic page we need to be smarter about scrolling the page when moving around.

Regardless this is a great start.

cc @shanselman


(Kane York) #9

From List:

  • Pressing k forces the scroll such that the selected topic is at exactly the bottom of the screen.
  • Repeatedly hitting ` just cycles between Latest and New. Repeatedly hitting ~ just stays on Categories.

From Topic:

  • The go commands don’t reset the page scroll position. (try g-c to test)
  • The share box is opened way at the bottom-left of the page.
  • It feels like everything that needs a selected post doesn’t work. (Share, Reply, Like, …)

(Lowell Heddings) #10

On the home page, if you hit the k key, it sends you into some weird position at the bottom of the currently loaded items. Weird.

Good start though.


(Dave McClure) #11

seems like the ? help could be made a little bigger to get rid of the scroll bar…


(Dave McClure) #12

and I’m not able to get any of the ‘post’ actions to work.

l Like post
! Flag post
b Bookmark post
e Edit post
d Delete post

(assuming its suppsoed to work on the post that is selected, which is indicated by a vertical red line on the left side of it after j or k within a topic, which does seem to work other than the weirdness with the scroll position)


(skisulli) #13

A quick note about the main design choice I made for the global shortcuts. Most of them are achieved using jQuery selectors and .click() calls. So if the selection is not working properly than many of the other selectors will not work as well.

I am currently on vacation and will have time to fix these issues on Sunday when I get back. Sorry this took so long, and the quality was not what to the standard I hold myself. A lot of things happened in my personal and professional life the last few months, and I just did not have the time to dedicate to open source that I wanted to.


(Dave McClure) #14

Hey, its a good start to a cool feature - hopefully the feedback is helpful for when you or someone do have the time to address them.


(Jeff Atwood) #15

No worries at all, we can take it from here if you don’t have time! Sometimes “a good start” is all you need.


(nXqd) #16

I find that Edit post using e key doesn’t seem to work.
Browser info:

Version 35.0.1853.2 canary
Version 33.0.1750.117

(bhel) #17

Pressing / opens up the search box with the “/” character in it. It’d be better if it was empty.

Edit: Chrome 33.0.1750.117 m


(Andy Hayden) #18

I think the ? menu should close if you click outside it (does on twitter and gmail). This is niiice. :slight_smile:


(Sam Saffron) #19