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

get positioning/scrolling working for scan results list

Browse Source
This commit is contained in:
Mary Hipp 2024-02-22 12:18:25 -05:00 committed by Brandon Rising
parent c23dcc3e77
commit ccdb89534a
3 changed files with 26 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsForm.tsx
View File

@ -3,6 +3,7 @@ import { ChangeEventHandler, useCallback, useState } from 'react';
import { useLazyScanModelsQuery } from '../../../../../services/api/endpoints/models';
import { useTranslation } from 'react-i18next';
import { ScanModelsResults } from './ScanModelsResults';
import ScrollableContent from '../../../../../common/components/OverlayScrollbars/ScrollableContent';
export const ScanModelsForm = () => {
const [scanPath, setScanPath] = useState('');
@ -31,7 +32,7 @@ export const ScanModelsForm = () => {
}, []);
return (
<>
<Flex flexDir="column" height="100%">
<FormControl isInvalid={!!errorMessage.length} w="full">
<Flex flexDir="column" w="full">
<Flex gap={2} alignItems="flex-end" justifyContent="space-between">
@ -47,8 +48,7 @@ export const ScanModelsForm = () => {
{!!errorMessage.length && <FormErrorMessage>{errorMessage}</FormErrorMessage>}
</Flex>
</FormControl>
{results && <ScanModelsResults results={results} />}
</>
</Flex>
);
};

22
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsResults.tsx
View File

@ -12,6 +12,7 @@ import {
import { t } from 'i18next';
import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
import { PiXBold } from 'react-icons/pi';
import ScrollableContent from '../../../../../common/components/OverlayScrollbars/ScrollableContent';
export const ScanModelsResults = ({ results }: { results: string[] }) => {
const [searchTerm, setSearchTerm] = useState('');
@ -37,8 +38,8 @@ export const ScanModelsResults = ({ results }: { results: string[] }) => {
return (
<>
<Divider mt={4} />
<Flex flexDir="column" gap={2} mt={4}>
<Flex justifyContent="space-between" alignItems="center" mb={4}>
<Flex flexDir="column" gap={2} mt={4} height="100%">
<Flex justifyContent="space-between" alignItems="center">
<Heading fontSize="md" as="h4">
Scan Results
</Heading>
@ -64,13 +65,16 @@ export const ScanModelsResults = ({ results }: { results: string[] }) => {
)}
</InputGroup>
</Flex>
{filteredResults.map((result) => (
<Flex key={result} fontSize="sm" flexDir="column">
<Text fontWeight="semibold">{result.split('\\').slice(-1)[0]}</Text>
<Text variant="subtext">{result}</Text>
</Flex>
))}
<Flex height="100%" layerStyle="third" borderRadius="base" p={4} mt={4} mb={4}>
<ScrollableContent>
{filteredResults.map((result) => (
<Flex key={result} fontSize="sm" flexDir="column">
<Text fontWeight="semibold">{result.split('\\').slice(-1)[0]}</Text>
<Text variant="subtext">{result}</Text>
</Flex>
))}
</ScrollableContent>
</Flex>
</Flex>
</>
);

20
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ImportModels.tsx
View File

@ -1,4 +1,4 @@
import { Box, Divider, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
import { Box, Divider, Heading, Tab, Flex, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
import { ImportQueue } from './AddModelPanel/ImportQueue';
import { SimpleImport } from './AddModelPanel/SimpleImport';
@ -6,31 +6,31 @@ import { ScanModels } from './AddModelPanel/ScanModels/ScanModels';
export const ImportModels = () => {
return (
<Box layerStyle="first" p={3} borderRadius="base" w="full" h="full">
<Box w="full" p={4}>
<Flex layerStyle="first" p={3} borderRadius="base" w="full" h="full" flexDir="column" gap={2}>
<Box w="full" p={2}>
<Heading fontSize="xl">Add Model</Heading>
</Box>
<Box layerStyle="second" borderRadius="base" w="full">
<Tabs variant="collapse">
<Box layerStyle="second" borderRadius="base" w="full" h="50%" overflow="hidden">
<Tabs variant="collapse" height="100%">
<TabList>
<Tab>Simple</Tab>
<Tab>Advanced</Tab>
<Tab>Scan</Tab>
</TabList>
<TabPanels p={3}>
<TabPanels p={3} height="100%">
<TabPanel>
<SimpleImport />
</TabPanel>
<TabPanel>Advanced Import Placeholder</TabPanel>
<TabPanel>
<TabPanel height="100%">
<ScanModels />
</TabPanel>
</TabPanels>
</Tabs>
<Divider mt="5" mb="3" />
</Box>
<Box layerStyle="second" borderRadius="base" w="full" h="50%">
<ImportQueue />
</Box>
</Box>
</Flex>
);
};