From ae207f755951ce38015c6bcd8e4d9bed7dbf7d37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e=20Alby?= Date: Wed, 8 Jun 2022 16:07:07 +0200 Subject: [PATCH] Merge pull request #8326 from overleaf/ta-pdf-detach-redundant-controls Bring Back Redundant Layout Controls GitOrigin-RevId: a725e8742ab41612b285bcab23054ba9da15b60f --- .../components/pdf-expand-button.tsx | 6 ++- .../components/pdf-preview-hybrid-toolbar.js | 2 +- .../components/editor-expand-button.js | 43 +++++++++++++++++++ .../frontend/js/ide/editor/EditorManager.js | 1 + .../editor/controllers/EditorExpandButton.js | 9 ++++ .../frontend/stylesheets/app/editor/pdf.less | 2 +- .../components/editor-expand-button.test.js | 19 ++++++++ 7 files changed, 79 insertions(+), 3 deletions(-) create mode 100644 services/web/frontend/js/features/source-editor/components/editor-expand-button.js create mode 100644 services/web/frontend/js/ide/editor/controllers/EditorExpandButton.js create mode 100644 services/web/test/frontend/features/source-editor/components/editor-expand-button.test.js 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 index 415b83b4ed..cfea856050 100644 --- 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 @@ -6,7 +6,7 @@ import { useMemo } from 'react' import { useLayoutContext } from '../../../shared/context/layout-context' function PdfExpandButton() { - const { pdfLayout, switchLayout } = useLayoutContext() + const { pdfLayout, switchLayout, detachRole } = useLayoutContext() const { t } = useTranslation() @@ -14,6 +14,10 @@ function PdfExpandButton() { return pdfLayout === 'sideBySide' ? t('full_screen') : t('split_screen') }, [pdfLayout, t]) + if (detachRole) { + return null + } + return (
- {!window.showPdfDetach && } +
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 new file mode 100644 index 0000000000..5dc33a3be8 --- /dev/null +++ b/services/web/frontend/js/features/source-editor/components/editor-expand-button.js @@ -0,0 +1,43 @@ +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/ide/editor/EditorManager.js b/services/web/frontend/js/ide/editor/EditorManager.js index 2b53c99647..9ee24e68c0 100644 --- a/services/web/frontend/js/ide/editor/EditorManager.js +++ b/services/web/frontend/js/ide/editor/EditorManager.js @@ -20,6 +20,7 @@ import './directives/aceEditor' import './directives/toggleSwitch' import './controllers/SavingNotificationController' import './controllers/CompileButton' +import './controllers/EditorExpandButton' 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 new file mode 100644 index 0000000000..4b979b451e --- /dev/null +++ b/services/web/frontend/js/ide/editor/controllers/EditorExpandButton.js @@ -0,0 +1,9 @@ +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/stylesheets/app/editor/pdf.less b/services/web/frontend/stylesheets/app/editor/pdf.less index bd6e374dcd..3e2f49d88a 100644 --- a/services/web/frontend/stylesheets/app/editor/pdf.less +++ b/services/web/frontend/stylesheets/app/editor/pdf.less @@ -609,6 +609,7 @@ ); } +.toolbar-editor-expand-btn, .toolbar-pdf-expand-btn { .btn-inline-link; margin-left: @margin-xs; @@ -618,7 +619,6 @@ color: @toolbar-icon-btn-hover-color; } &:active { - background-color: @link-color; color: #fff; } &:focus { 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 new file mode 100644 index 0000000000..b9c8cf6149 --- /dev/null +++ b/services/web/test/frontend/features/source-editor/components/editor-expand-button.test.js @@ -0,0 +1,19 @@ +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' }) + }) +})