feat(back-shortcut): Keyboard shortcut for previous page (#1229)

* Added shortcut for Back on settings * Added shortcut for Back on other pages * Stop escape key propagation * Formatting/lint * Use more accurate prop name --------- Co-authored-by: Oliver Schwendener <[email protected]> Co-authored-by: Oliver Schwendener <[email protected]>
oliverschwendener · Nov 4, 2024 · 948833a · 948833a
1 parent 5cdebe8
commit 948833a
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 8 deletions.
diff --git a/src/renderer/Core/BaseLayout.tsx b/src/renderer/Core/BaseLayout.tsx
@@ -1,16 +1,17 @@
 import { Divider } from "@fluentui/react-components";
-import type { ReactNode, RefObject } from "react";
+import type { KeyboardEvent, ReactNode, RefObject } from "react";
 
 type BaseLayoutProps = {
     header?: ReactNode;
     contentRef?: RefObject<HTMLDivElement>;
     content: ReactNode;
     footer?: ReactNode;
+    onKeyDown?: (event: KeyboardEvent) => void;
 };
 
-export const BaseLayout = ({ header, content, contentRef, footer }: BaseLayoutProps) => {
+export const BaseLayout = ({ header, content, contentRef, footer, onKeyDown }: BaseLayoutProps) => {
     return (
-        <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+        <div style={{ display: "flex", flexDirection: "column", height: "100%" }} onKeyDown={onKeyDown} tabIndex={-1}>
             {header}
             <Divider appearance="subtle" />
             <div ref={contentRef} style={{ height: "100%", overflowX: "auto", overflowY: "auto" }}>

diff --git a/src/renderer/Core/Search/ConfirmationDialog.tsx b/src/renderer/Core/Search/ConfirmationDialog.tsx
@@ -29,7 +29,8 @@ export const ConfirmationDialog = ({ action, closeDialog }: ConfirmationDialogPr
     return (
         <Dialog
             open={action !== undefined}
-            onOpenChange={(_, { open }) => {
+            onOpenChange={(event, { open }) => {
+                event.stopPropagation();
                 if (open === false) {
                     closeDialog();
                 }

diff --git a/src/renderer/Core/Settings/Pages/Debug/ResetSettings.tsx b/src/renderer/Core/Settings/Pages/Debug/ResetSettings.tsx
@@ -19,7 +19,11 @@ export const ResetSettings = () => {
 
     return (
         <Field label={t("resetAllSettings", { ns })} hint={t("resetAllSettingsHint", { ns })}>
-            <Dialog>
+            <Dialog
+                onOpenChange={(event) => {
+                    event.stopPropagation();
+                }}
+            >
                 <DialogTrigger disableButtonEnhancement>
                     <div>
                         <Button>{t("resetAllSettingsButton", { ns })}</Button>

diff --git a/src/renderer/Core/Settings/Settings.tsx b/src/renderer/Core/Settings/Settings.tsx
@@ -1,4 +1,5 @@
 import { useContextBridge } from "@Core/Hooks";
+import type { KeyboardEvent } from "react";
 import { Route, Routes, useNavigate } from "react-router";
 import { ExtensionSettings } from "./ExtensionSettings";
 import { Navigation } from "./Navigation";
@@ -10,8 +11,19 @@ export const Settings = () => {
     const navigate = useNavigate();
     const closeSettings = () => navigate({ pathname: "/" });
 
+    const handleKeyDownEvent = (event: KeyboardEvent) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            closeSettings();
+        }
+    };
+
     return (
-        <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+        <div
+            style={{ display: "flex", flexDirection: "column", height: "100%" }}
+            onKeyDown={handleKeyDownEvent}
+            tabIndex={-1}
+        >
             <div style={{ flexShrink: 0 }}>
                 <SettingsHeader onCloseSettingsClicked={closeSettings} />
             </div>

diff --git a/src/renderer/Extensions/Base64Conversion/Base64Conversion.tsx b/src/renderer/Extensions/Base64Conversion/Base64Conversion.tsx
@@ -4,6 +4,7 @@ import { Header } from "@Core/Header";
 import { getImageUrl } from "@Core/getImageUrl";
 import { Button, Text } from "@fluentui/react-components";
 import { ArrowLeftFilled, CopyRegular } from "@fluentui/react-icons";
+import type { KeyboardEvent } from "react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Converter } from "./Converter";
@@ -15,6 +16,13 @@ export const Base64Conversion = ({ contextBridge, goBack }: ExtensionProps) => {
 
     const [convertedText, setConvertedText] = useState<string>("");
 
+    const handleKeyDownEvent = (event: KeyboardEvent) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            goBack();
+        }
+    };
+
     return (
         <BaseLayout
             header={
@@ -75,6 +83,7 @@ export const Base64Conversion = ({ contextBridge, goBack }: ExtensionProps) => {
                     </Button>
                 </div>
             }
+            onKeyDown={handleKeyDownEvent}
         />
     );
 };
diff --git a/src/renderer/Extensions/DeeplTranslator/DeeplTranslator.tsx b/src/renderer/Extensions/DeeplTranslator/DeeplTranslator.tsx
@@ -5,6 +5,7 @@ import { useExtensionSetting } from "@Core/Hooks";
 import { getImageUrl } from "@Core/getImageUrl";
 import { Button, Text, Tooltip } from "@fluentui/react-components";
 import { ArrowLeftFilled, CopyRegular, PersonRegular } from "@fluentui/react-icons";
+import type { KeyboardEvent } from "react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { MissingApiKey } from "./MissingApiKey";
@@ -27,6 +28,13 @@ export const DeeplTranslator = ({ contextBridge, goBack }: ExtensionProps) => {
     const openDeeplWebsite = () => contextBridge.openExternal("https://www.deepl.com/signup?cta=free-login-signup");
     const openDeeplAccount = () => contextBridge.openExternal("https://www.deepl.com/account");
 
+    const handleKeyDownEvent = (event: KeyboardEvent) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            goBack();
+        }
+    };
+
     return (
         <BaseLayout
             header={
@@ -102,6 +110,7 @@ export const DeeplTranslator = ({ contextBridge, goBack }: ExtensionProps) => {
                     </div>
                 ) : null
             }
+            onKeyDown={handleKeyDownEvent}
         />
     );
 };
diff --git a/src/renderer/Extensions/FileSearch/MissingEverythingCliFilePath.tsx b/src/renderer/Extensions/FileSearch/MissingEverythingCliFilePath.tsx
@@ -3,6 +3,7 @@ import type { ExtensionProps } from "@Core/ExtensionProps";
 import { Header } from "@Core/Header";
 import { Button, Field, Input, Text } from "@fluentui/react-components";
 import { ArrowLeftRegular } from "@fluentui/react-icons";
+import type { KeyboardEvent } from "react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -18,6 +19,13 @@ export const MissingEverythingCliFilePath = ({
 
     const temporaryEsFilePathExists = contextBridge.fileExists(temporaryEsFilePath);
 
+    const handleKeyDownEvent = (event: KeyboardEvent) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            goBack();
+        }
+    };
+
     return (
         <BaseLayout
             header={
@@ -55,6 +63,7 @@ export const MissingEverythingCliFilePath = ({
                     </Button>
                 </div>
             }
+            onKeyDown={handleKeyDownEvent}
         />
     );
 };
diff --git a/src/renderer/Extensions/SimpleFileSearch/EditFolder.tsx b/src/renderer/Extensions/SimpleFileSearch/EditFolder.tsx
@@ -72,7 +72,17 @@ export const EditFolder = ({ initialFolderSetting, onSave }: EditFolderProps) =>
         setTemporaryFolderSetting({ ...temporaryFolderSetting, searchFor });
 
     return (
-        <Dialog open={isDialogOpen} onOpenChange={(_, { open }) => (open ? openDialog() : closeDialog())}>
+        <Dialog
+            open={isDialogOpen}
+            onOpenChange={(event, { open }) => {
+                event.stopPropagation();
+                if (open) {
+                    openDialog();
+                } else {
+                    closeDialog();
+                }
+            }}
+        >
             <DialogTrigger disableButtonEnhancement>
                 <Button onClick={openDialog} icon={<AddRegular />}>
                     {t("addFolder")}

diff --git a/src/renderer/Extensions/Workflow/EditWorkflow.tsx b/src/renderer/Extensions/Workflow/EditWorkflow.tsx
@@ -15,7 +15,13 @@ export const EditWorkflow = ({ trigger, workflow, save }: EditWorkflowProps) =>
     const closeModal = () => setOpen(false);
 
     return (
-        <Dialog open={open} onOpenChange={(_, { open }) => setOpen(open)}>
+        <Dialog
+            open={open}
+            onOpenChange={(event, { open }) => {
+                event.stopPropagation();
+                setOpen(open);
+            }}
+        >
             <DialogTrigger disableButtonEnhancement>{trigger}</DialogTrigger>
             <DialogSurface>
                 <DialogBody>