overleaf/services/web/frontend/js/features/review-panel-new/components/review-panel.tsx

75 lines
2.4 KiB
TypeScript
Raw Normal View History

Add review panel context providers and components (#19490) * Tidy up review panel components * Add ReviewPanel providers * [web] new design for review panel track change (#19544) * [web] new design for review panel track change * fixed mini view * mini icon style change * fix icon size * format date * useRangesUserContext hook * remove useRangesUserContext hook * using full class names * fix action icons hover * change wording for tooltips * added ReviewPanelChangeUser component * Update header in new review panel * Extract ReviewPanelTrackChangesMenuButton as a separate component * Remove wrapper div * Replace h2 with div for review panel label * Rename ReviewPanelTools to ReviewPanelHeader * Rename trackChangesExpanded -> trackChangesMenuExpanded * Dont break memoisation of ReviewPanelTrackChangesMenuButton * Fix the width of the track changes arrow icon * Update how prop types are declared * Remove new empty state from old review panel * Add empty state to new review panel * Add project members and owner to ChangesUsers context (#19624) --------- Co-authored-by: Alf Eaton <alf.eaton@overleaf.com> * Redesign comment entry in review panel (#19678) * Redesign comment entry in review panel * ReviewPanelCommentOptions component * remove unused prop * Tidying * Add conditional import * Optional changeManager * Add more split test compatibility * More split test compatibility * Fixes * Improve overview scrolling * Fix overview scrolling * Fix & simplify track changes toggle * Fix overview scrolling * Fix current file container * ExpandableContent component for messages in review panel (#19738) * ExpandableContent component for messages in review panel * remove isExpanded dependancy * Delete comment option for new review panel (#19772) * Delete comment option for new review panel * dont show thread warning if there are no replies * fix hasReplies issue * Implement initial collapsing overview files * Fix positioning of overview panel * Small styling changes * Add count of unresolved comments and tracked chanegs * More style adjustments * Move review-panel-overview styles into css file * Remove unused var --------- Co-authored-by: Domagoj Kriskovic <dom.kriskovic@overleaf.com> Co-authored-by: David Powell <david.powell@overleaf.com> Co-authored-by: David <33458145+davidmcpowell@users.noreply.github.com> GitOrigin-RevId: e67463443d541f88445a86eed5e2b6ec6040f9c7
2024-08-12 05:50:54 -04:00
import { FC, memo, useState } from 'react'
import {
useCodeMirrorStateContext,
useCodeMirrorViewContext,
} from '@/features/source-editor/components/codemirror-editor'
import ReviewPanelTabs from './review-panel-tabs'
import ReviewPanelHeader from './review-panel-header'
import ReviewPanelCurrentFile from './review-panel-current-file'
import { ReviewPanelOverview } from './review-panel-overview'
import classnames from 'classnames'
export type SubView = 'cur_file' | 'overview'
export const PANEL_WIDTH = 230
export const PANEL_MINI_WIDTH = 20
const ReviewPanel: FC<{ mini: boolean }> = ({ mini }) => {
const view = useCodeMirrorViewContext()
// eslint-disable-next-line no-unused-vars
const _state = useCodeMirrorStateContext() // needs to update on editor state changes
const [subView, setSubView] = useState<SubView>('cur_file')
const contentRect = view.contentDOM.getBoundingClientRect()
const scrollRect = view.scrollDOM.getBoundingClientRect()
return (
<div
className="review-panel-container"
style={{
overflowY: subView === 'overview' ? 'hidden' : undefined,
position: subView === 'overview' ? 'sticky' : 'relative',
top: subView === 'overview' ? 0 : undefined,
}}
>
<div
className={classnames('review-panel-new', {
'review-panel-mini': mini,
})}
style={{
flexShrink: 0,
minHeight: subView === 'cur_file' ? contentRect.height : 'auto',
height: subView === 'overview' ? '100%' : undefined,
overflow: subView === 'overview' ? 'hidden' : undefined,
width: mini ? PANEL_MINI_WIDTH : PANEL_WIDTH,
}}
>
{!mini && (
<ReviewPanelHeader top={scrollRect.top - 40} width={PANEL_WIDTH} />
)}
{subView === 'cur_file' && <ReviewPanelCurrentFile />}
{subView === 'overview' && <ReviewPanelOverview />}
<div
className="review-panel-footer"
style={{
position: 'fixed',
top: scrollRect.bottom - 66,
zIndex: 1,
background: '#fafafa',
borderTop: 'solid 1px #d9d9d9',
width: PANEL_WIDTH,
display: mini ? 'none' : 'flex',
}}
>
<ReviewPanelTabs subView={subView} setSubView={setSubView} />
</div>
</div>
</div>
)
}
export default memo(ReviewPanel)