github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-16 07:35:24 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): dnd drop label errors w invalid DOM nesting

Browse Source 
Make em all strings to prevent nesting `<p>` elements. Slightly changes appearance - font size is a bit smaller.
This commit is contained in:
psychedelicious
2024-09-17 22:44:15 +10:00
parent c4541f5d3c
commit 9884159812
6 changed files with 6 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
View File

@@ -169,7 +169,7 @@ const GalleryBoard = ({ board, isSelected }: GalleryBoardProps) => {
{board.archived && !editingDisclosure.isOpen && <Icon as={PiArchiveBold} fill="base.300" />}
{!editingDisclosure.isOpen && <Text variant="subtext">{board.image_count}</Text>}
<IAIDroppable data={droppableData} dropLabel={<Text fontSize="lg">{t('unifiedCanvas.move')}</Text>} />
<IAIDroppable data={droppableData} dropLabel={t('unifiedCanvas.move')} />
</Flex>
</Tooltip>
)}

2
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
View File

@@ -92,7 +92,7 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
</Text>
{autoAddBoardId === 'none' && <AutoAddBadge />}
<Text variant="subtext">{imagesTotal}</Text>
<IAIDroppable data={droppableData} dropLabel={<Text fontSize="lg">{t('unifiedCanvas.move')}</Text>} />
<IAIDroppable data={droppableData} dropLabel={t('unifiedCanvas.move')} />
</Flex>
</Tooltip>
)}

12
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx
View File

@@ -75,7 +75,6 @@ const ImageFieldInputComponent = (props: FieldComponentProps<ImageFieldInputInst
postUploadAction={postUploadAction}
useThumbailFallback
uploadElement={<UploadElement />}
dropLabel={<DropLabel />}
minSize={8}
>
<IAIDndImageIcon
@@ -100,14 +99,3 @@ const UploadElement = memo(() => {
});
UploadElement.displayName = 'UploadElement';
const DropLabel = memo(() => {
const { t } = useTranslation();
return (
<Text fontSize={16} fontWeight="semibold">
{t('gallery.drop')}
</Text>
);
});
DropLabel.displayName = 'DropLabel';