github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-11 17:35:33 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #15742 from overleaf/td-ide-page-double-click-divider

Browse source 
React IDE page: make column dividers double clickable

GitOrigin-RevId: 005b03ec5837293a2182d2d30d0955abaadc8e0c
This commit is contained in:
Tim Down 2023-11-13 10:54:23 +00:00 • committed by Copybot
parent c8e68e8c96
commit 80ef96846a
5 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -60,12 +60,15 @@ export default function EditorAndPdf({
{editorContent}
</Panel>
) : null}
<HorizontalResizeHandle resizable={isDualPane}>
<HorizontalResizeHandle
resizable={isDualPane}
onDoubleClick={() => setPdfIsOpen(!pdfIsOpen)}
>
<HorizontalToggler
id="editor-pdf"
togglerType="east"
isOpen={pdfIsOpen}
setIsOpen={isOpen => setPdfIsOpen(isOpen)}
setIsOpen={setPdfIsOpen}
tooltipWhenOpen={t('tooltip_hide_pdf')}
tooltipWhenClosed={t('tooltip_show_pdf')}
/>

4
services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-editor-and-pdf.tsx
View file

@ -66,12 +66,12 @@ export default function PlaceholderEditorAndPdf({
) : null}
</PanelGroup>
</Panel>
<HorizontalResizeHandle>
<HorizontalResizeHandle onDoubleClick={() => setPdfIsOpen(!pdfIsOpen)}>
<HorizontalToggler
id="editor-pdf"
togglerType="east"
isOpen={pdfIsOpen}
setIsOpen={pdfIsOpen => setPdfIsOpen(pdfIsOpen)}
setIsOpen={setPdfIsOpen}
tooltipWhenOpen={t('tooltip_hide_pdf')}
tooltipWhenClosed={t('tooltip_show_pdf')}
/>

7
services/web/frontend/js/features/ide-react/components/layout/two-column-main-content.tsx
View file

@ -64,12 +64,15 @@ export default function TwoColumnMainContent({
>
{leftColumnIsOpen ? leftColumnContent : null}
</Panel>
<HorizontalResizeHandle>
<HorizontalResizeHandle
onDoubleClick={() => setLeftColumnIsOpen(!leftColumnIsOpen)}
resizable={leftColumnIsOpen}
>
<HorizontalToggler
id={leftColumnId}
togglerType="west"
isOpen={leftColumnIsOpen}
setIsOpen={isOpen => setLeftColumnIsOpen(isOpen)}
setIsOpen={setLeftColumnIsOpen}
tooltipWhenOpen={t('tooltip_hide_filetree')}
tooltipWhenClosed={t('tooltip_show_filetree')}
/>

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

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

2
services/web/frontend/js/features/ide-react/components/resize/horizontal-toggler.tsx
View file

@ -6,7 +6,7 @@ type HorizontalTogglerType = 'west' | 'east'
type HorizontalTogglerProps = {
id: string
isOpen: boolean
setIsOpen: (isClosed: boolean) => void
setIsOpen: (isOpen: boolean) => void
togglerType: HorizontalTogglerType
tooltipWhenOpen: string
tooltipWhenClosed: string