Skip to content

Commit

Permalink
[Canvas][i18n] Keyboard Shortcuts and Help Menu (#45056) (#45563)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@cqliu1
cqliu1 authored Sep 13, 2019
1 parent 579d613 commit db04d8d
Show file tree
Hide file tree
Showing 7 changed files with 306 additions and 57 deletions.
37 changes: 37 additions & 0 deletions x-pack/legacy/plugins/canvas/i18n/components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
*/

import { i18n } from '@kbn/i18n';
import { CANVAS } from './constants';

export const ComponentStrings = {
AddEmbeddableFlyout: {
Expand Down Expand Up @@ -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', {
Expand Down
1 change: 1 addition & 0 deletions x-pack/legacy/plugins/canvas/i18n/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n';
export * from './angular';
export * from './constants';
export * from './components';
export * from './shortcuts';

export const getAppDescription = () =>
i18n.translate('xpack.canvas.appDescription', {
Expand Down
174 changes: 174 additions & 0 deletions x-pack/legacy/plugins/canvas/i18n/shortcuts.ts
View file
Original file line number Diff line number Diff line change
@@ -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',
}
),
}),
};
9 changes: 6 additions & 3 deletions x-pack/legacy/plugins/canvas/public/components/help_menu/help_menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
Expand All @@ -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 && (
Expand Down
32 changes: 23 additions & 9 deletions ...yboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.examples.storyshot
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 10 additions & 3 deletions ...legacy/plugins/canvas/public/components/keyboard_shortcuts_doc/keyboard_shortcuts_doc.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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')}>
Expand All @@ -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>
Expand Down
Loading

0 comments on commit db04d8d

Please sign in to comment.