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

board UI updates: font tweaks, add cover image to tooltip, move uncategorized out of board list, allow collapsible board list if private enabled

Browse Source
This commit is contained in:
Mary Hipp 2024-07-23 12:28:31 -04:00 committed by psychedelicious
parent db664afc49
commit 2172e4d292
9 changed files with 176 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,6 +38,7 @@
"movingImagesToBoard_one": "Moving {{count}} image to board:",
"movingImagesToBoard_other": "Moving {{count}} images to board:",
"myBoard": "My Board",
"noBoards": "No {{boardType}} Boards",
"noMatching": "No matching Boards",
"private": "Private Boards",
"searchBoard": "Search Boards...",

45
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTooltip.tsx Normal file
View File

@ -0,0 +1,45 @@
import { Flex, Image, Text } from '@invoke-ai/ui-library';
import { skipToken } from '@reduxjs/toolkit/query';
import { useTranslation } from 'react-i18next';
import { useGetBoardAssetsTotalQuery, useGetBoardImagesTotalQuery } from 'services/api/endpoints/boards';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
import type { BoardDTO } from 'services/api/types';
type Props = {
board: BoardDTO | null;
};
export const BoardTooltip = ({ board }: Props) => {
const { t } = useTranslation();
const { imagesTotal } = useGetBoardImagesTotalQuery(board?.board_id || 'none', {
selectFromResult: ({ data }) => {
return { imagesTotal: data?.total ?? 0 };
},
});
const { assetsTotal } = useGetBoardAssetsTotalQuery(board?.board_id || 'none', {
selectFromResult: ({ data }) => {
return { assetsTotal: data?.total ?? 0 };
},
});
const { currentData: coverImage } = useGetImageDTOQuery(board?.cover_image_name ?? skipToken);
return (
<Flex flexDir="column" alignItems="center">
{coverImage && (
<Image
src={coverImage.thumbnail_url}
draggable={false}
objectFit="cover"
w={100}
h={100}
borderRadius="base"
borderBottomRadius="lg"
/>
)}
<Text>
{t('boards.imagesWithCount', { count: imagesTotal })}, {t('boards.assetsWithCount', { count: assetsTotal })}
</Text>
{board?.archived && <Text>({t('boards.archived')})</Text>}
</Flex>
);
};

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

@ -1,22 +0,0 @@
import { useTranslation } from 'react-i18next';
import { useGetBoardAssetsTotalQuery, useGetBoardImagesTotalQuery } from 'services/api/endpoints/boards';
type Props = {
board_id: string;
isArchived: boolean;
};
export const BoardTotalsTooltip = ({ board_id, isArchived }: Props) => {
const { t } = useTranslation();
const { imagesTotal } = useGetBoardImagesTotalQuery(board_id, {
selectFromResult: ({ data }) => {
return { imagesTotal: data?.total ?? 0 };
},
});
const { assetsTotal } = useGetBoardAssetsTotalQuery(board_id, {
selectFromResult: ({ data }) => {
return { assetsTotal: data?.total ?? 0 };
},
});
return `${t('boards.imagesWithCount', { count: imagesTotal })}, ${t('boards.assetsWithCount', { count: assetsTotal })}${isArchived ? ` (${t('boards.archived')})` : ''}`;
};

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

@ -1,101 +1,89 @@
import { Box, Flex, Text } from '@invoke-ai/ui-library';
import { Button, Collapse, Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library';
import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppSelector } from 'app/store/storeHooks';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { CSSProperties } from 'react';
import { memo, useMemo, useState } from 'react';
import { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PiCaretDownBold, PiCaretRightBold } from 'react-icons/pi';
import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
import type { BoardDTO } from 'services/api/types';
import AddBoardButton from './AddBoardButton';
import GalleryBoard from './GalleryBoard';
import NoBoardBoard from './NoBoardBoard';
const overlayScrollbarsStyles: CSSProperties = {
height: '100%',
width: '100%',
};
const BoardsList = () => {
export const BoardsList = ({ isPrivate }: { isPrivate?: boolean }) => {
const { t } = useTranslation();
const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText);
const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
const queryArgs = useAppSelector(selectListBoardsQueryArgs);
const { data: boards } = useListAllBoardsQuery(queryArgs);
const [boardToDelete, setBoardToDelete] = useState<BoardDTO>();
const { t } = useTranslation();
const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
const { filteredPrivateBoards, filteredSharedBoards } = useMemo(() => {
const filteredBoards = boardSearchText
? boards?.filter((board) => board.board_name.toLowerCase().includes(boardSearchText.toLowerCase()))
: boards;
const filteredPrivateBoards = filteredBoards?.filter((board) => board.is_private) ?? EMPTY_ARRAY;
const filteredSharedBoards = filteredBoards?.filter((board) => !board.is_private) ?? EMPTY_ARRAY;
return { filteredPrivateBoards, filteredSharedBoards };
}, [boardSearchText, boards]);
const filteredBoards = useMemo(() => {
if (!boards) {
return EMPTY_ARRAY;
}
return boards.filter((board) => {
if (boardSearchText) {
return board.is_private === isPrivate && board.board_name.toLowerCase().includes(boardSearchText.toLowerCase());
} else {
return board.is_private === !!isPrivate;
}
});
}, [boardSearchText, boards, isPrivate]);
const boardListTitle = useMemo(() => {
if (allowPrivateBoards) {
return isPrivate ? t('boards.private') : t('boards.shared');
} else {
return t('boards.boards');
}
}, [isPrivate, allowPrivateBoards, t]);
return (
<>
<Box position="relative" w="full" h="full">
<Box position="absolute" top={0} right={0} bottom={0} left={0}>
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
{allowPrivateBoards && (
<Flex direction="column" gap={1}>
<Flex
position="sticky"
w="full"
justifyContent="space-between"
alignItems="center"
ps={2}
pb={1}
pt={2}
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" gap={1}>
<NoBoardBoard isSelected={selectedBoardId === 'none'} />
{filteredPrivateBoards.map((board) => (
<GalleryBoard
board={board}
isSelected={selectedBoardId === board.board_id}
setBoardToDelete={setBoardToDelete}
key={board.board_id}
/>
))}
</Flex>
</Flex>
)}
<Flex direction="column" gap={1}>
<Flex
position="sticky"
w="full"
justifyContent="space-between"
alignItems="center"
ps={2}
pb={1}
pt={2}
zIndex={1}
top={0}
bg="base.900"
>
<Text fontSize="md" fontWeight="semibold" userSelect="none">
{allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
<Flex direction="column" gap={1}>
<Flex
position="sticky"
w="full"
justifyContent="space-between"
alignItems="center"
ps={2}
pb={1}
pt={2}
zIndex={1}
top={0}
bg="base.900"
>
{allowPrivateBoards ? (
<Button variant="unstyled" onClick={onToggle}>
<Flex gap="2" alignItems="center">
<Icon boxSize="5" as={isOpen ? PiCaretDownBold : PiCaretRightBold} fill="base.500" />
<Text fontSize="sm" fontWeight="semibold" userSelect="none" color="base.500">
{boardListTitle}
</Text>
<AddBoardButton isPrivateBoard={false} />
</Flex>
</Button>
) : (
<Text fontSize="sm" fontWeight="semibold" userSelect="none" color="base.500">
{boardListTitle}
</Text>
)}
<AddBoardButton isPrivateBoard={!!isPrivate} />
</Flex>
<Collapse in={isOpen}>
<>
{!filteredBoards.length ? (
<Text variant="subtext" textAlign="center">
{t('boards.noBoards', { boardType: isPrivate ? 'Private' : '' })}
</Text>
) : (
<Flex direction="column" gap={1}>
{!allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />}
{filteredSharedBoards.map((board) => (
{filteredBoards.map((board) => (
<GalleryBoard
board={board}
isSelected={selectedBoardId === board.board_id}
@ -104,12 +92,11 @@ const BoardsList = () => {
/>
))}
</Flex>
</Flex>
</OverlayScrollbarsComponent>
</Box>
</Box>
)}
</>
</Collapse>
</Flex>
<DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
</>
);
};
export default memo(BoardsList);

35
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsListWrapper.tsx Normal file
View File

@ -0,0 +1,35 @@
import { Box, Spacer } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { CSSProperties } from 'react';
import { memo } from 'react';
import { BoardsList } from './BoardsList';
import NoBoardBoard from './NoBoardBoard';
const overlayScrollbarsStyles: CSSProperties = {
height: '100%',
width: '100%',
};
const BoardsListWrapper = () => {
const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
return (
<>
<Box position="relative" w="full" h="full">
<Box position="absolute" top={0} right={0} bottom={0} left={0}>
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
<Spacer pt="5px" />
<NoBoardBoard isSelected={selectedBoardId === 'none'} />
{allowPrivateBoards && <BoardsList isPrivate={true} />}
<BoardsList />
</OverlayScrollbarsComponent>
</Box>
</Box>
</>
);
};
export default memo(BoardsListWrapper);

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

@ -17,7 +17,7 @@ import IAIDroppable from 'common/components/IAIDroppable';
import type { AddToBoardDropData } from 'features/dnd/types';
import { AutoAddBadge } from 'features/gallery/components/Boards/AutoAddBadge';
import BoardContextMenu from 'features/gallery/components/Boards/BoardContextMenu';
import { BoardTotalsTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTotalsTooltip';
import { BoardTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTooltip';
import { autoAddBoardIdChanged, boardIdSelected } from 'features/gallery/store/gallerySlice';
import type { MouseEvent, MouseEventHandler, MutableRefObject } from 'react';
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@ -115,12 +115,7 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
return (
<BoardContextMenu board={board} setBoardToDelete={setBoardToDelete}>
{(ref) => (
<Tooltip
label={<BoardTotalsTooltip board_id={board.board_id} isArchived={Boolean(board.archived)} />}
openDelay={1000}
placement="left"
closeOnScroll
>
<Tooltip label={<BoardTooltip board={board} />} openDelay={1000} placement="left" closeOnScroll>
<Flex
position="relative"
ref={ref}
@ -132,7 +127,7 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
cursor="pointer"
py={1}
px={2}
gap={2}
gap={4}
bg={isSelected ? 'base.850' : undefined}
_hover={_hover}
>
@ -149,17 +144,18 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
onChange={onChange}
onSubmit={onSubmit}
isPreviewFocusable={false}
fontSize="sm"
>
<EditablePreview
cursor="pointer"
p={0}
fontSize="md"
fontSize="sm"
textOverflow="ellipsis"
noOfLines={1}
w="fit-content"
wordBreak="break-all"
color={isSelected ? 'base.100' : 'base.400'}
fontWeight={isSelected ? 'semibold' : 'normal'}
// color={isSelected ? 'base.100' : 'base.200'}
fontWeight={isSelected ? 'bold' : 'normal'}
/>
<EditableInput sx={editableInputStyles} />
<JankEditableHijack onStartEditingRef={onStartEditingRef} />
@ -197,8 +193,8 @@ const CoverImage = ({ board }: { board: BoardDTO }) => {
src={coverImage.thumbnail_url}
draggable={false}
objectFit="cover"
w={8}
h={8}
w={10}
h={10}
borderRadius="base"
borderBottomRadius="lg"
/>
@ -206,8 +202,8 @@ const CoverImage = ({ board }: { board: BoardDTO }) => {
}
return (
<Flex w={8} h={8} justifyContent="center" alignItems="center">
<Icon boxSize={8} as={PiImageSquare} opacity={0.7} color="base.500" />
<Flex w={10} h={10} justifyContent="center" alignItems="center">
<Icon boxSize={10} as={PiImageSquare} opacity={0.7} color="base.500" />
</Flex>
);
};

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

@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIDroppable from 'common/components/IAIDroppable';
import type { RemoveFromBoardDropData } from 'features/dnd/types';
import { AutoAddBadge } from 'features/gallery/components/Boards/AutoAddBadge';
import { BoardTotalsTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTotalsTooltip';
import { BoardTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTooltip';
import NoBoardBoardContextMenu from 'features/gallery/components/Boards/NoBoardBoardContextMenu';
import { autoAddBoardIdChanged, boardIdSelected } from 'features/gallery/store/gallerySlice';
import { memo, useCallback, useMemo } from 'react';
@ -29,7 +29,6 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
});
const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick);
const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText);
const boardName = useBoardName('none');
const handleSelectBoard = useCallback(() => {
dispatch(boardIdSelected({ boardId: 'none' }));
@ -46,25 +45,12 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
[]
);
const filteredOut = useMemo(() => {
return boardSearchText ? !boardName.toLowerCase().includes(boardSearchText.toLowerCase()) : false;
}, [boardName, boardSearchText]);
const { t } = useTranslation();
if (filteredOut) {
return null;
}
return (
<NoBoardBoardContextMenu>
{(ref) => (
<Tooltip
label={<BoardTotalsTooltip board_id="none" isArchived={false} />}
openDelay={1000}
placement="left"
closeOnScroll
>
<Tooltip label={<BoardTooltip board={null} />} openDelay={1000} placement="left" closeOnScroll>
<Flex
position="relative"
ref={ref}
@ -75,24 +61,22 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
cursor="pointer"
px={2}
py={1}
gap={2}
gap={4}
bg={isSelected ? 'base.850' : undefined}
_hover={_hover}
>
<Flex w={8} h={8} justifyContent="center" alignItems="center">
{/* iconified from public/assets/images/invoke-symbol-wht-lrg.svg */}
<Icon boxSize={6} opacity={1} stroke="base.500" viewBox="0 0 66 66" fill="none">
<path
d="M43.9137 16H63.1211V3H3.12109V16H22.3285L43.9137 50H63.1211V63H3.12109V50H22.3285"
strokeWidth="5"
/>
</Icon>
</Flex>
{/* iconified from public/assets/images/invoke-symbol-wht-lrg.svg */}
<Icon boxSize={8} opacity={1} stroke="base.500" viewBox="0 0 66 66" fill="none">
<path
d="M43.9137 16H63.1211V3H3.12109V16H22.3285L43.9137 50H63.1211V63H3.12109V50H22.3285"
strokeWidth="5"
/>
</Icon>
<Text
fontSize="md"
color={isSelected ? 'base.100' : 'base.400'}
fontWeight={isSelected ? 'semibold' : 'normal'}
fontSize="sm"
// color={isSelected ? 'base.100' : 'base.400'}
fontWeight={isSelected ? 'bold' : 'normal'}
noOfLines={1}
flexGrow={1}
>

4
invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
View File

@ -17,11 +17,11 @@ const GalleryBoardName = (props: Props) => {
as="button"
h="full"
w="full"
borderWidth={1}
layerStyle="second"
borderRadius="base"
alignItems="center"
justifyContent="center"
px={2}
p={1}
>
<Text fontWeight="semibold" fontSize="md" noOfLines={1} wordBreak="break-all" color="base.200">
{boardName}

4
invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
View File

@ -23,7 +23,7 @@ import { PiMagnifyingGlassBold } from 'react-icons/pi';
import type { ImperativePanelGroupHandle } from 'react-resizable-panels';
import { Panel, PanelGroup } from 'react-resizable-panels';
import BoardsList from './Boards/BoardsList/BoardsList';
import BoardsListWrapper from './Boards/BoardsList/BoardsListWrapper';
import BoardsSearch from './Boards/BoardsList/BoardsSearch';
import GallerySettingsPopover from './GallerySettingsPopover/GallerySettingsPopover';
import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
@ -118,7 +118,7 @@ const ImageGalleryContent = () => {
<BoardsSearch />
</Collapse>
<Divider pt={2} />
<BoardsList />
<BoardsListWrapper />
</Flex>
</Panel>
<ResizeHandle