revert: IAIScrollArea

This commit is contained in:
blessedcoolant 2023-06-14 15:50:10 +12:00 committed by psychedelicious
parent 2cee8bebb2
commit f8bb650cc1
4 changed files with 34 additions and 12 deletions
invokeai/frontend/web/src/features

View File

@ -9,9 +9,9 @@ import {
Tooltip, Tooltip,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useAppDispatch } from 'app/store/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import IAIScrollArea from 'common/components/IAIScrollArea';
import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters'; import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
import { setShouldShowImageDetails } from 'features/ui/store/uiSlice'; import { setShouldShowImageDetails } from 'features/ui/store/uiSlice';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { memo } from 'react'; import { memo } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -317,7 +317,7 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
</Tooltip> </Tooltip>
<Text fontWeight="semibold">Metadata JSON:</Text> <Text fontWeight="semibold">Metadata JSON:</Text>
</Flex> </Flex>
<IAIScrollArea> <OverlayScrollbarsComponent defer>
<Box <Box
sx={{ sx={{
padding: 4, padding: 4,
@ -329,7 +329,7 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
> >
<pre>{metadataJSON}</pre> <pre>{metadataJSON}</pre>
</Box> </Box>
</IAIScrollArea> </OverlayScrollbarsComponent>
</Flex> </Flex>
</Flex> </Flex>
); );

View File

@ -2,7 +2,6 @@ import { Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIScrollArea from 'common/components/IAIScrollArea';
import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors'; import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent'; import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
import { import {
@ -13,6 +12,7 @@ import { setShouldShowParametersPanel } from 'features/ui/store/uiSlice';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
import PinParametersPanelButton from './PinParametersPanelButton'; import PinParametersPanelButton from './PinParametersPanelButton';
import OverlayScrollable from './common/OverlayScrollable';
import ResizableDrawer from './common/ResizableDrawer/ResizableDrawer'; import ResizableDrawer from './common/ResizableDrawer/ResizableDrawer';
import ImageToImageTabParameters from './tabs/ImageToImage/ImageToImageTabParameters'; import ImageToImageTabParameters from './tabs/ImageToImage/ImageToImageTabParameters';
import TextToImageTabParameters from './tabs/TextToImage/TextToImageTabParameters'; import TextToImageTabParameters from './tabs/TextToImage/TextToImageTabParameters';
@ -82,11 +82,9 @@ const ParametersDrawer = () => {
<InvokeAILogoComponent /> <InvokeAILogoComponent />
<PinParametersPanelButton /> <PinParametersPanelButton />
</Flex> </Flex>
<IAIScrollArea> <OverlayScrollable>
<Flex sx={{ flexDir: 'column', gap: 2, paddingLeft: 2 }}> <Flex sx={{ flexDir: 'column', gap: 2 }}>{drawerContent}</Flex>
{drawerContent} </OverlayScrollable>
</Flex>
</IAIScrollArea>
</Flex> </Flex>
</ResizableDrawer> </ResizableDrawer>
); );

View File

@ -1,11 +1,11 @@
import { Box, Flex } from '@chakra-ui/react'; import { Box, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import IAIScrollArea from 'common/components/IAIScrollArea';
import { PropsWithChildren, memo } from 'react'; import { PropsWithChildren, memo } from 'react';
import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
import { uiSelector } from '../store/uiSelectors'; import { uiSelector } from '../store/uiSelectors';
import PinParametersPanelButton from './PinParametersPanelButton'; import PinParametersPanelButton from './PinParametersPanelButton';
import OverlayScrollable from './common/OverlayScrollable';
const selector = createSelector(uiSelector, (ui) => { const selector = createSelector(uiSelector, (ui) => {
const { shouldPinParametersPanel, shouldShowParametersPanel } = ui; const { shouldPinParametersPanel, shouldShowParametersPanel } = ui;
@ -37,12 +37,14 @@ const ParametersPinnedWrapper = (props: ParametersPinnedWrapperProps) => {
> >
<Flex <Flex
sx={{ sx={{
gap: 2,
flexDirection: 'column',
h: 'full', h: 'full',
w: 'full', w: 'full',
position: 'absolute', position: 'absolute',
}} }}
> >
<IAIScrollArea> <OverlayScrollable>
<Flex <Flex
sx={{ sx={{
flexDirection: 'column', flexDirection: 'column',
@ -51,7 +53,7 @@ const ParametersPinnedWrapper = (props: ParametersPinnedWrapperProps) => {
> >
{props.children} {props.children}
</Flex> </Flex>
</IAIScrollArea> </OverlayScrollable>
</Flex> </Flex>
<PinParametersPanelButton <PinParametersPanelButton

View File

@ -0,0 +1,22 @@
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { PropsWithChildren, memo } from 'react';
const OverlayScrollable = (props: PropsWithChildren) => {
return (
<OverlayScrollbarsComponent
defer
style={{ height: '100%', width: '100%' }}
options={{
scrollbars: {
visibility: 'auto',
autoHide: 'move',
autoHideDelay: 1300,
theme: 'os-theme-dark',
},
overflow: { x: 'hidden' },
}}
>
{props.children}
</OverlayScrollbarsComponent>
);
};
export default memo(OverlayScrollable);