2021-01-27 05:30:55 -05:00
|
|
|
import React from 'react'
|
|
|
|
import PropTypes from 'prop-types'
|
2021-11-03 09:21:14 -04:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2021-01-27 05:30:55 -05:00
|
|
|
import MenuButton from './menu-button'
|
|
|
|
import CobrandingLogo from './cobranding-logo'
|
|
|
|
import BackToProjectsButton from './back-to-projects-button'
|
2021-02-09 10:37:48 -05:00
|
|
|
import ChatToggleButton from './chat-toggle-button'
|
2021-11-03 09:21:14 -04:00
|
|
|
import LayoutDropdownButton from './layout-dropdown-button'
|
2021-02-10 05:57:25 -05:00
|
|
|
import OnlineUsersWidget from './online-users-widget'
|
2021-03-10 07:19:54 -05:00
|
|
|
import ProjectNameEditableLabel from './project-name-editable-label'
|
2021-02-23 05:17:41 -05:00
|
|
|
import TrackChangesToggleButton from './track-changes-toggle-button'
|
|
|
|
import HistoryToggleButton from './history-toggle-button'
|
2021-03-10 07:19:54 -05:00
|
|
|
import ShareProjectButton from './share-project-button'
|
|
|
|
import PdfToggleButton from './pdf-toggle-button'
|
2021-04-19 08:38:03 -04:00
|
|
|
import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
|
|
|
|
|
|
|
|
const [publishModalModules] = importOverleafModules('publishModal')
|
|
|
|
const PublishButton = publishModalModules?.import.default
|
2021-01-27 05:30:55 -05:00
|
|
|
|
2021-06-21 06:02:38 -04:00
|
|
|
const ToolbarHeader = React.memo(function ToolbarHeader({
|
2021-11-15 11:33:57 -05:00
|
|
|
reattach,
|
|
|
|
detach,
|
|
|
|
detachMode,
|
|
|
|
detachRole,
|
2021-02-09 10:37:48 -05:00
|
|
|
cobranding,
|
|
|
|
onShowLeftMenuClick,
|
2021-11-03 09:21:14 -04:00
|
|
|
handleChangeLayout,
|
2021-02-09 10:37:48 -05:00
|
|
|
chatIsOpen,
|
|
|
|
toggleChatOpen,
|
2021-02-23 05:17:41 -05:00
|
|
|
reviewPanelOpen,
|
|
|
|
toggleReviewPanelOpen,
|
|
|
|
historyIsOpen,
|
|
|
|
toggleHistoryOpen,
|
2021-02-10 05:57:25 -05:00
|
|
|
unreadMessageCount,
|
|
|
|
onlineUsers,
|
2021-02-23 05:17:41 -05:00
|
|
|
goToUser,
|
2021-03-10 07:19:54 -05:00
|
|
|
isRestrictedTokenMember,
|
2021-06-30 07:03:29 -04:00
|
|
|
hasPublishPermissions,
|
2021-03-10 07:19:54 -05:00
|
|
|
projectName,
|
|
|
|
renameProject,
|
2021-06-25 04:14:07 -04:00
|
|
|
hasRenamePermissions,
|
2021-03-10 07:19:54 -05:00
|
|
|
openShareModal,
|
2021-11-03 09:21:14 -04:00
|
|
|
pdfLayout,
|
2021-03-10 07:19:54 -05:00
|
|
|
pdfViewIsOpen,
|
|
|
|
pdfButtonIsVisible,
|
2021-04-27 03:52:58 -04:00
|
|
|
togglePdfView,
|
2021-08-11 04:50:07 -04:00
|
|
|
trackChangesVisible,
|
2021-11-03 09:21:14 -04:00
|
|
|
view,
|
2021-02-09 10:37:48 -05:00
|
|
|
}) {
|
2021-11-03 09:21:14 -04:00
|
|
|
const { t } = useTranslation()
|
2021-06-30 07:03:29 -04:00
|
|
|
const shouldDisplayPublishButton = hasPublishPermissions && PublishButton
|
2021-08-11 04:50:07 -04:00
|
|
|
const shouldDisplayTrackChangesButton =
|
|
|
|
trackChangesVisible && !isRestrictedTokenMember
|
2021-06-17 07:50:29 -04:00
|
|
|
|
2021-01-27 05:30:55 -05:00
|
|
|
return (
|
2021-11-03 09:21:14 -04:00
|
|
|
<header
|
|
|
|
className="toolbar toolbar-header toolbar-with-labels"
|
|
|
|
role="navigation"
|
|
|
|
aria-label={t('project_layout_sharing_submission')}
|
|
|
|
>
|
2021-01-27 05:30:55 -05:00
|
|
|
<div className="toolbar-left">
|
|
|
|
<MenuButton onClick={onShowLeftMenuClick} />
|
2021-08-03 06:02:09 -04:00
|
|
|
{cobranding && cobranding.logoImgUrl && (
|
|
|
|
<CobrandingLogo {...cobranding} />
|
|
|
|
)}
|
2021-01-27 05:30:55 -05:00
|
|
|
<BackToProjectsButton />
|
|
|
|
</div>
|
2021-11-15 11:33:57 -05:00
|
|
|
{!window.showPdfDetach && pdfButtonIsVisible && (
|
2021-03-10 07:19:54 -05:00
|
|
|
<PdfToggleButton
|
|
|
|
onClick={togglePdfView}
|
|
|
|
pdfViewIsOpen={pdfViewIsOpen}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
<ProjectNameEditableLabel
|
|
|
|
className="toolbar-center"
|
|
|
|
projectName={projectName}
|
2021-06-25 04:14:07 -04:00
|
|
|
hasRenamePermissions={hasRenamePermissions}
|
2021-03-10 07:19:54 -05:00
|
|
|
onChange={renameProject}
|
|
|
|
/>
|
|
|
|
|
2021-02-09 10:37:48 -05:00
|
|
|
<div className="toolbar-right">
|
2021-02-10 05:57:25 -05:00
|
|
|
<OnlineUsersWidget onlineUsers={onlineUsers} goToUser={goToUser} />
|
2021-04-19 08:38:03 -04:00
|
|
|
|
2021-11-03 09:21:14 -04:00
|
|
|
{window.showPdfDetach && (
|
|
|
|
<LayoutDropdownButton
|
2021-11-15 11:33:57 -05:00
|
|
|
reattach={reattach}
|
|
|
|
detach={detach}
|
2021-11-03 09:21:14 -04:00
|
|
|
handleChangeLayout={handleChangeLayout}
|
2021-11-15 11:33:57 -05:00
|
|
|
detachMode={detachMode}
|
|
|
|
detachRole={detachRole}
|
2021-11-03 09:21:14 -04:00
|
|
|
pdfLayout={pdfLayout}
|
|
|
|
view={view}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
|
2021-08-11 04:50:07 -04:00
|
|
|
{shouldDisplayTrackChangesButton && (
|
2021-04-19 08:38:03 -04:00
|
|
|
<TrackChangesToggleButton
|
|
|
|
onClick={toggleReviewPanelOpen}
|
|
|
|
disabled={historyIsOpen}
|
|
|
|
trackChangesIsOpen={reviewPanelOpen}
|
|
|
|
/>
|
|
|
|
)}
|
2021-03-10 07:19:54 -05:00
|
|
|
<ShareProjectButton onClick={openShareModal} />
|
2021-06-17 07:50:29 -04:00
|
|
|
{shouldDisplayPublishButton && (
|
|
|
|
<PublishButton cobranding={cobranding} />
|
|
|
|
)}
|
2021-02-23 05:17:41 -05:00
|
|
|
{!isRestrictedTokenMember && (
|
|
|
|
<>
|
|
|
|
<HistoryToggleButton
|
|
|
|
historyIsOpen={historyIsOpen}
|
|
|
|
onClick={toggleHistoryOpen}
|
|
|
|
/>
|
|
|
|
<ChatToggleButton
|
|
|
|
chatIsOpen={chatIsOpen}
|
|
|
|
onClick={toggleChatOpen}
|
|
|
|
unreadMessageCount={unreadMessageCount}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)}
|
2021-02-09 10:37:48 -05:00
|
|
|
</div>
|
2021-01-27 05:30:55 -05:00
|
|
|
</header>
|
|
|
|
)
|
2021-06-21 06:02:38 -04:00
|
|
|
})
|
2021-01-27 05:30:55 -05:00
|
|
|
|
|
|
|
ToolbarHeader.propTypes = {
|
2021-11-15 11:33:57 -05:00
|
|
|
reattach: PropTypes.func.isRequired,
|
|
|
|
detach: PropTypes.func.isRequired,
|
|
|
|
detachMode: PropTypes.string,
|
|
|
|
detachRole: PropTypes.string,
|
2021-01-27 05:30:55 -05:00
|
|
|
onShowLeftMenuClick: PropTypes.func.isRequired,
|
2021-11-03 09:21:14 -04:00
|
|
|
handleChangeLayout: PropTypes.func.isRequired,
|
2021-02-09 10:37:48 -05:00
|
|
|
cobranding: PropTypes.object,
|
|
|
|
chatIsOpen: PropTypes.bool,
|
|
|
|
toggleChatOpen: PropTypes.func.isRequired,
|
2021-02-23 05:17:41 -05:00
|
|
|
reviewPanelOpen: PropTypes.bool,
|
|
|
|
toggleReviewPanelOpen: PropTypes.func.isRequired,
|
|
|
|
historyIsOpen: PropTypes.bool,
|
|
|
|
toggleHistoryOpen: PropTypes.func.isRequired,
|
2021-02-10 05:57:25 -05:00
|
|
|
unreadMessageCount: PropTypes.number.isRequired,
|
|
|
|
onlineUsers: PropTypes.array.isRequired,
|
2021-02-23 05:17:41 -05:00
|
|
|
goToUser: PropTypes.func.isRequired,
|
2021-03-10 07:19:54 -05:00
|
|
|
isRestrictedTokenMember: PropTypes.bool,
|
2021-06-30 07:03:29 -04:00
|
|
|
hasPublishPermissions: PropTypes.bool,
|
2021-03-10 07:19:54 -05:00
|
|
|
projectName: PropTypes.string.isRequired,
|
|
|
|
renameProject: PropTypes.func.isRequired,
|
2021-06-25 04:14:07 -04:00
|
|
|
hasRenamePermissions: PropTypes.bool,
|
2021-03-10 07:19:54 -05:00
|
|
|
openShareModal: PropTypes.func.isRequired,
|
2021-11-03 09:21:14 -04:00
|
|
|
pdfLayout: PropTypes.string.isRequired,
|
2021-03-10 07:19:54 -05:00
|
|
|
pdfViewIsOpen: PropTypes.bool,
|
|
|
|
pdfButtonIsVisible: PropTypes.bool,
|
2021-04-27 03:52:58 -04:00
|
|
|
togglePdfView: PropTypes.func.isRequired,
|
2021-08-11 04:50:07 -04:00
|
|
|
trackChangesVisible: PropTypes.bool,
|
2021-11-03 09:21:14 -04:00
|
|
|
view: PropTypes.string,
|
2021-01-27 05:30:55 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
export default ToolbarHeader
|