github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-14 03:25:29 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): remove chakra as direct dependency

Browse Source 
Moved a number of things to `@invoke-ai/ui` to support this.

Unfortunately, the bundle size has increased a bit. I will work on that later.
This commit is contained in:
psychedelicious
2024-01-23 22:56:11 +11:00
committed by Kent Keirsey
parent 1178fd8bd3
commit 52b24e01e2
14 changed files with 730 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
View File

@@ -1,7 +1,5 @@
import { Box, Flex, IconButton, Tooltip } from '@invoke-ai/ui';
import {
getOverlayScrollbarsParams,
} from 'common/components/OverlayScrollbars/constants';
import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import { isString } from 'lodash-es';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { CSSProperties } from 'react';

7
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
View File

@@ -1,5 +1,4 @@
import { ExternalLinkIcon } from '@chakra-ui/icons';
import { Flex, IconButton, Link, Text, Tooltip } from '@invoke-ai/ui';
import { ExternalLink, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { IoArrowUndoCircleOutline } from 'react-icons/io5';
@@ -67,9 +66,7 @@ const ImageMetadataItem = ({
{label}:
</Text>
{isLink ? (
<Link href={value.toString()} isExternal wordBreak="break-all">
{value.toString()} <ExternalLinkIcon mx="2px" />
</Link>
<ExternalLink href={value.toString()} label={value.toString()} />
) : (
<Text overflowY="scroll" wordBreak="break-all">
{value.toString()}

12
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
View File

@@ -1,13 +1,11 @@
import { ExternalLinkIcon } from '@chakra-ui/icons';
import {
ExternalLink,
Flex,
Link,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
Text,
} from '@invoke-ai/ui';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
@@ -46,13 +44,7 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
position="absolute"
overflow="hidden"
>
<Flex gap={2}>
<Text fontWeight="semibold">{t('common.file')}:</Text>
<Link href={image.image_url} isExternal maxW="calc(100% - 3rem)">
{image.image_name}
<ExternalLinkIcon mx="2px" />
</Link>
</Flex>
<ExternalLink href={image.image_url} label={image.image_name} />
<Tabs
variant="line"