mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
Fully Updated Hotkeys + Categorization
Added the entire list of available hotkeys to the hotkey module and categorized them accordingly.
This commit is contained in:
blessedcoolant
psychedelicious
parent
f8dff5b6c2
commit
89ad2e55d9
1
frontend/dist/assets/index.44f7d837.css
vendored
1
frontend/dist/assets/index.44f7d837.css
vendored
File diff suppressed because one or more lines are too long
1
frontend/dist/assets/index.dbcb8bce.css
vendored
Normal file
1
frontend/dist/assets/index.dbcb8bce.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,10 +1,4 @@
|
||||
import {
|
||||
Flex,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Switch,
|
||||
SwitchProps,
|
||||
} from '@chakra-ui/react';
|
||||
import { FormControl, FormLabel, Switch, SwitchProps } from '@chakra-ui/react';
|
||||
|
||||
interface Props extends SwitchProps {
|
||||
label?: string;
|
||||
|
||||
@ -11,14 +11,41 @@
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.hotkeys-modal-items {
|
||||
display: grid;
|
||||
row-gap: 0.5rem;
|
||||
max-height: 32rem;
|
||||
overflow-y: scroll;
|
||||
@include HideScrollbar;
|
||||
|
||||
.chakra-accordion {
|
||||
display: grid;
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.chakra-accordion__item {
|
||||
border: none;
|
||||
border-radius: 0.3rem;
|
||||
background-color: var(--tab-hover-color);
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0.3rem !important;
|
||||
|
||||
&[aria-expanded='true'] {
|
||||
background-color: var(--tab-hover-color);
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hotkey-modal-category {
|
||||
display: grid;
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.hotkey-modal-item {
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
import {
|
||||
Accordion,
|
||||
AccordionButton,
|
||||
AccordionItem,
|
||||
AccordionPanel,
|
||||
Modal,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
@ -13,6 +17,12 @@ type HotkeysModalProps = {
|
||||
children: ReactElement;
|
||||
};
|
||||
|
||||
type HotkeyList = {
|
||||
title: string;
|
||||
desc: string;
|
||||
hotkey: string;
|
||||
};
|
||||
|
||||
export default function HotkeysModal({ children }: HotkeysModalProps) {
|
||||
const {
|
||||
isOpen: isHotkeyModalOpen,
|
||||
@ -20,51 +30,18 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
|
||||
onClose: onHotkeysModalClose,
|
||||
} = useDisclosure();
|
||||
|
||||
const hotkeys = [
|
||||
const appHotkeys = [
|
||||
{ title: 'Invoke', desc: 'Generate an image', hotkey: 'Ctrl+Enter' },
|
||||
{ title: 'Cancel', desc: 'Cancel image generation', hotkey: 'Shift+X' },
|
||||
{
|
||||
title: 'Toggle Gallery',
|
||||
desc: 'Open and close the gallery drawer',
|
||||
hotkey: 'G',
|
||||
},
|
||||
{
|
||||
title: 'Set Seed',
|
||||
desc: 'Use the seed of the current image',
|
||||
hotkey: 'S',
|
||||
},
|
||||
{
|
||||
title: 'Set Parameters',
|
||||
desc: 'Use all parameters of the current image',
|
||||
hotkey: 'A',
|
||||
},
|
||||
{ title: 'Restore Faces', desc: 'Restore the current image', hotkey: 'R' },
|
||||
{ title: 'Upscale', desc: 'Upscale the current image', hotkey: 'U' },
|
||||
{
|
||||
title: 'Show Info',
|
||||
desc: 'Show metadata info of the current image',
|
||||
hotkey: 'I',
|
||||
},
|
||||
{
|
||||
title: 'Send To Image To Image',
|
||||
desc: 'Send the current image to Image to Image module',
|
||||
hotkey: 'Shift+I',
|
||||
},
|
||||
{ title: 'Delete Image', desc: 'Delete the current image', hotkey: 'Del' },
|
||||
{
|
||||
title: 'Focus Prompt',
|
||||
desc: 'Focus the prompt input area',
|
||||
hotkey: 'Alt+A',
|
||||
},
|
||||
{
|
||||
title: 'Previous Image',
|
||||
desc: 'Display the previous image in the gallery',
|
||||
hotkey: 'Arrow left',
|
||||
},
|
||||
{
|
||||
title: 'Next Image',
|
||||
desc: 'Display the next image in the gallery',
|
||||
hotkey: 'Arrow right',
|
||||
title: 'Toggle Gallery',
|
||||
desc: 'Open and close the gallery drawer',
|
||||
hotkey: 'G',
|
||||
},
|
||||
{
|
||||
title: 'Change Tabs',
|
||||
@ -83,7 +60,134 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
|
||||
},
|
||||
];
|
||||
|
||||
const renderHotkeyModalItems = () => {
|
||||
const generalHotkeys = [
|
||||
{
|
||||
title: 'Set Parameters',
|
||||
desc: 'Use all parameters of the current image',
|
||||
hotkey: 'A',
|
||||
},
|
||||
{
|
||||
title: 'Set Seed',
|
||||
desc: 'Use the seed of the current image',
|
||||
hotkey: 'S',
|
||||
},
|
||||
{ title: 'Restore Faces', desc: 'Restore the current image', hotkey: 'R' },
|
||||
{ title: 'Upscale', desc: 'Upscale the current image', hotkey: 'U' },
|
||||
{
|
||||
title: 'Show Info',
|
||||
desc: 'Show metadata info of the current image',
|
||||
hotkey: 'I',
|
||||
},
|
||||
{
|
||||
title: 'Send To Image To Image',
|
||||
desc: 'Send current image to Image to Image',
|
||||
hotkey: 'Shift+I',
|
||||
},
|
||||
{ title: 'Delete Image', desc: 'Delete the current image', hotkey: 'Del' },
|
||||
];
|
||||
|
||||
const galleryHotkeys = [
|
||||
{
|
||||
title: 'Previous Image',
|
||||
desc: 'Display the previous image in gallery',
|
||||
hotkey: 'Arrow left',
|
||||
},
|
||||
{
|
||||
title: 'Next Image',
|
||||
desc: 'Display the next image in gallery',
|
||||
hotkey: 'Arrow right',
|
||||
},
|
||||
{
|
||||
title: 'Toggle Gallery Pin',
|
||||
desc: 'Pins and unpins the gallery to the UI',
|
||||
hotkey: 'Shift+P',
|
||||
},
|
||||
{
|
||||
title: 'Increase Gallery Image Size',
|
||||
desc: 'Increases gallery thumbnails size',
|
||||
hotkey: 'Shift+Up',
|
||||
},
|
||||
{
|
||||
title: 'Decrease Gallery Image Size',
|
||||
desc: 'Decreases gallery thumbnails size',
|
||||
hotkey: 'Shift+Down',
|
||||
},
|
||||
{
|
||||
title: 'Reset Gallery Image Size',
|
||||
desc: 'Resets image gallery size',
|
||||
hotkey: 'Shift+R',
|
||||
},
|
||||
];
|
||||
|
||||
const inpaintingHotkeys = [
|
||||
{
|
||||
title: 'Select Brush',
|
||||
desc: 'Selects the inpainting brush',
|
||||
hotkey: 'B',
|
||||
},
|
||||
{
|
||||
title: 'Select Eraser',
|
||||
desc: 'Selects the inpainting eraser',
|
||||
hotkey: 'E',
|
||||
},
|
||||
{
|
||||
title: 'Quick Toggle Brush/Eraser',
|
||||
desc: 'Quick toggle between brush and eraser',
|
||||
hotkey: 'Alt',
|
||||
},
|
||||
{
|
||||
title: 'Decrease Brush Size',
|
||||
desc: 'Decreases the size of the inpainting brush/eraser',
|
||||
hotkey: '[',
|
||||
},
|
||||
{
|
||||
title: 'Increase Brush Size',
|
||||
desc: 'Increases the size of the inpainting brush/eraser',
|
||||
hotkey: ']',
|
||||
},
|
||||
{
|
||||
title: 'Hide Mask',
|
||||
desc: 'Hide and unhide mask',
|
||||
hotkey: 'H',
|
||||
},
|
||||
{
|
||||
title: 'Decrease Mask Opacity',
|
||||
desc: 'Decreases the opacity of the mask',
|
||||
hotkey: 'Shift+[',
|
||||
},
|
||||
{
|
||||
title: 'Increase Mask Opacity',
|
||||
desc: 'Increases the opacity of the mask',
|
||||
hotkey: 'Shift+]',
|
||||
},
|
||||
{
|
||||
title: 'Invert Mask',
|
||||
desc: 'Invert the mask preview',
|
||||
hotkey: 'Shift+M',
|
||||
},
|
||||
{
|
||||
title: 'Clear Mask',
|
||||
desc: 'Clear the entire mask',
|
||||
hotkey: 'Shift+C',
|
||||
},
|
||||
{
|
||||
title: 'Undo Stroke',
|
||||
desc: 'Undo a brush stroke',
|
||||
hotkey: 'Ctrl+Z',
|
||||
},
|
||||
{
|
||||
title: 'Redo Stroke',
|
||||
desc: 'Redo a brush stroke',
|
||||
hotkey: 'Ctrl+Shift+Z, Ctrl+Y',
|
||||
},
|
||||
{
|
||||
title: 'Expand Inpainting Area',
|
||||
desc: 'Expand your inpainting work area',
|
||||
hotkey: 'Shift+J',
|
||||
},
|
||||
];
|
||||
|
||||
const renderHotkeyModalItems = (hotkeys: HotkeyList[]) => {
|
||||
const hotkeyModalItemsToRender: ReactElement[] = [];
|
||||
|
||||
hotkeys.forEach((hotkey, i) => {
|
||||
@ -97,7 +201,9 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
|
||||
);
|
||||
});
|
||||
|
||||
return hotkeyModalItemsToRender;
|
||||
return (
|
||||
<div className="hotkey-modal-category">{hotkeyModalItemsToRender}</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
@ -109,8 +215,47 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
|
||||
<ModalOverlay />
|
||||
<ModalContent className="hotkeys-modal">
|
||||
<ModalCloseButton />
|
||||
|
||||
<h1>Keyboard Shorcuts</h1>
|
||||
<div className="hotkeys-modal-items">{renderHotkeyModalItems()}</div>
|
||||
<div className="hotkeys-modal-items">
|
||||
<Accordion allowToggle allowMultiple>
|
||||
<AccordionItem>
|
||||
<AccordionButton>
|
||||
<h2>App Hotkeys</h2>
|
||||
</AccordionButton>
|
||||
<AccordionPanel>
|
||||
{renderHotkeyModalItems(appHotkeys)}
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem>
|
||||
<AccordionButton>
|
||||
<h2>General Hotkeys</h2>
|
||||
</AccordionButton>
|
||||
<AccordionPanel>
|
||||
{renderHotkeyModalItems(generalHotkeys)}
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem>
|
||||
<AccordionButton>
|
||||
<h2>Gallery Hotkeys</h2>
|
||||
</AccordionButton>
|
||||
<AccordionPanel>
|
||||
{renderHotkeyModalItems(galleryHotkeys)}
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem>
|
||||
<AccordionButton>
|
||||
<h2>Inpainting Hotkeys</h2>
|
||||
</AccordionButton>
|
||||
<AccordionPanel>
|
||||
{renderHotkeyModalItems(inpaintingHotkeys)}
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
|
||||
@ -88,7 +88,6 @@
|
||||
--error-level-warning: rgb(255, 225, 105);
|
||||
--error-level-error: rgb(255, 81, 46);
|
||||
--console-bg-color: rgb(30, 30, 36);
|
||||
|
||||
--console-icon-button-bg-color: rgb(50, 53, 64);
|
||||
--console-icon-button-bg-color-hover: rgb(70, 73, 84);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user