github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-01-27 16:12: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}
</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}

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 { 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>

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

@ -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;
&.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%;
}
}
&::before {
top: 25%;
}
&::after {
top: 75%;
&:not(.horizontal-resize-handle-enabled) {
cursor: default;
}
.synctex-controls {