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): use color instead of super tiny icon change to indicate board search toggle state

Browse Source 
You can't even see the icon, no point in changing it. Blue = active/open, Grey = closed.
This commit is contained in:
psychedelicious 2024-07-24 13:23:36 +10:00
parent 1831ed620f
commit cb61ef9bb1
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
invokeai/frontend/web/src/features/gallery/components/Gallery.tsx
View File

@ -16,7 +16,7 @@ import { galleryViewChanged, searchTermChanged } from 'features/gallery/store/ga
import type { CSSProperties } from 'react'; import type { CSSProperties } from 'react';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { MdSearch, MdSearchOff } from 'react-icons/md'; import { PiMagnifyingGlassBold } from 'react-icons/pi';
import { useBoardName } from 'services/api/hooks/useBoardName'; import { useBoardName } from 'services/api/hooks/useBoardName';
import GalleryImageGrid from './ImageGrid/GalleryImageGrid'; import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
@ -82,7 +82,8 @@ export const Gallery = () => {
onClick={handleClickSearch} onClick={handleClickSearch}
tooltip={searchDisclosure.isOpen ? `${t('gallery.exitSearch')}` : `${t('gallery.displaySearch')}`} tooltip={searchDisclosure.isOpen ? `${t('gallery.exitSearch')}` : `${t('gallery.displaySearch')}`}
aria-label={t('gallery.displaySearch')} aria-label={t('gallery.displaySearch')}
icon={searchTerm.length ? <MdSearchOff /> : <MdSearch />} icon={<PiMagnifyingGlassBold />}
colorScheme={searchDisclosure.isOpen ? 'invokeBlue' : 'base'}
variant="link" variant="link"
/> />
</TabList> </TabList>

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

@ -7,8 +7,7 @@ import { usePanel, type UsePanelOptions } from 'features/ui/hooks/usePanel';
import type { CSSProperties } from 'react'; import type { CSSProperties } from 'react';
import { memo, useCallback, useMemo, useRef } from 'react'; import { memo, useCallback, useMemo, useRef } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { MdSearch, MdSearchOff } from 'react-icons/md'; import { PiCaretDownBold, PiCaretUpBold, PiMagnifyingGlassBold } from 'react-icons/pi';
import { PiCaretDownBold, PiCaretUpBold } from 'react-icons/pi';
import type { ImperativePanelGroupHandle } from 'react-resizable-panels'; import type { ImperativePanelGroupHandle } from 'react-resizable-panels';
import { Panel, PanelGroup } from 'react-resizable-panels'; import { Panel, PanelGroup } from 'react-resizable-panels';
@ -81,7 +80,8 @@ const ImageGalleryContent = () => {
: `${t('gallery.displayBoardSearch')}` : `${t('gallery.displayBoardSearch')}`
} }
aria-label={t('gallery.displayBoardSearch')} aria-label={t('gallery.displayBoardSearch')}
icon={boardSearchText.length ? <MdSearchOff /> : <MdSearch />} icon={<PiMagnifyingGlassBold />}
colorScheme={boardSearchDisclosure.isOpen ? 'invokeBlue' : 'base'}
variant="link" variant="link"
/> />
</Flex> </Flex>