diff --git a/frontend/src/ts/components/layout/footer/Keytips.tsx b/frontend/src/ts/components/layout/footer/Keytips.tsx index 3c703888f71f..c5377d3eba01 100644 --- a/frontend/src/ts/components/layout/footer/Keytips.tsx +++ b/frontend/src/ts/components/layout/footer/Keytips.tsx @@ -2,17 +2,18 @@ import { JSXElement, Show } from "solid-js"; import { getConfig } from "../../../config/store"; import { getFocus } from "../../../states/core"; +import { + getCommandLineKeyLabel, + getCommandLineModifierKeyLabel, + isFirefoxBrowser, +} from "../../../utils/shortcuts"; import { Conditional } from "../../common/Conditional"; export function Keytips(): JSXElement { - const userAgent = window.navigator.userAgent.toLowerCase(); - const modifierKey = - userAgent.includes("mac") && !userAgent.includes("firefox") - ? "cmd" - : "ctrl"; - + const isFirefox = isFirefoxBrowser(); + const modifierKey = getCommandLineModifierKeyLabel(); const commandKey = (): string => - getConfig.quickRestart === "esc" ? "tab" : "esc"; + getCommandLineKeyLabel(getConfig.quickRestart); return ( @@ -36,8 +37,20 @@ export function Keytips(): JSXElement { } />
- {commandKey()} or {modifierKey} + shift{" "} - + p - command line + + {commandKey()} - command line + + } + else={ + <> + {commandKey()} or {modifierKey} +{" "} + shift + p - command line + + } + />
); diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx index f14caf161fb8..3c2d0eeb6f7a 100644 --- a/frontend/src/ts/components/pages/AboutPage.tsx +++ b/frontend/src/ts/components/pages/AboutPage.tsx @@ -12,14 +12,23 @@ import { getActivePage } from "../../states/core"; import { showModal } from "../../states/modals"; import { getTheme } from "../../states/theme"; import { getNumberWithMagnitude } from "../../utils/numbers"; +import { + getCommandLineKeyLabel, + getCommandLineModifierKeyLabel, + isFirefoxBrowser, +} from "../../utils/shortcuts"; import AsyncContent from "../common/AsyncContent"; import { Button } from "../common/Button"; import { ChartJs } from "../common/ChartJs"; +import { Conditional } from "../common/Conditional"; import { Fa } from "../common/Fa"; import { H2, H3 } from "../common/Headers"; export function AboutPage(): JSXElement { const isOpen = () => getActivePage() === "about"; + const isFirefox = isFirefoxBrowser(); + const commandKey = (): string => + getCommandLineKeyLabel(getConfig.quickRestart); const contributors = useQuery(() => ({ ...getContributorsQueryOptions(), @@ -203,9 +212,19 @@ export function AboutPage(): JSXElement {

You can use tab and enter (or just{" "} tab if you have quick tab mode enabled) to restart the - typing test. Open the command line by pressing ctrl/cmd +{" "} - shift + p or esc - there you can - access all the functionality you need without touching your mouse. + typing test. Open the command line by pressing{" "} + {commandKey()}} + else={ + <> + {getCommandLineModifierKeyLabel()} + shift{" "} + + p or {commandKey()} + + } + />{" "} + - there you can access all the functionality you need without touching + your mouse.

diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts index 3cf3e11f6bc2..8e7dd0f76b94 100644 --- a/frontend/src/ts/pages/settings.ts +++ b/frontend/src/ts/pages/settings.ts @@ -52,6 +52,7 @@ import { authEvent } from "../events/auth"; import * as FpsLimitSection from "../elements/settings/fps-limit-section"; import { qs, qsa, qsr, onDOMReady } from "../utils/dom"; import { showPopup } from "../modals/simple-modals-base"; +import { getCommandLineKeybindHtml } from "../utils/shortcuts"; let settingsInitialized = false; @@ -723,16 +724,10 @@ export async function update( CustomBackgroundFilter.updateUI(); - const userAgent = window.navigator.userAgent.toLowerCase(); - const modifierKey = - userAgent.includes("mac") && !userAgent.includes("firefox") - ? "cmd" - : "ctrl"; - - const commandKey = Config.quickRestart === "esc" ? "tab" : "esc"; + const commandLineKeybind = getCommandLineKeybindHtml(Config.quickRestart); qs(".pageSettings .tip")?.setHtml(` tip: You can also change all these settings quickly using the - command line (${commandKey} or ${modifierKey} + shift + p)`); + command line (${commandLineKeybind})`); if ( customLayoutFluidSelect !== undefined && diff --git a/frontend/src/ts/utils/shortcuts.ts b/frontend/src/ts/utils/shortcuts.ts new file mode 100644 index 000000000000..8607d4012060 --- /dev/null +++ b/frontend/src/ts/utils/shortcuts.ts @@ -0,0 +1,33 @@ +import type { Config } from "@monkeytype/schemas/configs"; + +export function isFirefoxBrowser(): boolean { + if (typeof window === "undefined") return false; + + return window.navigator.userAgent.toLowerCase().includes("firefox"); +} + +export function getCommandLineModifierKeyLabel(): string { + if (typeof window === "undefined") return "ctrl"; + + const userAgent = window.navigator.userAgent.toLowerCase(); + + return userAgent.includes("mac") && !isFirefoxBrowser() ? "cmd" : "ctrl"; +} + +export function getCommandLineKeyLabel( + quickRestart: Config["quickRestart"], +): string { + return quickRestart === "esc" ? "tab" : "esc"; +} + +export function getCommandLineKeybindHtml( + quickRestart: Config["quickRestart"], +): string { + const commandKey = getCommandLineKeyLabel(quickRestart); + + if (isFirefoxBrowser()) { + return `${commandKey}`; + } + + return `${commandKey} or ${getCommandLineModifierKeyLabel()} + shift + p`; +}