Skip to content

Commit

Permalink
fix(ui): boards cut off when search open
Browse files Browse the repository at this point in the history
  • Loading branch information
@psychedelicious
psychedelicious committed Jul 15, 2024
1 parent 28e79c4 commit 1eb918e
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 51 deletions.
86 changes: 45 additions & 41 deletions invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Flex, Text } from '@invoke-ai/ui-library';
import { Box, Flex, Text } from '@invoke-ai/ui-library';
import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppSelector } from 'app/store/storeHooks';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
Expand Down Expand Up @@ -40,29 +40,62 @@ const BoardsList = () => {

return (
<>
<Flex flexDir="column" gap={2} borderRadius="base" maxHeight="100%">
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
{allowPrivateBoards && (
<Box position="relative" w="full" h="full">
<Box position="absolute" top={0} right={0} bottom={0} left={0}>
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
{allowPrivateBoards && (
<Flex direction="column" gap={1}>
<Flex
position="sticky"
w="full"
justifyContent="space-between"
alignItems="center"
ps={2}
pb={1}
pt={2}
zIndex={1}
top={0}
bg="base.900"
>
<Text fontSize="md" fontWeight="semibold" userSelect="none">
{t('boards.private')}
</Text>
<AddBoardButton isPrivateBoard={true} />
</Flex>
<Flex direction="column" gap={1}>
<NoBoardBoard isSelected={selectedBoardId === 'none'} />
{filteredPrivateBoards.map((board) => (
<GalleryBoard
board={board}
isSelected={selectedBoardId === board.board_id}
setBoardToDelete={setBoardToDelete}
key={board.board_id}
/>
))}
</Flex>
</Flex>
)}
<Flex direction="column" gap={1}>
<Flex
position="sticky"
w="full"
justifyContent="space-between"
alignItems="center"
ps={2}
py={1}
pb={1}
pt={2}
zIndex={1}
top={0}
bg="base.900"
>
<Text fontSize="md" fontWeight="semibold" userSelect="none">
{t('boards.private')}
{allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
</Text>
<AddBoardButton isPrivateBoard={true} />
<AddBoardButton isPrivateBoard={false} />
</Flex>
<Flex direction="column" gap={1}>
<NoBoardBoard isSelected={selectedBoardId === 'none'} />
{filteredPrivateBoards.map((board) => (
{!allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />}
{filteredSharedBoards.map((board) => (
<GalleryBoard
board={board}
isSelected={selectedBoardId === board.board_id}
Expand All @@ -72,38 +105,9 @@ const BoardsList = () => {
))}
</Flex>
</Flex>
)}
<Flex direction="column" gap={1} pb={2}>
<Flex
position="sticky"
w="full"
justifyContent="space-between"
alignItems="center"
ps={2}
py={1}
zIndex={1}
top={0}
bg="base.900"
>
<Text fontSize="md" fontWeight="semibold" userSelect="none">
{allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
</Text>
<AddBoardButton isPrivateBoard={false} />
</Flex>
<Flex direction="column" gap={1}>
{!allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />}
{filteredSharedBoards.map((board) => (
<GalleryBoard
board={board}
isSelected={selectedBoardId === board.board_id}
setBoardToDelete={setBoardToDelete}
key={board.board_id}
/>
))}
</Flex>
</Flex>
</OverlayScrollbarsComponent>
</Flex>
</OverlayScrollbarsComponent>
</Box>
</Box>
<DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
</>
);
Expand Down
25 changes: 15 additions & 10 deletions invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { GalleryHeader } from 'features/gallery/components/GalleryHeader';
import { galleryViewChanged } from 'features/gallery/store/gallerySlice';
import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
import { usePanel, type UsePanelOptions } from 'features/ui/hooks/usePanel';
import type { CSSProperties } from 'react';
import { memo, useCallback, useMemo, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { PiMagnifyingGlassBold } from 'react-icons/pi';
Expand All @@ -29,13 +30,15 @@ import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
import { GalleryPagination } from './ImageGrid/GalleryPagination';
import { GallerySearch } from './ImageGrid/GallerySearch';

const baseStyles: ChakraProps['sx'] = {
const COLLAPSE_STYLES: CSSProperties = { flexShrink: 0, minHeight: 0 };

const BASE_STYLES: ChakraProps['sx'] = {
fontWeight: 'semibold',
fontSize: 'sm',
color: 'base.300',
};

const selectedStyles: ChakraProps['sx'] = {
const SELECTED_STYLES: ChakraProps['sx'] = {
borderColor: 'base.800',
borderBottomColor: 'base.900',
color: 'invokeBlue.300',
Expand Down Expand Up @@ -110,11 +113,13 @@ const ImageGalleryContent = () => {
onExpand={boardsListPanel.onExpand}
collapsible
>
<Collapse in={boardSearchDisclosure.isOpen}>
<BoardsSearch />
</Collapse>
<Divider pt={2} />
<BoardsList />
<Flex flexDir="column" w="full" h="full">
<Collapse in={boardSearchDisclosure.isOpen} style={COLLAPSE_STYLES}>
<BoardsSearch />
</Collapse>
<Divider pt={2} />
<BoardsList />
</Flex>
</Panel>
<ResizeHandle
id="gallery-panel-handle"
Expand All @@ -125,10 +130,10 @@ const ImageGalleryContent = () => {
<Flex flexDirection="column" alignItems="center" justifyContent="space-between" h="full" w="full">
<Tabs index={galleryView === 'images' ? 0 : 1} variant="enclosed" display="flex" flexDir="column" w="full">
<TabList gap={2} fontSize="sm" borderColor="base.800">
<Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickImages} data-testid="images-tab">
<Tab sx={BASE_STYLES} _selected={SELECTED_STYLES} onClick={handleClickImages} data-testid="images-tab">
{t('parameters.images')}
</Tab>
<Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickAssets} data-testid="assets-tab">
<Tab sx={BASE_STYLES} _selected={SELECTED_STYLES} onClick={handleClickAssets} data-testid="assets-tab">
{t('gallery.assets')}
</Tab>
<Spacer />
Expand Down Expand Up @@ -157,7 +162,7 @@ const ImageGalleryContent = () => {
</TabList>
</Tabs>
<Box w="full">
<Collapse in={searchDisclosure.isOpen}>
<Collapse in={searchDisclosure.isOpen} style={COLLAPSE_STYLES}>
<Box w="full" pt={2}>
<GallerySearch />
</Box>
Expand Down

0 comments on commit 1eb918e

Please sign in to comment.