Merge pull request #8326 from overleaf/ta-pdf-detach-redundant-controls

Bring Back Redundant Layout Controls

GitOrigin-RevId: a725e8742ab41612b285bcab23054ba9da15b60f

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 (
     <Tooltip
       id="expand-pdf-btn"

services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.js

@@ -65,7 +65,7 @@ function PdfPreviewHybridToolbarInner() {
       </div>
       <div className="toolbar-pdf-right">
         <PdfHybridCodeCheckButton />
-        {!window.showPdfDetach && <PdfExpandButton />}
+        <PdfExpandButton />
         <DetachedSynctexControl />
       </div>
     </>

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 (
+    <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/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
 

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

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 {

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('<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' })
+  })
+})