github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): mini preview bg color

Browse Source
This commit is contained in:
psychedelicious
2025-06-05 21:13:26 +10:00
parent 3bbc2c458c
commit 862dd3f12f
2 changed files with 6 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemPreviewMini.tsx
View File

@@ -21,6 +21,7 @@ const sx = {
flexShrink: 0,
borderWidth: 2,
borderRadius: 'base',
bg: 'base.900',
'&[data-selected="true"]': {
borderColor: 'invokeBlue.300',
},
@@ -62,7 +63,7 @@ export const QueueItemPreviewMini = memo(({ item, isSelected, number }: Props) =
>
<QueueItemStatusLabel status={item.status} position="absolute" margin="auto" />
{imageDTO && <DndImage imageDTO={imageDTO} onLoad={onLoad} asThumbnail />}
{!imageLoaded && <QueueItemProgressImage itemId={item.item_id} position="absolute" withBg />}
{!imageLoaded && <QueueItemProgressImage itemId={item.item_id} position="absolute" />}
<QueueItemNumber number={number} position="absolute" top={0} left={1} />
<QueueItemCircularProgress itemId={item.item_id} status={item.status} position="absolute" top={1} right={2} />
</Flex>

12
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemProgressImage.tsx
View File

@@ -1,20 +1,16 @@
import type { ImageProps } from '@invoke-ai/ui-library';
import { Flex, Image } from '@invoke-ai/ui-library';
import { Image } from '@invoke-ai/ui-library';
import { useCanvasSessionContext, useProgressData } from 'features/controlLayers/components/SimpleSession/context';
import { memo } from 'react';
type Props = { itemId: number; withBg?: boolean } & ImageProps;
type Props = { itemId: number } & ImageProps;
export const QueueItemProgressImage = memo(({ itemId, withBg, ...rest }: Props) => {
export const QueueItemProgressImage = memo(({ itemId, ...rest }: Props) => {
const ctx = useCanvasSessionContext();
const { progressImage } = useProgressData(ctx.$progressData, itemId);
if (!progressImage) {
if (withBg) {
return <Flex w="full" h="full" bg="base.900" alignItems="center" justifyContent="center" />;
} else {
return null;
}
return null;
}
return (