mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
add current gallery board name
This commit is contained in:
parent
0e092c0fb5
commit
1785825690
@ -5,16 +5,16 @@ import { PiPlusBold } from 'react-icons/pi';
|
|||||||
import { useCreateBoardMutation } from 'services/api/endpoints/boards';
|
import { useCreateBoardMutation } from 'services/api/endpoints/boards';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
privateBoard: boolean;
|
isPrivateBoard: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const AddBoardButton = ({ privateBoard }: Props) => {
|
const AddBoardButton = ({ isPrivateBoard }: Props) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [createBoard, { isLoading }] = useCreateBoardMutation();
|
const [createBoard, { isLoading }] = useCreateBoardMutation();
|
||||||
const DEFAULT_BOARD_NAME = t('boards.myBoard');
|
const DEFAULT_BOARD_NAME = t('boards.myBoard');
|
||||||
const handleCreateBoard = useCallback(() => {
|
const handleCreateBoard = useCallback(() => {
|
||||||
createBoard({ board_name: DEFAULT_BOARD_NAME, private_board: privateBoard });
|
createBoard({ board_name: DEFAULT_BOARD_NAME, is_private: isPrivateBoard });
|
||||||
}, [createBoard, DEFAULT_BOARD_NAME, privateBoard]);
|
}, [createBoard, DEFAULT_BOARD_NAME, isPrivateBoard]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<IconButton
|
<IconButton
|
||||||
|
@ -72,7 +72,7 @@ const BoardsList = () => {
|
|||||||
{t('boards.private')}
|
{t('boards.private')}
|
||||||
</Text>
|
</Text>
|
||||||
</Flex>
|
</Flex>
|
||||||
<AddBoardButton privateBoard={true} />
|
<AddBoardButton isPrivateBoard={true} />
|
||||||
</Flex>
|
</Flex>
|
||||||
<Collapse in={isPrivateBoardsOpen} animateOpacity>
|
<Collapse in={isPrivateBoardsOpen} animateOpacity>
|
||||||
<Flex direction="column">
|
<Flex direction="column">
|
||||||
@ -104,7 +104,7 @@ const BoardsList = () => {
|
|||||||
{allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
|
{allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
|
||||||
</Text>
|
</Text>
|
||||||
</Flex>
|
</Flex>
|
||||||
<AddBoardButton privateBoard={false} />
|
<AddBoardButton isPrivateBoard={false} />
|
||||||
</Flex>
|
</Flex>
|
||||||
<Collapse in={isSharedBoardsOpen} animateOpacity>
|
<Collapse in={isSharedBoardsOpen} animateOpacity>
|
||||||
<Flex direction="column">
|
<Flex direction="column">
|
||||||
|
@ -1,16 +1,9 @@
|
|||||||
import { Button, Flex, Icon, Spacer } from '@invoke-ai/ui-library';
|
import { Flex } from '@invoke-ai/ui-library';
|
||||||
import { useAppSelector } from 'app/store/storeHooks';
|
import { useAppSelector } from 'app/store/storeHooks';
|
||||||
import { memo, useMemo } from 'react';
|
import { memo, useMemo } from 'react';
|
||||||
import { PiCaretUpBold } from 'react-icons/pi';
|
|
||||||
import { useBoardName } from 'services/api/hooks/useBoardName';
|
import { useBoardName } from 'services/api/hooks/useBoardName';
|
||||||
|
|
||||||
type Props = {
|
const GalleryBoardName = () => {
|
||||||
isOpen: boolean;
|
|
||||||
onToggle: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
const GalleryBoardName = (props: Props) => {
|
|
||||||
const { isOpen, onToggle } = props;
|
|
||||||
const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
|
const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
|
||||||
const boardName = useBoardName(selectedBoardId);
|
const boardName = useBoardName(selectedBoardId);
|
||||||
|
|
||||||
@ -23,26 +16,15 @@ const GalleryBoardName = (props: Props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex
|
<Flex
|
||||||
as={Button}
|
my="1"
|
||||||
onClick={onToggle}
|
|
||||||
size="sm"
|
|
||||||
position="relative"
|
|
||||||
gap={2}
|
|
||||||
w="full"
|
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
alignItems="center"
|
fontSize="md"
|
||||||
px={2}
|
fontWeight="bold"
|
||||||
|
borderWidth="thin"
|
||||||
|
borderStyle="solid"
|
||||||
|
borderRadius="base"
|
||||||
>
|
>
|
||||||
<Spacer />
|
|
||||||
{formattedBoardName}
|
{formattedBoardName}
|
||||||
<Spacer />
|
|
||||||
<Icon
|
|
||||||
as={PiCaretUpBold}
|
|
||||||
boxSize={4}
|
|
||||||
transform={isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
|
|
||||||
transitionProperty="common"
|
|
||||||
transitionDuration="normal"
|
|
||||||
/>
|
|
||||||
</Flex>
|
</Flex>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -9,6 +9,7 @@ import { PiImagesBold } from 'react-icons/pi';
|
|||||||
import { RiServerLine } from 'react-icons/ri';
|
import { RiServerLine } from 'react-icons/ri';
|
||||||
|
|
||||||
import BoardsList from './Boards/BoardsList/BoardsList';
|
import BoardsList from './Boards/BoardsList/BoardsList';
|
||||||
|
import GalleryBoardName from './GalleryBoardName';
|
||||||
import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
|
import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
|
||||||
import { GalleryPagination } from './ImageGrid/GalleryPagination';
|
import { GalleryPagination } from './ImageGrid/GalleryPagination';
|
||||||
import { GallerySearch } from './ImageGrid/GallerySearch';
|
import { GallerySearch } from './ImageGrid/GallerySearch';
|
||||||
@ -42,6 +43,7 @@ const ImageGalleryContent = () => {
|
|||||||
{galleryHeader}
|
{galleryHeader}
|
||||||
<Box>
|
<Box>
|
||||||
<BoardsList isOpen={isBoardListOpen} />
|
<BoardsList isOpen={isBoardListOpen} />
|
||||||
|
<GalleryBoardName />
|
||||||
</Box>
|
</Box>
|
||||||
<Flex alignItems="center" justifyContent="space-between" gap={2}>
|
<Flex alignItems="center" justifyContent="space-between" gap={2}>
|
||||||
<Tabs index={galleryView === 'images' ? 0 : 1} variant="unstyled" size="sm" w="full">
|
<Tabs index={galleryView === 'images' ? 0 : 1} variant="unstyled" size="sm" w="full">
|
||||||
|
Loading…
Reference in New Issue
Block a user