github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fully Updated Hotkeys + Categorization

Browse Source 
Added the entire list of available hotkeys to the hotkey module and categorized them accordingly.
This commit is contained in:
blessedcoolant
2022-10-28 07:13:46 +13:00
committed by psychedelicious
parent 15df6c148a
commit a5c77ff926
7 changed files with 216 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/common/components/IAISwitch.tsx
View File

@@ -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;

31
frontend/src/features/system/HotkeysModal/HotkeysModal.scss
View File

@@ -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 {

225
frontend/src/features/system/HotkeysModal/HotkeysModal.tsx
View File

@@ -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>
</>

1
frontend/src/styles/_Colors_Dark.scss
View File

@@ -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);