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): tweak board tooltip styles

Browse Source 
When the totals were high enough, the image looked really off. Also fixed some inconsistent padding.
This commit is contained in:
psychedelicious 2024-07-24 12:23:05 +10:00
parent 6db63349f8
commit e89de1d5b7
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTooltip.tsx
View File

@ -24,22 +24,24 @@ export const BoardTooltip = ({ board }: Props) => {
const { currentData: coverImage } = useGetImageDTOQuery(board?.cover_image_name ?? skipToken);
return (
<Flex flexDir="column" alignItems="center">
<Flex flexDir="column" alignItems="center" gap={1}>
{coverImage && (
<Image
src={coverImage.thumbnail_url}
draggable={false}
objectFit="cover"
w={100}
h={100}
maxW={150}
aspectRatio="1/1"
borderRadius="base"
borderBottomRadius="lg"
/>
)}
<Text>
{t('boards.imagesWithCount', { count: imagesTotal })}, {t('boards.assetsWithCount', { count: assetsTotal })}
</Text>
{board?.archived && <Text>({t('boards.archived')})</Text>}
<Flex flexDir="column" alignItems="center">
<Text noOfLines={1}>
{t('boards.imagesWithCount', { count: imagesTotal })}, {t('boards.assetsWithCount', { count: assetsTotal })}
</Text>
{board?.archived && <Text>({t('boards.archived')})</Text>}
</Flex>
</Flex>
);
};

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

@ -115,7 +115,7 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
return (
<BoardContextMenu board={board} setBoardToDelete={setBoardToDelete}>
{(ref) => (
<Tooltip label={<BoardTooltip board={board} />} openDelay={1000} placement="left" closeOnScroll>
<Tooltip label={<BoardTooltip board={board} />} openDelay={1000} placement="left" closeOnScroll p={2}>
<Flex
position="relative"
ref={ref}