[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 { i18n } from '@kbn/i18n';
|
||||||
|
import { CANVAS } from './constants';
|
||||||
|
|
||||||
export const ComponentStrings = {
|
export const ComponentStrings = {
|
||||||
AddEmbeddableFlyout: {
|
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: {
|
WorkpadHeader: {
|
||||||
getAddElementBtnText: () =>
|
getAddElementBtnText: () =>
|
||||||
i18n.translate('xpack.canvas.workpadHeader.addElementButtonText', {
|
i18n.translate('xpack.canvas.workpadHeader.addElementButtonText', {
|
||||||
|
|
|
@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n';
|
||||||
export * from './angular';
|
export * from './angular';
|
||||||
export * from './components';
|
export * from './components';
|
||||||
export * from './constants';
|
export * from './constants';
|
||||||
|
export * from './shortcuts';
|
||||||
|
|
||||||
export const getAppDescription = () =>
|
export const getAppDescription = () =>
|
||||||
i18n.translate('xpack.canvas.appDescription', {
|
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 { EuiButton, EuiHorizontalRule, EuiText, EuiSpacer, EuiPortal } from '@elastic/eui';
|
||||||
import { documentationLinks } from '../../lib/documentation_links';
|
import { documentationLinks } from '../../lib/documentation_links';
|
||||||
import { KeyboardShortcutsDoc } from '../keyboard_shortcuts_doc';
|
import { KeyboardShortcutsDoc } from '../keyboard_shortcuts_doc';
|
||||||
|
import { ComponentStrings } from '../../../i18n';
|
||||||
|
|
||||||
|
const { HelpMenu: strings } = ComponentStrings;
|
||||||
|
|
||||||
export class HelpMenu extends PureComponent {
|
export class HelpMenu extends PureComponent {
|
||||||
state = { isFlyoutVisible: false };
|
state = { isFlyoutVisible: false };
|
||||||
|
@ -26,15 +29,15 @@ export class HelpMenu extends PureComponent {
|
||||||
<EuiHorizontalRule margin="none" />
|
<EuiHorizontalRule margin="none" />
|
||||||
<EuiSpacer />
|
<EuiSpacer />
|
||||||
<EuiText size="s">
|
<EuiText size="s">
|
||||||
<p>For Canvas specific information</p>
|
<p>{strings.getHelpMenuDescription()}</p>
|
||||||
</EuiText>
|
</EuiText>
|
||||||
<EuiSpacer />
|
<EuiSpacer />
|
||||||
<EuiButton fill iconType="popout" href={documentationLinks.canvas} target="_blank">
|
<EuiButton fill iconType="popout" href={documentationLinks.canvas} target="_blank">
|
||||||
Canvas documentation
|
{strings.getDocumentationLinkLabel()}
|
||||||
</EuiButton>
|
</EuiButton>
|
||||||
<EuiSpacer />
|
<EuiSpacer />
|
||||||
<EuiButton onClick={this.showFlyout} target="_blank">
|
<EuiButton onClick={this.showFlyout} target="_blank">
|
||||||
Keyboard shortcuts
|
{strings.getKeyboardShortcutsLinkLabel()}
|
||||||
</EuiButton>
|
</EuiButton>
|
||||||
|
|
||||||
{this.state.isFlyoutVisible && (
|
{this.state.isFlyoutVisible && (
|
||||||
|
|
|
@ -244,7 +244,9 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
or
|
|
||||||
|
or
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<span
|
<span
|
||||||
|
@ -262,7 +264,7 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
||||||
<dt
|
<dt
|
||||||
className="euiDescriptionList__title"
|
className="euiDescriptionList__title"
|
||||||
>
|
>
|
||||||
Bring to front
|
Bring forward
|
||||||
</dt>
|
</dt>
|
||||||
<dd
|
<dd
|
||||||
className="euiDescriptionList__description"
|
className="euiDescriptionList__description"
|
||||||
|
@ -294,7 +296,7 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
||||||
<dt
|
<dt
|
||||||
className="euiDescriptionList__title"
|
className="euiDescriptionList__title"
|
||||||
>
|
>
|
||||||
Bring forward
|
Bring to front
|
||||||
</dt>
|
</dt>
|
||||||
<dd
|
<dd
|
||||||
className="euiDescriptionList__description"
|
className="euiDescriptionList__description"
|
||||||
|
@ -1257,7 +1259,9 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
or
|
|
||||||
|
or
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<span
|
<span
|
||||||
|
@ -1334,7 +1338,9 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
or
|
|
||||||
|
or
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<span
|
<span
|
||||||
|
@ -1413,7 +1419,9 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
or
|
|
||||||
|
or
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<span
|
<span
|
||||||
|
@ -1428,7 +1436,9 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
or
|
|
||||||
|
or
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<span
|
<span
|
||||||
|
@ -1475,7 +1485,9 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
or
|
|
||||||
|
or
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<span
|
<span
|
||||||
|
@ -1490,7 +1502,9 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
or
|
|
||||||
|
or
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<span
|
<span
|
||||||
|
|
|
@ -21,6 +21,9 @@ import { ShortcutMap, ShortcutNameSpace } from '../../../types';
|
||||||
import { getClientPlatform } from '../../lib/get_client_platform';
|
import { getClientPlatform } from '../../lib/get_client_platform';
|
||||||
import { getId } from '../../lib/get_id';
|
import { getId } from '../../lib/get_id';
|
||||||
import { getPrettyShortcut } from '../../lib/get_pretty_shortcut';
|
import { getPrettyShortcut } from '../../lib/get_pretty_shortcut';
|
||||||
|
import { ComponentStrings } from '../../../i18n';
|
||||||
|
|
||||||
|
const { KeyboardShortcutsDoc: strings } = ComponentStrings;
|
||||||
|
|
||||||
interface DescriptionListItem {
|
interface DescriptionListItem {
|
||||||
title: string;
|
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
|
// replace +'s with spaces so we can display the plus symbol for the plus key
|
||||||
shortcut = shortcut.replace(/\+/g, ' ');
|
shortcut = shortcut.replace(/\+/g, ' ');
|
||||||
if (i !== 0) {
|
if (i !== 0) {
|
||||||
acc.push(<span key={getId('span')}> or </span>);
|
acc.push(<span key={getId('span')}> {strings.getShortcutSeparator()} </span>);
|
||||||
}
|
}
|
||||||
acc.push(
|
acc.push(
|
||||||
<span key={getId('span')}>
|
<span key={getId('span')}>
|
||||||
|
@ -62,10 +65,14 @@ const getDescriptionListItems = (shortcuts: ShortcutMap[]): DescriptionListItem[
|
||||||
);
|
);
|
||||||
|
|
||||||
export const KeyboardShortcutsDoc: FunctionComponent<Props> = ({ onClose }) => (
|
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>
|
<EuiFlyoutHeader hasBorder>
|
||||||
<EuiTitle size="s">
|
<EuiTitle size="s">
|
||||||
<h2>Keyboard Shortcuts</h2>
|
<h2>{strings.getTitle()}</h2>
|
||||||
</EuiTitle>
|
</EuiTitle>
|
||||||
</EuiFlyoutHeader>
|
</EuiFlyoutHeader>
|
||||||
<EuiFlyoutBody>
|
<EuiFlyoutBody>
|
||||||
|
|
|
@ -5,8 +5,12 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { mapValues } from 'lodash';
|
import { mapValues } from 'lodash';
|
||||||
import { ELEMENT_NUDGE_OFFSET, ELEMENT_SHIFT_OFFSET } from '../../common/lib/constants';
|
|
||||||
import { ShortcutMap, ShortcutNameSpace } from '../../types';
|
import { ShortcutMap, ShortcutNameSpace } from '../../types';
|
||||||
|
import { ShortcutStrings as strings } from '../../i18n/';
|
||||||
|
|
||||||
|
const shortcutHelp = strings.getShortcutHelp();
|
||||||
|
const namespaceDisplayNames = strings.getNamespaceDisplayNames();
|
||||||
|
|
||||||
interface KeyMap {
|
interface KeyMap {
|
||||||
[category: string]: ShortcutNameSpace;
|
[category: string]: ShortcutNameSpace;
|
||||||
|
@ -58,88 +62,97 @@ const getShortcuts = (
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const refreshShortcut = getShortcuts('r', { modifiers: 'alt', help: 'Refresh workpad' });
|
const refreshShortcut = getShortcuts('r', {
|
||||||
const previousPageShortcut = getShortcuts('[', { modifiers: 'alt', help: 'Go to previous page' });
|
modifiers: 'alt',
|
||||||
const nextPageShortcut = getShortcuts(']', { modifiers: 'alt', help: 'Go to next page' });
|
help: shortcutHelp.REFRESH,
|
||||||
|
});
|
||||||
|
const previousPageShortcut = getShortcuts('[', { modifiers: 'alt', help: shortcutHelp.PREV });
|
||||||
|
const nextPageShortcut = getShortcuts(']', { modifiers: 'alt', help: shortcutHelp.NEXT });
|
||||||
const fullscreenShortcut = getShortcuts(['f', 'p'], {
|
const fullscreenShortcut = getShortcuts(['f', 'p'], {
|
||||||
modifiers: 'alt',
|
modifiers: 'alt',
|
||||||
help: 'Enter presentation mode',
|
help: shortcutHelp.FULLSCREEN,
|
||||||
});
|
});
|
||||||
|
|
||||||
export const keymap: KeyMap = {
|
export const keymap: KeyMap = {
|
||||||
ELEMENT: {
|
ELEMENT: {
|
||||||
displayName: 'Element controls',
|
displayName: namespaceDisplayNames.ELEMENT,
|
||||||
CUT: getShortcuts('x', { modifiers: 'ctrl', help: 'Cut' }),
|
CUT: getShortcuts('x', { modifiers: 'ctrl', help: shortcutHelp.CUT }),
|
||||||
COPY: getShortcuts('c', { modifiers: 'ctrl', help: 'Copy' }),
|
COPY: getShortcuts('c', { modifiers: 'ctrl', help: shortcutHelp.COPY }),
|
||||||
PASTE: getShortcuts('v', { modifiers: 'ctrl', help: 'Paste' }),
|
PASTE: getShortcuts('v', { modifiers: 'ctrl', help: shortcutHelp.PASTE }),
|
||||||
CLONE: getShortcuts('d', { modifiers: 'ctrl', help: 'Clone' }),
|
CLONE: getShortcuts('d', { modifiers: 'ctrl', help: shortcutHelp.CLONE }),
|
||||||
DELETE: getShortcuts(['del', 'backspace'], { help: 'Delete' }),
|
DELETE: getShortcuts(['del', 'backspace'], { help: shortcutHelp.DELETE }),
|
||||||
BRING_FORWARD: getShortcuts('up', { modifiers: 'ctrl', help: 'Bring to front' }),
|
BRING_FORWARD: getShortcuts('up', { modifiers: 'ctrl', help: shortcutHelp.BRING_TO_FRONT }),
|
||||||
BRING_TO_FRONT: getShortcuts('up', { modifiers: ['ctrl', 'shift'], help: 'Bring forward' }),
|
BRING_TO_FRONT: getShortcuts('up', {
|
||||||
SEND_BACKWARD: getShortcuts('down', { modifiers: 'ctrl', help: 'Send backward' }),
|
modifiers: ['ctrl', 'shift'],
|
||||||
SEND_TO_BACK: getShortcuts('down', { modifiers: ['ctrl', 'shift'], help: 'Send to back' }),
|
help: shortcutHelp.BRING_FORWARD,
|
||||||
GROUP: getShortcuts('g', { help: 'Group' }),
|
}),
|
||||||
UNGROUP: getShortcuts('u', { help: 'Ungroup' }),
|
SEND_BACKWARD: getShortcuts('down', { modifiers: 'ctrl', help: shortcutHelp.SEND_BACKWARD }),
|
||||||
SHIFT_UP: getShortcuts('up', { help: `Shift up by ${ELEMENT_SHIFT_OFFSET}px` }),
|
SEND_TO_BACK: getShortcuts('down', {
|
||||||
SHIFT_DOWN: getShortcuts('down', { help: `Shift down by ${ELEMENT_SHIFT_OFFSET}px` }),
|
modifiers: ['ctrl', 'shift'],
|
||||||
SHIFT_LEFT: getShortcuts('left', { help: `Shift left by ${ELEMENT_SHIFT_OFFSET}px` }),
|
help: shortcutHelp.SEND_TO_BACK,
|
||||||
SHIFT_RIGHT: getShortcuts('right', { help: `Shift right by ${ELEMENT_SHIFT_OFFSET}px` }),
|
}),
|
||||||
|
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', {
|
NUDGE_UP: getShortcuts('up', {
|
||||||
modifiers: ['shift'],
|
modifiers: ['shift'],
|
||||||
help: `Shift up by ${ELEMENT_NUDGE_OFFSET}px`,
|
help: shortcutHelp.NUDGE_UP,
|
||||||
}),
|
}),
|
||||||
NUDGE_DOWN: getShortcuts('down', {
|
NUDGE_DOWN: getShortcuts('down', {
|
||||||
modifiers: ['shift'],
|
modifiers: ['shift'],
|
||||||
help: `Shift down by ${ELEMENT_NUDGE_OFFSET}px`,
|
help: shortcutHelp.NUDGE_DOWN,
|
||||||
}),
|
}),
|
||||||
NUDGE_LEFT: getShortcuts('left', {
|
NUDGE_LEFT: getShortcuts('left', {
|
||||||
modifiers: ['shift'],
|
modifiers: ['shift'],
|
||||||
help: `Shift left by ${ELEMENT_NUDGE_OFFSET}px`,
|
help: shortcutHelp.NUDGE_LEFT,
|
||||||
}),
|
}),
|
||||||
NUDGE_RIGHT: getShortcuts('right', {
|
NUDGE_RIGHT: getShortcuts('right', {
|
||||||
modifiers: ['shift'],
|
modifiers: ['shift'],
|
||||||
help: `Shift right by ${ELEMENT_NUDGE_OFFSET}px`,
|
help: shortcutHelp.NUDGE_RIGHT,
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
EXPRESSION: {
|
EXPRESSION: {
|
||||||
displayName: 'Expression controls',
|
displayName: namespaceDisplayNames.EXPRESSION,
|
||||||
RUN: getShortcuts('enter', { modifiers: 'ctrl', help: 'Run whole expression' }),
|
RUN: getShortcuts('enter', { modifiers: 'ctrl', help: shortcutHelp.RUN }),
|
||||||
},
|
},
|
||||||
EDITOR: {
|
EDITOR: {
|
||||||
displayName: 'Editor controls',
|
displayName: namespaceDisplayNames.EDITOR,
|
||||||
// added for documentation purposes, not handled by `react-shortcuts`
|
// 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`
|
// added for documentation purposes, not handled by `react-shortcuts`
|
||||||
RESIZE_FROM_CENTER: getShortcuts('drag', {
|
RESIZE_FROM_CENTER: getShortcuts('drag', {
|
||||||
modifiers: 'alt',
|
modifiers: 'alt',
|
||||||
help: 'Resize from center',
|
help: shortcutHelp.RESIZE_FROM_CENTER,
|
||||||
}),
|
}),
|
||||||
// added for documentation purposes, not handled by `react-shortcuts`
|
// added for documentation purposes, not handled by `react-shortcuts`
|
||||||
IGNORE_SNAP: getShortcuts('drag', {
|
IGNORE_SNAP: getShortcuts('drag', {
|
||||||
modifiers: 'ctrl',
|
modifiers: 'ctrl',
|
||||||
help: 'Move, resize, and rotate without snapping',
|
help: shortcutHelp.IGNORE_SNAP,
|
||||||
}),
|
}),
|
||||||
// added for documentation purposes, not handled by `react-shortcuts`
|
// added for documentation purposes, not handled by `react-shortcuts`
|
||||||
SELECT_BEHIND: getShortcuts('click', {
|
SELECT_BEHIND: getShortcuts('click', {
|
||||||
modifiers: 'ctrl',
|
modifiers: 'ctrl',
|
||||||
help: 'Select element below',
|
help: shortcutHelp.SELECT_BEHIND,
|
||||||
}),
|
}),
|
||||||
UNDO: getShortcuts('z', { modifiers: 'ctrl', help: 'Undo last action' }),
|
UNDO: getShortcuts('z', { modifiers: 'ctrl', help: shortcutHelp.UNDO }),
|
||||||
REDO: getShortcuts('z', { modifiers: ['ctrl', 'shift'], help: 'Redo last action' }),
|
REDO: getShortcuts('z', { modifiers: ['ctrl', 'shift'], help: shortcutHelp.REDO }),
|
||||||
PREV: previousPageShortcut,
|
PREV: previousPageShortcut,
|
||||||
NEXT: nextPageShortcut,
|
NEXT: nextPageShortcut,
|
||||||
EDITING: getShortcuts('e', { modifiers: 'alt', help: 'Toggle edit mode' }),
|
EDITING: getShortcuts('e', { modifiers: 'alt', help: shortcutHelp.EDITING }),
|
||||||
GRID: getShortcuts('g', { modifiers: 'alt', help: 'Show grid' }),
|
GRID: getShortcuts('g', { modifiers: 'alt', help: shortcutHelp.GRID }),
|
||||||
REFRESH: refreshShortcut,
|
REFRESH: refreshShortcut,
|
||||||
ZOOM_IN: getShortcuts('plus', { modifiers: ['ctrl', 'alt'], help: 'Zoom in' }),
|
ZOOM_IN: getShortcuts('plus', { modifiers: ['ctrl', 'alt'], help: shortcutHelp.ZOOM_IN }),
|
||||||
ZOOM_OUT: getShortcuts('minus', { modifiers: ['ctrl', 'alt'], help: 'Zoom out' }),
|
ZOOM_OUT: getShortcuts('minus', { modifiers: ['ctrl', 'alt'], help: shortcutHelp.ZOOM_OUT }),
|
||||||
ZOOM_RESET: getShortcuts('[', { modifiers: ['ctrl', 'alt'], help: 'Reset zoom to 100%' }),
|
ZOOM_RESET: getShortcuts('[', { modifiers: ['ctrl', 'alt'], help: shortcutHelp.ZOOM_RESET }),
|
||||||
FULLSCREEN: fullscreenShortcut,
|
FULLSCREEN: fullscreenShortcut,
|
||||||
},
|
},
|
||||||
PRESENTATION: {
|
PRESENTATION: {
|
||||||
displayName: 'Presentation controls',
|
displayName: namespaceDisplayNames.PRESENTATION,
|
||||||
FULLSCREEN: fullscreenShortcut,
|
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) =>
|
PREV: mapValues(previousPageShortcut, (osShortcuts: string[], key?: string) =>
|
||||||
// adds 'backspace' and 'left' to list of shortcuts per OS
|
// adds 'backspace' and 'left' to list of shortcuts per OS
|
||||||
key === 'help' ? osShortcuts : osShortcuts.concat(['backspace', 'left'])
|
key === 'help' ? osShortcuts : osShortcuts.concat(['backspace', 'left'])
|
||||||
|
@ -149,6 +162,6 @@ export const keymap: KeyMap = {
|
||||||
key === 'help' ? osShortcuts : osShortcuts.concat(['space', 'right'])
|
key === 'help' ? osShortcuts : osShortcuts.concat(['space', 'right'])
|
||||||
),
|
),
|
||||||
REFRESH: refreshShortcut,
|
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