From 0fb44582f9a5dd9885bc8644a2fcd448d3a63d08 Mon Sep 17 00:00:00 2001 From: David Newell Date: Wed, 4 Oct 2023 16:05:00 +0100 Subject: [PATCH 1/3] fix: remove content width toggle from popover --- frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx index 1e63357eb209a..4a66c81274ad0 100644 --- a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx +++ b/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx @@ -9,7 +9,7 @@ import { useEffect, useRef } from 'react' import { useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys' import { NotebookListMini } from './NotebookListMini' import { notebooksModel } from '~/models/notebooksModel' -import { NotebookExpandButton, NotebookSyncInfo } from './NotebookMeta' +import { NotebookSyncInfo } from './NotebookMeta' import { notebookLogic } from './notebookLogic' import { urls } from 'scenes/urls' import { NotebookPopoverDropzone } from './NotebookPopoverDropzone' @@ -49,8 +49,6 @@ export function NotebookPopoverCard(): JSX.Element | null { tooltipPlacement="left" /> - - setFullScreen(!fullScreen)} From 966c709bf90e3e916e6e8933d96d4e7cdafb1a76 Mon Sep 17 00:00:00 2001 From: David Newell Date: Thu, 5 Oct 2023 11:20:14 +0100 Subject: [PATCH 2/3] show hide button when has effect --- .../src/scenes/notebooks/Notebook/NotebookPopover.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx index 4a66c81274ad0..1935c5db45610 100644 --- a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx +++ b/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx @@ -5,14 +5,15 @@ import { Notebook } from './Notebook' import { notebookPopoverLogic } from 'scenes/notebooks/Notebook/notebookPopoverLogic' import { LemonButton } from '@posthog/lemon-ui' import { IconFullScreen, IconChevronRight, IconLink } from 'lib/lemon-ui/icons' -import { useEffect, useRef } from 'react' +import { useEffect, useMemo, useRef } from 'react' import { useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys' import { NotebookListMini } from './NotebookListMini' import { notebooksModel } from '~/models/notebooksModel' -import { NotebookSyncInfo } from './NotebookMeta' +import { NotebookExpandButton, NotebookSyncInfo } from './NotebookMeta' import { notebookLogic } from './notebookLogic' import { urls } from 'scenes/urls' import { NotebookPopoverDropzone } from './NotebookPopoverDropzone' +import { useWindowSize } from 'lib/hooks/useWindowSize' export function NotebookPopoverCard(): JSX.Element | null { const { visibility, shownAtLeastOnce, fullScreen, selectedNotebook, initialAutofocus, droppedResource } = @@ -20,12 +21,16 @@ export function NotebookPopoverCard(): JSX.Element | null { const { setVisibility, setFullScreen, selectNotebook } = useActions(notebookPopoverLogic) const { createNotebook } = useActions(notebooksModel) const { notebook } = useValues(notebookLogic({ shortId: selectedNotebook })) + const { width } = useWindowSize() const editable = visibility !== 'hidden' && !notebook?.is_template if (droppedResource) { return null } + + const contentWidthHasEffect = useMemo(() => fullScreen && width && width > 866, [fullScreen, width]) + return (
@@ -49,6 +54,8 @@ export function NotebookPopoverCard(): JSX.Element | null { tooltipPlacement="left" /> + {contentWidthHasEffect && } + setFullScreen(!fullScreen)} From cbf46891903505cdb0b22a91375d8489d57b5cb3 Mon Sep 17 00:00:00 2001 From: David Newell Date: Mon, 9 Oct 2023 11:12:47 +0100 Subject: [PATCH 3/3] use resize breakpoints hook --- .../scenes/notebooks/Notebook/NotebookPopover.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx index 1935c5db45610..aed37034404a6 100644 --- a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx +++ b/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx @@ -13,7 +13,7 @@ import { NotebookExpandButton, NotebookSyncInfo } from './NotebookMeta' import { notebookLogic } from './notebookLogic' import { urls } from 'scenes/urls' import { NotebookPopoverDropzone } from './NotebookPopoverDropzone' -import { useWindowSize } from 'lib/hooks/useWindowSize' +import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver' export function NotebookPopoverCard(): JSX.Element | null { const { visibility, shownAtLeastOnce, fullScreen, selectedNotebook, initialAutofocus, droppedResource } = @@ -21,7 +21,6 @@ export function NotebookPopoverCard(): JSX.Element | null { const { setVisibility, setFullScreen, selectNotebook } = useActions(notebookPopoverLogic) const { createNotebook } = useActions(notebooksModel) const { notebook } = useValues(notebookLogic({ shortId: selectedNotebook })) - const { width } = useWindowSize() const editable = visibility !== 'hidden' && !notebook?.is_template @@ -29,10 +28,15 @@ export function NotebookPopoverCard(): JSX.Element | null { return null } - const contentWidthHasEffect = useMemo(() => fullScreen && width && width > 866, [fullScreen, width]) + const { ref, size } = useResizeBreakpoints({ + 0: 'small', + 832: 'medium', + }) + + const contentWidthHasEffect = useMemo(() => fullScreen && size === 'medium', [fullScreen, size]) return ( -
+