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

Port Cancel Button Options Menu to New Component

Browse Source
This commit is contained in:
blessedcoolant
2023-02-19 13:18:03 +13:00
parent d2553d783c
commit d42cc0fd1c
2 changed files with 24 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
invokeai/frontend/src/features/parameters/components/ProcessButtons/CancelButton.tsx
View File

@ -12,23 +12,13 @@ import {
} from 'features/system/store/systemSlice'; } from 'features/system/store/systemSlice';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash';
import { useEffect, useCallback } from 'react'; import { useEffect, useCallback } from 'react';
import { import { ButtonSpinner, ButtonGroup } from '@chakra-ui/react';
Menu,
MenuButton,
MenuList,
MenuItem,
ButtonSpinner,
ButtonGroup,
} from '@chakra-ui/react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { import { MdCancel, MdCancelScheduleSend } from 'react-icons/md';
MdCancel,
MdCancelScheduleSend, import IAISimpleMenu from 'common/components/IAISimpleMenu';
MdArrowDropDown,
MdArrowDropUp,
} from 'react-icons/md';
const cancelButtonSelector = createSelector( const cancelButtonSelector = createSelector(
systemSelector, systemSelector,
@ -89,6 +79,17 @@ export default function CancelButton(
} }
}, [cancelAfter, currentIteration, handleClickCancel]); }, [cancelAfter, currentIteration, handleClickCancel]);
const cancelMenuItems = [
{
item: t('parameters.cancel.immediate'),
onClick: () => dispatch(setCancelType('immediate')),
},
{
item: t('parameters.cancel.schedule'),
onClick: () => dispatch(setCancelType('scheduled')),
},
];
return ( return (
<ButtonGroup isAttached variant="link"> <ButtonGroup isAttached variant="link">
{cancelType === 'immediate' ? ( {cancelType === 'immediate' ? (
@ -104,7 +105,11 @@ export default function CancelButton(
) : ( ) : (
<IAIIconButton <IAIIconButton
icon={ icon={
isCancelScheduled ? <ButtonSpinner /> : <MdCancelScheduleSend /> isCancelScheduled ? (
<ButtonSpinner color="var(--text-color)" />
) : (
<MdCancelScheduleSend />
)
} }
tooltip={ tooltip={
isCancelScheduled isCancelScheduled
@ -131,27 +136,10 @@ export default function CancelButton(
{...rest} {...rest}
/> />
)} )}
<Menu> <IAISimpleMenu
{({ isOpen }) => ( menuItems={cancelMenuItems}
<> iconTooltip={t('parameters.cancel.setType')}
<MenuButton />
as={IAIIconButton}
icon={isOpen ? <MdArrowDropUp /> : <MdArrowDropDown />}
className="cancel-options-btn"
tooltip={t('parameters.cancel.setType')}
{...rest}
/>
<MenuList className="cancel-options-btn-context-menu">
<MenuItem onClick={() => dispatch(setCancelType('immediate'))}>
{t('parameters.cancel.immediate')}
</MenuItem>
<MenuItem onClick={() => dispatch(setCancelType('scheduled'))}>
{t('parameters.cancel.schedule')}
</MenuItem>
</MenuList>
</>
)}
</Menu>
</ButtonGroup> </ButtonGroup>
); );
} }

26
invokeai/frontend/src/features/parameters/components/ProcessButtons/ProcessButtons.scss
View File

@ -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 { .loopback-btn {
&[data-as-checkbox='true'] { &[data-as-checkbox='true'] {
background-color: var(--btn-btn-base-color); background-color: var(--btn-btn-base-color);