p5.js-web-editor/client/modules/IDE/components/KeyboardShortcutModal.jsx
ov 05e43c70b7
Minimal Viable Navigation Menu (#1510)
* Minimal Viable Navigation Menu
Translation with new namespace
I18Next configuration leaning on default separator and namespace

Broom: i18n + debug:false

* Minimal Viable Navigation Menu
Test entry for Toolbar.test.jsx

* Translation.json : Changes in translation for new namespace
About : broom About lines 17-26
Nav component : changes in keys
KeyboardShortcutModal.jsx: Key now in Common

* Voice Over Labels in Preferences:index
Labels included in translations.json

* Voice Over Labels in Preferences:index
Labels included in translations.json

* Voice Over Labels in Preferences:index
Labels included in translations.json

* Voice Over Labels in Preferences:index
Labels included in translations.json
Snapshot updated npm run test -- -u

* translations.json ARIA labels adjacent to respective label
Updated names to call the labels
Common namespace without currently used entries

* Update Nav.jsx

Missing Common.p5logoARIA key

* Update Toolbar.test.jsx

Deleting commented line 78

* Update in keys

Co-authored-by: Andrew Nicolaou <me@andrewnicolaou.co.uk>
2020-07-31 15:20:42 +02:00

92 lines
3.6 KiB
JavaScript

import React from 'react';
import { useTranslation } from 'react-i18next';
import { metaKeyName, } from '../../../utils/metaKey';
function KeyboardShortcutModal() {
const { t } = useTranslation();
return (
<div className="keyboard-shortcuts">
<h3 className="keyboard-shortcuts__title">{t('KeyboardShortcuts.CodeEditing.CodeEditing')}</h3>
<p className="keyboard-shortcuts__description">
{t('KeyboardShortcuts.ShortcutsFollow')} <a href="https://shortcuts.design/toolspage-sublimetext.html" target="_blank" rel="noopener noreferrer">{t('KeyboardShortcuts.SublimeText')}</a>.
</p>
<ul className="keyboard-shortcuts__list">
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
<span>{t('KeyboardShortcuts.CodeEditing.Tidy')}</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + F
</span>
<span>{t('KeyboardShortcuts.CodeEditing.FindText')}</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + G
</span>
<span>{t('KeyboardShortcuts.CodeEditing.FindNextTextMatch')}</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + {'\u21E7'} + G
</span>
<span>{t('KeyboardShortcuts.CodeEditing.FindPreviousTextMatch')}</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + [
</span>
<span>{t('KeyboardShortcuts.CodeEditing.IndentCodeLeft')}</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + ]
</span>
<span>{t('KeyboardShortcuts.CodeEditing.IndentCodeRight')}</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + /
</span>
<span>{t('KeyboardShortcuts.CodeEditing.CommentLine')}</span>
</li>
</ul>
<h3 className="keyboard-shortcuts__title">General</h3>
<ul className="keyboard-shortcuts__list">
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + S
</span>
<span>{t('Common.Save')}</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + Enter
</span>
<span>{t('KeyboardShortcuts.General.StartSketch')}</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + {'\u21E7'} + Enter
</span>
<span>{t('KeyboardShortcuts.General.StopSketch')}</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + {'\u21E7'} + 1
</span>
<span>{t('KeyboardShortcuts.General.TurnOnAccessibleOutput')}</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + {'\u21E7'} + 2
</span>
<span>{t('KeyboardShortcuts.General.TurnOffAccessibleOutput')}</span>
</li>
</ul>
</div>
);
}
export default KeyboardShortcutModal;