overleaf/services/web/frontend/js/features/preview/components/preview-recompile-button.js
Paulo Jorge Reis 4e74fb2694 Log pane improvements (#3418)
* Ordering of log entries in the new errors UI

* Don't show the expand-collapse widget when not needed; smaller font size in the raw log output

* Expose log actions in the log pane.

* Use "This project" instead of "Your project" in the new errors UI

* Better handling of long log messages; left-ellipsize the file/line number button

* Make log location more button-like; add tooltip when needed.

* Add a PDF expand button to the toolbar.

* Add a stop compilation button to the new compile UI

* Use aria-label for button accessible text; improve handling of long filenames in the log location button

* Set max-height correctly for the logs pane dropdown

* Avoid changing raw logs sizing when expanded and collapsed

* Add comment on the solution for right-to-left text and ellipsis

* Improve logs pane actions

GitOrigin-RevId: 4098d77a9ee6d333644906876b9ff27035b79319
2020-12-03 03:04:28 +00:00

179 lines
5 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import { Dropdown, MenuItem, OverlayTrigger, Tooltip } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import Icon from '../../../shared/components/icon'
function PreviewRecompileButton({
compilerState: {
isAutoCompileOn,
isCompiling,
isDraftModeOn,
isSyntaxCheckOn
},
onRecompile,
onRecompileFromScratch,
onRunSyntaxCheckNow,
onStopCompilation,
onSetAutoCompile,
onSetDraftMode,
onSetSyntaxCheck,
showText
}) {
const { t } = useTranslation()
function handleSelectAutoCompileOn() {
onSetAutoCompile(true)
}
function handleSelectAutoCompileOff() {
onSetAutoCompile(false)
}
function handleSelectDraftModeOn() {
onSetDraftMode(true)
}
function handleSelectDraftModeOff() {
onSetDraftMode(false)
}
function handleSelectSyntaxCheckOn() {
onSetSyntaxCheck(true)
}
function handleSelectSyntaxCheckOff() {
onSetSyntaxCheck(false)
}
let compilingProps = {}
let recompileProps = {}
function _hideText(keepAria) {
return {
'aria-hidden': !keepAria,
style: {
position: 'absolute',
right: '-100vw'
}
}
}
if (!showText) {
compilingProps = _hideText(isCompiling)
recompileProps = _hideText(!isCompiling)
} else if (isCompiling) {
recompileProps = _hideText()
} else {
compilingProps = _hideText()
}
const buttonElement = (
<Dropdown
id="pdf-recompile-dropdown"
className="btn-recompile-group toolbar-item"
>
<button className="btn btn-recompile" onClick={onRecompile}>
<Icon type="refresh" spin={isCompiling} />
<span id="text-compiling" className="toolbar-text" {...compilingProps}>
{t('compiling')}
&hellip;
</span>
<span id="text-recompile" className="toolbar-text" {...recompileProps}>
{t('recompile')}
</span>
</button>
<Dropdown.Toggle
aria-label={t('toggle_compile_options_menu')}
className="btn btn-recompile"
bsStyle="success"
/>
<Dropdown.Menu>
<MenuItem header>{t('auto_compile')}</MenuItem>
<MenuItem onSelect={handleSelectAutoCompileOn}>
<Icon type={isAutoCompileOn ? 'check' : ''} modifier="fw" />
{t('on')}
</MenuItem>
<MenuItem onSelect={handleSelectAutoCompileOff}>
<Icon type={!isAutoCompileOn ? 'check' : ''} modifier="fw" />
{t('off')}
</MenuItem>
<MenuItem header>{t('compile_mode')}</MenuItem>
<MenuItem onSelect={handleSelectDraftModeOff}>
<Icon type={!isDraftModeOn ? 'check' : ''} modifier="fw" />
{t('normal')}
</MenuItem>
<MenuItem onSelect={handleSelectDraftModeOn}>
<Icon type={isDraftModeOn ? 'check' : ''} modifier="fw" />
{t('fast')} <span className="subdued">[draft]</span>
</MenuItem>
<MenuItem header>Syntax Checks</MenuItem>
<MenuItem onSelect={handleSelectSyntaxCheckOn}>
<Icon type={isSyntaxCheckOn ? 'check' : ''} modifier="fw" />
{t('stop_on_validation_error')}
</MenuItem>
<MenuItem onSelect={handleSelectSyntaxCheckOff}>
<Icon type={!isSyntaxCheckOn ? 'check' : ''} modifier="fw" />
{t('ignore_validation_errors')}
</MenuItem>
<MenuItem onSelect={onRunSyntaxCheckNow}>
<Icon type="" modifier="fw" />
{t('run_syntax_check_now')}
</MenuItem>
<MenuItem className={!isCompiling ? 'hidden' : ''} divider />
<MenuItem
onSelect={onStopCompilation}
className={!isCompiling ? 'hidden' : ''}
disabled={!isCompiling}
aria-disabled={!isCompiling}
>
{t('stop_compile')}
</MenuItem>
<MenuItem divider />
<MenuItem
onSelect={onRecompileFromScratch}
disabled={isCompiling}
aria-disabled={!!isCompiling}
>
{t('recompile_from_scratch')}
</MenuItem>
</Dropdown.Menu>
</Dropdown>
)
return showText ? (
buttonElement
) : (
<OverlayTrigger
placement="bottom"
overlay={
<Tooltip id="tooltip-download-pdf">
{isCompiling ? t('compiling') : t('recompile')}
</Tooltip>
}
>
{buttonElement}
</OverlayTrigger>
)
}
PreviewRecompileButton.propTypes = {
compilerState: PropTypes.shape({
isAutoCompileOn: PropTypes.bool.isRequired,
isCompiling: PropTypes.bool.isRequired,
isDraftModeOn: PropTypes.bool.isRequired,
isSyntaxCheckOn: PropTypes.bool.isRequired,
logEntries: PropTypes.object.isRequired
}),
onRecompile: PropTypes.func.isRequired,
onRecompileFromScratch: PropTypes.func.isRequired,
onRunSyntaxCheckNow: PropTypes.func.isRequired,
onSetAutoCompile: PropTypes.func.isRequired,
onSetDraftMode: PropTypes.func.isRequired,
onSetSyntaxCheck: PropTypes.func.isRequired,
onStopCompilation: PropTypes.func.isRequired,
showText: PropTypes.bool.isRequired
}
export default PreviewRecompileButton