diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2017-10-06 01:07:59 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-10-06 01:07:59 +0200 |
commit | 7db0f8dcb2110b4ec8815bedc965cfbd01a59798 (patch) | |
tree | ff3153c334c12a75aa2875284012cded2a82d49d /app/javascript/mastodon/components/status_list.js | |
parent | 49cc0eb3e7d1521079e33a60216df46679082547 (diff) |
Implement hotkeys for web UI (#5164)
* Fix #2102 - Implement hotkeys Hotkeys on status list: - r to reply - m to mention author - f to favourite - b to boost - enter to open status - p to open author's profile - up or k to move up in the list - down or j to move down in the list - 1-9 to focus a status in one of the columns - n to focus the compose textarea - alt+n to start a brand new toot - backspace to navigate back * Add navigational hotkeys The key g followed by: - s: start - h: home - n: notifications - l: local timeline - t: federated timeline - f: favourites - u: own profile - p: pinned toots - b: blocked users - m: muted users * Add hotkey for focusing search, make escape un-focus compose/search * Fix focusing notifications column, fix hotkeys in compose textarea
Diffstat (limited to 'app/javascript/mastodon/components/status_list.js')
-rw-r--r-- | app/javascript/mastodon/components/status_list.js | 31 |
1 files changed, 29 insertions, 2 deletions
diff --git a/app/javascript/mastodon/components/status_list.js b/app/javascript/mastodon/components/status_list.js index cbae28afe..58a7b228a 100644 --- a/app/javascript/mastodon/components/status_list.js +++ b/app/javascript/mastodon/components/status_list.js @@ -25,18 +25,45 @@ export default class StatusList extends ImmutablePureComponent { trackScroll: true, }; + handleMoveUp = id => { + const elementIndex = this.props.statusIds.indexOf(id) - 1; + this._selectChild(elementIndex); + } + + handleMoveDown = id => { + const elementIndex = this.props.statusIds.indexOf(id) + 1; + this._selectChild(elementIndex); + } + + _selectChild (index) { + const element = this.node.node.querySelector(`article:nth-of-type(${index + 1}) .focusable`); + + if (element) { + element.focus(); + } + } + + setRef = c => { + this.node = c; + } + render () { const { statusIds, ...other } = this.props; const { isLoading } = other; const scrollableContent = (isLoading || statusIds.size > 0) ? ( statusIds.map((statusId) => ( - <StatusContainer key={statusId} id={statusId} /> + <StatusContainer + key={statusId} + id={statusId} + onMoveUp={this.handleMoveUp} + onMoveDown={this.handleMoveDown} + /> )) ) : null; return ( - <ScrollableList {...other}> + <ScrollableList {...other} ref={this.setRef}> {scrollableContent} </ScrollableList> ); |