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:
Jessica Lawshe 2020-11-26 03:58:56 -06:00 committed by Copybot
parent 081f4212a8
commit d7f32179e4
4 changed files with 11 additions and 17 deletions

View file

@ -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>
)
})

View file

@ -470,4 +470,7 @@
~'100vh - ' @toolbar-small-height ~' - ' @toolbar-height ~' - ' @margin-md
);
overflow-y: auto;
.dropdown-header {
white-space: nowrap;
}
}

View file

@ -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",

View file

@ -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() {