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

feat(ui): sticky board list header

Browse Source
This commit is contained in:
psychedelicious 2024-07-10 18:38:01 +10:00 committed by Kent Keirsey
parent b70e87f25b
commit 7db767b7c3
1 changed files with 42 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,14 +43,24 @@ const BoardsList = () => {
<Flex flexDir="column" gap={2} borderRadius="base" maxHeight="100%"> <Flex flexDir="column" gap={2} borderRadius="base" maxHeight="100%">
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}> <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
{allowPrivateBoards && ( {allowPrivateBoards && (
<> <Flex direction="column" gap={1}>
<Flex w="full" justifyContent="space-between" alignItems="center" ps={2} py={1}> <Flex
<Text fontSize="md" fontWeight="medium" userSelect="none"> 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">
{t('boards.private')} {t('boards.private')}
</Text> </Text>
<AddBoardButton isPrivateBoard={true} /> <AddBoardButton isPrivateBoard={true} />
</Flex> </Flex>
<Flex direction="column" maxH={100} gap={1}> <Flex direction="column" gap={1}>
<NoBoardBoard isSelected={selectedBoardId === 'none'} /> <NoBoardBoard isSelected={selectedBoardId === 'none'} />
{filteredPrivateBoards.map((board) => ( {filteredPrivateBoards.map((board) => (
<GalleryBoard <GalleryBoard
@ -61,24 +71,36 @@ const BoardsList = () => {
/> />
))} ))}
</Flex> </Flex>
</> </Flex>
)} )}
<Flex w="full" justifyContent="space-between" alignItems="center" ps={2} py={1}>
<Text fontSize="md" fontWeight="medium" userSelect="none">
{allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
</Text>
<AddBoardButton isPrivateBoard={false} />
</Flex>
<Flex direction="column" gap={1}> <Flex direction="column" gap={1}>
{!allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />} <Flex
{filteredSharedBoards.map((board) => ( position="sticky"
<GalleryBoard w="full"
board={board} justifyContent="space-between"
isSelected={selectedBoardId === board.board_id} alignItems="center"
setBoardToDelete={setBoardToDelete} ps={2}
key={board.board_id} 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> </Flex>
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
</Flex> </Flex>