mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Update download dropdown style (#3399)
* Update translation * Move dropdown header to top of list * Do not wrap header in download dropdown GitOrigin-RevId: 326428272592fc54f9915d5946877e59a60f967e
This commit is contained in:
parent
081f4212a8
commit
d7f32179e4
4 changed files with 11 additions and 17 deletions
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Dropdown, MenuItem, OverlayTrigger, Tooltip } from 'react-bootstrap'
|
||||
import { useTranslation, Trans } from 'react-i18next'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Icon from '../../../shared/components/icon'
|
||||
|
||||
export const topFileTypes = ['bbl', 'gls', 'ind']
|
||||
|
@ -77,11 +77,11 @@ function PreviewDownloadButton({
|
|||
bsStyle="info"
|
||||
/>
|
||||
<Dropdown.Menu id="download-dropdown-list">
|
||||
<MenuItem header>{t('other_output_files')}</MenuItem>
|
||||
<FileList list={topFiles} listType="main" />
|
||||
{otherFiles.length > 0 && topFiles.length > 0 ? (
|
||||
<>
|
||||
<MenuItem divider />
|
||||
<MenuItem header>{t('other_output_files')}</MenuItem>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
|
@ -102,11 +102,7 @@ function FileList({ listType, list }) {
|
|||
return list.map((file, index) => {
|
||||
return (
|
||||
<MenuItem download href={file.url} key={`${listType}-${index}`}>
|
||||
<Trans
|
||||
i18nKey="download_file"
|
||||
components={[<strong />]}
|
||||
values={{ type: file.fileName }}
|
||||
/>
|
||||
<b>{file.fileName}</b>
|
||||
</MenuItem>
|
||||
)
|
||||
})
|
||||
|
|
|
@ -470,4 +470,7 @@
|
|||
~'100vh - ' @toolbar-small-height ~' - ' @toolbar-height ~' - ' @margin-md
|
||||
);
|
||||
overflow-y: auto;
|
||||
.dropdown-header {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
"view_all_errors": "View all errors",
|
||||
"log_entry_description": "Log entry with level: __level__",
|
||||
"navigate_log_source": "Navigate to log position in source code: __location__",
|
||||
"other_output_files": "Other output files",
|
||||
"other_output_files": "Download other output files",
|
||||
"toggle_output_files_list": "Toggle output files list",
|
||||
"n_warnings": "__count__ warning",
|
||||
"n_warnings_plural": "__count__ warnings",
|
||||
|
|
|
@ -116,11 +116,8 @@ describe('<PreviewDownloadButton />', function() {
|
|||
})
|
||||
menuItems.forEach((item, index) => {
|
||||
// check displayed text
|
||||
const itemTextParts = item.textContent.split(' ')
|
||||
expect(itemTextParts[0]).to.equal('Download')
|
||||
const fileType = itemTextParts[1].split('.').pop()
|
||||
const fileType = item.textContent.split('.').pop()
|
||||
expect(fileTypes).to.include(fileType)
|
||||
expect(itemTextParts[2]).to.equal('file')
|
||||
})
|
||||
|
||||
// check grouped correctly
|
||||
|
@ -149,9 +146,7 @@ describe('<PreviewDownloadButton />', function() {
|
|||
renderPreviewDownloadButton(isCompiling, outputFiles, pdfDownloadUrl)
|
||||
|
||||
const bblMenuItems = screen.getAllByText((content, element) => {
|
||||
return (
|
||||
content !== '' && element.textContent === 'Download output.bbl file'
|
||||
)
|
||||
return content !== '' && element.textContent === 'output.bbl'
|
||||
})
|
||||
expect(bblMenuItems.length).to.equal(2)
|
||||
})
|
||||
|
@ -161,7 +156,7 @@ describe('<PreviewDownloadButton />', function() {
|
|||
const pdfAltFile = makeFile('alt.pdf')
|
||||
const outputFiles = [pdfFile, pdfAltFile]
|
||||
renderPreviewDownloadButton(isCompiling, outputFiles, pdfDownloadUrl)
|
||||
screen.getAllByRole('menuitem', { name: 'Download alt.pdf file' })
|
||||
screen.getAllByRole('menuitem', { name: 'alt.pdf' })
|
||||
})
|
||||
it('should show the button text when prop showText=true', function() {
|
||||
const isCompiling = false
|
||||
|
@ -188,7 +183,7 @@ describe('<PreviewDownloadButton />', function() {
|
|||
|
||||
renderPreviewDownloadButton(false, outputFiles, pdfDownloadUrl, true)
|
||||
|
||||
screen.getByText('Other output files')
|
||||
screen.getByText('Download other output files')
|
||||
screen.getByRole('separator')
|
||||
})
|
||||
it('should not display when there are top files and no other files', function() {
|
||||
|
|
Loading…
Reference in a new issue