github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-13 05:34:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): remove clear queue ui components

Browse Source
This commit is contained in:
psychedelicious
2025-06-04 16:36:27 +10:00
parent 7ec511da01
commit d2155e98ef
4 changed files with 6 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
View File

@@ -1,28 +1,17 @@
import { IconButton, useShiftModifier } from '@invoke-ai/ui-library';
import { useCancelAllExceptCurrentQueueItemDialog } from 'features/queue/components/CancelAllExceptCurrentQueueItemConfirmationAlertDialog';
import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiTrashSimpleBold, PiXBold, PiXCircle } from 'react-icons/pi';
import { useClearQueueDialog } from './ClearQueueConfirmationAlertDialog';
import { PiXBold, PiXCircle } from 'react-icons/pi';
export const ClearQueueIconButton = memo(() => {
const isCancelAndClearAllEnabled = useFeatureStatus('cancelAndClearAll');
const shift = useShiftModifier();
if (!shift) {
// Shift is not pressed - show cancel current
return <CancelCurrentIconButton />;
}
if (isCancelAndClearAllEnabled) {
// Shift is pressed and cancel and clear all is enabled - show cancel and clear all
return <CancelAndClearAllIconButton />;
}
// Shift is pressed and cancel and clear all is disabled - show cancel all except current
return <CancelAllExceptCurrentIconButton />;
});
@@ -48,26 +37,6 @@ const CancelCurrentIconButton = memo(() => {
CancelCurrentIconButton.displayName = 'CancelCurrentIconButton';
const CancelAndClearAllIconButton = memo(() => {
const { t } = useTranslation();
const clearQueue = useClearQueueDialog();
return (
<IconButton
size="lg"
isDisabled={clearQueue.isDisabled}
isLoading={clearQueue.isLoading}
aria-label={t('queue.clear')}
tooltip={t('queue.clearTooltip')}
icon={<PiTrashSimpleBold />}
colorScheme="error"
onClick={clearQueue.openDialog}
/>
);
});
CancelAndClearAllIconButton.displayName = 'CancelAndClearAllIconButton';
const CancelAllExceptCurrentIconButton = memo(() => {
const { t } = useTranslation();
const cancelAllExceptCurrent = useCancelAllExceptCurrentQueueItemDialog();

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

@@ -2,7 +2,6 @@ import { IconButton, Menu, MenuButton, MenuGroup, MenuItem, MenuList } from '@in
import { useAppDispatch } from 'app/store/storeHooks';
import { SessionMenuItems } from 'common/components/SessionMenuItems';
import { useCancelAllExceptCurrentQueueItemDialog } from 'features/queue/components/CancelAllExceptCurrentQueueItemConfirmationAlertDialog';
import { useClearQueueDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
import { QueueCountBadge } from 'features/queue/components/QueueCountBadge';
import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
import { usePauseProcessor } from 'features/queue/hooks/usePauseProcessor';
@@ -11,15 +10,7 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { setActiveTab } from 'features/ui/store/uiSlice';
import { memo, useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import {
PiListBold,
PiPauseFill,
PiPlayFill,
PiQueueBold,
PiTrashSimpleBold,
PiXBold,
PiXCircle,
} from 'react-icons/pi';
import { PiListBold, PiPauseFill, PiPlayFill, PiQueueBold, PiXBold, PiXCircle } from 'react-icons/pi';
export const QueueActionsMenuButton = memo(() => {
const ref = useRef<HTMLDivElement>(null);
@@ -27,10 +18,8 @@ export const QueueActionsMenuButton = memo(() => {
const { t } = useTranslation();
const isPauseEnabled = useFeatureStatus('pauseQueue');
const isResumeEnabled = useFeatureStatus('resumeQueue');
const isCancelAndClearAllEnabled = useFeatureStatus('cancelAndClearAll');
const cancelAllExceptCurrent = useCancelAllExceptCurrentQueueItemDialog();
const cancelCurrent = useCancelCurrentQueueItem();
const clearQueue = useClearQueueDialog();
const {
resumeProcessor,
isLoading: isLoadingResumeProcessor,
@@ -72,17 +61,6 @@ export const QueueActionsMenuButton = memo(() => {
>
{t('queue.cancelAllExceptCurrentTooltip')}
</MenuItem>
{isCancelAndClearAllEnabled && (
<MenuItem
isDestructive
icon={<PiTrashSimpleBold />}
onClick={clearQueue.openDialog}
isLoading={clearQueue.isLoading}
isDisabled={clearQueue.isDisabled}
>
{t('queue.clearTooltip')}
</MenuItem>
)}
{isResumeEnabled && (
<MenuItem
icon={<PiPlayFill />}

13
invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx
View File

@@ -5,7 +5,6 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { memo } from 'react';
import ClearModelCacheButton from './ClearModelCacheButton';
import ClearQueueButton from './ClearQueueButton';
import PauseProcessorButton from './PauseProcessorButton';
import PruneQueueButton from './PruneQueueButton';
import ResumeProcessorButton from './ResumeProcessorButton';
@@ -13,23 +12,19 @@ import ResumeProcessorButton from './ResumeProcessorButton';
const QueueTabQueueControls = () => {
const isPauseEnabled = useFeatureStatus('pauseQueue');
const isResumeEnabled = useFeatureStatus('resumeQueue');
const isCancelAndClearAllEnabled = useFeatureStatus('cancelAndClearAll');
return (
<Flex flexDir="column" layerStyle="first" borderRadius="base" p={2} gap={2}>
<Flex gap={2}>
{isPauseEnabled || isResumeEnabled ? (
{(isPauseEnabled || isResumeEnabled) && (
<ButtonGroup w={28} orientation="vertical" size="sm">
{isResumeEnabled ? <ResumeProcessorButton /> : <></>}
{isPauseEnabled ? <PauseProcessorButton /> : <></>}
{isResumeEnabled && <ResumeProcessorButton />}
{isPauseEnabled && <PauseProcessorButton />}
</ButtonGroup>
) : (
<></>
)}
<ButtonGroup w={28} orientation="vertical" size="sm">
<PruneQueueButton />
{isCancelAndClearAllEnabled && <ClearQueueButton />}
{!isCancelAndClearAllEnabled && <CancelAllExceptCurrentButton />}
<CancelAllExceptCurrentButton />
</ButtonGroup>
</Flex>
<ClearModelCacheButton />

23
invokeai/frontend/web/src/features/ui/components/FloatingLeftPanelButtons.tsx
View File

@@ -4,7 +4,6 @@ import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser'
import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
import { selectCanvasSession } from 'features/controlLayers/store/canvasStagingAreaSlice';
import { useCancelAllExceptCurrentQueueItemDialog } from 'features/queue/components/CancelAllExceptCurrentQueueItemConfirmationAlertDialog';
import { useClearQueueDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
import { InvokeButtonTooltip } from 'features/queue/components/InvokeButtonTooltip/InvokeButtonTooltip';
import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
import { useInvoke } from 'features/queue/hooks/useInvoke';
@@ -16,7 +15,6 @@ import {
PiLightningFill,
PiSlidersHorizontalBold,
PiSparkleFill,
PiTrashSimpleBold,
PiXBold,
PiXCircle,
} from 'react-icons/pi';
@@ -126,27 +124,6 @@ const CancelCurrentIconButton = memo(() => {
CancelCurrentIconButton.displayName = 'CancelCurrentIconButton';
const CancelAndClearAllIconButton = memo(() => {
const { t } = useTranslation();
const clearQueue = useClearQueueDialog();
return (
<Tooltip label={t('queue.clearTooltip')} placement="end">
<IconButton
isDisabled={clearQueue.isDisabled}
isLoading={clearQueue.isLoading}
aria-label={t('queue.clearTooltip')}
icon={<PiTrashSimpleBold />}
colorScheme="error"
onClick={clearQueue.openDialog}
flexGrow={1}
/>
</Tooltip>
);
});
CancelAndClearAllIconButton.displayName = 'CancelAndClearAllIconButton';
const CancelAllExceptCurrentIconButton = memo(() => {
const { t } = useTranslation();
const cancelAllExceptCurrent = useCancelAllExceptCurrentQueueItemDialog();