From fbed0cb9432014c7d34173236e08de969435ef30 Mon Sep 17 00:00:00 2001 From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com> Date: Fri, 15 Dec 2023 13:18:17 +0200 Subject: [PATCH] Merge pull request #16268 from overleaf/ii-ide-page-prototype-review-panel-layout-to-left [web] Review panel popovers GitOrigin-RevId: 4424abab97b197013063679bd8efcac001f458ad --- .../hooks/use-review-panel-state.ts | 4 +++ .../review-panel/hooks/useLayoutToLeft.tsx | 32 +++++++++++++++++++ .../review-panel-context-adapter.ts | 1 - .../review-panel/entries/entry-container.tsx | 4 +-- .../components/review-panel/review-panel.tsx | 4 +-- .../hooks/use-angular-review-panel-state.ts | 5 +++ .../review-panel/types/review-panel-state.ts | 1 + 7 files changed, 46 insertions(+), 5 deletions(-) create mode 100644 services/web/frontend/js/features/ide-react/context/review-panel/hooks/useLayoutToLeft.tsx diff --git a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts index 68f8237942..260ed24d52 100644 --- a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts +++ b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts @@ -7,6 +7,7 @@ import useSocketListener from '@/features/ide-react/hooks/use-socket-listener' import useAsync from '@/shared/hooks/use-async' import useAbortController from '@/shared/hooks/use-abort-controller' import useScopeEventEmitter from '@/shared/hooks/use-scope-event-emitter' +import useLayoutToLeft from '@/features/ide-react/context/review-panel/hooks/useLayoutToLeft' import { sendMB } from '../../../../../infrastructure/event-tracking' import { dispatchReviewPanelLayout as handleLayoutChange, @@ -147,6 +148,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde { const { showGenericMessageModal } = useModalsContext() const addCommentEmitter = useScopeEventEmitter('comment:start_adding') + const layoutToLeft = useLayoutToLeft('.ide-react-editor-panel') const [subView, setSubView] = useState>('cur_file') const [isOverviewLoading, setIsOverviewLoading] = @@ -1523,6 +1525,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde { formattedProjectMembers, layoutSuspended, unsavedComment, + layoutToLeft, }), [ collapsed, @@ -1550,6 +1553,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde { formattedProjectMembers, layoutSuspended, unsavedComment, + layoutToLeft, ] ) diff --git a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/useLayoutToLeft.tsx b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/useLayoutToLeft.tsx new file mode 100644 index 0000000000..b971a268a0 --- /dev/null +++ b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/useLayoutToLeft.tsx @@ -0,0 +1,32 @@ +import { useState, useEffect } from 'react' + +function useLayoutToLeft(querySelector: string) { + const [layoutToLeft, setLayoutToLeft] = useState(false) + + useEffect(() => { + if (!('ResizeObserver' in window)) return + + const target = document.querySelector(querySelector) + + if (!target) return + + const handleResize = () => { + const docWidth = document.documentElement.clientWidth + const { right: rightEdge } = target.getBoundingClientRect() + setLayoutToLeft(docWidth - rightEdge < 225) + } + + handleResize() + + const observer = new ResizeObserver(handleResize) + observer.observe(target) + + return () => { + observer.disconnect() + } + }, [querySelector]) + + return layoutToLeft +} + +export default useLayoutToLeft diff --git a/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts b/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts index eaf9ee5250..c3e85042ac 100644 --- a/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts +++ b/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts @@ -2,6 +2,5 @@ import { ReactScopeValueStore } from '@/features/ide-react/scope-value-store/rea export default function populateReviewPanelScope(store: ReactScopeValueStore) { store.set('users', {}) - store.set('reviewPanel.layoutToLeft', false) store.set('addNewComment', () => {}) } diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/entries/entry-container.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/entries/entry-container.tsx index bf07bac22d..903438b35d 100644 --- a/services/web/frontend/js/features/source-editor/components/review-panel/entries/entry-container.tsx +++ b/services/web/frontend/js/features/source-editor/components/review-panel/entries/entry-container.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames' import { createPortal } from 'react-dom' +import { useReviewPanelValueContext } from '@/features/source-editor/context/review-panel/review-panel-context' import { Coordinates } from '../hooks/use-indicator-hover' -import useScopeValue from '@/shared/hooks/use-scope-value' function EntryContainer({ id, @@ -11,7 +11,7 @@ function EntryContainer({ }: React.ComponentProps<'div'> & { hoverCoords?: Coordinates | null }) { - const [layoutToLeft] = useScopeValue('reviewPanel.layoutToLeft') + const { layoutToLeft } = useReviewPanelValueContext() const container = (
diff --git a/services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts b/services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts index c73a1f06c6..83c9b1c51e 100644 --- a/services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts +++ b/services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts @@ -1,5 +1,6 @@ import { useState, useMemo, useCallback } from 'react' import useScopeValue from '../../../../../shared/hooks/use-scope-value' +import useLayoutToLeft from '@/features/ide-react/context/review-panel/hooks/useLayoutToLeft' import { sendMB } from '../../../../../infrastructure/event-tracking' import { ReviewPanelState } from '../types/review-panel-state' import * as ReviewPanel from '../types/review-panel-state' @@ -131,6 +132,8 @@ function useAngularReviewPanelState(): ReviewPanelState { 'bulkRejectActions' ) + const layoutToLeft = useLayoutToLeft('#editor') + const handleSetSubview = useCallback( (subView: SubView) => { setSubView(subView) @@ -180,6 +183,7 @@ function useAngularReviewPanelState(): ReviewPanelState { formattedProjectMembers, layoutSuspended, unsavedComment, + layoutToLeft, }), [ collapsed, @@ -207,6 +211,7 @@ function useAngularReviewPanelState(): ReviewPanelState { formattedProjectMembers, layoutSuspended, unsavedComment, + layoutToLeft, ] ) diff --git a/services/web/frontend/js/features/source-editor/context/review-panel/types/review-panel-state.ts b/services/web/frontend/js/features/source-editor/context/review-panel/types/review-panel-state.ts index dcec002a0d..c65652fc3d 100644 --- a/services/web/frontend/js/features/source-editor/context/review-panel/types/review-panel-state.ts +++ b/services/web/frontend/js/features/source-editor/context/review-panel/types/review-panel-state.ts @@ -48,6 +48,7 @@ export interface ReviewPanelState { > layoutSuspended: boolean unsavedComment: string + layoutToLeft: boolean } updaterFns: { handleSetSubview: (subView: SubView) => void