From 1f0bd3ca6cda4221d1a7a46325f235cd23bd0af9 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 3 Nov 2022 02:07:00 +1100
Subject: [PATCH] Adds escape hotkey to close floating panels

---
 frontend/src/features/gallery/ImageGallery.tsx         |  9 +++++++++
 .../ImageMetaDataViewer/ImageMetadataViewer.tsx        |  7 ++++++-
 frontend/src/features/system/Console.tsx               |  4 ++++
 .../src/features/system/HotkeysModal/HotkeysModal.tsx  |  1 +
 frontend/src/features/tabs/InvokeOptionsPanel.tsx      | 10 +++++++++-
 5 files changed, 29 insertions(+), 2 deletions(-)

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;