diff --git a/frontend/src/features/gallery/ImageGallery.tsx b/frontend/src/features/gallery/ImageGallery.tsx index cb36cd793a..70098588f2 100644 --- a/frontend/src/features/gallery/ImageGallery.tsx +++ b/frontend/src/features/gallery/ImageGallery.tsx @@ -163,6 +163,15 @@ export default function ImageGallery() { [shouldPinGallery] ); + useHotkeys( + 'esc', + () => { + if (shouldPinGallery) return; + dispatch(setShouldShowGallery(false)); + }, + [shouldPinGallery] + ); + const IMAGE_SIZE_STEP = 32; useHotkeys( diff --git a/frontend/src/features/gallery/ImageMetaDataViewer/ImageMetadataViewer.tsx b/frontend/src/features/gallery/ImageMetaDataViewer/ImageMetadataViewer.tsx index 080541419e..7da28671b4 100644 --- a/frontend/src/features/gallery/ImageMetaDataViewer/ImageMetadataViewer.tsx +++ b/frontend/src/features/gallery/ImageMetaDataViewer/ImageMetadataViewer.tsx @@ -32,10 +32,12 @@ import { setUpscalingStrength, setWidth, setInitialImage, + setShouldShowImageDetails, } from '../../options/optionsSlice'; import promptToString from '../../../common/util/promptToString'; import { seedWeightsToString } from '../../../common/util/seedWeightPairs'; import { FaCopy } from 'react-icons/fa'; +import { useHotkeys } from 'react-hotkeys-hook'; type MetadataItemProps = { isLink?: boolean; @@ -107,7 +109,10 @@ const memoEqualityCheck = ( const ImageMetadataViewer = memo( ({ image, styleClass }: ImageMetadataViewerProps) => { const dispatch = useAppDispatch(); - // const jsonBgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100'); + + useHotkeys('esc', () => { + dispatch(setShouldShowImageDetails(false)); + }); const metadata = image?.metadata?.image || {}; const { diff --git a/frontend/src/features/system/Console.tsx b/frontend/src/features/system/Console.tsx index ca23bc29a2..2916d740f4 100644 --- a/frontend/src/features/system/Console.tsx +++ b/frontend/src/features/system/Console.tsx @@ -75,6 +75,10 @@ const Console = () => { [shouldShowLogViewer] ); + useHotkeys('esc', () => { + dispatch(setShouldShowLogViewer(false)); + }); + const handleOnScroll = () => { if (!viewerRef.current) return; if ( diff --git a/frontend/src/features/system/HotkeysModal/HotkeysModal.tsx b/frontend/src/features/system/HotkeysModal/HotkeysModal.tsx index cee0dc8819..0c36f5fda9 100644 --- a/frontend/src/features/system/HotkeysModal/HotkeysModal.tsx +++ b/frontend/src/features/system/HotkeysModal/HotkeysModal.tsx @@ -100,6 +100,7 @@ export default function HotkeysModal({ children }: HotkeysModalProps) { hotkey: 'Shift+I', }, { title: 'Delete Image', desc: 'Delete the current image', hotkey: 'Del' }, + { title: 'Close Panels', desc: 'Closes open panels', hotkey: 'Esc' }, ]; const galleryHotkeys = [ diff --git a/frontend/src/features/tabs/InvokeOptionsPanel.tsx b/frontend/src/features/tabs/InvokeOptionsPanel.tsx index f5b56f514a..5a60a93e18 100644 --- a/frontend/src/features/tabs/InvokeOptionsPanel.tsx +++ b/frontend/src/features/tabs/InvokeOptionsPanel.tsx @@ -67,6 +67,15 @@ const InvokeOptionsPanel = (props: Props) => { [shouldShowOptionsPanel] ); + useHotkeys( + 'esc', + () => { + if (shouldPinOptionsPanel) return; + dispatch(setShouldShowOptionsPanel(false)); + }, + [shouldPinOptionsPanel] + ); + useHotkeys( 'shift+o', () => { @@ -74,7 +83,6 @@ const InvokeOptionsPanel = (props: Props) => { }, [shouldPinOptionsPanel] ); - // const handleCloseOptionsPanel = useCallback(() => { if (shouldPinOptionsPanel) return;