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

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

@ -12,6 +12,7 @@ import {
import { t } from 'i18next'; import { t } from 'i18next';
import { ChangeEventHandler, useCallback, useMemo, useState } from 'react'; import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
import { PiXBold } from 'react-icons/pi'; import { PiXBold } from 'react-icons/pi';
import ScrollableContent from '../../../../../common/components/OverlayScrollbars/ScrollableContent';
export const ScanModelsResults = ({ results }: { results: string[] }) => { export const ScanModelsResults = ({ results }: { results: string[] }) => {
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
@ -37,8 +38,8 @@ export const ScanModelsResults = ({ results }: { results: string[] }) => {
return ( return (
<> <>
<Divider mt={4} /> <Divider mt={4} />
<Flex flexDir="column" gap={2} mt={4}> <Flex flexDir="column" gap={2} mt={4} height="100%">
<Flex justifyContent="space-between" alignItems="center" mb={4}> <Flex justifyContent="space-between" alignItems="center">
<Heading fontSize="md" as="h4"> <Heading fontSize="md" as="h4">
Scan Results Scan Results
</Heading> </Heading>
@ -64,13 +65,16 @@ export const ScanModelsResults = ({ results }: { results: string[] }) => {
)} )}
</InputGroup> </InputGroup>
</Flex> </Flex>
<Flex height="100%" layerStyle="third" borderRadius="base" p={4} mt={4} mb={4}>
<ScrollableContent>
{filteredResults.map((result) => ( {filteredResults.map((result) => (
<Flex key={result} fontSize="sm" flexDir="column"> <Flex key={result} fontSize="sm" flexDir="column">
<Text fontWeight="semibold">{result.split('\\').slice(-1)[0]}</Text> <Text fontWeight="semibold">{result.split('\\').slice(-1)[0]}</Text>
<Text variant="subtext">{result}</Text> <Text variant="subtext">{result}</Text>
</Flex> </Flex>
))} ))}
</ScrollableContent>
</Flex>
</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 { ImportQueue } from './AddModelPanel/ImportQueue';
import { SimpleImport } from './AddModelPanel/SimpleImport'; import { SimpleImport } from './AddModelPanel/SimpleImport';
@ -6,31 +6,31 @@ import { ScanModels } from './AddModelPanel/ScanModels/ScanModels';
export const ImportModels = () => { export const ImportModels = () => {
return ( return (
<Box layerStyle="first" p={3} borderRadius="base" w="full" h="full"> <Flex layerStyle="first" p={3} borderRadius="base" w="full" h="full" flexDir="column" gap={2}>
<Box w="full" p={4}> <Box w="full" p={2}>
<Heading fontSize="xl">Add Model</Heading> <Heading fontSize="xl">Add Model</Heading>
</Box> </Box>
<Box layerStyle="second" borderRadius="base" w="full"> <Box layerStyle="second" borderRadius="base" w="full" h="50%" overflow="hidden">
<Tabs variant="collapse"> <Tabs variant="collapse" height="100%">
<TabList> <TabList>
<Tab>Simple</Tab> <Tab>Simple</Tab>
<Tab>Advanced</Tab> <Tab>Advanced</Tab>
<Tab>Scan</Tab> <Tab>Scan</Tab>
</TabList> </TabList>
<TabPanels p={3}> <TabPanels p={3} height="100%">
<TabPanel> <TabPanel>
<SimpleImport /> <SimpleImport />
</TabPanel> </TabPanel>
<TabPanel>Advanced Import Placeholder</TabPanel> <TabPanel>Advanced Import Placeholder</TabPanel>
<TabPanel> <TabPanel height="100%">
<ScanModels /> <ScanModels />
</TabPanel> </TabPanel>
</TabPanels> </TabPanels>
</Tabs> </Tabs>
</Box>
<Divider mt="5" mb="3" /> <Box layerStyle="second" borderRadius="base" w="full" h="50%">
<ImportQueue /> <ImportQueue />
</Box> </Box>
</Box> </Flex>
); );
}; };