Fix link to keybindings tab in help menu on Windows (#3236)

This commit is contained in:
Frank Noirot
2024-08-02 10:25:42 -04:00
committed by GitHub
parent 81b79da90f
commit 7b9f40c4cb

View File

@ -5,6 +5,7 @@ import { CustomIcon } from './CustomIcon'
import { useLocation, useNavigate } from 'react-router-dom' import { useLocation, useNavigate } from 'react-router-dom'
import { createAndOpenNewProject } from 'lib/tauriFS' import { createAndOpenNewProject } from 'lib/tauriFS'
import { paths } from 'lib/paths' import { paths } from 'lib/paths'
import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
const HelpMenuDivider = () => ( const HelpMenuDivider = () => (
<div className="h-[1px] bg-chalkboard-110 dark:bg-chalkboard-80" /> <div className="h-[1px] bg-chalkboard-110 dark:bg-chalkboard-80" />
@ -12,16 +13,17 @@ const HelpMenuDivider = () => (
export function HelpMenu(props: React.PropsWithChildren) { export function HelpMenu(props: React.PropsWithChildren) {
const location = useLocation() const location = useLocation()
const filePath = useAbsoluteFilePath()
const isInProject = location.pathname.includes(paths.FILE) const isInProject = location.pathname.includes(paths.FILE)
const navigate = useNavigate() const navigate = useNavigate()
const { settings } = useSettingsAuthContext() const { settings } = useSettingsAuthContext()
return ( return (
<Popover className="relative"> <Popover className="relative">
<Popover.Button className="border-none p-0 m-0 rounded-full grid place-content-center"> <Popover.Button className="grid p-0 m-0 border-none rounded-full place-content-center">
<CustomIcon <CustomIcon
name="questionMark" name="questionMark"
className="w-7 h-7 rounded-full bg-chalkboard-110 dark:bg-chalkboard-80 text-chalkboard-10" className="rounded-full w-7 h-7 bg-chalkboard-110 dark:bg-chalkboard-80 text-chalkboard-10"
/> />
<span className="sr-only">Help and resources</span> <span className="sr-only">Help and resources</span>
<Tooltip position="top-right" wrapperClassName="ui-open:hidden"> <Tooltip position="top-right" wrapperClassName="ui-open:hidden">
@ -30,7 +32,7 @@ export function HelpMenu(props: React.PropsWithChildren) {
</Popover.Button> </Popover.Button>
<Popover.Panel <Popover.Panel
as="ul" as="ul"
className="absolute right-0 left-auto bottom-full mb-1 w-64 py-2 flex flex-col gap-1 align-stretch text-chalkboard-10 dark:text-inherit bg-chalkboard-110 dark:bg-chalkboard-100 rounded shadow-lg border border-solid border-chalkboard-110 dark:border-chalkboard-80 text-sm m-0 p-0" className="absolute right-0 left-auto flex flex-col w-64 gap-1 p-0 py-2 m-0 mb-1 text-sm border border-solid rounded shadow-lg bottom-full align-stretch text-chalkboard-10 dark:text-inherit bg-chalkboard-110 dark:bg-chalkboard-100 border-chalkboard-110 dark:border-chalkboard-80"
> >
<HelpMenuItem <HelpMenuItem
as="a" as="a"
@ -84,7 +86,12 @@ export function HelpMenu(props: React.PropsWithChildren) {
</HelpMenuItem> </HelpMenuItem>
<HelpMenuItem <HelpMenuItem
as="button" as="button"
onClick={() => navigate('settings?tab=keybindings')} onClick={() => {
const targetPath = location.pathname.includes(paths.FILE)
? filePath + paths.SETTINGS
: paths.HOME + paths.SETTINGS
navigate(targetPath + '?tab=keybindings')
}}
> >
Keyboard shortcuts Keyboard shortcuts
</HelpMenuItem> </HelpMenuItem>
@ -128,7 +135,7 @@ function HelpMenuItem({
}: HelpMenuItemProps) { }: HelpMenuItemProps) {
const baseClassName = 'block px-2 py-1 hover:bg-chalkboard-80' const baseClassName = 'block px-2 py-1 hover:bg-chalkboard-80'
return ( return (
<li className="m-0 p-0"> <li className="p-0 m-0">
{as === 'a' ? ( {as === 'a' ? (
<a <a
{...(props as React.ComponentProps<'a'>)} {...(props as React.ComponentProps<'a'>)}