overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-download-files-button.jsx
Antoine Clausse 30860ae9f9 [web] Migrate PDF Logs to BS5 (#21062)
* [web] Migrate Logs components JSX to Bootstrap 5

* [web] Migrate logs.less to logs.scss

* [web] Remove unused class names

* [storybook] Define default Bootstrap version in Storybook

This prevents some warning in the console

* [storybook] Update pdf-preview.stories.jsx

* [storybook] Add pdf-log-entry.stories.tsx

* [storybook] Force re-renders when switching BS version

* [web] Keep files dropdown menu in bounds

* [web] Make files dropdown items not bold in BS5

* [web] Revert unrelated change

* [web] Fixup PreviewLogsPaneMaxEntries

* [web] Add style for log-entry-content-link

* [web] Replace log-entry by OLNotification in `PdfCodeCheckFailedNotice`

* [web] Use `BootstrapVersionSwitcher` instead of `isBootstrap5`

* [web] Rename `DropdownBS3` to `BS3Dropdown`

* [web] Reuse variables for `toolbar-height` and `toolbar-small-height`

* [web] Set `id` on `DropdownToggle` not `Dropdown`

* [web] Set `log-entry-btn-expand-collapse` in BS3 only

* [web] Remove `block: true` from StartFreeTrialButton in BS3

* [web] Remove unnecessary CSS in `.log-entry-header-link`

* [web] Use semantic color names

* Migrate the downloadable pdf file list to Bootstrap 5

* Remove nested BootstrapVersionSwitcher, fix "key" prop

* Update roles to: `<li role="menuitem">` `<a role="link">`

* Update `log-entry-header-link`: variant ghost and fix colors

---------

Co-authored-by: Rebeka <o.dekany@gmail.com>
GitOrigin-RevId: 89848970ab5d8a8c135335386caf24363f69a34c
2024-10-23 08:06:32 +00:00

60 lines
1.8 KiB
JavaScript

import { Dropdown as BS3Dropdown } from 'react-bootstrap'
import {
Dropdown,
DropdownMenu,
DropdownToggle,
} from '@/features/ui/components/bootstrap-5/dropdown-menu'
import PdfFileList from './pdf-file-list'
import ControlledDropdown from '../../../shared/components/controlled-dropdown'
import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
function PdfDownloadFilesButton() {
const { compiling, fileList } = useCompileContext()
const { t } = useTranslation()
return (
<BootstrapVersionSwitcher
bs3={
<ControlledDropdown
id="dropdown-files-logs-pane"
dropup
pullRight
disabled={compiling || !fileList}
>
<BS3Dropdown.Toggle
className="dropdown-toggle btn-secondary-info btn-secondary"
title={t('other_logs_and_files')}
bsSize="small"
bsStyle={null}
/>
<BS3Dropdown.Menu id="dropdown-files-logs-pane-list">
<PdfFileList fileList={fileList} />
</BS3Dropdown.Menu>
</ControlledDropdown>
}
bs5={
<Dropdown drop="up">
<DropdownToggle
id="dropdown-files-logs-pane"
variant="secondary"
title={t('other_logs_and_files')}
size="sm"
disabled={compiling || !fileList}
>
{t('other_logs_and_files')}
</DropdownToggle>
<DropdownMenu id="dropdown-files-logs-pane-list">
<PdfFileList fileList={fileList} />
</DropdownMenu>
</Dropdown>
}
/>
)
}
export default memo(PdfDownloadFilesButton)