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

10
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); const { currentData: coverImage } = useGetImageDTOQuery(board?.cover_image_name ?? skipToken);
return ( return (
<Flex flexDir="column" alignItems="center"> <Flex flexDir="column" alignItems="center" gap={1}>
{coverImage && ( {coverImage && (
<Image <Image
src={coverImage.thumbnail_url} src={coverImage.thumbnail_url}
draggable={false} draggable={false}
objectFit="cover" objectFit="cover"
w={100} maxW={150}
h={100} aspectRatio="1/1"
borderRadius="base" borderRadius="base"
borderBottomRadius="lg" borderBottomRadius="lg"
/> />
)} )}
<Text> <Flex flexDir="column" alignItems="center">
<Text noOfLines={1}>
{t('boards.imagesWithCount', { count: imagesTotal })}, {t('boards.assetsWithCount', { count: assetsTotal })} {t('boards.imagesWithCount', { count: imagesTotal })}, {t('boards.assetsWithCount', { count: assetsTotal })}
</Text> </Text>
{board?.archived && <Text>({t('boards.archived')})</Text>} {board?.archived && <Text>({t('boards.archived')})</Text>}
</Flex> </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 ( return (
<BoardContextMenu board={board} setBoardToDelete={setBoardToDelete}> <BoardContextMenu board={board} setBoardToDelete={setBoardToDelete}>
{(ref) => ( {(ref) => (
<Tooltip label={<BoardTooltip board={board} />} openDelay={1000} placement="left" closeOnScroll> <Tooltip label={<BoardTooltip board={board} />} openDelay={1000} placement="left" closeOnScroll p={2}>
<Flex <Flex
position="relative" position="relative"
ref={ref} ref={ref}