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: Introduce Mantine's ScrollArea

Browse Source
This commit is contained in:
blessedcoolant 2023-06-13 01:31:15 +12:00 committed by psychedelicious
parent d282810e53
commit 33912382e3
8 changed files with 59 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
invokeai/frontend/web/src/common/components/IAIScrollArea.tsx Normal file
View File

@ -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 (
<ScrollArea offsetScrollbars={offsetScrollbars} {...rest}>
{props.children}
</ScrollArea>
);
}

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

@ -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) => {
</Tooltip>
<Text fontWeight="semibold">Metadata JSON:</Text>
</Flex>
<OverlayScrollbarsComponent defer>
<IAIScrollArea>
<Box
sx={{
padding: 4,
borderRadius: 'base',
bg: 'whiteAlpha.500',
_dark: { bg: 'blackAlpha.500' },
w: 'max-content',
w: 'full',
}}
>
<pre>{metadataJSON}</pre>
</Box>
</OverlayScrollbarsComponent>
</IAIScrollArea>
</Flex>
</Flex>
);

2
invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsSchedulers.tsx
View File

@ -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() {

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

@ -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 = () => {
<InvokeAILogoComponent />
<PinParametersPanelButton />
</Flex>
<OverlayScrollable>
<IAIScrollArea>
<Flex sx={{ flexDir: 'column', gap: 2 }}>{drawerContent}</Flex>
</OverlayScrollable>
</IAIScrollArea>
</Flex>
</ResizableDrawer>
);

35
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 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,
}}
>
<OverlayScrollable>
<Flex
sx={{
gap: 2,
flexDirection: 'column',
h: 'full',
w: 'full',
position: 'absolute',
}}
>
{props.children}
</Flex>
</OverlayScrollable>
<Flex
sx={{
h: 'full',
w: 'full',
position: 'absolute',
}}
>
<IAIScrollArea>
<Flex sx={{ flexDirection: 'column', gap: 2 }}>{props.children}</Flex>
</IAIScrollArea>
</Flex>
<PinParametersPanelButton
sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
sx={{ position: 'absolute', top: 0, insetInlineEnd: 2 }}
/>
</Box>
);

19
invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx
View File

@ -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 (
<Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
<Flex sx={{ gap: 2, w: 'full', h: 'full' }}>
<ParametersPinnedWrapper>
<ImageToImageTabParameters />
</ParametersPinnedWrapper>

4
invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx
View File

@ -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 (
<Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
<Flex sx={{ gap: 2, w: 'full', h: 'full' }}>
<ParametersPinnedWrapper>
<TextToImageTabParameters />
</ParametersPinnedWrapper>

4
invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx
View File

@ -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 (
<Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
<Flex sx={{ gap: 2, w: 'full', h: 'full' }}>
<ParametersPinnedWrapper>
<UnifiedCanvasParameters />
</ParametersPinnedWrapper>