Merge pull request #15617 from overleaf/td-ide-page-show-pdf-divider

React IDE page: show PDF divider when PDF collapsed

GitOrigin-RevId: f535433a9f9c7683ae4144556a810247cda0f608

services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx

@@ -60,21 +60,21 @@ export default function EditorAndPdf({
           {editorContent}
         </Panel>
       ) : null}
-      {isDualPane ? (
-        <HorizontalResizeHandle>
-          <HorizontalToggler
-            id="editor-pdf"
-            togglerType="east"
-            isOpen={pdfIsOpen}
-            setIsOpen={isOpen => setPdfIsOpen(isOpen)}
-            tooltipWhenOpen={t('tooltip_hide_pdf')}
-            tooltipWhenClosed={t('tooltip_show_pdf')}
-          />
+      <HorizontalResizeHandle resizable={isDualPane}>
+        <HorizontalToggler
+          id="editor-pdf"
+          togglerType="east"
+          isOpen={pdfIsOpen}
+          setIsOpen={isOpen => setPdfIsOpen(isOpen)}
+          tooltipWhenOpen={t('tooltip_hide_pdf')}
+          tooltipWhenClosed={t('tooltip_show_pdf')}
+        />
+        {isDualPane ? (
           <div className="synctex-controls">
             <DefaultSynctexControl />
           </div>
-        </HorizontalResizeHandle>
-      ) : null}
+        ) : null}
+      </HorizontalResizeHandle>
       {pdfIsOpen ? (
         <Panel
           ref={pdfPanelRef}

services/web/frontend/js/features/ide-react/components/resize/horizontal-resize-handle.tsx

@@ -2,16 +2,21 @@ import { PanelResizeHandle } from 'react-resizable-panels'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PanelResizeHandleProps } from 'react-resizable-panels/dist/declarations/src/PanelResizeHandle'
+import classNames from 'classnames'
 
-export const HorizontalResizeHandle: FC<PanelResizeHandleProps> = ({
-  children,
-  ...props
-}) => {
+export const HorizontalResizeHandle: FC<
+  { resizable?: boolean } & PanelResizeHandleProps
+> = ({ children, resizable = true, ...props }) => {
   const { t } = useTranslation()
 
   return (
     <PanelResizeHandle {...props}>
-      <div className="horizontal-resize-handle" title={t('resize')}>
+      <div
+        className={classNames('horizontal-resize-handle', {
+          'horizontal-resize-handle-enabled': resizable,
+        })}
+        title={t('resize')}
+      >
         {children}
       </div>
     </PanelResizeHandle>

services/web/frontend/stylesheets/app/editor/ide-react.less

@@ -55,23 +55,29 @@
     border-width: 0;
   }
 
-  &::before,
-  &::after {
-    // This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
-    // we'd have to change this SVG too
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='18' viewBox='0 0 7 18'%3E%3Cpath d='M2 0h3v3H2zM2 5h3v3H2zM2 10h3v3H2zM2 15h3v3H2z' style='fill:%239da7b7'/%3E%3C/svg%3E");
-    display: block;
-    position: absolute;
-    text-align: center;
-    left: 0;
-    width: 7px;
-    height: 18px;
-  }
-  &::before {
-    top: 25%;
+  &.horizontal-resize-handle-enabled {
+    &::before,
+    &::after {
+      // This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
+      // we'd have to change this SVG too
+      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='18' viewBox='0 0 7 18'%3E%3Cpath d='M2 0h3v3H2zM2 5h3v3H2zM2 10h3v3H2zM2 15h3v3H2z' style='fill:%239da7b7'/%3E%3C/svg%3E");
+      display: block;
+      position: absolute;
+      text-align: center;
+      left: 0;
+      width: 7px;
+      height: 18px;
+    }
+    &::before {
+      top: 25%;
+    }
+    &::after {
+      top: 75%;
+    }
   }
-  &::after {
-    top: 75%;
+
+  &:not(.horizontal-resize-handle-enabled) {
+    cursor: default;
   }
 
   .synctex-controls {