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

90
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>
<Icon as={PiCaretDownBold} />
</Flex>
</Button>
</PopoverTrigger>
<PopoverContent p={2} pointerEvents="auto">
<PopoverArrow />
<PopoverBody>
<Flex flexDir="column"> <Flex flexDir="column">
<Button onClick={imageViewer.onOpen} variant="ghost" h="auto" w="auto" p={2}> <Text fontWeight="semibold">{t('common.viewing')}</Text>
<Flex gap={2} w="full"> <Text fontWeight="normal">{t('common.viewingDesc')}</Text>
<Icon as={PiCheckBold} visibility={imageViewer.isOpen ? 'visible' : 'hidden'} />
<Flex flexDir="column" gap={2} alignItems="flex-start">
<Text fontWeight="semibold" color="base.100">
{t('common.viewing')}
</Text>
<Text fontWeight="normal" color="base.300">
{t('common.viewingDesc')}
</Text>
</Flex> </Flex>
}
>
<IconButton
icon={<PiEyeBold />}
onClick={imageViewer.onOpen}
variant={imageViewer.isOpen ? 'solid' : 'outline'}
colorScheme={imageViewer.isOpen ? 'invokeBlue' : 'base'}
aria-label={t('common.viewing')}
w={12}
/>
</Tooltip>
<Tooltip
hasArrow
label={
<Flex flexDir="column">
<Text fontWeight="semibold">{t('common.editing')}</Text>
<Text fontWeight="normal">{t('common.editingDesc')}</Text>
</Flex> </Flex>
</Button> }
<Button onClick={imageViewer.onClose} variant="ghost" h="auto" w="auto" p={2}> >
<Flex gap={2} w="full"> <IconButton
<Icon as={PiCheckBold} visibility={imageViewer.isOpen ? 'hidden' : 'visible'} /> icon={<PiPencilBold />}
<Flex flexDir="column" gap={2} alignItems="flex-start"> onClick={imageViewer.onClose}
<Text fontWeight="semibold" color="base.100"> variant={!imageViewer.isOpen ? 'solid' : 'outline'}
{t('common.editing')} colorScheme={!imageViewer.isOpen ? 'invokeBlue' : 'base'}
</Text> aria-label={t('common.editing')}
<Text fontWeight="normal" color="base.300"> w={12}
{t('common.editingDesc')} />
</Text> </Tooltip>
</ButtonGroup>
</Flex> </Flex>
</Flex>
</Button>
</Flex>
</PopoverBody>
</PopoverContent>
</Popover>
); );
}; };