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

move boardname back and make collapsible again

Browse Source
This commit is contained in:
chainchompa 2024-07-09 14:25:13 -04:00 committed by Kent Keirsey
parent b7ebdca70a
commit f193a576a6
2 changed files with 84 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
View File

@ -3,7 +3,6 @@ import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal'; import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
import GallerySettingsPopover from 'features/gallery/components/GallerySettingsPopover/GallerySettingsPopover';
import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors'; import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { CSSProperties } from 'react'; import type { CSSProperties } from 'react';
@ -23,7 +22,12 @@ const overlayScrollbarsStyles: CSSProperties = {
width: '100%', width: '100%',
}; };
const BoardsList = () => { type Props = {
isOpen: boolean;
};
const BoardsList = (props: Props) => {
const { isOpen } = props;
const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId); const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText); const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText);
const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards); const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
@ -45,88 +49,87 @@ const BoardsList = () => {
return ( return (
<> <>
<Flex layerStyle="first" flexDir="column" borderRadius="base"> <Collapse in={isOpen} animateOpacity>
<Flex gap={2} alignItems="center" pb={2}> <Flex layerStyle="first" flexDir="column" gap={2} p={2} my={2} borderRadius="base">
<BoardsSearch /> <BoardsSearch />
<GallerySettingsPopover /> {allowPrivateBoards && (
</Flex> <>
{allowPrivateBoards && ( <Flex w="full" gap={2}>
<> <Flex
<Flex w="full" gap={2}> flexGrow={1}
<Flex onClick={privateBoardsDisclosure.onToggle}
flexGrow={1} gap={2}
onClick={privateBoardsDisclosure.onToggle} alignItems="center"
gap={2} cursor="pointer"
alignItems="center" >
cursor="pointer" <Icon
> as={PiCaretUpBold}
<Icon boxSize={4}
as={PiCaretUpBold} transform={privateBoardsDisclosure.isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
boxSize={4} transitionProperty="common"
transform={privateBoardsDisclosure.isOpen ? 'rotate(0deg)' : 'rotate(180deg)'} transitionDuration="normal"
transitionProperty="common" color="base.400"
transitionDuration="normal" />
color="base.400" <Text fontSize="md" fontWeight="medium" userSelect="none">
/> {t('boards.private')}
<Text fontSize="md" fontWeight="medium" userSelect="none"> </Text>
{t('boards.private')}
</Text>
</Flex>
<AddBoardButton isPrivateBoard={true} />
</Flex>
<Collapse in={privateBoardsDisclosure.isOpen} animateOpacity>
<OverlayScrollbarsComponent
defer
style={overlayScrollbarsStyles}
options={overlayScrollbarsParams.options}
>
<Flex direction="column" maxH={346} gap={1}>
{allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />}
{filteredPrivateBoards.map((board) => (
<GalleryBoard
board={board}
isSelected={selectedBoardId === board.board_id}
setBoardToDelete={setBoardToDelete}
key={board.board_id}
/>
))}
</Flex> </Flex>
</OverlayScrollbarsComponent> <AddBoardButton isPrivateBoard={true} />
</Collapse> </Flex>
</> <Collapse in={privateBoardsDisclosure.isOpen} animateOpacity>
)} <OverlayScrollbarsComponent
<Flex w="full" gap={2}> defer
<Flex onClick={sharedBoardsDisclosure.onToggle} gap={2} alignItems="center" cursor="pointer" flexGrow={1}> style={overlayScrollbarsStyles}
<Icon options={overlayScrollbarsParams.options}
as={PiCaretUpBold} >
boxSize={4} <Flex direction="column" maxH={346} gap={1}>
transform={sharedBoardsDisclosure.isOpen ? 'rotate(0deg)' : 'rotate(180deg)'} {allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />}
transitionProperty="common" {filteredPrivateBoards.map((board) => (
transitionDuration="normal" <GalleryBoard
color="base.400" board={board}
/> isSelected={selectedBoardId === board.board_id}
<Text fontSize="md" fontWeight="medium" userSelect="none"> setBoardToDelete={setBoardToDelete}
{allowPrivateBoards ? t('boards.shared') : t('boards.boards')} key={board.board_id}
</Text> />
</Flex> ))}
<AddBoardButton isPrivateBoard={false} /> </Flex>
</Flex> </OverlayScrollbarsComponent>
<Collapse in={sharedBoardsDisclosure.isOpen} animateOpacity> </Collapse>
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}> </>
<Flex direction="column" maxH={346} gap={1}> )}
{!allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />} <Flex h="full" w="full" gap={2}>
{filteredSharedBoards.map((board) => ( <Flex onClick={sharedBoardsDisclosure.onToggle} gap={2} alignItems="center" cursor="pointer" flexGrow={1}>
<GalleryBoard <Icon
board={board} as={PiCaretUpBold}
isSelected={selectedBoardId === board.board_id} boxSize={4}
setBoardToDelete={setBoardToDelete} transform={sharedBoardsDisclosure.isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
key={board.board_id} transitionProperty="common"
/> transitionDuration="normal"
))} color="base.400"
/>
<Text fontSize="md" fontWeight="medium" userSelect="none">
{allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
</Text>
</Flex> </Flex>
</OverlayScrollbarsComponent> <AddBoardButton isPrivateBoard={false} />
</Collapse> </Flex>
</Flex> <Collapse in={sharedBoardsDisclosure.isOpen} animateOpacity>
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
<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>
</OverlayScrollbarsComponent>
</Collapse>
</Flex>
</Collapse>
<DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} /> <DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
</> </>
); );

1
invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
View File

@ -32,7 +32,6 @@ const GalleryBoardName = (props: Props) => {
w="full" w="full"
justifyContent="center" justifyContent="center"
alignItems="center" alignItems="center"
px={2}
fontSize="md" fontSize="md"
color="base.50" color="base.50"
> >