New keyboard shortcuts: Ctrl+1..9, Ctrl+Tab/Ctrl+Shift+Tab
* New keyboard shortcuts: Ctrl+1..9, Ctrl+Tab/Ctrl+Shift+Tab * Add new shortcuts to the shortcut guide
This commit is contained in:
Scott Nonnenberg
parent
aaa91c441b
commit
ebb3864f58
4 changed files with 178 additions and 77 deletions
|
|
@ -15,6 +15,8 @@ type KeyType =
|
|||
| 'optionOrAlt'
|
||||
| 'shift'
|
||||
| 'enter'
|
||||
| 'tab'
|
||||
| 'ctrl'
|
||||
| '↑'
|
||||
| '↓'
|
||||
| ','
|
||||
|
|
@ -33,142 +35,153 @@ type KeyType =
|
|||
| 'T'
|
||||
| 'U'
|
||||
| 'V'
|
||||
| 'X';
|
||||
| 'X'
|
||||
| '1 to 9';
|
||||
type ShortcutType = {
|
||||
description: string;
|
||||
keys: Array<KeyType>;
|
||||
keys: Array<Array<KeyType>>;
|
||||
};
|
||||
|
||||
const NAVIGATION_SHORTCUTS: Array<ShortcutType> = [
|
||||
{
|
||||
description: 'Keyboard--navigate-by-section',
|
||||
keys: ['commandOrCtrl', 'T'],
|
||||
keys: [['commandOrCtrl', 'T']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--previous-conversation',
|
||||
keys: ['optionOrAlt', '↑'],
|
||||
keys: [
|
||||
['optionOrAlt', '↑'],
|
||||
['ctrl', 'shift', 'tab'],
|
||||
],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--next-conversation',
|
||||
keys: ['optionOrAlt', '↓'],
|
||||
keys: [
|
||||
['optionOrAlt', '↓'],
|
||||
['ctrl', 'tab'],
|
||||
],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--previous-unread-conversation',
|
||||
keys: ['optionOrAlt', 'shift', '↑'],
|
||||
keys: [['optionOrAlt', 'shift', '↑']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--next-unread-conversation',
|
||||
keys: ['optionOrAlt', 'shift', '↓'],
|
||||
keys: [['optionOrAlt', 'shift', '↓']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--conversation-by-index',
|
||||
keys: [['commandOrCtrl', '1 to 9']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--preferences',
|
||||
keys: ['commandOrCtrl', ','],
|
||||
keys: [['commandOrCtrl', ',']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--open-conversation-menu',
|
||||
keys: ['commandOrCtrl', 'shift', 'L'],
|
||||
keys: [['commandOrCtrl', 'shift', 'L']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--search',
|
||||
keys: ['commandOrCtrl', 'F'],
|
||||
keys: [['commandOrCtrl', 'F']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--search-in-conversation',
|
||||
keys: ['commandOrCtrl', 'shift', 'F'],
|
||||
keys: [['commandOrCtrl', 'shift', 'F']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--focus-composer',
|
||||
keys: ['commandOrCtrl', 'shift', 'T'],
|
||||
keys: [['commandOrCtrl', 'shift', 'T']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--open-all-media-view',
|
||||
keys: ['commandOrCtrl', 'shift', 'M'],
|
||||
keys: [['commandOrCtrl', 'shift', 'M']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--open-emoji-chooser',
|
||||
keys: ['commandOrCtrl', 'shift', 'J'],
|
||||
keys: [['commandOrCtrl', 'shift', 'J']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--open-sticker-chooser',
|
||||
keys: ['commandOrCtrl', 'shift', 'S'],
|
||||
keys: [['commandOrCtrl', 'shift', 'S']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--begin-recording-voice-note',
|
||||
keys: ['commandOrCtrl', 'shift', 'V'],
|
||||
keys: [['commandOrCtrl', 'shift', 'V']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--archive-conversation',
|
||||
keys: ['commandOrCtrl', 'shift', 'A'],
|
||||
keys: [['commandOrCtrl', 'shift', 'A']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--unarchive-conversation',
|
||||
keys: ['commandOrCtrl', 'shift', 'U'],
|
||||
keys: [['commandOrCtrl', 'shift', 'U']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--scroll-to-top',
|
||||
keys: ['commandOrCtrl', '↑'],
|
||||
keys: [['commandOrCtrl', '↑']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--scroll-to-bottom',
|
||||
keys: ['commandOrCtrl', '↓'],
|
||||
keys: [['commandOrCtrl', '↓']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--close-curent-conversation',
|
||||
keys: ['commandOrCtrl', 'shift', 'C'],
|
||||
keys: [['commandOrCtrl', 'shift', 'C']],
|
||||
},
|
||||
];
|
||||
|
||||
const MESSAGE_SHORTCUTS: Array<ShortcutType> = [
|
||||
{
|
||||
description: 'Keyboard--default-message-action',
|
||||
keys: ['enter'],
|
||||
keys: [['enter']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--view-details-for-selected-message',
|
||||
keys: ['commandOrCtrl', 'D'],
|
||||
keys: [['commandOrCtrl', 'D']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--toggle-reply',
|
||||
keys: ['commandOrCtrl', 'shift', 'R'],
|
||||
keys: [['commandOrCtrl', 'shift', 'R']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--toggle-reaction-picker',
|
||||
keys: ['commandOrCtrl', 'shift', 'E'],
|
||||
keys: [['commandOrCtrl', 'shift', 'E']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--save-attachment',
|
||||
keys: ['commandOrCtrl', 'S'],
|
||||
keys: [['commandOrCtrl', 'S']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--delete-message',
|
||||
keys: ['commandOrCtrl', 'shift', 'D'],
|
||||
keys: [['commandOrCtrl', 'shift', 'D']],
|
||||
},
|
||||
];
|
||||
|
||||
const COMPOSER_SHORTCUTS: Array<ShortcutType> = [
|
||||
{
|
||||
description: 'Keyboard--add-newline',
|
||||
keys: ['shift', 'enter'],
|
||||
keys: [['shift', 'enter']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--expand-composer',
|
||||
keys: ['commandOrCtrl', 'shift', 'X'],
|
||||
keys: [['commandOrCtrl', 'shift', 'X']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--send-in-expanded-composer',
|
||||
keys: ['commandOrCtrl', 'enter'],
|
||||
keys: [['commandOrCtrl', 'enter']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--attach-file',
|
||||
keys: ['commandOrCtrl', 'U'],
|
||||
keys: [['commandOrCtrl', 'U']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--remove-draft-link-preview',
|
||||
keys: ['commandOrCtrl', 'P'],
|
||||
keys: [['commandOrCtrl', 'P']],
|
||||
},
|
||||
{
|
||||
description: 'Keyboard--remove-draft-attachments',
|
||||
keys: ['commandOrCtrl', 'shift', 'P'],
|
||||
keys: [['commandOrCtrl', 'shift', 'P']],
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -253,46 +266,67 @@ function renderShortcut(
|
|||
{i18n(shortcut.description)}
|
||||
</div>
|
||||
<div className="module-shortcut-guide__shortcut__key-container">
|
||||
{shortcut.keys.map((key, mapIndex) => {
|
||||
let label: string = key;
|
||||
let isSquare = true;
|
||||
{shortcut.keys.map((keys, outerIndex) => (
|
||||
<div
|
||||
key={outerIndex}
|
||||
className="module-shortcut-guide__shortcut__key-inner-container"
|
||||
>
|
||||
{keys.map((key, mapIndex) => {
|
||||
let label: string = key;
|
||||
let isSquare = true;
|
||||
|
||||
if (key === 'commandOrCtrl' && isMacOS) {
|
||||
label = '⌘';
|
||||
}
|
||||
if (key === 'commandOrCtrl' && !isMacOS) {
|
||||
label = i18n('Keyboard--Key--ctrl');
|
||||
isSquare = false;
|
||||
}
|
||||
if (key === 'optionOrAlt' && isMacOS) {
|
||||
label = i18n('Keyboard--Key--option');
|
||||
isSquare = false;
|
||||
}
|
||||
if (key === 'optionOrAlt' && !isMacOS) {
|
||||
label = i18n('Keyboard--Key--alt');
|
||||
isSquare = false;
|
||||
}
|
||||
if (key === 'shift') {
|
||||
label = i18n('Keyboard--Key--shift');
|
||||
isSquare = false;
|
||||
}
|
||||
if (key === 'enter') {
|
||||
label = i18n('Keyboard--Key--enter');
|
||||
isSquare = false;
|
||||
}
|
||||
if (key === 'commandOrCtrl' && isMacOS) {
|
||||
label = '⌘';
|
||||
}
|
||||
if (key === 'commandOrCtrl' && !isMacOS) {
|
||||
label = i18n('Keyboard--Key--ctrl');
|
||||
isSquare = false;
|
||||
}
|
||||
if (key === 'optionOrAlt' && isMacOS) {
|
||||
label = i18n('Keyboard--Key--option');
|
||||
isSquare = false;
|
||||
}
|
||||
if (key === 'optionOrAlt' && !isMacOS) {
|
||||
label = i18n('Keyboard--Key--alt');
|
||||
isSquare = false;
|
||||
}
|
||||
if (key === 'ctrl') {
|
||||
label = i18n('Keyboard--Key--ctrl');
|
||||
isSquare = false;
|
||||
}
|
||||
if (key === 'shift') {
|
||||
label = i18n('Keyboard--Key--shift');
|
||||
isSquare = false;
|
||||
}
|
||||
if (key === 'enter') {
|
||||
label = i18n('Keyboard--Key--enter');
|
||||
isSquare = false;
|
||||
}
|
||||
if (key === 'tab') {
|
||||
label = i18n('Keyboard--Key--tab');
|
||||
isSquare = false;
|
||||
}
|
||||
if (key === '1 to 9') {
|
||||
label = i18n('Keyboard--Key--one-to-nine-range');
|
||||
isSquare = false;
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
key={mapIndex}
|
||||
className={classNames(
|
||||
'module-shortcut-guide__shortcut__key',
|
||||
isSquare ? 'module-shortcut-guide__shortcut__key--square' : null
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
return (
|
||||
<span
|
||||
key={mapIndex}
|
||||
className={classNames(
|
||||
'module-shortcut-guide__shortcut__key',
|
||||
isSquare
|
||||
? 'module-shortcut-guide__shortcut__key--square'
|
||||
: null
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue