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

update board header styling, toggle board search, resizing gallery panels

Browse Source
This commit is contained in:
chainchompa 2024-07-09 21:41:03 -04:00 committed by Kent Keirsey
parent a96e34d2d1
commit 8fdff33cf8
3 changed files with 72 additions and 48 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

@ -370,6 +370,7 @@
"deleteImage_other": "Delete {{count}} Images", "deleteImage_other": "Delete {{count}} Images",
"deleteImageBin": "Deleted images will be sent to your operating system's Bin.", "deleteImageBin": "Deleted images will be sent to your operating system's Bin.",
"deleteImagePermanent": "Deleted images cannot be restored.", "deleteImagePermanent": "Deleted images cannot be restored.",
"displayBoardSearch": "Display Board Search",
"displaySearch": "Display Search", "displaySearch": "Display Search",
"download": "Download", "download": "Download",
"featuresWillReset": "If you delete this image, those features will immediately be reset.", "featuresWillReset": "If you delete this image, those features will immediately be reset.",

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

@ -1,4 +1,4 @@
import { Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library'; import { Flex, Text } from '@invoke-ai/ui-library';
import { EMPTY_ARRAY } from 'app/store/constants'; import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
@ -8,12 +8,10 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { CSSProperties } from 'react'; import type { CSSProperties } from 'react';
import { memo, useMemo, useState } from 'react'; import { memo, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiCaretUpBold } from 'react-icons/pi';
import { useListAllBoardsQuery } from 'services/api/endpoints/boards'; import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
import type { BoardDTO } from 'services/api/types'; import type { BoardDTO } from 'services/api/types';
import AddBoardButton from './AddBoardButton'; import AddBoardButton from './AddBoardButton';
import BoardsSearch from './BoardsSearch';
import GalleryBoard from './GalleryBoard'; import GalleryBoard from './GalleryBoard';
import NoBoardBoard from './NoBoardBoard'; import NoBoardBoard from './NoBoardBoard';
@ -42,8 +40,7 @@ const BoardsList = () => {
return ( return (
<> <>
<Flex layerStyle="first" flexDir="column" gap={2} p={2} my={2} borderRadius="base"> <Flex layerStyle="first" flexDir="column" gap={2} p={2} my={2} borderRadius="base" maxHeight="100%">
<BoardsSearch />
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}> <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
{allowPrivateBoards && ( {allowPrivateBoards && (
<> <>
@ -53,7 +50,7 @@ const BoardsList = () => {
</Text> </Text>
<AddBoardButton isPrivateBoard={true} /> <AddBoardButton isPrivateBoard={true} />
</Flex> </Flex>
<Flex direction="column" maxH={346} gap={1}> <Flex direction="column" maxH={100} gap={1}>
<NoBoardBoard isSelected={selectedBoardId === 'none'} /> <NoBoardBoard isSelected={selectedBoardId === 'none'} />
{filteredPrivateBoards.map((board) => ( {filteredPrivateBoards.map((board) => (
<GalleryBoard <GalleryBoard

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

@ -4,11 +4,14 @@ import { useStore } from '@nanostores/react';
import { $galleryHeader } from 'app/store/nanostores/galleryHeader'; import { $galleryHeader } from 'app/store/nanostores/galleryHeader';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { galleryViewChanged } from 'features/gallery/store/gallerySlice'; import { galleryViewChanged } from 'features/gallery/store/gallerySlice';
import { memo, useCallback } from 'react'; import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
import { memo, useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiImagesBold, PiMagnifyingGlassBold } from 'react-icons/pi'; import { PiImagesBold, PiMagnifyingGlassBold } from 'react-icons/pi';
import { Panel, PanelGroup } from 'react-resizable-panels';
import BoardsList from './Boards/BoardsList/BoardsList'; import BoardsList from './Boards/BoardsList/BoardsList';
import BoardsSearch from './Boards/BoardsList/BoardsSearch';
import GalleryBoardName from './GalleryBoardName'; import GalleryBoardName from './GalleryBoardName';
import GallerySettingsPopover from './GallerySettingsPopover/GallerySettingsPopover'; import GallerySettingsPopover from './GallerySettingsPopover/GallerySettingsPopover';
import GalleryImageGrid from './ImageGrid/GalleryImageGrid'; import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
@ -41,6 +44,7 @@ const ImageGalleryContent = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const galleryHeader = useStore($galleryHeader); const galleryHeader = useStore($galleryHeader);
const searchDisclosure = useDisclosure({ defaultIsOpen: false }); const searchDisclosure = useDisclosure({ defaultIsOpen: false });
const boardSearchDisclosure = useDisclosure({ defaultIsOpen: false });
const handleClickImages = useCallback(() => { const handleClickImages = useCallback(() => {
dispatch(galleryViewChanged('images')); dispatch(galleryViewChanged('images'));
@ -50,51 +54,73 @@ const ImageGalleryContent = () => {
dispatch(galleryViewChanged('assets')); dispatch(galleryViewChanged('assets'));
}, [dispatch]); }, [dispatch]);
const panelGroupRef = useRef(null);
return ( return (
<Flex layerStyle="first" position="relative" flexDirection="column" h="full" w="full" p={2} gap={2}> <Flex layerStyle="first" position="relative" flexDirection="column" h="full" w="full" p={2} gap={2}>
{galleryHeader}
<Flex alignItems="center" justifyContent="space-between" gap={2}> <Flex alignItems="center" justifyContent="space-between" gap={2}>
<GalleryBoardName /> {galleryHeader}
<GallerySettingsPopover /> <GalleryBoardName />
</Flex> <GalleryBoardName />
<BoardsList /> <GallerySettingsPopover />
<Flex alignItems="center" justifyContent="space-between" gap={2}> <IconButton
<Tabs isFitted index={galleryView === 'images' ? 0 : 1} variant="enclosed" size="sm" w="full" mb="2"> onClick={boardSearchDisclosure.onToggle}
<TabList fontSize="sm" borderBottom="none"> tooltip={`${t('gallery.displayBoardSearch')}`}
<Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickImages} data-testid="images-tab"> aria-label={t('gallery.displayBoardSearch')}
<Flex alignItems="center" justifyContent="center" gap="2" w="full"> icon={<PiMagnifyingGlassBold />}
<PiImagesBold size="16px" /> size="sm"
{t('parameters.images')} />
</Flex>
</Tab>
<Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickAssets} data-testid="assets-tab">
<Flex alignItems="center" justifyContent="center" gap="2" w="full">
<PiImagesBold size="16px" />
{t('gallery.assets')}
</Flex>
</Tab>
<Tab sx={searchIconStyles} onClick={searchDisclosure.onToggle}>
<IconButton
tooltip={`${t('gallery.displaySearch')}`}
aria-label={t('gallery.displaySearch')}
icon={<PiMagnifyingGlassBold />}
fontSize={16}
textAlign="center"
color="base.400"
variant="unstyled"
minW="unset"
/>
</Tab>
</TabList>
</Tabs>
</Flex> </Flex>
<Box mb="1"> <PanelGroup ref={panelGroupRef} direction="vertical">
<Collapse in={searchDisclosure.isOpen}> <Panel>
<GallerySearch /> <Collapse in={boardSearchDisclosure.isOpen} >
</Collapse> <Box mt="2">
</Box> <BoardsSearch />
<GalleryImageGrid /> </Box>
<GalleryPagination /> </Collapse>
<BoardsList />
</Panel>
<ResizeHandle orientation="horizontal" />
<Panel>
<Flex flexDirection="column" alignItems="center" justifyContent="space-between" gap={2} h="full">
<Tabs isFitted index={galleryView === 'images' ? 0 : 1} variant="enclosed" size="sm" w="full" my="2">
<TabList fontSize="sm" borderBottom="none">
<Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickImages} data-testid="images-tab">
<Flex alignItems="center" justifyContent="center" gap="2" w="full">
<PiImagesBold size="16px" />
{t('parameters.images')}
</Flex>
</Tab>
<Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickAssets} data-testid="assets-tab">
<Flex alignItems="center" justifyContent="center" gap="2" w="full">
<PiImagesBold size="16px" />
{t('gallery.assets')}
</Flex>
</Tab>
<Tab sx={searchIconStyles} onClick={searchDisclosure.onToggle}>
<IconButton
tooltip={`${t('gallery.displaySearch')}`}
aria-label={t('gallery.displaySearch')}
icon={<PiMagnifyingGlassBold />}
fontSize={16}
textAlign="center"
color="base.400"
variant="unstyled"
minW="unset"
/>
</Tab>
</TabList>
</Tabs>
<Box mb="2" w="full">
<Collapse in={searchDisclosure.isOpen}>
<GallerySearch />
</Collapse>
</Box>
<GalleryImageGrid />
<GalleryPagination />
</Flex>
</Panel>
</PanelGroup>
</Flex> </Flex>
); );
}; };