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

feat(ui): scollable areas support x-axis scrolling

Browse Source 
Closes #5490
This commit is contained in:
psychedelicious 2024-01-23 20:07:35 +11:00 committed by Kent Keirsey
parent 8bbdfc45fa
commit 71f9ac9985
4 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx
View File

@ -1,24 +1,35 @@
import type { ChakraProps } from '@invoke-ai/ui'; import type { ChakraProps } from '@invoke-ai/ui';
import { Box, Flex } from '@invoke-ai/ui'; import { Box, Flex } from '@invoke-ai/ui';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { CSSProperties, PropsWithChildren } from 'react'; import type { CSSProperties, PropsWithChildren } from 'react';
import { memo } from 'react'; import { memo, useMemo } from 'react';
type Props = PropsWithChildren & { type Props = PropsWithChildren & {
maxHeight?: ChakraProps['maxHeight']; maxHeight?: ChakraProps['maxHeight'];
overflowX?: 'hidden' | 'scroll';
overflowY?: 'hidden' | 'scroll';
}; };
const styles: CSSProperties = { height: '100%', width: '100%' }; const styles: CSSProperties = { height: '100%', width: '100%' };
const ScrollableContent = ({ children, maxHeight }: Props) => { const ScrollableContent = ({
children,
maxHeight,
overflowX = 'hidden',
overflowY = 'scroll',
}: Props) => {
const overlayscrollbarsOptions = useMemo(
() => getOverlayScrollbarsParams(overflowX, overflowY).options,
[overflowX, overflowY]
);
return ( return (
<Flex w="full" h="full" maxHeight={maxHeight} position="relative"> <Flex w="full" h="full" maxHeight={maxHeight} position="relative">
<Box position="absolute" top={0} left={0} right={0} bottom={0}> <Box position="absolute" top={0} left={0} right={0} bottom={0}>
<OverlayScrollbarsComponent <OverlayScrollbarsComponent
defer defer
style={styles} style={styles}
options={overlayScrollbarsParams.options} options={overlayscrollbarsOptions}
> >
{children} {children}
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>

10
invokeai/frontend/web/src/common/components/OverlayScrollbars/constants.ts
View File

@ -1,3 +1,4 @@
import { cloneDeep, merge } from 'lodash-es';
import { ClickScrollPlugin, OverlayScrollbars } from 'overlayscrollbars'; import { ClickScrollPlugin, OverlayScrollbars } from 'overlayscrollbars';
import type { UseOverlayScrollbarsParams } from 'overlayscrollbars-react'; import type { UseOverlayScrollbarsParams } from 'overlayscrollbars-react';
@ -16,3 +17,12 @@ export const overlayScrollbarsParams: UseOverlayScrollbarsParams = {
overflow: { x: 'hidden' }, overflow: { x: 'hidden' },
}, },
}; };
export const getOverlayScrollbarsParams = (
overflowX: 'hidden' | 'scroll' = 'hidden',
overflowY: 'hidden' | 'scroll' = 'scroll'
) => {
const params = cloneDeep(overlayScrollbarsParams);
merge(params, { options: { overflow: { y: overflowY, x: overflowX } } });
return params;
};

11
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
View File

@ -1,5 +1,7 @@
import { Box, Flex, IconButton, Tooltip } from '@invoke-ai/ui'; import { Box, Flex, IconButton, Tooltip } from '@invoke-ai/ui';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import {
getOverlayScrollbarsParams,
} from 'common/components/OverlayScrollbars/constants';
import { isString } from 'lodash-es'; import { isString } from 'lodash-es';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { CSSProperties } from 'react'; import type { CSSProperties } from 'react';
@ -15,6 +17,11 @@ type Props = {
withCopy?: boolean; withCopy?: boolean;
}; };
const overlayscrollbarsOptions = getOverlayScrollbarsParams(
'scroll',
'scroll'
).options;
const DataViewer = (props: Props) => { const DataViewer = (props: Props) => {
const { label, data, fileName, withDownload = true, withCopy = true } = props; const { label, data, fileName, withDownload = true, withCopy = true } = props;
const dataString = useMemo( const dataString = useMemo(
@ -60,7 +67,7 @@ const DataViewer = (props: Props) => {
<OverlayScrollbarsComponent <OverlayScrollbarsComponent
defer defer
style={overlayScrollbarsStyles} style={overlayScrollbarsStyles}
options={overlayScrollbarsParams.options} options={overlayscrollbarsOptions}
> >
<pre>{dataString}</pre> <pre>{dataString}</pre>
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>

3
invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx
View File

@ -6,7 +6,6 @@ import {
Spinner, Spinner,
Text, Text,
} from '@invoke-ai/ui'; } from '@invoke-ai/ui';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer'; import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer';
import { useCancelBatch } from 'features/queue/hooks/useCancelBatch'; import { useCancelBatch } from 'features/queue/hooks/useCancelBatch';
import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem'; import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
@ -127,9 +126,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
justifyContent="center" justifyContent="center"
> >
{queueItem ? ( {queueItem ? (
<ScrollableContent>
<DataViewer label="Queue Item" data={queueItem} /> <DataViewer label="Queue Item" data={queueItem} />
</ScrollableContent>
) : ( ) : (
<Spinner opacity={0.5} /> <Spinner opacity={0.5} />
)} )}