logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe
commit: ff78c1177a180f1b9aec8464734ac3aa1c888874
parent: c6b7c772293ed1319dc57741487ce5bc774558a9
Author: Joshua Wood <josh@joshuawood.net>
Date:   Mon, 27 Nov 2017 12:31:58 -0800

Add Keyboard Shortcuts Legend (#5823)

* Add Keyboard Shortcuts Legend

Adds a "Keyboard Shortcuts" legend (displayed in the rightmost column)
which is toggled via a new "?" hotkey. When subsequently pressed from
the Keyboard Shortcuts legend, "?" will navigate back to the previous
location.

* Add hidden table headings.

Makes the headings available for accessibility but hides them visually.

Diffstat:

Aapp/javascript/mastodon/features/keyboard_shortcuts/index.js68++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Mapp/javascript/mastodon/features/ui/index.js12++++++++++++
Mapp/javascript/mastodon/features/ui/util/async-components.js4++++
Mapp/javascript/styles/mastodon/components.scss21+++++++++++++++++++++
4 files changed, 105 insertions(+), 0 deletions(-)

diff --git a/app/javascript/mastodon/features/keyboard_shortcuts/index.js 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 ( + <Column icon='question' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile> + <div className='keyboard-shortcuts scrollable optionally-scrollable'> + <table> + <thead> + <tr><th>{intl.formatMessage(messages.hotkey)}</th><th>{intl.formatMessage(messages.description)}</th></tr> + </thead> + <tbody> + <tr><td><code>r</code></td><td>{intl.formatMessage(messages.reply)}</td></tr> + <tr><td><code>m</code></td><td>{intl.formatMessage(messages.mention)}</td></tr> + <tr><td><code>f</code></td><td>{intl.formatMessage(messages.favourite)}</td></tr> + <tr><td><code>b</code></td><td>{intl.formatMessage(messages.boost)}</td></tr> + <tr><td><code>enter</code></td><td>{intl.formatMessage(messages.enter)}</td></tr> + <tr><td><code>up</code></td><td>{intl.formatMessage(messages.up)}</td></tr> + <tr><td><code>down</code></td><td>{intl.formatMessage(messages.down)}</td></tr> + <tr><td><code>1</code>-<code>9</code></td><td>{intl.formatMessage(messages.column)}</td></tr> + <tr><td><code>n</code></td><td>{intl.formatMessage(messages.compose)}</td></tr> + <tr><td><code>alt</code>+<code>n</code></td><td>{intl.formatMessage(messages.toot)}</td></tr> + <tr><td><code>backspace</code></td><td>{intl.formatMessage(messages.back)}</td></tr> + <tr><td><code>s</code></td><td>{intl.formatMessage(messages.search)}</td></tr> + <tr><td><code>esc</code></td><td>{intl.formatMessage(messages.unfocus)}</td></tr> + <tr><td><code>?</code></td><td>{intl.formatMessage(messages.legend)}</td></tr> + </tbody> + </table> + </div> + </Column> + ); + } + +} diff --git 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 { <WrappedSwitch> <Redirect from='/' to='/getting-started' exact /> <WrappedRoute path='/getting-started' component={GettingStarted} content={children} /> + <WrappedRoute path='/keyboard-shortcuts' component={KeyboardShortcuts} content={children} /> <WrappedRoute path='/timelines/home' component={HomeTimeline} content={children} /> <WrappedRoute path='/timelines/public' exact component={PublicTimeline} content={children} /> <WrappedRoute path='/timelines/public/local' component={CommunityTimeline} content={children} /> diff --git 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 @@ -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;