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