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): revised viewer toggle @joshistoast

Browse Source
This commit is contained in:
psychedelicious 2024-08-28 16:04:25 +10:00
parent fe59d7f3b0
commit 5a403f087d
1 changed files with 42 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
View File

@ -1,18 +1,8 @@
import { import { ButtonGroup, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui-library';
Button,
Flex,
Icon,
Popover,
PopoverArrow,
PopoverBody,
PopoverContent,
PopoverTrigger,
Text,
} from '@invoke-ai/ui-library';
import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer'; import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiCaretDownBold, PiCheckBold, PiEyeBold, PiPencilBold } from 'react-icons/pi'; import { PiEyeBold, PiPencilBold } from 'react-icons/pi';
export const ViewerToggleMenu = () => { export const ViewerToggleMenu = () => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -21,49 +11,45 @@ export const ViewerToggleMenu = () => {
useHotkeys('esc', imageViewer.onClose, [imageViewer]); useHotkeys('esc', imageViewer.onClose, [imageViewer]);
return ( return (
<Popover isLazy> <Flex gap={4} alignItems="center" justifyContent="center">
<PopoverTrigger> <ButtonGroup size="md">
<Button variant="outline" data-testid="toggle-viewer-menu-button" pointerEvents="auto"> <Tooltip
<Flex gap={3} w="full" alignItems="center"> hasArrow
{imageViewer.isOpen ? <Icon as={PiEyeBold} /> : <Icon as={PiPencilBold} />} label={
<Text fontSize="md">{imageViewer.isOpen ? t('common.viewing') : t('common.editing')}</Text> <Flex flexDir="column">
<Icon as={PiCaretDownBold} /> <Text fontWeight="semibold">{t('common.viewing')}</Text>
</Flex> <Text fontWeight="normal">{t('common.viewingDesc')}</Text>
</Button> </Flex>
</PopoverTrigger> }
<PopoverContent p={2} pointerEvents="auto"> >
<PopoverArrow /> <IconButton
<PopoverBody> icon={<PiEyeBold />}
<Flex flexDir="column"> onClick={imageViewer.onOpen}
<Button onClick={imageViewer.onOpen} variant="ghost" h="auto" w="auto" p={2}> variant={imageViewer.isOpen ? 'solid' : 'outline'}
<Flex gap={2} w="full"> colorScheme={imageViewer.isOpen ? 'invokeBlue' : 'base'}
<Icon as={PiCheckBold} visibility={imageViewer.isOpen ? 'visible' : 'hidden'} /> aria-label={t('common.viewing')}
<Flex flexDir="column" gap={2} alignItems="flex-start"> w={12}
<Text fontWeight="semibold" color="base.100"> />
{t('common.viewing')} </Tooltip>
</Text> <Tooltip
<Text fontWeight="normal" color="base.300"> hasArrow
{t('common.viewingDesc')} label={
</Text> <Flex flexDir="column">
</Flex> <Text fontWeight="semibold">{t('common.editing')}</Text>
</Flex> <Text fontWeight="normal">{t('common.editingDesc')}</Text>
</Button> </Flex>
<Button onClick={imageViewer.onClose} variant="ghost" h="auto" w="auto" p={2}> }
<Flex gap={2} w="full"> >
<Icon as={PiCheckBold} visibility={imageViewer.isOpen ? 'hidden' : 'visible'} /> <IconButton
<Flex flexDir="column" gap={2} alignItems="flex-start"> icon={<PiPencilBold />}
<Text fontWeight="semibold" color="base.100"> onClick={imageViewer.onClose}
{t('common.editing')} variant={!imageViewer.isOpen ? 'solid' : 'outline'}
</Text> colorScheme={!imageViewer.isOpen ? 'invokeBlue' : 'base'}
<Text fontWeight="normal" color="base.300"> aria-label={t('common.editing')}
{t('common.editingDesc')} w={12}
</Text> />
</Flex> </Tooltip>
</Flex> </ButtonGroup>
</Button> </Flex>
</Flex>
</PopoverBody>
</PopoverContent>
</Popover>
); );
}; };