From 6dcc22642a99a8da5d0efb4ae66f1cd46f25caec Mon Sep 17 00:00:00 2001 From: M Fahru Date: Thu, 24 Nov 2022 09:26:38 -0500 Subject: [PATCH] Update "go to line" hotkey for cm6 and add new info text in hotkeys modal * Update "go to line" hotkey for cm6 and add new info text in hotkeys modal * Differentiate modal title between cm6 and ace hotkeys * Update test to reflect change in hotkeys modal title * Add test for hotkeys modal bottom text * Update test on editor left menu hotkeys button to reflect change in hotkeys modal title GitOrigin-RevId: 61bae16313ea7a37fa3b9441dbe5a93ab7823d01 --- .../app/views/project/editor/left-menu.pug | 1 + .../web/frontend/extracted-translations.json | 1 + .../components/help-show-hotkeys.tsx | 3 +++ .../components/hotkeys-modal-bottom-text.js | 18 ++++++++++++++++ .../hotkeys-modal/components/hotkeys-modal.js | 15 ++++++++++--- .../stylesheets/app/editor/hotkeys.less | 8 ++++++- services/web/locales/en.json | 3 ++- .../components/help-show-hotkeys.test.js | 2 +- .../hotkeys-modal-bottom-text.test.js | 21 +++++++++++++++++++ .../components/hotkeys-modal.test.js | 18 +++++++++++++--- 10 files changed, 81 insertions(+), 9 deletions(-) create mode 100644 services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal-bottom-text.js create mode 100644 services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal-bottom-text.test.js diff --git a/services/web/app/views/project/editor/left-menu.pug b/services/web/app/views/project/editor/left-menu.pug index bcb375e6ac..f5d36a459b 100644 --- a/services/web/app/views/project/editor/left-menu.pug +++ b/services/web/app/views/project/editor/left-menu.pug @@ -235,6 +235,7 @@ aside#left-menu.full-size( show="show" track-changes-visible="trackChangesVisible" is-mac="isMac" + new-source-editor="editor.newSourceEditor" ) if showSupport li diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 0f39ad8af0..ed63a27ad7 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -1,4 +1,5 @@ { + "a_more_comprehensive_list_of_keyboard_shortcuts": "", "about_to_archive_projects": "", "about_to_delete_folder": "", "about_to_delete_projects": "", diff --git a/services/web/frontend/js/features/editor-left-menu/components/help-show-hotkeys.tsx b/services/web/frontend/js/features/editor-left-menu/components/help-show-hotkeys.tsx index 959930624c..fd7f7eb90d 100644 --- a/services/web/frontend/js/features/editor-left-menu/components/help-show-hotkeys.tsx +++ b/services/web/frontend/js/features/editor-left-menu/components/help-show-hotkeys.tsx @@ -2,10 +2,12 @@ import { useState } from 'react' import { useTranslation } from 'react-i18next' import { useProjectContext } from '../../../shared/context/project-context' import HotkeysModal from '../../hotkeys-modal/components/hotkeys-modal' +import useScopeValue from '../../../shared/hooks/use-scope-value' import LeftMenuButton from './left-menu-button' export default function HelpShowHotkeys() { const [showModal, setShowModal] = useState(false) + const [newSourceEditor] = useScopeValue('editor.newSourceEditor') const { t } = useTranslation() const { features } = useProjectContext() const isMac = /Mac/.test(window.navigator?.platform) @@ -26,6 +28,7 @@ export default function HelpShowHotkeys() { handleHide={() => setShowModal(false)} isMac={isMac} trackChangesVisible={features?.trackChangesVisible} + newSourceEditor={newSourceEditor} /> ) diff --git a/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal-bottom-text.js b/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal-bottom-text.js new file mode 100644 index 0000000000..0111a851f0 --- /dev/null +++ b/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal-bottom-text.js @@ -0,0 +1,18 @@ +import { Trans } from 'react-i18next' + +export default function HotkeysModalBottomText() { + return ( +
+ , + ]} + /> +
+ ) +} diff --git a/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.js b/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.js index e567c5c5fe..53371a53a8 100644 --- a/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.js +++ b/services/web/frontend/js/features/hotkeys-modal/components/hotkeys-modal.js @@ -2,6 +2,7 @@ import { Button, Modal, Row, Col } from 'react-bootstrap' import PropTypes from 'prop-types' import { Trans, useTranslation } from 'react-i18next' import AccessibleModal from '../../../shared/components/accessible-modal' +import HotkeysModalBottomText from './hotkeys-modal-bottom-text' export default function HotkeysModal({ animation = true, @@ -9,11 +10,17 @@ export default function HotkeysModal({ show, isMac = false, trackChangesVisible = false, + newSourceEditor = false, }) { const { t } = useTranslation() + const goToLineSuffix = newSourceEditor ? 'Shift + L' : 'L' const ctrl = isMac ? 'Cmd' : 'Ctrl' + const modalTitle = newSourceEditor + ? `${t('hotkeys')} (Source editor)` + : `${t('hotkeys')} (Legacy source editor)` + return ( - {t('hotkeys')} + {modalTitle} - +

{t('common')}

@@ -70,7 +77,7 @@ export default function HotkeysModal({ @@ -186,6 +193,7 @@ export default function HotkeysModal({ )} + @@ -201,6 +209,7 @@ HotkeysModal.propTypes = { show: PropTypes.bool.isRequired, handleHide: PropTypes.func.isRequired, trackChangesVisible: PropTypes.bool, + newSourceEditor: PropTypes.bool, } function Hotkey({ combination, description }) { diff --git a/services/web/frontend/stylesheets/app/editor/hotkeys.less b/services/web/frontend/stylesheets/app/editor/hotkeys.less index 8f3f59ec1a..d2e2886678 100644 --- a/services/web/frontend/stylesheets/app/editor/hotkeys.less +++ b/services/web/frontend/stylesheets/app/editor/hotkeys.less @@ -1,4 +1,4 @@ -.modal-hotkeys { +.hotkeys-modal { font-size: 14px; h3:first-child { @@ -22,4 +22,10 @@ font-weight: 600; margin-right: @line-height-computed / 4; } + + .hotkeys-modal-bottom-text { + background-color: @ol-blue-gray-0; + padding: @padding-sm; + border-radius: 5px; + } } diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 3876cf0161..a6e8dce817 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -1921,5 +1921,6 @@ "not_a_student_question": "Not a student?", "try_out_one_of_our_plans_instead": "Try out one of our plans instead", "browse_plans": "Browse plans", - "i_confirm_that_i_am_a_student": "I confirm that I am a student" + "i_confirm_that_i_am_a_student": "I confirm that I am a student", + "a_more_comprehensive_list_of_keyboard_shortcuts": "A more comprehensive list of keyboard shortcuts can be found in <0>this __appName__ project template" } diff --git a/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js b/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js index 12dd4bcfb7..113e6aab42 100644 --- a/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js +++ b/services/web/test/frontend/features/editor-left-menu/components/help-show-hotkeys.test.js @@ -15,7 +15,7 @@ describe('', function () { expect(screen.queryByRole('dialog')).to.equal(null) fireEvent.click(screen.getByRole('button', { name: 'Show Hotkeys' })) const modal = screen.getAllByRole('dialog')[0] - within(modal).getByText('Hotkeys') + within(modal).getByText('Hotkeys (Legacy source editor)') within(modal).getByText('Common') }) }) diff --git a/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal-bottom-text.test.js b/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal-bottom-text.test.js new file mode 100644 index 0000000000..c3baeefa66 --- /dev/null +++ b/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal-bottom-text.test.js @@ -0,0 +1,21 @@ +import { render, screen } from '@testing-library/react' +import { expect } from 'chai' +import HotkeysModalBottomText from '../../../../../frontend/js/features/hotkeys-modal/components/hotkeys-modal-bottom-text' + +describe('', function () { + it('renders the correct text', function () { + render() + + screen.getByText( + /A more comprehensive list of keyboard shortcuts can be found in/ + ) + + const link = screen.getByRole('link', { + name: /this Overleaf project template/, + }) + + expect(link.getAttribute('href')).to.equal( + `/articles/overleaf-keyboard-shortcuts/qykqfvmxdnjf` + ) + }) +}) diff --git a/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.js b/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.js index 1e4053c484..e68e1e03c4 100644 --- a/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.js +++ b/services/web/test/frontend/features/hotkeys-modal/components/hotkeys-modal.test.js @@ -10,11 +10,23 @@ const modalProps = { } describe('', function () { - it('renders the translated modal title', async function () { - const { baseElement } = render() + it('renders the translated modal title on cm6', async function () { + const { baseElement } = render( + + ) expect(baseElement.querySelector('.modal-title').textContent).to.equal( - 'Hotkeys' + 'Hotkeys (Source editor)' + ) + }) + + it('renders the translated modal title on ace', async function () { + const { baseElement } = render( + + ) + + expect(baseElement.querySelector('.modal-title').textContent).to.equal( + 'Hotkeys (Legacy source editor)' ) })