mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
revert: IAIScrollArea
This commit is contained in:
parent
2cee8bebb2
commit
f8bb650cc1
invokeai/frontend/web/src/features
gallery/components/ImageMetaDataViewer
ui/components
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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
|
||||||
|
@ -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);
|
Loading…
Reference in New Issue
Block a user