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): revert in-gallery progress

Browse Source 
wasn't fully baked. will revisist in the future.
This commit is contained in:
psychedelicious 2023-05-29 18:26:49 +10:00 committed by Kent Keirsey
parent 4aec5d8ffc
commit 6fe28980b0
1 changed files with 23 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
View File

@ -45,14 +45,12 @@ import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store/store'; import { RootState } from 'app/store/store';
import { Virtuoso, VirtuosoGrid } from 'react-virtuoso'; import { Virtuoso, VirtuosoGrid } from 'react-virtuoso';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import GalleryProgressImage from './GalleryProgressImage';
import { uiSelector } from 'features/ui/store/uiSelectors'; import { uiSelector } from 'features/ui/store/uiSelectors';
import { ImageCategory, ImageDTO } from 'services/api'; import { ImageCategory } from 'services/api';
import { imageCategoriesChanged, selectImagesAll } from '../store/imagesSlice'; import { imageCategoriesChanged, selectImagesAll } from '../store/imagesSlice';
import { receivedPageOfImages } from 'services/thunks/image'; import { receivedPageOfImages } from 'services/thunks/image';
import { capitalize } from 'lodash-es'; import { capitalize } from 'lodash-es';
const PROGRESS_IMAGE_PLACEHOLDER = 'PROGRESS_IMAGE_PLACEHOLDER';
const IMAGE_CATEGORIES: ImageCategory[] = [ const IMAGE_CATEGORIES: ImageCategory[] = [
'general', 'general',
'control', 'control',
@ -64,13 +62,7 @@ const IMAGE_CATEGORIES: ImageCategory[] = [
const categorySelector = createSelector( const categorySelector = createSelector(
[(state: RootState) => state], [(state: RootState) => state],
(state) => { (state) => {
const { system, images } = state; const { images } = state;
const tempImages: (ImageDTO | typeof PROGRESS_IMAGE_PLACEHOLDER)[] = [];
if (system.progressImage) {
tempImages.push(PROGRESS_IMAGE_PLACEHOLDER);
}
const { categories } = images; const { categories } = images;
const allImages = selectImagesAll(state); const allImages = selectImagesAll(state);
@ -79,7 +71,7 @@ const categorySelector = createSelector(
); );
return { return {
images: tempImages.concat(filteredImages), images: filteredImages,
isLoading: images.isLoading, isLoading: images.isLoading,
areMoreImagesAvailable: filteredImages.length < images.total, areMoreImagesAvailable: filteredImages.length < images.total,
categories: images.categories, categories: images.categories,
@ -293,28 +285,17 @@ const ImageGalleryContent = () => {
data={images} data={images}
endReached={handleEndReached} endReached={handleEndReached}
scrollerRef={(ref) => setScrollerRef(ref)} scrollerRef={(ref) => setScrollerRef(ref)}
itemContent={(index, image) => { itemContent={(index, image) => (
const isSelected = <Flex sx={{ pb: 2 }}>
image === PROGRESS_IMAGE_PLACEHOLDER <HoverableImage
? false key={`${image.image_name}-${image.thumbnail_url}`}
: selectedImage?.image_name === image?.image_name; image={image}
isSelected={
return ( selectedImage?.image_name === image?.image_name
<Flex sx={{ pb: 2 }}> }
{image === PROGRESS_IMAGE_PLACEHOLDER ? ( />
<GalleryProgressImage </Flex>
key={PROGRESS_IMAGE_PLACEHOLDER} )}
/>
) : (
<HoverableImage
key={`${image.image_name}-${image.thumbnail_url}`}
image={image}
isSelected={isSelected}
/>
)}
</Flex>
);
}}
/> />
) : ( ) : (
<VirtuosoGrid <VirtuosoGrid
@ -326,22 +307,15 @@ const ImageGalleryContent = () => {
List: ListContainer, List: ListContainer,
}} }}
scrollerRef={setScroller} scrollerRef={setScroller}
itemContent={(index, image) => { itemContent={(index, image) => (
const isSelected = <HoverableImage
image === PROGRESS_IMAGE_PLACEHOLDER key={`${image.image_name}-${image.thumbnail_url}`}
? false image={image}
: selectedImage?.image_name === image?.image_name; isSelected={
selectedImage?.image_name === image?.image_name
return image === PROGRESS_IMAGE_PLACEHOLDER ? ( }
<GalleryProgressImage key={PROGRESS_IMAGE_PLACEHOLDER} /> />
) : ( )}
<HoverableImage
key={`${image.image_name}-${image.thumbnail_url}`}
image={image}
isSelected={isSelected}
/>
);
}}
/> />
)} )}
</Box> </Box>