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): add open queue to queue action menu

Browse Source
This commit is contained in:
psychedelicious 2024-01-02 19:02:39 +11:00 committed by Kent Keirsey
parent e9bce6e1c3
commit 1e2e26cfc2
3 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -365,7 +365,8 @@
"back": "back", "back": "back",
"batchFailedToQueue": "Failed to Queue Batch", "batchFailedToQueue": "Failed to Queue Batch",
"graphQueued": "Graph queued", "graphQueued": "Graph queued",
"graphFailedToQueue": "Failed to queue graph" "graphFailedToQueue": "Failed to queue graph",
"openQueue": "Open Queue"
}, },
"invocationCache": { "invocationCache": {
"invocationCache": "Invocation Cache", "invocationCache": "Invocation Cache",

2
invokeai/frontend/web/src/common/components/InvMenu/theme.ts
View File

@ -23,7 +23,7 @@ const invokeAI = definePartsStyle(() => ({
bg: 'base.800', bg: 'base.800',
shadow: 'dark-lg', shadow: 'dark-lg',
border: 'none', border: 'none',
p: 1, p: 2,
}, },
item: { item: {
// this will style the MenuItem and MenuItemOption components // this will style the MenuItem and MenuItemOption components

16
invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx
View File

@ -1,15 +1,21 @@
import { Box } from '@chakra-ui/layout'; import { Box } from '@chakra-ui/layout';
import { useDisclosure } from '@chakra-ui/react'; import { useDisclosure } from '@chakra-ui/react';
import { useAppDispatch } from 'app/store/storeHooks';
import { InvBadge } from 'common/components/InvBadge/wrapper'; import { InvBadge } from 'common/components/InvBadge/wrapper';
import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem'; import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem';
import { InvMenuList } from 'common/components/InvMenu/InvMenuList'; import { InvMenuList } from 'common/components/InvMenu/InvMenuList';
import { InvMenu, InvMenuButton } from 'common/components/InvMenu/wrapper'; import {
InvMenu,
InvMenuButton,
InvMenuDivider,
} from 'common/components/InvMenu/wrapper';
import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem'; import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
import { usePauseProcessor } from 'features/queue/hooks/usePauseProcessor'; import { usePauseProcessor } from 'features/queue/hooks/usePauseProcessor';
import { useResumeProcessor } from 'features/queue/hooks/useResumeProcessor'; import { useResumeProcessor } from 'features/queue/hooks/useResumeProcessor';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { memo } from 'react'; import { setActiveTab } from 'features/ui/store/uiSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaPause, FaPlay, FaTimes } from 'react-icons/fa'; import { FaPause, FaPlay, FaTimes } from 'react-icons/fa';
import { FaList } from 'react-icons/fa6'; import { FaList } from 'react-icons/fa6';
@ -17,6 +23,7 @@ import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
export const QueueActionsMenuButton = memo(() => { export const QueueActionsMenuButton = memo(() => {
const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen, onOpen, onClose } = useDisclosure();
const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
const isPauseEnabled = useFeatureStatus('pauseQueue').isFeatureEnabled; const isPauseEnabled = useFeatureStatus('pauseQueue').isFeatureEnabled;
const isResumeEnabled = useFeatureStatus('resumeQueue').isFeatureEnabled; const isResumeEnabled = useFeatureStatus('resumeQueue').isFeatureEnabled;
@ -42,6 +49,9 @@ export const QueueActionsMenuButton = memo(() => {
isLoading: isLoadingPauseProcessor, isLoading: isLoadingPauseProcessor,
isDisabled: isDisabledPauseProcessor, isDisabled: isDisabledPauseProcessor,
} = usePauseProcessor(); } = usePauseProcessor();
const openQueue = useCallback(() => {
dispatch(setActiveTab('queue'));
}, [dispatch]);
return ( return (
<Box pos="relative"> <Box pos="relative">
@ -86,6 +96,8 @@ export const QueueActionsMenuButton = memo(() => {
{t('queue.pauseTooltip')} {t('queue.pauseTooltip')}
</InvMenuItem> </InvMenuItem>
)} )}
<InvMenuDivider />
<InvMenuItem onClick={openQueue}>{t('queue.openQueue')}</InvMenuItem>
</InvMenuList> </InvMenuList>
</InvMenu> </InvMenu>
{queueSize > 0 && ( {queueSize > 0 && (