diff --git a/app/javascript/flavours/glitch/features/getting_started_misc/index.js b/app/javascript/flavours/glitch/features/getting_started_misc/index.js
index 1209500a0a0..9cf7ddff931 100644
--- a/app/javascript/flavours/glitch/features/getting_started_misc/index.js
+++ b/app/javascript/flavours/glitch/features/getting_started_misc/index.js
@@ -45,10 +45,11 @@ export default class gettingStartedMisc extends ImmutablePureComponent {
-
-
-
-
+
+
+
+
+
diff --git a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js
new file mode 100644
index 00000000000..0a12737643f
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js
@@ -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 (
+
+
+
+
+
+
+ |
+ |
+
+
+
+
+ r |
+ |
+
+
+ m |
+ |
+
+
+ f |
+ |
+
+
+ b |
+ |
+
+
+ enter |
+ |
+
+
+ up |
+ |
+
+
+ down |
+ |
+
+
+ 1 -9 |
+ |
+
+
+ n |
+ |
+
+
+ alt +n |
+ |
+
+
+ backspace |
+ |
+
+
+ s |
+ |
+
+
+ esc |
+ |
+
+
+ x |
+ |
+
+
+ ? |
+ |
+
+
+
+
+
+ );
+ }
+
+}
diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js
index a3a12e6284d..5c80ea07bb5 100644
--- a/app/javascript/flavours/glitch/features/ui/index.js
+++ b/app/javascript/flavours/glitch/features/ui/index.js
@@ -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 {
+
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 8f98863d88e..06521d7087a 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -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;
diff --git a/app/javascript/flavours/glitch/util/async-components.js b/app/javascript/flavours/glitch/util/async-components.js
index 265a70cdc50..5d21ccca2a6 100644
--- a/app/javascript/flavours/glitch/util/async-components.js
+++ b/app/javascript/flavours/glitch/util/async-components.js
@@ -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');
}