add keyboard shortcuts to getting started (fixes #275)
This commit is contained in:
cwm
parent
5b185a0a0f
commit
ca77c18c24
5 changed files with 144 additions and 4 deletions
|
|
@ -45,10 +45,11 @@ export default class gettingStartedMisc extends ImmutablePureComponent {
|
|||
|
||||
<div className='scrollable'>
|
||||
<ColumnSubheading text={intl.formatMessage(messages.subheading)} />
|
||||
<ColumnLink key='22' icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />
|
||||
<ColumnLink key='23' icon='thumb-tack' text={intl.formatMessage(messages.pins)} to='/pinned' />
|
||||
<ColumnLink key='19' icon='volume-off' text={intl.formatMessage(messages.mutes)} to='/mutes' />
|
||||
<ColumnLink key='20' icon='ban' text={intl.formatMessage(messages.blocks)} to='/blocks' />
|
||||
<ColumnLink key='19' icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />
|
||||
<ColumnLink key='20' icon='thumb-tack' text={intl.formatMessage(messages.pins)} to='/pinned' />
|
||||
<ColumnLink key='21' icon='volume-off' text={intl.formatMessage(messages.mutes)} to='/mutes' />
|
||||
<ColumnLink key='22' icon='ban' text={intl.formatMessage(messages.blocks)} to='/blocks' />
|
||||
<ColumnLink key='23' icon='question' text={intl.formatMessage(messages.keyboard_shortcuts)} to='/keyboard-shortcuts' />
|
||||
<ColumnLink icon='book' text={intl.formatMessage(messages.info)} href='/about/more' />
|
||||
<ColumnLink icon='hand-o-right' text={intl.formatMessage(messages.show_me_around)} onClick={this.openOnboardingModal} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,102 @@
|
|||
import React from 'react';
|
||||
import Column from 'flavours/glitch/features/ui/components/column';
|
||||
import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim';
|
||||
import { defineMessages, injectIntl, FormattedMessage } 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' },
|
||||
});
|
||||
|
||||
@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)}>
|
||||
<ColumnBackButtonSlim />
|
||||
<div className='keyboard-shortcuts scrollable optionally-scrollable'>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
|
||||
<th><FormattedMessage id='keyboard_shortcuts.description' defaultMessage='Description' /></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>r</code></td>
|
||||
<td><FormattedMessage id='keyboard_shortcuts.reply' defaultMessage='to reply' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>m</code></td>
|
||||
<td><FormattedMessage id='keyboard_shortcuts.mention' defaultMessage='to mention author' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>f</code></td>
|
||||
<td><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to favourite' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>b</code></td>
|
||||
<td><FormattedMessage id='keyboard_shortcuts.boost' defaultMessage='to boost' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>enter</code></td>
|
||||
<td><FormattedMessage id='keyboard_shortcuts.enter' defaultMessage='to open status' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>up</code></td>
|
||||
<td><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>down</code></td>
|
||||
<td><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>1</code>-<code>9</code></td>
|
||||
<td><FormattedMessage id='keyboard_shortcuts.column' defaultMessage='to focus a status in one of the columns' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>n</code></td>
|
||||
<td><FormattedMessage id='keyboard_shortcuts.compose' defaultMessage='to focus the compose textarea' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>alt</code>+<code>n</code></td>
|
||||
<td><FormattedMessage id='keyboard_shortcuts.toot' defaultMessage='to start a brand new toot' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>backspace</code></td>
|
||||
<td><FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>s</code></td>
|
||||
<td><FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>esc</code></td>
|
||||
<td><FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>x</code></td>
|
||||
<td><FormattedMessage id='keyboard_shortcuts.expand' defaultMessage='to expand a status with a content warning' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>?</code></td>
|
||||
<td><FormattedMessage id='keyboard_shortcuts.legend' defaultMessage='to display this legend' /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -20,6 +20,7 @@ import {
|
|||
Compose,
|
||||
Status,
|
||||
GettingStarted,
|
||||
KeyboardShortcuts,
|
||||
PublicTimeline,
|
||||
CommunityTimeline,
|
||||
AccountTimeline,
|
||||
|
|
@ -63,6 +64,7 @@ const mapStateToProps = state => ({
|
|||
});
|
||||
|
||||
const keyMap = {
|
||||
help: '?',
|
||||
new: 'n',
|
||||
search: 's',
|
||||
forceNew: 'option+n',
|
||||
|
|
@ -312,6 +314,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');
|
||||
}
|
||||
|
|
@ -378,6 +388,7 @@ export default class UI extends React.Component {
|
|||
});
|
||||
|
||||
const handlers = {
|
||||
help: this.handleHotkeyToggleHelp,
|
||||
new: this.handleHotkeyNew,
|
||||
search: this.handleHotkeySearch,
|
||||
forceNew: this.handleHotkeyForceNew,
|
||||
|
|
@ -405,6 +416,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} />
|
||||
|
|
|
|||
|
|
@ -2297,6 +2297,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;
|
||||
|
|
|
|||
|
|
@ -50,6 +50,10 @@ export function GettingStarted () {
|
|||
return import(/* webpackChunkName: "flavours/glitch/async/getting_started" */'flavours/glitch/features/getting_started');
|
||||
}
|
||||
|
||||
export function KeyboardShortcuts () {
|
||||
return import(/* webpackChunkName: "features/keyboard_shortcuts" */'flavours/glitch/features/keyboard_shortcuts');
|
||||
}
|
||||
|
||||
export function PinnedStatuses () {
|
||||
return import(/* webpackChunkName: "flavours/glitch/async/pinned_statuses" */'flavours/glitch/features/pinned_statuses');
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue