mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-04 23:15:57 -05:00
92eade7502
[web] BS5 pdf toolbar GitOrigin-RevId: a04091c9e936e52f47c3977b3149ffe613d43bb9
81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
import { useRef } from 'react'
|
|
|
|
import PdfPageNumberControl from './pdf-page-number-control'
|
|
import PdfZoomButtons from './pdf-zoom-buttons'
|
|
import { useTranslation } from 'react-i18next'
|
|
import MaterialIcon from '@/shared/components/material-icon'
|
|
import useDropdown from '@/shared/hooks/use-dropdown'
|
|
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
|
|
import OLButton from '@/features/ui/components/ol/ol-button'
|
|
import OLOverlay from '@/features/ui/components/ol/ol-overlay'
|
|
import OLPopover from '@/features/ui/components/ol/ol-popover'
|
|
|
|
type PdfViewerControlsMenuButtonProps = {
|
|
setZoom: (zoom: string) => void
|
|
setPage: (page: number) => void
|
|
page: number
|
|
totalPages: number
|
|
}
|
|
|
|
export default function PdfViewerControlsMenuButton({
|
|
setZoom,
|
|
setPage,
|
|
page,
|
|
totalPages,
|
|
}: PdfViewerControlsMenuButtonProps) {
|
|
const { t } = useTranslation()
|
|
|
|
const {
|
|
open: popoverOpen,
|
|
onToggle: togglePopover,
|
|
ref: popoverRef,
|
|
} = useDropdown()
|
|
|
|
const targetRef = useRef<HTMLButtonElement | null>(null)
|
|
|
|
return (
|
|
<>
|
|
<OLTooltip
|
|
id="pdf-controls-menu-tooltip"
|
|
description={t('view_options')}
|
|
overlayProps={{ placement: 'bottom' }}
|
|
>
|
|
<span>
|
|
<OLButton
|
|
variant="ghost"
|
|
className="pdf-toolbar-btn pdfjs-toolbar-popover-button"
|
|
onClick={togglePopover}
|
|
ref={targetRef}
|
|
>
|
|
<MaterialIcon type="more_horiz" />
|
|
</OLButton>
|
|
</span>
|
|
</OLTooltip>
|
|
|
|
<OLOverlay
|
|
show={popoverOpen}
|
|
target={targetRef.current}
|
|
placement="bottom"
|
|
containerPadding={0}
|
|
transition
|
|
rootClose
|
|
onHide={() => togglePopover(false)}
|
|
>
|
|
<OLPopover
|
|
className="pdfjs-toolbar-popover"
|
|
id="pdf-toolbar-popover-menu"
|
|
ref={popoverRef}
|
|
>
|
|
<PdfPageNumberControl
|
|
setPage={setPage}
|
|
page={page}
|
|
totalPages={totalPages}
|
|
/>
|
|
<div className="pdfjs-zoom-controls">
|
|
<PdfZoomButtons setZoom={setZoom} />
|
|
</div>
|
|
</OLPopover>
|
|
</OLOverlay>
|
|
</>
|
|
)
|
|
}
|