Merge pull request #22799 from overleaf/dp-new-pdf-toolbar

Add toolbar styles and update pdf toolbar to match new editor designs

GitOrigin-RevId: 4d5d9c6fa3353c10dd135aa35440c8512a5d3226

services/web/frontend/js/features/ide-redesign/components/pdf-compile-button.tsx

@@ -0,0 +1,33 @@
+import { useTranslation } from 'react-i18next'
+import { memo } from 'react'
+import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import MaterialIcon from '@/shared/components/material-icon'
+
+function PdfCompileButton() {
+  const { compiling, startCompile } = useCompileContext()
+  const { t } = useTranslation()
+
+  return (
+    <OLTooltip
+      id="download-pdf"
+      description={compiling ? t('compiling') : t('recompile')}
+      overlayProps={{ placement: 'bottom' }}
+    >
+      {/* TODO: add some indicator that changes have been made */}
+      <OLButton
+        onClick={startCompile}
+        variant="link"
+        className="pdf-toolbar-btn"
+        isLoading={compiling}
+        style={{ pointerEvents: 'auto' }}
+        aria-label={t('download_pdf')}
+      >
+        <MaterialIcon type="refresh" />
+      </OLButton>
+    </OLTooltip>
+  )
+}
+
+export default memo(PdfCompileButton)

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

@@ -0,0 +1,24 @@
+import { memo } from 'react'
+import OlButtonToolbar from '@/features/ui/components/ol/ol-button-toolbar'
+import PdfCompileButton from './pdf-compile-button'
+import PdfHybridLogsButton from '@/features/pdf-preview/components/pdf-hybrid-logs-button'
+import PdfHybridDownloadButton from '@/features/pdf-preview/components/pdf-hybrid-download-button'
+
+function PdfPreviewHybridToolbar() {
+  // TODO: add detached pdf logic
+  return (
+    <OlButtonToolbar className="toolbar toolbar-pdf toolbar-pdf-hybrid">
+      <div className="toolbar-pdf-left">
+        <PdfCompileButton />
+        <PdfHybridLogsButton />
+        <PdfHybridDownloadButton />
+      </div>
+      <div className="toolbar-pdf-right">
+        <div className="toolbar-pdf-controls" id="toolbar-pdf-controls" />
+        {/* TODO: should we have switch to editor/code check/synctex buttons? */}
+      </div>
+    </OlButtonToolbar>
+  )
+}
+
+export default memo(PdfPreviewHybridToolbar)

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

@@ -501,6 +501,7 @@ function PdfJsViewer({ url, pdfFile }: PdfJsViewerProps) {
           setPage={handlePageChange}
           page={page}
           totalPages={totalPages}
+          pdfContainer={pdfJsWrapper?.container}
         />
       )}
     </div>

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

@@ -9,6 +9,8 @@ import { PdfPreviewMessages } from './pdf-preview-messages'
 import CompileTimeWarningUpgradePrompt from './compile-time-warning-upgrade-prompt'
 import { PdfPreviewProvider } from './pdf-preview-provider'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
+import PdfPreviewHybridToolbarNew from '@/features/ide-redesign/components/pdf-preview-hybrid-toolbar'
 
 const pdfPreviewPromotions = importOverleafModules('pdfPreviewPromotions') as {
   import: { default: ElementType }
@@ -20,10 +22,16 @@ function PdfPreviewPane() {
   const classes = classNames('pdf', 'full-size', {
     'pdf-empty': !pdfUrl,
   })
+  const newEditor = useFeatureFlag('editor-redesign')
+
   return (
     <div className={classes}>
       <PdfPreviewProvider>
-        <PdfHybridPreviewToolbar />
+        {newEditor ? (
+          <PdfPreviewHybridToolbarNew />
+        ) : (
+          <PdfHybridPreviewToolbar />
+        )}
         <PdfPreviewMessages>
           {pdfPreviewPromotions.map(
             ({ import: { default: Component }, path }) => (

services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-menu-button.tsx

@@ -15,6 +15,7 @@ type PdfViewerControlsMenuButtonProps = {
   setPage: (page: number) => void
   page: number
   totalPages: number
+  pdfContainer?: HTMLDivElement
 }
 
 export default function PdfViewerControlsMenuButton({
@@ -22,6 +23,7 @@ export default function PdfViewerControlsMenuButton({
   setPage,
   page,
   totalPages,
+  pdfContainer,
 }: PdfViewerControlsMenuButtonProps) {
   const { t } = useTranslation()
 
@@ -54,6 +56,7 @@ export default function PdfViewerControlsMenuButton({
         show={popoverOpen}
         target={targetRef.current}
         placement="bottom"
+        container={pdfContainer}
         containerPadding={0}
         transition
         rootClose

services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-toolbar.tsx

@@ -14,6 +14,7 @@ type PdfViewerControlsToolbarProps = {
   setPage: (page: number) => void
   page: number
   totalPages: number
+  pdfContainer?: HTMLDivElement
 }
 
 function PdfViewerControlsToolbar({
@@ -23,6 +24,7 @@ function PdfViewerControlsToolbar({
   setPage,
   page,
   totalPages,
+  pdfContainer,
 }: PdfViewerControlsToolbarProps) {
   const { showLogs } = useCompileContext()
 
@@ -61,6 +63,7 @@ function PdfViewerControlsToolbar({
         setPage={setPage}
         page={page}
         totalPages={totalPages}
+        pdfContainer={pdfContainer}
       />
     </div>,
 
@@ -75,6 +78,8 @@ type InnerControlsProps = {
   setPage: (page: number) => void
   page: number
   totalPages: number
+  // eslint-disable-next-line react/no-unused-prop-types
+  pdfContainer?: HTMLDivElement
 }
 
 function PdfViewerControlsToolbarFull({
@@ -111,6 +116,7 @@ function PdfViewerControlsToolbarSmall({
   setPage,
   page,
   totalPages,
+  pdfContainer,
 }: InnerControlsProps) {
   return (
     <div className="pdfjs-viewer-controls-small">
@@ -124,6 +130,7 @@ function PdfViewerControlsToolbarSmall({
         setPage={setPage}
         page={page}
         totalPages={totalPages}
+        pdfContainer={pdfContainer}
       />
     </div>
   )

services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf.scss

@@ -154,6 +154,19 @@
   top: var(--toolbar-small-height);
 }
 
+.ide-redesign-main {
+  .pdf-viewer {
+    .pdfjs-viewer {
+      .page {
+        box-shadow:
+          0 5px 5px 0 #23282f0d,
+          0 3px 14px 0 #23282f08,
+          0 8px 10px 0 #23282f14;
+      }
+    }
+  }
+}
+
 .pdf-viewer {
   iframe {
     width: 100%;

services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss

@@ -45,6 +45,18 @@
   --editor-toolbar-bg: var(--white);
 }
 
+.ide-redesign-main {
+  --toolbar-alt-bg-color: var(--bg-light-secondary);
+  --toolbar-btn-color: var(--content-primary);
+  --toolbar-btn-hover-bg-color: var(--neutral-80);
+  --toolbar-btn-hover-color: var(--white);
+  --editor-toolbar-bg: var(--white);
+
+  .toolbar {
+    border-bottom: none;
+  }
+}
+
 .toolbar {
   display: flex;
   align-items: center;