Restores ESC to close preferences

Co-authored-by: Josh Perez <60019601+josh-signal@users.noreply.github.com>
signalapp · Aug 24, 2021 · 36aba97 · 36aba97
1 parent b2ccd9e
commit 36aba97
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/ts/components/Preferences.stories.tsx b/ts/components/Preferences.stories.tsx
@@ -101,8 +101,9 @@ const createProps = (): PropsType => ({
   zoomFactor: 1,
 
   addCustomColor: action('addCustomColor'),
-  editCustomColor: action('editCustomColor'),
+  closeSettings: action('closeSettings'),
   doDeleteAllData: action('doDeleteAllData'),
+  editCustomColor: action('editCustomColor'),
   getConversationsWithCustomColor: () => Promise.resolve([]),
   initialSpellCheckSetting: true,
   makeSyncRequest: () => {

diff --git a/ts/components/Preferences.tsx b/ts/components/Preferences.tsx
@@ -76,6 +76,7 @@ export type PropsType = {
 
   // Other props
   addCustomColor: (color: CustomColorType) => unknown;
+  closeSettings: () => unknown;
   doDeleteAllData: () => unknown;
   editCustomColor: (colorId: string, color: CustomColorType) => unknown;
   getConversationsWithCustomColor: (
@@ -158,6 +159,7 @@ export const Preferences = ({
   availableMicrophones,
   availableSpeakers,
   blockedCount,
+  closeSettings,
   customColors,
   defaultConversationColor,
   deviceName = '',
@@ -249,6 +251,22 @@ export const Preferences = ({
     document.body.classList.toggle('dark-theme', theme === ThemeType.dark);
   }, [theme]);
 
+  useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        closeSettings();
+
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+    document.addEventListener('keydown', handler);
+
+    return () => {
+      document.removeEventListener('keydown', handler);
+    };
+  }, [closeSettings]);
+
   const onZoomSelectChange = useCallback(
     (value: string) => {
       const number = parseFloat(value);

diff --git a/ts/windows/settings/preload.ts b/ts/windows/settings/preload.ts
@@ -291,6 +291,7 @@ async function renderPreferences() {
 
     // Actions and other props
     addCustomColor: ipcAddCustomColor,
+    closeSettings: () => ipcRenderer.send('close-settings'),
     doDeleteAllData: () => ipcRenderer.send('delete-all-data'),
     editCustomColor: ipcEditCustomColor,
     getConversationsWithCustomColor: ipcGetConversationsWithCustomColor,