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): add board button tooltip when private boards enabled

Browse Source
This commit is contained in:
psychedelicious 2024-07-09 22:51:08 +10:00
parent 2460689c00
commit 476ebd13ae
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/public/locales/en.json
View File

@ -17,6 +17,8 @@
}, },
"boards": { "boards": {
"addBoard": "Add Board", "addBoard": "Add Board",
"addPrivateBoard": "Add Private Board",
"addSharedBoard": "Add Shared Board",
"archiveBoard": "Archive Board", "archiveBoard": "Archive Board",
"archived": "Archived", "archived": "Archived",
"autoAddBoard": "Auto-Add Board", "autoAddBoard": "Auto-Add Board",

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

@ -1,7 +1,7 @@
import { IconButton } from '@invoke-ai/ui-library'; import { IconButton } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { boardIdSelected } from 'features/gallery/store/gallerySlice'; import { boardIdSelected } from 'features/gallery/store/gallerySlice';
import { memo, useCallback } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiPlusBold } from 'react-icons/pi'; import { PiPlusBold } from 'react-icons/pi';
import { useCreateBoardMutation } from 'services/api/endpoints/boards'; import { useCreateBoardMutation } from 'services/api/endpoints/boards';
@ -13,23 +13,32 @@ type Props = {
const AddBoardButton = ({ isPrivateBoard }: Props) => { const AddBoardButton = ({ isPrivateBoard }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
const [createBoard, { isLoading }] = useCreateBoardMutation(); const [createBoard, { isLoading }] = useCreateBoardMutation();
const DEFAULT_BOARD_NAME = t('boards.myBoard'); const label = useMemo(() => {
if (!allowPrivateBoards) {
return t('boards.addBoard');
}
if (isPrivateBoard) {
return t('boards.addPrivateBoard');
}
return t('boards.addSharedBoard');
}, [allowPrivateBoards, isPrivateBoard, t]);
const handleCreateBoard = useCallback(async () => { const handleCreateBoard = useCallback(async () => {
try { try {
const board = await createBoard({ board_name: DEFAULT_BOARD_NAME, is_private: isPrivateBoard }).unwrap(); const board = await createBoard({ board_name: t('boards.myBoard'), is_private: isPrivateBoard }).unwrap();
dispatch(boardIdSelected({ boardId: board.board_id })); dispatch(boardIdSelected({ boardId: board.board_id }));
} catch { } catch {
//no-op //no-op
} }
}, [createBoard, DEFAULT_BOARD_NAME, isPrivateBoard, dispatch]); }, [t, createBoard, isPrivateBoard, dispatch]);
return ( return (
<IconButton <IconButton
icon={<PiPlusBold />} icon={<PiPlusBold />}
isLoading={isLoading} isLoading={isLoading}
tooltip={t('boards.addBoard')} tooltip={label}
aria-label={t('boards.addBoard')} aria-label={label}
onClick={handleCreateBoard} onClick={handleCreateBoard}
size="md" size="md"
data-testid="add-board-button" data-testid="add-board-button"