diff --git a/invokeai/frontend/src/features/parameters/components/ProcessButtons/CancelButton.tsx b/invokeai/frontend/src/features/parameters/components/ProcessButtons/CancelButton.tsx index e289d43365..cce16efbdf 100644 --- a/invokeai/frontend/src/features/parameters/components/ProcessButtons/CancelButton.tsx +++ b/invokeai/frontend/src/features/parameters/components/ProcessButtons/CancelButton.tsx @@ -12,23 +12,13 @@ import { } from 'features/system/store/systemSlice'; import { isEqual } from 'lodash'; import { useEffect, useCallback } from 'react'; -import { - Menu, - MenuButton, - MenuList, - MenuItem, - ButtonSpinner, - ButtonGroup, -} from '@chakra-ui/react'; +import { ButtonSpinner, ButtonGroup } from '@chakra-ui/react'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; -import { - MdCancel, - MdCancelScheduleSend, - MdArrowDropDown, - MdArrowDropUp, -} from 'react-icons/md'; +import { MdCancel, MdCancelScheduleSend } from 'react-icons/md'; + +import IAISimpleMenu from 'common/components/IAISimpleMenu'; const cancelButtonSelector = createSelector( systemSelector, @@ -89,6 +79,17 @@ export default function CancelButton( } }, [cancelAfter, currentIteration, handleClickCancel]); + const cancelMenuItems = [ + { + item: t('parameters.cancel.immediate'), + onClick: () => dispatch(setCancelType('immediate')), + }, + { + item: t('parameters.cancel.schedule'), + onClick: () => dispatch(setCancelType('scheduled')), + }, + ]; + return ( {cancelType === 'immediate' ? ( @@ -104,7 +105,11 @@ export default function CancelButton( ) : ( : + isCancelScheduled ? ( + + ) : ( + + ) } tooltip={ isCancelScheduled @@ -131,27 +136,10 @@ export default function CancelButton( {...rest} /> )} - - {({ isOpen }) => ( - <> - : } - className="cancel-options-btn" - tooltip={t('parameters.cancel.setType')} - {...rest} - /> - - dispatch(setCancelType('immediate'))}> - {t('parameters.cancel.immediate')} - - dispatch(setCancelType('scheduled'))}> - {t('parameters.cancel.schedule')} - - - - )} - + ); } diff --git a/invokeai/frontend/src/features/parameters/components/ProcessButtons/ProcessButtons.scss b/invokeai/frontend/src/features/parameters/components/ProcessButtons/ProcessButtons.scss index 0d0031e0ab..658ee08177 100644 --- a/invokeai/frontend/src/features/parameters/components/ProcessButtons/ProcessButtons.scss +++ b/invokeai/frontend/src/features/parameters/components/ProcessButtons/ProcessButtons.scss @@ -24,32 +24,6 @@ ); } -.cancel-options-btn { - @include Button( - $btn-color: var(--destructive-color), - $btn-color-hover: var(--destructive-color-hover), - $btn-width: 1rem, - ); - border-color: var(--background-color-secondary); - border-left-width: 0.05rem; -} - -.cancel-options-btn-context-menu { - z-index: 15; - background-color: var(--background-color-secondary); - color: var(--text-color-secondary); - - [role='menuitem'] { - font-size: 0.9rem; - color: var(--text-color-secondary); - background-color: var(--background-color-secondary); - &:focus { - color: var(--text-color); - background-color: var(--border-color-light); - } - } -} - .loopback-btn { &[data-as-checkbox='true'] { background-color: var(--btn-btn-base-color);