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): simplify image display

Browse Source
This commit is contained in:
psychedelicious 2023-04-27 13:54:10 +10:00
parent db16ca0079
commit 31c7fa833e
2 changed files with 14 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx
View File

@ -1,23 +1,11 @@
import { Box, Collapse, Flex, Icon, useDisclosure } from '@chakra-ui/react';
import { Flex, Icon } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks';
import { systemSelector } from 'features/system/store/systemSelectors';
import IAIButton from 'common/components/IAIButton';
import ImageToImageSettings from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageSettings';
import { isEqual } from 'lodash';
import { useState } from 'react';
import {
AnimatePresence,
motion,
useMotionValue,
useTransform,
} from 'framer-motion';
import { MdPhoto } from 'react-icons/md';
import {
gallerySelector,
selectedImageSelector,
} from '../store/gallerySelectors';
import { selectedImageSelector } from '../store/gallerySelectors';
import CurrentImageButtons from './CurrentImageButtons';
import CurrentImagePreview from './CurrentImagePreview';
@ -42,9 +30,6 @@ export const currentImageDisplaySelector = createSelector(
*/
const CurrentImageDisplay = () => {
const { hasAnImageToDisplay } = useAppSelector(currentImageDisplaySelector);
const [shouldHideImageToImage, setShouldHideImageToImage] = useState(false);
const w = useMotionValue(0);
const width = useTransform(w, [0, 100], [`0px`, `100px`]);
return (
<Flex
@ -65,27 +50,23 @@ const CurrentImageDisplay = () => {
w: 'full',
h: 'full',
alignItems: 'center',
justifyContent: 'center',
gap: 4,
}}
>
<CurrentImageButtons />
{hasAnImageToDisplay ? (
<CurrentImagePreview />
<>
<CurrentImageButtons />
<CurrentImagePreview />
</>
) : (
<Flex
width="full"
height="full"
alignItems="center"
justifyContent="center"
>
<Icon
as={MdPhoto}
sx={{
boxSize: 24,
color: 'base.500',
}}
/>
</Flex>
<Icon
as={MdPhoto}
sx={{
boxSize: 24,
color: 'base.500',
}}
/>
)}
</Flex>
</Flex>

3
invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
View File

@ -5,8 +5,6 @@ import { useGetUrl } from 'common/util/getUrl';
import { systemSelector } from 'features/system/store/systemSelectors';
import { uiSelector } from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash';
import { ReactEventHandler } from 'react';
import { APP_METADATA_HEIGHT } from 'theme/util/constants';
import { selectedImageSelector } from '../store/gallerySelectors';
import CurrentImageFallback from './CurrentImageFallback';
@ -110,7 +108,6 @@ export default function CurrentImagePreview() {
height: '100%',
borderRadius: 'base',
overflow: 'scroll',
maxHeight: APP_METADATA_HEIGHT,
}}
>
<ImageMetadataViewer image={imageToDisplay.image} />