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

fix(ui): gallery tabs layout

Browse Source
This commit is contained in:
psychedelicious 2024-07-24 13:18:34 +10:00
parent c385e76356
commit 1831ed620f
1 changed files with 34 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
invokeai/frontend/web/src/features/gallery/components/Gallery.tsx
View File

@ -1,5 +1,16 @@
import type { ChakraProps } from '@invoke-ai/ui-library'; import type { ChakraProps } from '@invoke-ai/ui-library';
import { Box, Collapse, Flex, IconButton, Tab, TabList, Tabs, Text, useDisclosure } from '@invoke-ai/ui-library'; import {
Box,
Collapse,
Flex,
IconButton,
Spacer,
Tab,
TabList,
Tabs,
Text,
useDisclosure,
} from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { galleryViewChanged, searchTermChanged } from 'features/gallery/store/gallerySlice'; import { galleryViewChanged, searchTermChanged } from 'features/gallery/store/gallerySlice';
import type { CSSProperties } from 'react'; import type { CSSProperties } from 'react';
@ -54,35 +65,28 @@ export const Gallery = () => {
const boardName = useBoardName(selectedBoardId); const boardName = useBoardName(selectedBoardId);
return ( return (
<Flex flexDirection="column" alignItems="center" justifyContent="space-between" h="full" w="full"> <Flex flexDirection="column" alignItems="center" justifyContent="space-between" h="full" w="full" pt={1}>
<Flex alignItems="center" justifyContent="space-between" w="full"> <Tabs index={galleryView === 'images' ? 0 : 1} variant="enclosed" display="flex" flexDir="column" w="full">
<Text fontSize="sm" fontWeight="semibold" noOfLines={1} px="2"> <TabList gap={2} fontSize="sm" borderColor="base.800" alignItems="center" w="full">
{boardName} <Text fontSize="sm" fontWeight="semibold" noOfLines={1} px="2">
</Text> {boardName}
<Flex alignItems="center" justifyContent="space-between"> </Text>
<Tabs index={galleryView === 'images' ? 0 : 1} variant="enclosed" display="flex" flexDir="column"> <Spacer />
<TabList gap={2} fontSize="sm" borderColor="base.800"> <Tab sx={BASE_STYLES} _selected={SELECTED_STYLES} onClick={handleClickImages} data-testid="images-tab">
<Tab sx={BASE_STYLES} _selected={SELECTED_STYLES} onClick={handleClickImages} data-testid="images-tab"> {t('parameters.images')}
{t('parameters.images')} </Tab>
</Tab> <Tab sx={BASE_STYLES} _selected={SELECTED_STYLES} onClick={handleClickAssets} data-testid="assets-tab">
<Tab sx={BASE_STYLES} _selected={SELECTED_STYLES} onClick={handleClickAssets} data-testid="assets-tab"> {t('gallery.assets')}
{t('gallery.assets')} </Tab>
</Tab> <IconButton
</TabList> onClick={handleClickSearch}
</Tabs> tooltip={searchDisclosure.isOpen ? `${t('gallery.exitSearch')}` : `${t('gallery.displaySearch')}`}
<Box position="relative"> aria-label={t('gallery.displaySearch')}
<IconButton icon={searchTerm.length ? <MdSearchOff /> : <MdSearch />}
w="full" variant="link"
h="full" />
onClick={handleClickSearch} </TabList>
tooltip={searchDisclosure.isOpen ? `${t('gallery.exitSearch')}` : `${t('gallery.displaySearch')}`} </Tabs>
aria-label={t('gallery.displaySearch')}
icon={searchTerm.length ? <MdSearchOff /> : <MdSearch />}
variant="link"
/>
</Box>
</Flex>
</Flex>
<Box w="full"> <Box w="full">
<Collapse in={searchDisclosure.isOpen} style={COLLAPSE_STYLES}> <Collapse in={searchDisclosure.isOpen} style={COLLAPSE_STYLES}>