From 7b8d27743710c8f016d55e8454c2d9b3a86ca519 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e=20Alby?= Date: Wed, 20 Jul 2022 16:01:48 +0200 Subject: [PATCH] Merge pull request #8898 from overleaf/ta-change-redundant-controls Change Redundant Layout Controls GitOrigin-RevId: b50d71b1f75d202334442b3f6cb5037ed0d8a411 --- .../web/frontend/extracted-translations.json | 4 +- .../components/pdf-expand-button.tsx | 38 ---------------- .../components/pdf-preview-hybrid-toolbar.js | 4 +- .../components/switch-to-editor-button.tsx | 36 ++++++++++++++++ .../components/editor-expand-button.js | 43 ------------------- .../components/switch-to-pdf-button.js | 36 ++++++++++++++++ .../frontend/js/ide/editor/EditorManager.js | 2 +- .../editor/controllers/EditorExpandButton.js | 9 ---- .../editor/controllers/SwitchToPDFButton.js | 9 ++++ .../frontend/stylesheets/app/editor/pdf.less | 20 +-------- services/web/locales/en.json | 2 + .../components/editor-expand-button.test.js | 19 -------- .../components/switch-to-pdf-button.test.js | 36 ++++++++++++++++ 13 files changed, 125 insertions(+), 133 deletions(-) delete mode 100644 services/web/frontend/js/features/pdf-preview/components/pdf-expand-button.tsx create mode 100644 services/web/frontend/js/features/pdf-preview/components/switch-to-editor-button.tsx delete mode 100644 services/web/frontend/js/features/source-editor/components/editor-expand-button.js create mode 100644 services/web/frontend/js/features/source-editor/components/switch-to-pdf-button.js delete mode 100644 services/web/frontend/js/ide/editor/controllers/EditorExpandButton.js create mode 100644 services/web/frontend/js/ide/editor/controllers/SwitchToPDFButton.js delete mode 100644 services/web/test/frontend/features/source-editor/components/editor-expand-button.test.js create mode 100644 services/web/test/frontend/features/source-editor/components/switch-to-pdf-button.test.js diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 3a3862a739..2d2f11d80c 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -150,7 +150,6 @@ "from_external_url": "", "from_provider": "", "full_doc_history": "", - "full_screen": "", "generic_linked_file_compile_error": "", "generic_something_went_wrong": "", "get_collaborative_benefits": "", @@ -445,7 +444,6 @@ "something_went_wrong_rendering_pdf": "", "something_went_wrong_server": "", "somthing_went_wrong_compiling": "", - "split_screen": "", "sso_link_error": "", "start_by_adding_your_email": "", "start_free_trial": "", @@ -459,6 +457,8 @@ "submit_title": "", "subscription_admins_cannot_be_deleted": "", "sure_you_want_to_delete": "", + "switch_to_editor": "", + "switch_to_pdf": "", "sync_project_to_github_explanation": "", "sync_to_dropbox": "", "sync_to_github": "", diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-expand-button.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-expand-button.tsx deleted file mode 100644 index cfea856050..0000000000 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-expand-button.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { useTranslation } from 'react-i18next' -import { Button } from 'react-bootstrap' -import Tooltip from '../../../shared/components/tooltip' -import Icon from '../../../shared/components/icon' -import { useMemo } from 'react' -import { useLayoutContext } from '../../../shared/context/layout-context' - -function PdfExpandButton() { - const { pdfLayout, switchLayout, detachRole } = useLayoutContext() - - const { t } = useTranslation() - - const text = useMemo(() => { - return pdfLayout === 'sideBySide' ? t('full_screen') : t('split_screen') - }, [pdfLayout, t]) - - if (detachRole) { - return null - } - - return ( - - - - ) -} - -export default PdfExpandButton diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js index 1831d1d020..e5d3958f15 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js +++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js @@ -3,7 +3,7 @@ import { ButtonToolbar } from 'react-bootstrap' import { useTranslation } from 'react-i18next' import { useLayoutContext } from '../../../shared/context/layout-context' import PdfCompileButton from './pdf-compile-button' -import PdfExpandButton from './pdf-expand-button' +import SwitchToEditorButton from './switch-to-editor-button' import PdfHybridLogsButton from './pdf-hybrid-logs-button' import PdfHybridDownloadButton from './pdf-hybrid-download-button' import PdfHybridSafariWarning from './pdf-hybrid-safari-warning' @@ -65,7 +65,7 @@ function PdfPreviewHybridToolbarInner() {
- +
diff --git a/services/web/frontend/js/features/pdf-preview/components/switch-to-editor-button.tsx b/services/web/frontend/js/features/pdf-preview/components/switch-to-editor-button.tsx new file mode 100644 index 0000000000..f213c9173a --- /dev/null +++ b/services/web/frontend/js/features/pdf-preview/components/switch-to-editor-button.tsx @@ -0,0 +1,36 @@ +import { useTranslation } from 'react-i18next' +import { Button } from 'react-bootstrap' +import Icon from '../../../shared/components/icon' +import { useLayoutContext } from '../../../shared/context/layout-context' + +function SwitchToEditorButton() { + const { pdfLayout, setView, detachRole } = useLayoutContext() + + const { t } = useTranslation() + + if (detachRole) { + return null + } + + if (pdfLayout === 'sideBySide') { + return null + } + + function handleClick() { + setView('editor') + } + + return ( + + ) +} + +export default SwitchToEditorButton diff --git a/services/web/frontend/js/features/source-editor/components/editor-expand-button.js b/services/web/frontend/js/features/source-editor/components/editor-expand-button.js deleted file mode 100644 index 5dc33a3be8..0000000000 --- a/services/web/frontend/js/features/source-editor/components/editor-expand-button.js +++ /dev/null @@ -1,43 +0,0 @@ -import { useCallback, useMemo } from 'react' -import { useTranslation } from 'react-i18next' -import { Button } from 'react-bootstrap' -import Tooltip from '../../../shared/components/tooltip' -import Icon from '../../../shared/components/icon' -import { useLayoutContext } from '../../../shared/context/layout-context' - -function EditorExpandButton() { - const { pdfLayout, changeLayout, detachRole } = useLayoutContext() - - const { t } = useTranslation() - - const text = useMemo(() => { - return pdfLayout === 'sideBySide' ? t('full_screen') : t('split_screen') - }, [pdfLayout, t]) - - const switchEditorLayout = useCallback(() => { - const newLayout = pdfLayout === 'sideBySide' ? 'flat' : 'sideBySide' - changeLayout(newLayout, 'editor') - }, [pdfLayout, changeLayout]) - - if (detachRole) { - return null - } - - return ( - - - - ) -} - -export default EditorExpandButton diff --git a/services/web/frontend/js/features/source-editor/components/switch-to-pdf-button.js b/services/web/frontend/js/features/source-editor/components/switch-to-pdf-button.js new file mode 100644 index 0000000000..4d82f5c09f --- /dev/null +++ b/services/web/frontend/js/features/source-editor/components/switch-to-pdf-button.js @@ -0,0 +1,36 @@ +import { useTranslation } from 'react-i18next' +import { Button } from 'react-bootstrap' +import Icon from '../../../shared/components/icon' +import { useLayoutContext } from '../../../shared/context/layout-context' + +function SwitchToPDFButton() { + const { pdfLayout, setView, detachRole } = useLayoutContext() + + const { t } = useTranslation() + + if (detachRole) { + return null + } + + if (pdfLayout === 'sideBySide') { + return null + } + + function handleClick() { + setView('pdf') + } + + return ( + + ) +} + +export default SwitchToPDFButton diff --git a/services/web/frontend/js/ide/editor/EditorManager.js b/services/web/frontend/js/ide/editor/EditorManager.js index b4d42363a9..fff96dbd00 100644 --- a/services/web/frontend/js/ide/editor/EditorManager.js +++ b/services/web/frontend/js/ide/editor/EditorManager.js @@ -20,7 +20,7 @@ import './directives/aceEditor' import './directives/toggleSwitch' import './controllers/SavingNotificationController' import './controllers/CompileButton' -import './controllers/EditorExpandButton' +import './controllers/SwitchToPDFButton' import getMeta from '../../utils/meta' let EditorManager diff --git a/services/web/frontend/js/ide/editor/controllers/EditorExpandButton.js b/services/web/frontend/js/ide/editor/controllers/EditorExpandButton.js deleted file mode 100644 index 4b979b451e..0000000000 --- a/services/web/frontend/js/ide/editor/controllers/EditorExpandButton.js +++ /dev/null @@ -1,9 +0,0 @@ -import App from '../../../base' -import { react2angular } from 'react2angular' -import { rootContext } from '../../../shared/context/root-context' -import EditorExpandButton from '../../../features/source-editor/components/editor-expand-button' - -App.component( - 'editorExpandButton', - react2angular(rootContext.use(EditorExpandButton)) -) diff --git a/services/web/frontend/js/ide/editor/controllers/SwitchToPDFButton.js b/services/web/frontend/js/ide/editor/controllers/SwitchToPDFButton.js new file mode 100644 index 0000000000..c4b4cd0e18 --- /dev/null +++ b/services/web/frontend/js/ide/editor/controllers/SwitchToPDFButton.js @@ -0,0 +1,9 @@ +import App from '../../../base' +import { react2angular } from 'react2angular' +import { rootContext } from '../../../shared/context/root-context' +import SwitchToPDFButton from '../../../features/source-editor/components/switch-to-pdf-button' + +App.component( + 'switchToPdfButton', + react2angular(rootContext.use(SwitchToPDFButton)) +) diff --git a/services/web/frontend/stylesheets/app/editor/pdf.less b/services/web/frontend/stylesheets/app/editor/pdf.less index f7272cad92..bd9aada6c7 100644 --- a/services/web/frontend/stylesheets/app/editor/pdf.less +++ b/services/web/frontend/stylesheets/app/editor/pdf.less @@ -67,7 +67,7 @@ } .toolbar-pdf-hybrid { - .btn:not(.btn-recompile):not(.btn-orphan):not(.detach-synctex-control) { + .btn:not(.btn-recompile):not(.btn-orphan):not(.detach-synctex-control):not(.switch-to-editor-btn) { display: inline-block; color: @toolbar-btn-color; background-color: transparent; @@ -649,24 +649,6 @@ ); } -.toolbar-editor-expand-btn, -.toolbar-pdf-expand-btn { - .btn-inline-link; - margin-left: @margin-xs; - color: @toolbar-icon-btn-color; - border-radius: @border-radius-small; - &:hover { - color: @toolbar-icon-btn-hover-color; - } - &:active { - color: #fff; - } - &:focus { - outline: 0; - color: #fff; - } -} - .pdf-error-alert { position: absolute; width: 100%; diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 38c5d498dd..d5ad6cdc3b 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -14,6 +14,8 @@ "no_pdf_error_reason_output_pdf_already_exists": "This project contains a file called output.pdf. If that file exists, please rename it and compile again.", "logs_pane_info_message": "We are testing a new logs pane", "logs_pane_info_message_popup": "We are testing a new logs pane. Click here to give feedback.", + "switch_to_pdf": "Switch to PDF", + "switch_to_editor": "Switch to editor", "github_symlink_error": "Your GitHub repository contains symbolic link files, which are not currently supported by Overleaf. Please remove these and try again.", "github_workflow_files_error": "The __appName__ GitHub sync service couldn’t sync GitHub Workflow files (in .github/workflows/). Please authorize __appName__ to edit your GitHub workflow files and try again.", "github_workflow_authorize": "Authorize GitHub Workflow files", diff --git a/services/web/test/frontend/features/source-editor/components/editor-expand-button.test.js b/services/web/test/frontend/features/source-editor/components/editor-expand-button.test.js deleted file mode 100644 index b9c8cf6149..0000000000 --- a/services/web/test/frontend/features/source-editor/components/editor-expand-button.test.js +++ /dev/null @@ -1,19 +0,0 @@ -import { screen } from '@testing-library/react' -import { renderWithEditorContext } from '../../../helpers/render-with-context' -import EditorExpandButton from '../../../../../frontend/js/features/source-editor/components/editor-expand-button' - -describe('', function () { - it('show split screen button', function () { - renderWithEditorContext(, { - ui: { view: 'editor', pdfLayout: 'flat' }, - }) - screen.getByRole('button', { name: 'Split screen' }) - }) - - it('show full screen button', function () { - renderWithEditorContext(, { - ui: { view: 'editor', pdfLayout: 'sideBySide' }, - }) - screen.getByRole('button', { name: 'Full screen' }) - }) -}) diff --git a/services/web/test/frontend/features/source-editor/components/switch-to-pdf-button.test.js b/services/web/test/frontend/features/source-editor/components/switch-to-pdf-button.test.js new file mode 100644 index 0000000000..635d29f019 --- /dev/null +++ b/services/web/test/frontend/features/source-editor/components/switch-to-pdf-button.test.js @@ -0,0 +1,36 @@ +import { screen } from '@testing-library/react' +import { expect } from 'chai' +import { renderWithEditorContext } from '../../../helpers/render-with-context' +import SwitchToPDFButton from '../../../../../frontend/js/features/source-editor/components/switch-to-pdf-button' + +describe('', function () { + beforeEach(function () { + window.metaAttributesCache = new Map() + }) + + afterEach(function () { + window.metaAttributesCache = new Map() + }) + + it('shows button in full screen layout', function () { + renderWithEditorContext(, { + ui: { view: 'editor', pdfLayout: 'flat' }, + }) + screen.getByRole('button', { name: 'Switch to PDF' }) + }) + + it('does not show button in split screen layout', function () { + renderWithEditorContext(, { + ui: { view: 'editor', pdfLayout: 'sideBySide' }, + }) + expect(screen.queryByRole('button', { name: 'Full screen' })).to.not.exist + }) + + it('does not show button when detached', function () { + window.metaAttributesCache.set('ol-detachRole', 'detacher') + renderWithEditorContext(, { + ui: { view: 'editor', pdfLayout: 'flat' }, + }) + expect(screen.queryByRole('button', { name: 'Full screen' })).to.not.exist + }) +})