[Canvas][i18n] Keyboard Shortcuts and Help Menu (#45056)
* Translated shortcut descriptions * Added i18n to HelpMenu and KeyboardShortcutDocs components * fixed i18n errors * Removed unnecessary type * Updated snapshot * Adds a description for shortcut separator in the KeyboardShortcutsDoc
This commit is contained in:
parent
090a4073cf
commit
433d5b65de
7 changed files with 306 additions and 57 deletions
|
@ -5,6 +5,7 @@
|
|||
*/
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { CANVAS } from './constants';
|
||||
|
||||
export const ComponentStrings = {
|
||||
AddEmbeddableFlyout: {
|
||||
|
@ -91,6 +92,42 @@ export const ComponentStrings = {
|
|||
},
|
||||
}),
|
||||
},
|
||||
HelpMenu: {
|
||||
getHelpMenuDescription: () =>
|
||||
i18n.translate('xpack.canvas.helpMenu.description', {
|
||||
defaultMessage: 'For {CANVAS} specific information',
|
||||
values: {
|
||||
CANVAS,
|
||||
},
|
||||
}),
|
||||
getDocumentationLinkLabel: () =>
|
||||
i18n.translate('xpack.canvas.helpMenu.documentationLinkLabel', {
|
||||
defaultMessage: '{CANVAS} documentation',
|
||||
values: {
|
||||
CANVAS,
|
||||
},
|
||||
}),
|
||||
getKeyboardShortcutsLinkLabel: () =>
|
||||
i18n.translate('xpack.canvas.helpMenu.keyboardShortcutsLinkLabel', {
|
||||
defaultMessage: 'Keyboard Shortcuts',
|
||||
}),
|
||||
},
|
||||
KeyboardShortcutsDoc: {
|
||||
getTitle: () =>
|
||||
i18n.translate('xpack.canvas.keyboardShortcutsDoc.flyoutHeaderTitle', {
|
||||
defaultMessage: 'Keyboard Shortcuts',
|
||||
}),
|
||||
getShortcutSeparator: () =>
|
||||
i18n.translate('xpack.canvas.keyboardShortcutsDoc.shortcutListSeparator', {
|
||||
defaultMessage: 'or',
|
||||
description:
|
||||
'Separates which keyboard shortcuts can be used for a single action. Example: "{shortcut1} or {shortcut2} or {shortcut3}"',
|
||||
}),
|
||||
getFlyoutCloseButtonAriaLabel: () =>
|
||||
i18n.translate('xpack.canvas.keyboardShortcutsDoc.flyout.closeButtonAriaLabel', {
|
||||
defaultMessage: 'Closes keyboard shortcuts reference',
|
||||
}),
|
||||
},
|
||||
WorkpadHeader: {
|
||||
getAddElementBtnText: () =>
|
||||
i18n.translate('xpack.canvas.workpadHeader.addElementButtonText', {
|
||||
|
|
|
@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n';
|
|||
export * from './angular';
|
||||
export * from './components';
|
||||
export * from './constants';
|
||||
export * from './shortcuts';
|
||||
|
||||
export const getAppDescription = () =>
|
||||
i18n.translate('xpack.canvas.appDescription', {
|
||||
|
|
174
x-pack/legacy/plugins/canvas/i18n/shortcuts.ts
Normal file
174
x-pack/legacy/plugins/canvas/i18n/shortcuts.ts
Normal file
|
@ -0,0 +1,174 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { ELEMENT_NUDGE_OFFSET, ELEMENT_SHIFT_OFFSET } from '../common/lib/constants';
|
||||
|
||||
export const ShortcutStrings = {
|
||||
getNamespaceDisplayNames: () => ({
|
||||
ELEMENT: i18n.translate('xpack.canvas.keyboardShortcuts.namespace.elementDisplayName', {
|
||||
defaultMessage: 'Element controls',
|
||||
}),
|
||||
EXPRESSION: i18n.translate('xpack.canvas.keyboardShortcuts.namespace.expressionDisplayName', {
|
||||
defaultMessage: 'Expression controls',
|
||||
}),
|
||||
EDITOR: i18n.translate('xpack.canvas.keyboardShortcuts.namespace.editorDisplayName', {
|
||||
defaultMessage: 'Editor controls',
|
||||
}),
|
||||
PRESENTATION: i18n.translate(
|
||||
'xpack.canvas.keyboardShortcuts.namespace.presentationDisplayName',
|
||||
{
|
||||
defaultMessage: 'Presentation controls',
|
||||
}
|
||||
),
|
||||
}),
|
||||
getShortcutHelp: () => ({
|
||||
CUT: i18n.translate('xpack.canvas.keyboardShortcuts.cutShortcutHelpText', {
|
||||
defaultMessage: 'Cut',
|
||||
}),
|
||||
COPY: i18n.translate('xpack.canvas.keyboardShortcuts.copyShortcutHelpText', {
|
||||
defaultMessage: 'Copy',
|
||||
}),
|
||||
PASTE: i18n.translate('xpack.canvas.keyboardShortcuts.pasteShortcutHelpText', {
|
||||
defaultMessage: 'Paste',
|
||||
}),
|
||||
CLONE: i18n.translate('xpack.canvas.keyboardShortcuts.cloneShortcutHelpText', {
|
||||
defaultMessage: 'Clone',
|
||||
}),
|
||||
DELETE: i18n.translate('xpack.canvas.keyboardShortcuts.deleteShortcutHelpText', {
|
||||
defaultMessage: 'Delete',
|
||||
}),
|
||||
BRING_FORWARD: i18n.translate('xpack.canvas.keyboardShortcuts.bringFowardShortcutHelpText', {
|
||||
defaultMessage: 'Bring to front',
|
||||
}),
|
||||
BRING_TO_FRONT: i18n.translate('xpack.canvas.keyboardShortcuts.bringToFrontShortcutHelpText', {
|
||||
defaultMessage: 'Bring forward',
|
||||
}),
|
||||
SEND_BACKWARD: i18n.translate('xpack.canvas.keyboardShortcuts.sendBackwardShortcutHelpText', {
|
||||
defaultMessage: 'Send backward',
|
||||
}),
|
||||
SEND_TO_BACK: i18n.translate('xpack.canvas.keyboardShortcuts.sendToBackShortcutHelpText', {
|
||||
defaultMessage: 'Send to back',
|
||||
}),
|
||||
GROUP: i18n.translate('xpack.canvas.keyboardShortcuts.groupShortcutHelpText', {
|
||||
defaultMessage: 'Group',
|
||||
}),
|
||||
UNGROUP: i18n.translate('xpack.canvas.keyboardShortcuts.ungroupShortcutHelpText', {
|
||||
defaultMessage: 'Ungroup',
|
||||
}),
|
||||
SHIFT_UP: i18n.translate('xpack.canvas.keyboardShortcuts.shiftUpShortcutHelpText', {
|
||||
defaultMessage: 'Shift up by {ELEMENT_SHIFT_OFFSET}px',
|
||||
values: {
|
||||
ELEMENT_SHIFT_OFFSET,
|
||||
},
|
||||
}),
|
||||
SHIFT_DOWN: i18n.translate('xpack.canvas.keyboardShortcuts.shiftDownShortcutHelpText', {
|
||||
defaultMessage: 'Shift down by {ELEMENT_SHIFT_OFFSET}px',
|
||||
values: {
|
||||
ELEMENT_SHIFT_OFFSET,
|
||||
},
|
||||
}),
|
||||
SHIFT_LEFT: i18n.translate('xpack.canvas.keyboardShortcuts.shiftLeftShortcutHelpText', {
|
||||
defaultMessage: 'Shift left by {ELEMENT_SHIFT_OFFSET}px',
|
||||
values: {
|
||||
ELEMENT_SHIFT_OFFSET,
|
||||
},
|
||||
}),
|
||||
SHIFT_RIGHT: i18n.translate('xpack.canvas.keyboardShortcuts.shiftRightShortcutHelpText', {
|
||||
defaultMessage: 'Shift right by {ELEMENT_SHIFT_OFFSET}px',
|
||||
values: {
|
||||
ELEMENT_SHIFT_OFFSET,
|
||||
},
|
||||
}),
|
||||
NUDGE_UP: i18n.translate('xpack.canvas.keyboardShortcuts.nudgeUpShortcutHelpText', {
|
||||
defaultMessage: 'Shift up by {ELEMENT_NUDGE_OFFSET}px',
|
||||
values: {
|
||||
ELEMENT_NUDGE_OFFSET,
|
||||
},
|
||||
}),
|
||||
NUDGE_DOWN: i18n.translate('xpack.canvas.keyboardShortcuts.nudgeDownShortcutHelpText', {
|
||||
defaultMessage: 'Shift down by {ELEMENT_NUDGE_OFFSET}px',
|
||||
values: {
|
||||
ELEMENT_NUDGE_OFFSET,
|
||||
},
|
||||
}),
|
||||
NUDGE_LEFT: i18n.translate('xpack.canvas.keyboardShortcuts.nudgeLeftShortcutHelpText', {
|
||||
defaultMessage: 'Shift left by {ELEMENT_NUDGE_OFFSET}px',
|
||||
values: {
|
||||
ELEMENT_NUDGE_OFFSET,
|
||||
},
|
||||
}),
|
||||
NUDGE_RIGHT: i18n.translate('xpack.canvas.keyboardShortcuts.nudgeRightShortcutHelpText', {
|
||||
defaultMessage: 'Shift right by {ELEMENT_NUDGE_OFFSET}px',
|
||||
values: {
|
||||
ELEMENT_NUDGE_OFFSET,
|
||||
},
|
||||
}),
|
||||
RUN: i18n.translate('xpack.canvas.keyboardShortcuts.runShortcutHelpText', {
|
||||
defaultMessage: 'Run whole expression',
|
||||
}),
|
||||
MULTISELECT: i18n.translate('xpack.canvas.keyboardShortcuts.multiselectShortcutHelpText', {
|
||||
defaultMessage: 'Select multiple elements',
|
||||
}),
|
||||
RESIZE_FROM_CENTER: i18n.translate(
|
||||
'xpack.canvas.keyboardShortcuts.resizeFromCenterShortcutHelpText',
|
||||
{
|
||||
defaultMessage: 'Resize from center',
|
||||
}
|
||||
),
|
||||
IGNORE_SNAP: i18n.translate('xpack.canvas.keyboardShortcuts.ignoreSnapShortcutHelpText', {
|
||||
defaultMessage: 'Move, resize, and rotate without snapping',
|
||||
}),
|
||||
SELECT_BEHIND: i18n.translate('xpack.canvas.keyboardShortcuts.selectBehindShortcutHelpText', {
|
||||
defaultMessage: 'Select element below',
|
||||
}),
|
||||
UNDO: i18n.translate('xpack.canvas.keyboardShortcuts.undoShortcutHelpText', {
|
||||
defaultMessage: 'Undo last action',
|
||||
}),
|
||||
REDO: i18n.translate('xpack.canvas.keyboardShortcuts.redoShortcutHelpText', {
|
||||
defaultMessage: 'Redo last action',
|
||||
}),
|
||||
PREV: i18n.translate('xpack.canvas.keyboardShortcuts.prevShortcutHelpText', {
|
||||
defaultMessage: 'Go to previous page',
|
||||
}),
|
||||
NEXT: i18n.translate('xpack.canvas.keyboardShortcuts.nextShortcutHelpText', {
|
||||
defaultMessage: 'Go to next page',
|
||||
}),
|
||||
EDITING: i18n.translate('xpack.canvas.keyboardShortcuts.editingShortcutHelpText', {
|
||||
defaultMessage: 'Toggle edit mode',
|
||||
}),
|
||||
GRID: i18n.translate('xpack.canvas.keyboardShortcuts.gridShortcutHelpText', {
|
||||
defaultMessage: 'Show grid',
|
||||
}),
|
||||
REFRESH: i18n.translate('xpack.canvas.keyboardShortcuts.ShortcutHelpText', {
|
||||
defaultMessage: 'Refresh workpad',
|
||||
}),
|
||||
ZOOM_IN: i18n.translate('xpack.canvas.keyboardShortcuts.zoomInShortcutHelpText', {
|
||||
defaultMessage: 'Zoom in',
|
||||
}),
|
||||
ZOOM_OUT: i18n.translate('xpack.canvas.keyboardShortcuts.zoomOutShortcutHelpText', {
|
||||
defaultMessage: 'Zoom out',
|
||||
}),
|
||||
ZOOM_RESET: i18n.translate('xpack.canvas.keyboardShortcuts.zoomResetShortcutHelpText', {
|
||||
defaultMessage: 'Reset zoom to 100%',
|
||||
}),
|
||||
FULLSCREEN: i18n.translate('xpack.canvas.keyboardShortcuts.fullscreenShortcutHelpText', {
|
||||
defaultMessage: 'Enter presentation mode',
|
||||
}),
|
||||
FULLSCREEN_EXIT: i18n.translate(
|
||||
'xpack.canvas.keyboardShortcuts.fullscreenExitShortcutHelpText',
|
||||
{
|
||||
defaultMessage: 'Exit presentation mode',
|
||||
}
|
||||
),
|
||||
PAGE_CYCLE_TOGGLE: i18n.translate(
|
||||
'xpack.canvas.keyboardShortcuts.pageCycleToggleShortcutHelpText',
|
||||
{
|
||||
defaultMessage: 'Toggle page cycling',
|
||||
}
|
||||
),
|
||||
}),
|
||||
};
|
|
@ -8,6 +8,9 @@ import React, { Fragment, PureComponent } from 'react';
|
|||
import { EuiButton, EuiHorizontalRule, EuiText, EuiSpacer, EuiPortal } from '@elastic/eui';
|
||||
import { documentationLinks } from '../../lib/documentation_links';
|
||||
import { KeyboardShortcutsDoc } from '../keyboard_shortcuts_doc';
|
||||
import { ComponentStrings } from '../../../i18n';
|
||||
|
||||
const { HelpMenu: strings } = ComponentStrings;
|
||||
|
||||
export class HelpMenu extends PureComponent {
|
||||
state = { isFlyoutVisible: false };
|
||||
|
@ -26,15 +29,15 @@ export class HelpMenu extends PureComponent {
|
|||
<EuiHorizontalRule margin="none" />
|
||||
<EuiSpacer />
|
||||
<EuiText size="s">
|
||||
<p>For Canvas specific information</p>
|
||||
<p>{strings.getHelpMenuDescription()}</p>
|
||||
</EuiText>
|
||||
<EuiSpacer />
|
||||
<EuiButton fill iconType="popout" href={documentationLinks.canvas} target="_blank">
|
||||
Canvas documentation
|
||||
{strings.getDocumentationLinkLabel()}
|
||||
</EuiButton>
|
||||
<EuiSpacer />
|
||||
<EuiButton onClick={this.showFlyout} target="_blank">
|
||||
Keyboard shortcuts
|
||||
{strings.getKeyboardShortcutsLinkLabel()}
|
||||
</EuiButton>
|
||||
|
||||
{this.state.isFlyoutVisible && (
|
||||
|
|
|
@ -244,7 +244,9 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
|||
</span>
|
||||
</span>
|
||||
<span>
|
||||
|
||||
or
|
||||
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
|
@ -262,7 +264,7 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
|||
<dt
|
||||
className="euiDescriptionList__title"
|
||||
>
|
||||
Bring to front
|
||||
Bring forward
|
||||
</dt>
|
||||
<dd
|
||||
className="euiDescriptionList__description"
|
||||
|
@ -294,7 +296,7 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
|||
<dt
|
||||
className="euiDescriptionList__title"
|
||||
>
|
||||
Bring forward
|
||||
Bring to front
|
||||
</dt>
|
||||
<dd
|
||||
className="euiDescriptionList__description"
|
||||
|
@ -1257,7 +1259,9 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
|||
</span>
|
||||
</span>
|
||||
<span>
|
||||
|
||||
or
|
||||
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
|
@ -1334,7 +1338,9 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
|||
</span>
|
||||
</span>
|
||||
<span>
|
||||
|
||||
or
|
||||
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
|
@ -1413,7 +1419,9 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
|||
</span>
|
||||
</span>
|
||||
<span>
|
||||
|
||||
or
|
||||
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
|
@ -1428,7 +1436,9 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
|||
</span>
|
||||
</span>
|
||||
<span>
|
||||
|
||||
or
|
||||
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
|
@ -1475,7 +1485,9 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
|||
</span>
|
||||
</span>
|
||||
<span>
|
||||
|
||||
or
|
||||
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
|
@ -1490,7 +1502,9 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
|||
</span>
|
||||
</span>
|
||||
<span>
|
||||
|
||||
or
|
||||
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
|
|
|
@ -21,6 +21,9 @@ import { ShortcutMap, ShortcutNameSpace } from '../../../types';
|
|||
import { getClientPlatform } from '../../lib/get_client_platform';
|
||||
import { getId } from '../../lib/get_id';
|
||||
import { getPrettyShortcut } from '../../lib/get_pretty_shortcut';
|
||||
import { ComponentStrings } from '../../../i18n';
|
||||
|
||||
const { KeyboardShortcutsDoc: strings } = ComponentStrings;
|
||||
|
||||
interface DescriptionListItem {
|
||||
title: string;
|
||||
|
@ -46,7 +49,7 @@ const getDescriptionListItems = (shortcuts: ShortcutMap[]): DescriptionListItem[
|
|||
// replace +'s with spaces so we can display the plus symbol for the plus key
|
||||
shortcut = shortcut.replace(/\+/g, ' ');
|
||||
if (i !== 0) {
|
||||
acc.push(<span key={getId('span')}> or </span>);
|
||||
acc.push(<span key={getId('span')}> {strings.getShortcutSeparator()} </span>);
|
||||
}
|
||||
acc.push(
|
||||
<span key={getId('span')}>
|
||||
|
@ -62,10 +65,14 @@ const getDescriptionListItems = (shortcuts: ShortcutMap[]): DescriptionListItem[
|
|||
);
|
||||
|
||||
export const KeyboardShortcutsDoc: FunctionComponent<Props> = ({ onClose }) => (
|
||||
<EuiFlyout closeButtonAriaLabel="Closes keyboard shortcuts reference" size="s" onClose={onClose}>
|
||||
<EuiFlyout
|
||||
closeButtonAriaLabel={strings.getFlyoutCloseButtonAriaLabel()}
|
||||
size="s"
|
||||
onClose={onClose}
|
||||
>
|
||||
<EuiFlyoutHeader hasBorder>
|
||||
<EuiTitle size="s">
|
||||
<h2>Keyboard Shortcuts</h2>
|
||||
<h2>{strings.getTitle()}</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlyoutHeader>
|
||||
<EuiFlyoutBody>
|
||||
|
|
|
@ -5,8 +5,12 @@
|
|||
*/
|
||||
|
||||
import { mapValues } from 'lodash';
|
||||
import { ELEMENT_NUDGE_OFFSET, ELEMENT_SHIFT_OFFSET } from '../../common/lib/constants';
|
||||
|
||||
import { ShortcutMap, ShortcutNameSpace } from '../../types';
|
||||
import { ShortcutStrings as strings } from '../../i18n/';
|
||||
|
||||
const shortcutHelp = strings.getShortcutHelp();
|
||||
const namespaceDisplayNames = strings.getNamespaceDisplayNames();
|
||||
|
||||
interface KeyMap {
|
||||
[category: string]: ShortcutNameSpace;
|
||||
|
@ -58,88 +62,97 @@ const getShortcuts = (
|
|||
};
|
||||
};
|
||||
|
||||
const refreshShortcut = getShortcuts('r', { modifiers: 'alt', help: 'Refresh workpad' });
|
||||
const previousPageShortcut = getShortcuts('[', { modifiers: 'alt', help: 'Go to previous page' });
|
||||
const nextPageShortcut = getShortcuts(']', { modifiers: 'alt', help: 'Go to next page' });
|
||||
const refreshShortcut = getShortcuts('r', {
|
||||
modifiers: 'alt',
|
||||
help: shortcutHelp.REFRESH,
|
||||
});
|
||||
const previousPageShortcut = getShortcuts('[', { modifiers: 'alt', help: shortcutHelp.PREV });
|
||||
const nextPageShortcut = getShortcuts(']', { modifiers: 'alt', help: shortcutHelp.NEXT });
|
||||
const fullscreenShortcut = getShortcuts(['f', 'p'], {
|
||||
modifiers: 'alt',
|
||||
help: 'Enter presentation mode',
|
||||
help: shortcutHelp.FULLSCREEN,
|
||||
});
|
||||
|
||||
export const keymap: KeyMap = {
|
||||
ELEMENT: {
|
||||
displayName: 'Element controls',
|
||||
CUT: getShortcuts('x', { modifiers: 'ctrl', help: 'Cut' }),
|
||||
COPY: getShortcuts('c', { modifiers: 'ctrl', help: 'Copy' }),
|
||||
PASTE: getShortcuts('v', { modifiers: 'ctrl', help: 'Paste' }),
|
||||
CLONE: getShortcuts('d', { modifiers: 'ctrl', help: 'Clone' }),
|
||||
DELETE: getShortcuts(['del', 'backspace'], { help: 'Delete' }),
|
||||
BRING_FORWARD: getShortcuts('up', { modifiers: 'ctrl', help: 'Bring to front' }),
|
||||
BRING_TO_FRONT: getShortcuts('up', { modifiers: ['ctrl', 'shift'], help: 'Bring forward' }),
|
||||
SEND_BACKWARD: getShortcuts('down', { modifiers: 'ctrl', help: 'Send backward' }),
|
||||
SEND_TO_BACK: getShortcuts('down', { modifiers: ['ctrl', 'shift'], help: 'Send to back' }),
|
||||
GROUP: getShortcuts('g', { help: 'Group' }),
|
||||
UNGROUP: getShortcuts('u', { help: 'Ungroup' }),
|
||||
SHIFT_UP: getShortcuts('up', { help: `Shift up by ${ELEMENT_SHIFT_OFFSET}px` }),
|
||||
SHIFT_DOWN: getShortcuts('down', { help: `Shift down by ${ELEMENT_SHIFT_OFFSET}px` }),
|
||||
SHIFT_LEFT: getShortcuts('left', { help: `Shift left by ${ELEMENT_SHIFT_OFFSET}px` }),
|
||||
SHIFT_RIGHT: getShortcuts('right', { help: `Shift right by ${ELEMENT_SHIFT_OFFSET}px` }),
|
||||
displayName: namespaceDisplayNames.ELEMENT,
|
||||
CUT: getShortcuts('x', { modifiers: 'ctrl', help: shortcutHelp.CUT }),
|
||||
COPY: getShortcuts('c', { modifiers: 'ctrl', help: shortcutHelp.COPY }),
|
||||
PASTE: getShortcuts('v', { modifiers: 'ctrl', help: shortcutHelp.PASTE }),
|
||||
CLONE: getShortcuts('d', { modifiers: 'ctrl', help: shortcutHelp.CLONE }),
|
||||
DELETE: getShortcuts(['del', 'backspace'], { help: shortcutHelp.DELETE }),
|
||||
BRING_FORWARD: getShortcuts('up', { modifiers: 'ctrl', help: shortcutHelp.BRING_TO_FRONT }),
|
||||
BRING_TO_FRONT: getShortcuts('up', {
|
||||
modifiers: ['ctrl', 'shift'],
|
||||
help: shortcutHelp.BRING_FORWARD,
|
||||
}),
|
||||
SEND_BACKWARD: getShortcuts('down', { modifiers: 'ctrl', help: shortcutHelp.SEND_BACKWARD }),
|
||||
SEND_TO_BACK: getShortcuts('down', {
|
||||
modifiers: ['ctrl', 'shift'],
|
||||
help: shortcutHelp.SEND_TO_BACK,
|
||||
}),
|
||||
GROUP: getShortcuts('g', { help: shortcutHelp.GROUP }),
|
||||
UNGROUP: getShortcuts('u', { help: shortcutHelp.UNGROUP }),
|
||||
SHIFT_UP: getShortcuts('up', { help: shortcutHelp.SHIFT_UP }),
|
||||
SHIFT_DOWN: getShortcuts('down', { help: shortcutHelp.SHIFT_DOWN }),
|
||||
SHIFT_LEFT: getShortcuts('left', { help: shortcutHelp.SHIFT_LEFT }),
|
||||
SHIFT_RIGHT: getShortcuts('right', { help: shortcutHelp.SHIFT_RIGHT }),
|
||||
NUDGE_UP: getShortcuts('up', {
|
||||
modifiers: ['shift'],
|
||||
help: `Shift up by ${ELEMENT_NUDGE_OFFSET}px`,
|
||||
help: shortcutHelp.NUDGE_UP,
|
||||
}),
|
||||
NUDGE_DOWN: getShortcuts('down', {
|
||||
modifiers: ['shift'],
|
||||
help: `Shift down by ${ELEMENT_NUDGE_OFFSET}px`,
|
||||
help: shortcutHelp.NUDGE_DOWN,
|
||||
}),
|
||||
NUDGE_LEFT: getShortcuts('left', {
|
||||
modifiers: ['shift'],
|
||||
help: `Shift left by ${ELEMENT_NUDGE_OFFSET}px`,
|
||||
help: shortcutHelp.NUDGE_LEFT,
|
||||
}),
|
||||
NUDGE_RIGHT: getShortcuts('right', {
|
||||
modifiers: ['shift'],
|
||||
help: `Shift right by ${ELEMENT_NUDGE_OFFSET}px`,
|
||||
help: shortcutHelp.NUDGE_RIGHT,
|
||||
}),
|
||||
},
|
||||
EXPRESSION: {
|
||||
displayName: 'Expression controls',
|
||||
RUN: getShortcuts('enter', { modifiers: 'ctrl', help: 'Run whole expression' }),
|
||||
displayName: namespaceDisplayNames.EXPRESSION,
|
||||
RUN: getShortcuts('enter', { modifiers: 'ctrl', help: shortcutHelp.RUN }),
|
||||
},
|
||||
EDITOR: {
|
||||
displayName: 'Editor controls',
|
||||
displayName: namespaceDisplayNames.EDITOR,
|
||||
// added for documentation purposes, not handled by `react-shortcuts`
|
||||
MULTISELECT: getShortcuts('click', { modifiers: 'shift', help: 'Select multiple elements' }),
|
||||
MULTISELECT: getShortcuts('click', { modifiers: 'shift', help: shortcutHelp.MULTISELECT }),
|
||||
// added for documentation purposes, not handled by `react-shortcuts`
|
||||
RESIZE_FROM_CENTER: getShortcuts('drag', {
|
||||
modifiers: 'alt',
|
||||
help: 'Resize from center',
|
||||
help: shortcutHelp.RESIZE_FROM_CENTER,
|
||||
}),
|
||||
// added for documentation purposes, not handled by `react-shortcuts`
|
||||
IGNORE_SNAP: getShortcuts('drag', {
|
||||
modifiers: 'ctrl',
|
||||
help: 'Move, resize, and rotate without snapping',
|
||||
help: shortcutHelp.IGNORE_SNAP,
|
||||
}),
|
||||
// added for documentation purposes, not handled by `react-shortcuts`
|
||||
SELECT_BEHIND: getShortcuts('click', {
|
||||
modifiers: 'ctrl',
|
||||
help: 'Select element below',
|
||||
help: shortcutHelp.SELECT_BEHIND,
|
||||
}),
|
||||
UNDO: getShortcuts('z', { modifiers: 'ctrl', help: 'Undo last action' }),
|
||||
REDO: getShortcuts('z', { modifiers: ['ctrl', 'shift'], help: 'Redo last action' }),
|
||||
UNDO: getShortcuts('z', { modifiers: 'ctrl', help: shortcutHelp.UNDO }),
|
||||
REDO: getShortcuts('z', { modifiers: ['ctrl', 'shift'], help: shortcutHelp.REDO }),
|
||||
PREV: previousPageShortcut,
|
||||
NEXT: nextPageShortcut,
|
||||
EDITING: getShortcuts('e', { modifiers: 'alt', help: 'Toggle edit mode' }),
|
||||
GRID: getShortcuts('g', { modifiers: 'alt', help: 'Show grid' }),
|
||||
EDITING: getShortcuts('e', { modifiers: 'alt', help: shortcutHelp.EDITING }),
|
||||
GRID: getShortcuts('g', { modifiers: 'alt', help: shortcutHelp.GRID }),
|
||||
REFRESH: refreshShortcut,
|
||||
ZOOM_IN: getShortcuts('plus', { modifiers: ['ctrl', 'alt'], help: 'Zoom in' }),
|
||||
ZOOM_OUT: getShortcuts('minus', { modifiers: ['ctrl', 'alt'], help: 'Zoom out' }),
|
||||
ZOOM_RESET: getShortcuts('[', { modifiers: ['ctrl', 'alt'], help: 'Reset zoom to 100%' }),
|
||||
ZOOM_IN: getShortcuts('plus', { modifiers: ['ctrl', 'alt'], help: shortcutHelp.ZOOM_IN }),
|
||||
ZOOM_OUT: getShortcuts('minus', { modifiers: ['ctrl', 'alt'], help: shortcutHelp.ZOOM_OUT }),
|
||||
ZOOM_RESET: getShortcuts('[', { modifiers: ['ctrl', 'alt'], help: shortcutHelp.ZOOM_RESET }),
|
||||
FULLSCREEN: fullscreenShortcut,
|
||||
},
|
||||
PRESENTATION: {
|
||||
displayName: 'Presentation controls',
|
||||
displayName: namespaceDisplayNames.PRESENTATION,
|
||||
FULLSCREEN: fullscreenShortcut,
|
||||
FULLSCREEN_EXIT: getShortcuts('esc', { help: 'Exit presentation mode' }),
|
||||
FULLSCREEN_EXIT: getShortcuts('esc', { help: shortcutHelp.FULLSCREEN_EXIT }),
|
||||
PREV: mapValues(previousPageShortcut, (osShortcuts: string[], key?: string) =>
|
||||
// adds 'backspace' and 'left' to list of shortcuts per OS
|
||||
key === 'help' ? osShortcuts : osShortcuts.concat(['backspace', 'left'])
|
||||
|
@ -149,6 +162,6 @@ export const keymap: KeyMap = {
|
|||
key === 'help' ? osShortcuts : osShortcuts.concat(['space', 'right'])
|
||||
),
|
||||
REFRESH: refreshShortcut,
|
||||
PAGE_CYCLE_TOGGLE: getShortcuts('p', { help: 'Toggle page cycling' }),
|
||||
PAGE_CYCLE_TOGGLE: getShortcuts('p', { help: shortcutHelp.PAGE_CYCLE_TOGGLE }),
|
||||
},
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue