github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-01-15 06:18:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve placeholder styling with badge and refined text positioning

Browse Source 
Co-authored-by: kent <kent@invoke.ai>
This commit is contained in:
Cursor Agent
2025-06-26 15:59:53 +00:00
committed by psychedelicious
parent 14fbee17a3
commit 89f1684072
2 changed files with 42 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts
View File

@@ -28,6 +28,7 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
placeholder: {
group: Konva.Group;
rect: Konva.Rect;
badgeBg: Konva.Rect;
text: Konva.Text;
};
};
@@ -64,21 +65,36 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
}),
rect: new Konva.Rect({
name: `${this.type}:placeholder_rect`,
fill: 'hsl(220 12% 10% / 1)', // 'base.900'
fill: 'transparent',
width,
height,
listening: false,
perfectDrawEnabled: false,
}),
badgeBg: new Konva.Rect({
name: `${this.type}:placeholder_badge_bg`,
fill: 'hsl(220 12% 10% / 0.8)', // 'base.900' with opacity
x: 6,
y: 6,
width: Math.min(204, width - 12),
height: 36,
cornerRadius: 6,
stroke: 'hsl(220 12% 50% / 1)', // 'base.700'
strokeWidth: 1,
listening: false,
perfectDrawEnabled: false,
}),
text: new Konva.Text({
name: `${this.type}:placeholder_text`,
fill: 'hsl(220 12% 80% / 1)', // 'base.900'
width,
height,
fill: 'hsl(220 12% 80% / 1)', // 'base.300'
x: 8,
y: 8,
width: Math.min(200, width - 16),
height: 32,
align: 'center',
verticalAlign: 'middle',
fontFamily: '"Inter Variable", sans-serif',
fontSize: width / 24,
fontSize: 14,
fontStyle: '600',
text: 'Waiting for Image',
listening: false,
@@ -88,6 +104,7 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
};
this.konva.placeholder.group.add(this.konva.placeholder.rect);
this.konva.placeholder.group.add(this.konva.placeholder.badgeBg);
this.konva.placeholder.group.add(this.konva.placeholder.text);
this.konva.group.add(this.konva.placeholder.group);
@@ -124,9 +141,8 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
const { width, height } = this.manager.stateApi.getBbox().rect;
this.konva.placeholder.rect.width(width);
this.konva.placeholder.rect.height(height);
this.konva.placeholder.text.width(width);
this.konva.placeholder.text.height(height);
this.konva.placeholder.text.fontSize(width / 24);
this.konva.placeholder.badgeBg.width(Math.min(204, width - 12));
this.konva.placeholder.text.width(Math.min(200, width - 16));
};
initialize = () => {

21
invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressImage.tsx
View File

@@ -1,5 +1,5 @@
import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { Flex, Heading, Image } from '@invoke-ai/ui-library';
import { Badge, Flex, Image } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
@@ -37,8 +37,23 @@ export const ProgressImage = memo(() => {
if (!progressImage) {
return (
<Flex width="full" height="full" alignItems="center" justifyContent="center" minW={0} minH={0}>
<Heading>Waiting for Image</Heading>
<Flex width="full" height="full" position="relative" minW={0} minH={0}>
<Badge
position="absolute"
top={2}
left={2}
color="base.300"
borderColor="base.700"
borderWidth={1}
bg="base.900"
opacity={0.8}
fontSize="sm"
fontWeight="semibold"
zIndex={1}
pointerEvents="none"
>
Waiting for Image
</Badge>
</Flex>
);
}