From 33912382e31e5f8b39df549ac6e1955b1676b07a Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Tue, 13 Jun 2023 01:31:15 +1200 Subject: [PATCH] feat: Introduce Mantine's ScrollArea --- .../src/common/components/IAIScrollArea.tsx | 12 +++++++ .../ImageMetadataViewer.tsx | 10 +++--- .../SettingsModal/SettingsSchedulers.tsx | 2 -- .../ui/components/ParametersDrawer.tsx | 20 +++++------ .../ui/components/ParametersPinnedWrapper.tsx | 35 +++++++++---------- .../tabs/ImageToImage/ImageToImageTab.tsx | 19 +++++----- .../tabs/TextToImage/TextToImageTab.tsx | 4 +-- .../tabs/UnifiedCanvas/UnifiedCanvasTab.tsx | 4 +-- 8 files changed, 59 insertions(+), 47 deletions(-) create mode 100644 invokeai/frontend/web/src/common/components/IAIScrollArea.tsx diff --git a/invokeai/frontend/web/src/common/components/IAIScrollArea.tsx b/invokeai/frontend/web/src/common/components/IAIScrollArea.tsx new file mode 100644 index 0000000000..7ed4c4bead --- /dev/null +++ b/invokeai/frontend/web/src/common/components/IAIScrollArea.tsx @@ -0,0 +1,12 @@ +import { ScrollArea, ScrollAreaProps } from '@mantine/core'; + +type IAIScrollArea = ScrollAreaProps; + +export default function IAIScrollArea(props: IAIScrollArea) { + const { offsetScrollbars = true, ...rest } = props; + return ( + + {props.children} + + ); +} diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx index 1a8801fa52..e2e98a3c3e 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx @@ -9,15 +9,15 @@ import { Tooltip, } from '@chakra-ui/react'; import { useAppDispatch } from 'app/store/storeHooks'; +import IAIScrollArea from 'common/components/IAIScrollArea'; +import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters'; import { setShouldShowImageDetails } from 'features/ui/store/uiSlice'; import { memo } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import { FaCopy } from 'react-icons/fa'; import { IoArrowUndoCircleOutline } from 'react-icons/io5'; -import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import { ImageDTO } from 'services/api'; -import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters'; type MetadataItemProps = { isLink?: boolean; @@ -317,19 +317,19 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => { Metadata JSON: - + 
{metadataJSON}
 - + ); diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsSchedulers.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsSchedulers.tsx index 7e44257408..e5f4a4cbf7 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsSchedulers.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsSchedulers.tsx @@ -1,5 +1,4 @@ import { - Box, Menu, MenuButton, MenuItemOption, @@ -13,7 +12,6 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIButton from 'common/components/IAIButton'; import { setSchedulers } from 'features/ui/store/uiSlice'; import { isArray } from 'lodash-es'; -import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import { useTranslation } from 'react-i18next'; export default function SettingsSchedulers() { diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx index 9c19d988fe..c6eb7b4f2b 100644 --- a/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx +++ b/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx @@ -1,21 +1,21 @@ +import { Flex } from '@chakra-ui/react'; import { createSelector } from '@reduxjs/toolkit'; -import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { memo, useMemo } from 'react'; -import { Box, Flex } from '@chakra-ui/react'; +import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import IAIScrollArea from 'common/components/IAIScrollArea'; +import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors'; import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent'; -import OverlayScrollable from './common/OverlayScrollable'; -import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; import { activeTabNameSelector, uiSelector, } from 'features/ui/store/uiSelectors'; import { setShouldShowParametersPanel } from 'features/ui/store/uiSlice'; -import ResizableDrawer from './common/ResizableDrawer/ResizableDrawer'; +import { memo, useMemo } from 'react'; +import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; import PinParametersPanelButton from './PinParametersPanelButton'; -import TextToImageTabParameters from './tabs/TextToImage/TextToImageTabParameters'; +import ResizableDrawer from './common/ResizableDrawer/ResizableDrawer'; import ImageToImageTabParameters from './tabs/ImageToImage/ImageToImageTabParameters'; -import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; +import TextToImageTabParameters from './tabs/TextToImage/TextToImageTabParameters'; import UnifiedCanvasParameters from './tabs/UnifiedCanvas/UnifiedCanvasParameters'; const selector = createSelector( @@ -82,9 +82,9 @@ const ParametersDrawer = () => { - + {drawerContent} - + ); diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx index 407187294c..f32eb77eab 100644 --- a/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx +++ b/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx @@ -1,11 +1,11 @@ import { Box, Flex } from '@chakra-ui/react'; +import { createSelector } from '@reduxjs/toolkit'; +import { useAppSelector } from 'app/store/storeHooks'; +import IAIScrollArea from 'common/components/IAIScrollArea'; import { PropsWithChildren, memo } from 'react'; import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; -import OverlayScrollable from './common/OverlayScrollable'; -import PinParametersPanelButton from './PinParametersPanelButton'; -import { createSelector } from '@reduxjs/toolkit'; import { uiSelector } from '../store/uiSelectors'; -import { useAppSelector } from 'app/store/storeHooks'; +import PinParametersPanelButton from './PinParametersPanelButton'; const selector = createSelector(uiSelector, (ui) => { const { shouldPinParametersPanel, shouldShowParametersPanel } = ui; @@ -35,21 +35,20 @@ const ParametersPinnedWrapper = (props: ParametersPinnedWrapperProps) => { flexShrink: 0, }} > - - - {props.children} - - + + + {props.children} + + + ); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx index cbd261f455..3118542ecd 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx @@ -1,14 +1,17 @@ import { Box, Flex } from '@chakra-ui/react'; -import { memo, useCallback, useRef } from 'react'; -import { Panel, PanelGroup } from 'react-resizable-panels'; import { useAppDispatch } from 'app/store/storeHooks'; import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale'; -import ResizeHandle from '../ResizeHandle'; -import ImageToImageTabParameters from './ImageToImageTabParameters'; -import TextToImageTabMain from '../TextToImage/TextToImageTabMain'; -import { ImperativePanelGroupHandle } from 'react-resizable-panels'; -import ParametersPinnedWrapper from '../../ParametersPinnedWrapper'; import InitialImageDisplay from 'features/parameters/components/Parameters/ImageToImage/InitialImageDisplay'; +import { memo, useCallback, useRef } from 'react'; +import { + ImperativePanelGroupHandle, + Panel, + PanelGroup, +} from 'react-resizable-panels'; +import ParametersPinnedWrapper from '../../ParametersPinnedWrapper'; +import ResizeHandle from '../ResizeHandle'; +import TextToImageTabMain from '../TextToImage/TextToImageTabMain'; +import ImageToImageTabParameters from './ImageToImageTabParameters'; const ImageToImageTab = () => { const dispatch = useAppDispatch(); @@ -23,7 +26,7 @@ const ImageToImageTab = () => { }, []); return ( - + diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx index 87e77cc3ba..5a1e0cb2ec 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx @@ -1,12 +1,12 @@ import { Flex } from '@chakra-ui/react'; import { memo } from 'react'; +import ParametersPinnedWrapper from '../../ParametersPinnedWrapper'; import TextToImageTabMain from './TextToImageTabMain'; import TextToImageTabParameters from './TextToImageTabParameters'; -import ParametersPinnedWrapper from '../../ParametersPinnedWrapper'; const TextToImageTab = () => { return ( - + diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx index 6905879bdc..35303c9a87 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx @@ -1,12 +1,12 @@ import { Flex } from '@chakra-ui/react'; import { memo } from 'react'; +import ParametersPinnedWrapper from '../../ParametersPinnedWrapper'; import UnifiedCanvasContent from './UnifiedCanvasContent'; import UnifiedCanvasParameters from './UnifiedCanvasParameters'; -import ParametersPinnedWrapper from '../../ParametersPinnedWrapper'; const UnifiedCanvasTab = () => { return ( - +