Merge pull request #8898 from overleaf/ta-change-redundant-controls

Change Redundant Layout Controls

GitOrigin-RevId: b50d71b1f75d202334442b3f6cb5037ed0d8a411

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": "",

services/web/frontend/js/features/pdf-preview/components/pdf-expand-button.tsx

@@ -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 (
-    <Tooltip
-      id="expand-pdf-btn"
-      description={text}
-      overlayProps={{ placement: 'left' }}
-    >
-      <Button
-        onClick={switchLayout}
-        className="toolbar-pdf-expand-btn toolbar-item"
-        aria-label={text}
-      >
-        <Icon type={pdfLayout === 'sideBySide' ? 'expand' : 'compress'} />
-      </Button>
-    </Tooltip>
-  )
-}
-
-export default PdfExpandButton

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() {
       </div>
       <div className="toolbar-pdf-right">
         <PdfHybridCodeCheckButton />
-        <PdfExpandButton />
+        <SwitchToEditorButton />
         <DetachedSynctexControl />
       </div>
     </>

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 (
+    <Button
+      bsStyle="default"
+      bsSize="xs"
+      onClick={handleClick}
+      className="switch-to-editor-btn"
+    >
+      <Icon type="code" className="me-1" />
+      {t('switch_to_editor')}
+    </Button>
+  )
+}
+
+export default SwitchToEditorButton

services/web/frontend/js/features/source-editor/components/editor-expand-button.js

@@ -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 (
-    <Tooltip
-      id="expand-editor-btn"
-      description={text}
-      overlayProps={{ placement: 'left' }}
-    >
-      <Button
-        onClick={switchEditorLayout}
-        className="toolbar-editor-expand-btn toolbar-item"
-        aria-label={text}
-      >
-        <Icon type={pdfLayout === 'sideBySide' ? 'expand' : 'compress'} />
-      </Button>
-    </Tooltip>
-  )
-}
-
-export default EditorExpandButton

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 (
+    <Button
+      bsStyle="default"
+      bsSize="xs"
+      onClick={handleClick}
+      className="toolbar-item"
+    >
+      <Icon type="file-pdf-o" className="me-1" />
+      {t('switch_to_pdf')}
+    </Button>
+  )
+}
+
+export default SwitchToPDFButton

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

services/web/frontend/js/ide/editor/controllers/EditorExpandButton.js

@@ -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))
-)

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))
+)

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%;

services/web/locales/en.json

@@ -14,6 +14,8 @@
   "no_pdf_error_reason_output_pdf_already_exists": "This project contains a file called <code>output.pdf</code>. 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",

services/web/test/frontend/features/source-editor/components/editor-expand-button.test.js

@@ -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('<EditorExpandButton />', function () {
-  it('show split screen button', function () {
-    renderWithEditorContext(<EditorExpandButton />, {
-      ui: { view: 'editor', pdfLayout: 'flat' },
-    })
-    screen.getByRole('button', { name: 'Split screen' })
-  })
-
-  it('show full screen button', function () {
-    renderWithEditorContext(<EditorExpandButton />, {
-      ui: { view: 'editor', pdfLayout: 'sideBySide' },
-    })
-    screen.getByRole('button', { name: 'Full screen' })
-  })
-})

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('<SwitchToPDFButton />', function () {
+  beforeEach(function () {
+    window.metaAttributesCache = new Map()
+  })
+
+  afterEach(function () {
+    window.metaAttributesCache = new Map()
+  })
+
+  it('shows button in full screen layout', function () {
+    renderWithEditorContext(<SwitchToPDFButton />, {
+      ui: { view: 'editor', pdfLayout: 'flat' },
+    })
+    screen.getByRole('button', { name: 'Switch to PDF' })
+  })
+
+  it('does not show button in split screen layout', function () {
+    renderWithEditorContext(<SwitchToPDFButton />, {
+      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(<SwitchToPDFButton />, {
+      ui: { view: 'editor', pdfLayout: 'flat' },
+    })
+    expect(screen.queryByRole('button', { name: 'Full screen' })).to.not.exist
+  })
+})