Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

revert: IAIScrollArea

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx
View File

@ -9,9 +9,9 @@ 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 { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { memo } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
@ -317,7 +317,7 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
</Tooltip>
<Text fontWeight="semibold">Metadata JSON:</Text>
</Flex>
<IAIScrollArea>
<OverlayScrollbarsComponent defer>
<Box
sx={{
padding: 4,
@ -329,7 +329,7 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
>
<pre>{metadataJSON}</pre>
</Box>
</IAIScrollArea>
</OverlayScrollbarsComponent>
</Flex>
</Flex>
);

10
invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx
View File

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

8
invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx
View File

@ -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 { uiSelector } from '../store/uiSelectors';
import PinParametersPanelButton from './PinParametersPanelButton';
import OverlayScrollable from './common/OverlayScrollable';
const selector = createSelector(uiSelector, (ui) => {
const { shouldPinParametersPanel, shouldShowParametersPanel } = ui;
@ -37,12 +37,14 @@ const ParametersPinnedWrapper = (props: ParametersPinnedWrapperProps) => {
>
<Flex
sx={{
gap: 2,
flexDirection: 'column',
h: 'full',
w: 'full',
position: 'absolute',
}}
>
<IAIScrollArea>
<OverlayScrollable>
<Flex
sx={{
flexDirection: 'column',
@ -51,7 +53,7 @@ const ParametersPinnedWrapper = (props: ParametersPinnedWrapperProps) => {
>
{props.children}
</Flex>
</IAIScrollArea>
</OverlayScrollable>
</Flex>
<PinParametersPanelButton

22
invokeai/frontend/web/src/features/ui/components/common/OverlayScrollable.tsx Normal file
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);