diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js b/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js index 9fb533b04e..6e62f5cb4e 100644 --- a/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js +++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js @@ -1,4 +1,4 @@ -import { memo, useCallback, useEffect, useMemo } from 'react' +import { memo, useCallback } from 'react' import PropTypes from 'prop-types' import { Dropdown, MenuItem } from 'react-bootstrap' import { Trans, useTranslation } from 'react-i18next' @@ -11,7 +11,6 @@ import IconPdfOnly from './icon-pdf-only' import { useLayoutContext } from '../../../shared/context/layout-context' import * as eventTracking from '../../../infrastructure/event-tracking' import useEventListener from '../../../shared/hooks/use-event-listener' -import Shortcut from './shortcut' function IconPlaceholder() { return @@ -48,7 +47,7 @@ function IconCheckmark({ iconFor, pdfLayout, view, detachRole }) { return } -function LayoutMenuItem({ checkmark, icon, text, shortcut, ...props }) { +function LayoutMenuItem({ checkmark, icon, text, ...props }) { return ( @@ -57,7 +56,6 @@ function LayoutMenuItem({ checkmark, icon, text, shortcut, ...props }) { {icon} {text} - ) @@ -66,7 +64,6 @@ LayoutMenuItem.propTypes = { checkmark: PropTypes.node.isRequired, icon: PropTypes.node.isRequired, text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired, - shortcut: PropTypes.string.isRequired, onSelect: PropTypes.func, } @@ -84,7 +81,6 @@ function DetachDisabled() { checkmark={} icon={} text={t('pdf_in_separate_tab')} - shortcut="Control+Option+ArrowUp" /> ) @@ -131,31 +127,6 @@ function LayoutDropdownButton() { [changeLayout, handleReattach] ) - const keyMap = useMemo(() => { - return { - ArrowDown: () => handleChangeLayout('sideBySide', null), - ArrowRight: () => handleChangeLayout('flat', 'pdf'), - ArrowLeft: () => handleChangeLayout('flat', 'editor'), - ArrowUp: () => handleDetach(), - } - }, [handleChangeLayout, handleDetach]) - - useEffect(() => { - const listener = event => { - if (event.ctrlKey && event.altKey && event.key in keyMap) { - event.preventDefault() - event.stopImmediatePropagation() - keyMap[event.key]() - } - } - - window.addEventListener('keydown', listener, true) - - return () => { - window.removeEventListener('keydown', listener, true) - } - }, [keyMap]) - const processing = !detachIsLinked && detachRole === 'detacher' // bsStyle is required for Dropdown.Toggle, but we will override style @@ -195,7 +166,6 @@ function LayoutDropdownButton() { } icon={} text={t('editor_and_pdf')} - shortcut="Control+Option+ArrowDown" /> } - shortcut="Control+Option+ArrowLeft" /> } - shortcut="Control+Option+ArrowRight" /> {'BroadcastChannel' in window ? ( @@ -266,7 +234,6 @@ function LayoutDropdownButton() { } icon={} text={t('pdf_in_separate_tab')} - shortcut="Control+Option+ArrowUp" /> ) : ( diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/shortcut.tsx b/services/web/frontend/js/features/editor-navigation-toolbar/components/shortcut.tsx deleted file mode 100644 index c577033669..0000000000 --- a/services/web/frontend/js/features/editor-navigation-toolbar/components/shortcut.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { Fragment, memo } from 'react' - -const isMac = /Mac/.test(window.navigator.platform) - -const symbols: Record = isMac - ? { - CommandOrControl: '⌘', - Option: '⌥', - Control: '⌃', - Shift: '⇧', - ArrowRight: '→', - ArrowDown: '↓', - ArrowLeft: '←', - ArrowUp: '↑', - } - : { - CommandOrControl: 'Ctrl', - Control: 'Ctrl', - Option: 'Alt', - Shift: 'Shift', - ArrowRight: '→', - ArrowDown: '↓', - ArrowLeft: '←', - ArrowUp: '↑', - } - -const separator = isMac ? '' : '+' - -const chooseCharacter = (input: string): string => - input in symbols ? symbols[input] : input - -const Shortcut = ({ shortcut }: { shortcut: string }) => { - return ( - - {shortcut.split('+').map((item, index) => { - const char = chooseCharacter(item) - - return ( - - {index > 0 && separator} - {char.length === 1 ? ( - {char} - ) : ( - char - )} - - ) - })} - - ) -} - -export default memo(Shortcut) diff --git a/services/web/frontend/stylesheets/components/dropdowns.less b/services/web/frontend/stylesheets/components/dropdowns.less index 522b315feb..d59faac774 100755 --- a/services/web/frontend/stylesheets/components/dropdowns.less +++ b/services/web/frontend/stylesheets/components/dropdowns.less @@ -342,22 +342,6 @@ button.dropdown-toggle.dropdown-toggle-no-background { } } - .shortcut { - color: @gray; - font-family: system-ui, -apple-system, monospace; - font-size: 14px; - padding-right: 0; - padding-left: 10px; - display: inline-flex; - align-items: center; - - .shortcut-symbol { - display: inline-flex; - justify-content: center; - width: 1em; - } - } - .pdf-detach-survey { display: flex; font-size: @font-size-small;