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 confirmation dialog box to clear queue button

Browse Source
This commit is contained in:
psychedelicious 2023-09-20 22:39:54 +10:00 committed by Kent Keirsey
parent b7938d9ca9
commit 1c38cce16d
3 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -239,6 +239,8 @@
"cancelItem": "Cancel Item", "cancelItem": "Cancel Item",
"cancelBatchSucceeded": "Batch Canceled", "cancelBatchSucceeded": "Batch Canceled",
"cancelBatchFailed": "Problem Canceling Batch", "cancelBatchFailed": "Problem Canceling Batch",
"clearQueueAlertDialog": "Clearing the queue immediately cancels any processing items and clears the queue entirely.",
"clearQueueAlertDialog2": "Are you sure you want to clear the queue?",
"current": "Current", "current": "Current",
"next": "Next", "next": "Next",
"status": "Status", "status": "Status",

35
invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx
View File

@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next';
import { FaTrash } from 'react-icons/fa'; import { FaTrash } from 'react-icons/fa';
import { useClearQueue } from '../hooks/useClearQueue'; import { useClearQueue } from '../hooks/useClearQueue';
import QueueButton from './common/QueueButton'; import QueueButton from './common/QueueButton';
import { ChakraProps } from '@chakra-ui/react'; import { ChakraProps, Text } from '@chakra-ui/react';
import IAIAlertDialog from 'common/components/IAIAlertDialog';
type Props = { type Props = {
asIconButton?: boolean; asIconButton?: boolean;
@ -15,17 +16,27 @@ const ClearQueueButton = ({ asIconButton, sx }: Props) => {
const { clearQueue, isLoading, queueStatus } = useClearQueue(); const { clearQueue, isLoading, queueStatus } = useClearQueue();
return ( return (
<QueueButton <IAIAlertDialog
isDisabled={!queueStatus?.queue.total} title={t('queue.clearTooltip')}
isLoading={isLoading} acceptCallback={clearQueue}
asIconButton={asIconButton} acceptButtonText={t('queue.clear')}
label={t('queue.clear')} triggerComponent={
tooltip={t('queue.clearTooltip')} <QueueButton
icon={<FaTrash />} isDisabled={!queueStatus?.queue.total}
onClick={clearQueue} isLoading={isLoading}
colorScheme="error" asIconButton={asIconButton}
sx={sx} label={t('queue.clear')}
/> tooltip={t('queue.clearTooltip')}
icon={<FaTrash />}
colorScheme="error"
sx={sx}
/>
}
>
<Text>{t('queue.clearQueueAlertDialog')}</Text>
<br />
<Text>{t('queue.clearQueueAlertDialog2')}</Text>
</IAIAlertDialog>
); );
}; };

2
invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx
View File

@ -7,7 +7,7 @@ type Props = {
label: string; label: string;
tooltip: ReactNode; tooltip: ReactNode;
icon: ReactElement; icon: ReactElement;
onClick: () => void; onClick?: () => void;
isDisabled?: boolean; isDisabled?: boolean;
colorScheme: ThemeTypings['colorSchemes']; colorScheme: ThemeTypings['colorSchemes'];
asIconButton?: boolean; asIconButton?: boolean;