overleaf/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js
Timothée Alby 23ba2b43fb Merge pull request #8412 from overleaf/ta-layout-dropdown-survey
Update Layout Dropdown Survey Link

GitOrigin-RevId: 48affa27223232a2585c18f88d200ef96ac2552b
2022-06-15 08:03:41 +00:00

281 lines
7.8 KiB
JavaScript

import { memo, useCallback } from 'react'
import PropTypes from 'prop-types'
import { Dropdown, MenuItem } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import Tooltip from '../../../shared/components/tooltip'
import Icon from '../../../shared/components/icon'
import IconChecked from '../../../shared/components/icon-checked'
import ControlledDropdown from '../../../shared/components/controlled-dropdown'
import IconEditorOnly from './icon-editor-only'
import IconPdfOnly from './icon-pdf-only'
import { useLayoutContext } from '../../../shared/context/layout-context'
import * as eventTracking from '../../../infrastructure/event-tracking'
import useEventListener from '../../../shared/hooks/use-event-listener'
function IconPlaceholder() {
return <Icon type="" fw />
}
function IconRefresh() {
return <Icon type="refresh" fw spin />
}
function IconLayout() {
return <Icon type="columns" fw />
}
function IconDetach() {
return <Icon type="window-restore" fw />
}
function IconCheckmark({ iconFor, pdfLayout, view, detachRole }) {
if (detachRole === 'detacher' || view === 'history') {
return <IconPlaceholder />
}
if (
iconFor === 'editorOnly' &&
pdfLayout === 'flat' &&
(view === 'editor' || view === 'file')
) {
return <IconChecked />
} else if (iconFor === 'pdfOnly' && pdfLayout === 'flat' && view === 'pdf') {
return <IconChecked />
} else if (iconFor === 'sideBySide' && pdfLayout === 'sideBySide') {
return <IconChecked />
}
// return empty icon for placeholder
return <IconPlaceholder />
}
function LayoutMenuItem({ checkmark, icon, text, ...props }) {
return (
<MenuItem {...props}>
<div className="layout-menu-item">
<div className="layout-menu-item-start">
<div>{checkmark}</div>
<div>{icon}</div>
<div>{text}</div>
</div>
</div>
</MenuItem>
)
}
LayoutMenuItem.propTypes = {
checkmark: PropTypes.node.isRequired,
icon: PropTypes.node.isRequired,
text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
onSelect: PropTypes.func,
}
function DetachDisabled() {
const { t } = useTranslation()
return (
<Tooltip
id="detach-disabled"
description={t('your_browser_does_not_support_this_feature')}
overlayProps={{ placement: 'left' }}
>
<LayoutMenuItem
disabled
checkmark={<IconPlaceholder />}
icon={<IconDetach />}
text={t('pdf_in_separate_tab')}
/>
</Tooltip>
)
}
function LayoutDropdownButton() {
const { t } = useTranslation()
const {
reattach,
detach,
detachIsLinked,
detachRole,
changeLayout,
view,
pdfLayout,
} = useLayoutContext(layoutContextPropTypes)
const handleDetach = useCallback(() => {
detach()
eventTracking.sendMB('project-layout-detach')
}, [detach])
const handleReattach = useCallback(() => {
if (detachRole !== 'detacher') {
return
}
reattach()
eventTracking.sendMB('project-layout-reattach')
}, [detachRole, reattach])
// reattach when the PDF pane opens
useEventListener('ui:pdf-open', handleReattach)
const handleChangeLayout = useCallback(
(newLayout, newView) => {
handleReattach()
changeLayout(newLayout, newView)
eventTracking.sendMB('project-layout-change', {
layout: newLayout,
view: newView,
})
},
[changeLayout, handleReattach]
)
const processing = !detachIsLinked && detachRole === 'detacher'
// bsStyle is required for Dropdown.Toggle, but we will override style
return (
<>
{processing && (
<div aria-live="assertive" className="sr-only">
{t('layout_processing')}
</div>
)}
<ControlledDropdown
id="layout-dropdown"
className="toolbar-item layout-dropdown"
pullRight
>
<Dropdown.Toggle className="btn-full-height" bsStyle="link">
{processing ? <IconRefresh /> : <IconLayout />}
<span className="toolbar-label">{t('layout')}</span>
<Tooltip
id="pdf-detach-badge"
description="New feature"
overlayProps={{ placement: 'bottom', delayHide: 100 }}
>
<span className="info-badge" />
</Tooltip>
</Dropdown.Toggle>
<Dropdown.Menu className="layout-dropdown-list">
<LayoutMenuItem
onSelect={() => handleChangeLayout('sideBySide')}
checkmark={
<IconCheckmark
iconFor="sideBySide"
pdfLayout={pdfLayout}
view={view}
detachRole={detachRole}
/>
}
icon={<Icon type="columns" fw />}
text={t('editor_and_pdf')}
/>
<LayoutMenuItem
onSelect={() => handleChangeLayout('flat', 'editor')}
checkmark={
<IconCheckmark
iconFor="editorOnly"
pdfLayout={pdfLayout}
view={view}
detachRole={detachRole}
/>
}
icon={
<i className="fa fa-fw">
<IconEditorOnly />
</i>
}
text={
<Trans
i18nKey="editor_only_hide_pdf"
components={[
<span key="editor_only_hide_pdf" className="subdued" />,
]}
/>
}
/>
<LayoutMenuItem
onSelect={() => handleChangeLayout('flat', 'pdf')}
checkmark={
<IconCheckmark
iconFor="pdfOnly"
pdfLayout={pdfLayout}
view={view}
detachRole={detachRole}
/>
}
icon={
<i className="fa fa-fw">
<IconPdfOnly />
</i>
}
text={
<Trans
i18nKey="pdf_only_hide_editor"
components={[
<span key="pdf_only_hide_editor" className="subdued" />,
]}
/>
}
/>
{'BroadcastChannel' in window ? (
<LayoutMenuItem
onSelect={() => handleDetach()}
checkmark={
detachRole === 'detacher' ? (
detachIsLinked ? (
<IconChecked />
) : (
<IconRefresh />
)
) : (
<IconPlaceholder />
)
}
icon={<IconDetach />}
text={t('pdf_in_separate_tab')}
/>
) : (
<DetachDisabled />
)}
<MenuItem divider />
<div className="pdf-detach-survey">
<span>
<span className="info-badge" />
</span>
<span className="pdf-detach-survey-text">
The Layout menu and opening the PDF in a new tab are new features.{' '}
<a
href="https://docs.google.com/forms/d/1fhc2LUMoun9jXvz9Nd6KkIKAQ8ZBfVZm_w8BpinpWu4"
target="_blank"
rel="noopener noreferrer"
>
{t('give_feedback')}.
</a>
</span>
</div>
</Dropdown.Menu>
</ControlledDropdown>
</>
)
}
export default memo(LayoutDropdownButton)
IconCheckmark.propTypes = {
iconFor: PropTypes.string.isRequired,
pdfLayout: PropTypes.string.isRequired,
view: PropTypes.string,
detachRole: PropTypes.string,
}
const layoutContextPropTypes = {
reattach: PropTypes.func.isRequired,
detach: PropTypes.func.isRequired,
changeLayout: PropTypes.func.isRequired,
detachIsLinked: PropTypes.bool,
detachRole: PropTypes.string,
pdfLayout: PropTypes.string.isRequired,
view: PropTypes.string,
}