github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-01-27 16:22:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
React IDE page: show PDF divider when PDF collapsed

GitOrigin-RevId: f535433a9f9c7683ae4144556a810247cda0f608
This commit is contained in:
Tim Down 2023-11-06 13:09:10 +00:00 committed by Copybot
parent 8144d431a6
commit ecf7befe88
3 changed files with 44 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -2,16 +2,21 @@ import { PanelResizeHandle } from 'react-resizable-panels'
import { FC } from 'react' import { FC } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { PanelResizeHandleProps } from 'react-resizable-panels/dist/declarations/src/PanelResizeHandle' import { PanelResizeHandleProps } from 'react-resizable-panels/dist/declarations/src/PanelResizeHandle'
import classNames from 'classnames'
export const HorizontalResizeHandle: FC<PanelResizeHandleProps> = ({ export const HorizontalResizeHandle: FC<
children, { resizable?: boolean } & PanelResizeHandleProps
...props > = ({ children, resizable = true, ...props }) => {
}) => {
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<PanelResizeHandle {...props}> <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} {children}
</div> </div>
</PanelResizeHandle> </PanelResizeHandle>

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

@ -55,23 +55,29 @@
border-width: 0; border-width: 0;
} }
&::before, &.horizontal-resize-handle-enabled {
&::after { &::before,
// This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2, &::after {
// we'd have to change this SVG too // This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
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"); // we'd have to change this SVG too
display: block; 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");
position: absolute; display: block;
text-align: center; position: absolute;
left: 0; text-align: center;
width: 7px; left: 0;
height: 18px; width: 7px;
height: 18px;
}
&::before {
top: 25%;
}
&::after {
top: 75%;
}
} }
&::before {
top: 25%; &:not(.horizontal-resize-handle-enabled) {
} cursor: default;
&::after {
top: 75%;
} }
.synctex-controls { .synctex-controls {