diff --git a/app/javascript/mastodon/features/keyboard_shortcuts/index.js b/app/javascript/mastodon/features/keyboard_shortcuts/index.js new file mode 100644 index 00000000000..00771b79cb7 --- /dev/null +++ b/app/javascript/mastodon/features/keyboard_shortcuts/index.js @@ -0,0 +1,68 @@ +import React from 'react'; +import Column from '../ui/components/column'; +import { defineMessages, injectIntl } from 'react-intl'; +import PropTypes from 'prop-types'; +import ImmutablePureComponent from 'react-immutable-pure-component'; + +const messages = defineMessages({ + heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' }, + hotkey: { id: 'keyboard_shortcuts.hotkey', defaultMessage: 'Hotkey' }, + description: { id: 'keyboard_shortcuts.description', defaultMessage: 'Description' }, + reply: { id: 'keyboard_shortcuts.reply', defaultMessage: 'to reply' }, + mention: { id: 'keyboard_shortcuts.mention', defaultMessage: 'to mention author' }, + favourite: { id: 'keyboard_shortcuts.favourite', defaultMessage: 'to favourite' }, + boost: { id: 'keyboard_shortcuts.boost', defaultMessage: 'to boost' }, + enter: { id: 'keyboard_shortcuts.enter', defaultMessage: 'to open status' }, + profile: { id: 'keyboard_shortcuts.profile', defaultMessage: 'to open author\'s profile' }, + up: { id: 'keyboard_shortcuts.up', defaultMessage: 'to move up in the list' }, + down: { id: 'keyboard_shortcuts.down', defaultMessage: 'to move down in the list' }, + column: { id: 'keyboard_shortcuts.column', defaultMessage: 'to focus a status in one of the columns' }, + compose: { id: 'keyboard_shortcuts.compose', defaultMessage: 'to focus the compose textarea' }, + toot: { id: 'keyboard_shortcuts.toot', defaultMessage: 'to start a brand new toot' }, + back: { id: 'keyboard_shortcuts.back', defaultMessage: 'to navigate back' }, + search: { id: 'keyboard_shortcuts.search', defaultMessage: 'to focus search' }, + unfocus: { id: 'keyboard_shortcuts.unfocus', defaultMessage: 'to un-focus compose textarea/search' }, + legend: { id: 'keyboard_shortcuts.legend', defaultMessage: 'to display this legend' }, +}); + +@injectIntl +export default class KeyboardShortcuts extends ImmutablePureComponent { + + static propTypes = { + intl: PropTypes.object.isRequired, + multiColumn: PropTypes.bool, + }; + + render () { + const { intl } = this.props; + + return ( + +
+ + + + + + + + + + + + + + + + + + + + +
{intl.formatMessage(messages.hotkey)}{intl.formatMessage(messages.description)}
r{intl.formatMessage(messages.reply)}
m{intl.formatMessage(messages.mention)}
f{intl.formatMessage(messages.favourite)}
b{intl.formatMessage(messages.boost)}
enter{intl.formatMessage(messages.enter)}
up{intl.formatMessage(messages.up)}
down{intl.formatMessage(messages.down)}
1-9{intl.formatMessage(messages.column)}
n{intl.formatMessage(messages.compose)}
alt+n{intl.formatMessage(messages.toot)}
backspace{intl.formatMessage(messages.back)}
s{intl.formatMessage(messages.search)}
esc{intl.formatMessage(messages.unfocus)}
?{intl.formatMessage(messages.legend)}
+
+
+ ); + } + +} diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 57289f519a9..36132696138 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -19,6 +19,7 @@ import { Compose, Status, GettingStarted, + KeyboardShortcuts, PublicTimeline, CommunityTimeline, AccountTimeline, @@ -56,6 +57,7 @@ const mapStateToProps = state => ({ }); const keyMap = { + help: '?', new: 'n', search: 's', forceNew: 'option+n', @@ -298,6 +300,14 @@ export default class UI extends React.Component { this.hotkeys = c; } + handleHotkeyToggleHelp = () => { + if (this.props.location.pathname === '/keyboard-shortcuts') { + this.context.router.history.goBack(); + } else { + this.context.router.history.push('/keyboard-shortcuts'); + } + } + handleHotkeyGoToHome = () => { this.context.router.history.push('/timelines/home'); } @@ -343,6 +353,7 @@ export default class UI extends React.Component { const { children } = this.props; const handlers = { + help: this.handleHotkeyToggleHelp, new: this.handleHotkeyNew, search: this.handleHotkeySearch, forceNew: this.handleHotkeyForceNew, @@ -369,6 +380,7 @@ export default class UI extends React.Component { + diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js index ec1630ed682..b741f668e8f 100644 --- a/app/javascript/mastodon/features/ui/util/async-components.js +++ b/app/javascript/mastodon/features/ui/util/async-components.js @@ -38,6 +38,10 @@ export function GettingStarted () { return import(/* webpackChunkName: "features/getting_started" */'../../getting_started'); } +export function KeyboardShortcuts () { + return import(/* webpackChunkName: "features/keyboard_shortcuts" */'../../keyboard_shortcuts'); +} + export function PinnedStatuses () { return import(/* webpackChunkName: "features/pinned_statuses" */'../../pinned_statuses'); } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index f4ad6627166..80060a00fe2 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2099,6 +2099,27 @@ } } +.keyboard-shortcuts { + padding: 8px 0 0; + overflow: hidden; + + thead { + position: absolute; + left: -9999px; + } + + td { + padding: 0 10px 8px; + } + + code { + display: inline-block; + padding: 3px 5px; + background-color: lighten($ui-base-color, 8%); + border: 1px solid darken($ui-base-color, 4%); + } +} + .setting-text { color: $ui-primary-color; background: transparent;