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

19
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,11 +49,9 @@ 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 />
</Flex>
{allowPrivateBoards && ( {allowPrivateBoards && (
<> <>
<Flex w="full" gap={2}> <Flex w="full" gap={2}>
@ -95,7 +97,7 @@ const BoardsList = () => {
</Collapse> </Collapse>
</> </>
)} )}
<Flex w="full" gap={2}> <Flex h="full" w="full" gap={2}>
<Flex onClick={sharedBoardsDisclosure.onToggle} gap={2} alignItems="center" cursor="pointer" flexGrow={1}> <Flex onClick={sharedBoardsDisclosure.onToggle} gap={2} alignItems="center" cursor="pointer" flexGrow={1}>
<Icon <Icon
as={PiCaretUpBold} as={PiCaretUpBold}
@ -113,7 +115,7 @@ const BoardsList = () => {
</Flex> </Flex>
<Collapse in={sharedBoardsDisclosure.isOpen} animateOpacity> <Collapse in={sharedBoardsDisclosure.isOpen} animateOpacity>
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}> <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
<Flex direction="column" maxH={346} gap={1}> <Flex direction="column" gap={1}>
{!allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />} {!allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />}
{filteredSharedBoards.map((board) => ( {filteredSharedBoards.map((board) => (
<GalleryBoard <GalleryBoard
@ -127,6 +129,7 @@ const BoardsList = () => {
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
</Collapse> </Collapse>
</Flex> </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"
> >