github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

[cm6] Add offset to review panel entry positions when needed (#13912)

Browse source 
* Add offset to review panel entry positions when needed
* Fix useResizeObserver usage

GitOrigin-RevId: e220ce94e13c3a2347fc72654de747356eb1e658
This commit is contained in:
Alf Eaton 2023-07-18 11:34:49 +01:00 committed by Copybot
parent 4d3c4c6ae9
commit 9f719c572d
3 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
services/web/frontend/js/features/source-editor/components/review-panel/nav.tsx
View file

@ -24,10 +24,10 @@ function Nav() {
}, },
[setNavHeight] [setNavHeight]
) )
const resizeRef = useResizeObserver(handleResize) const { elementRef } = useResizeObserver(handleResize)
return ( return (
<div ref={resizeRef} className="rp-nav" role="tablist"> <div ref={elementRef} className="rp-nav" role="tablist">
<button <button
type="button" type="button"
id="review-panel-tab-current-file" id="review-panel-tab-current-file"

4
services/web/frontend/js/features/source-editor/components/review-panel/toolbar/toolbar.tsx
View file

@ -17,10 +17,10 @@ function Toolbar() {
}, },
[setToolbarHeight] [setToolbarHeight]
) )
const resizeRef = useResizeObserver(handleResize) const { elementRef } = useResizeObserver(handleResize)
return ( return (
<div ref={resizeRef} className="review-panel-toolbar"> <div ref={elementRef} className="review-panel-toolbar">
<ResolvedCommentsDropdown /> <ResolvedCommentsDropdown />
<ToggleMenu /> <ToggleMenu />
</div> </div>

8
services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts
View file

@ -10,6 +10,12 @@ import { EditorView, ViewUpdate } from '@codemirror/view'
import { CurrentDoc } from '../../../../../../types/current-doc' import { CurrentDoc } from '../../../../../../types/current-doc'
import { fullHeightCoordsAtPos } from '../../utils/layer' import { fullHeightCoordsAtPos } from '../../utils/layer'
import { debounce } from 'lodash' import { debounce } from 'lodash'
import getMeta from '../../../../utils/meta'
// If a toolbar row sits alongside the review panel, the review panel entries need to be shifted down by 32px.
// Once the review panel is always inside the editor, this offset can be removed.
const offsetTop =
getMeta('ol-showSourceToolbar') && !getMeta('ol-isReviewPanelReact') ? 32 : 0
// With less than this number of entries, don't bother culling to avoid // With less than this number of entries, don't bother culling to avoid
// little UI jumps when scrolling. // little UI jumps when scrolling.
@ -79,7 +85,7 @@ export const createChangeManager = (
visibilityChanged = true visibilityChanged = true
} }
entry.screenPos = { y, height, editorPaddingTop } entry.screenPos = { y: y + offsetTop, height, editorPaddingTop }
} }
if (allVisible) { if (allVisible) {