Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-18 20:09:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implemented super+k focus. hint hides onFocus

Browse source
This commit is contained in:
RockBacon9922 2022-07-07 21:45:05 +01:00
parent f518e1017f
commit 63d75af610
1 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
packages/interface/src/components/layout/TopBar.tsx
View file

@ -67,6 +67,18 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
});
let navigate = useNavigate();
const [showSuperK, setShowSuperK] = React.useState(true);
//create function to focus on search box when cmd+k is pressed
const searchRef: any = React.useRef(null);
React.useEffect(() => {
document.addEventListener('keydown', (e) => {
if (e.metaKey && e.key === 'k' && searchRef.current) {
searchRef.current.focus()
}
})
},[])
return (
<>
<div
@ -90,13 +102,20 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
</div>
<div className="relative flex h-7">
<input
ref={searchRef}
placeholder="Search"
onFocus={() => {
setShowSuperK(false);
}}
onBlur={() => {
setShowSuperK(true);
}}
className="w-32 h-[30px] focus:w-52 text-sm p-3 rounded-lg outline-none focus:ring-2 placeholder-gray-400 dark:placeholder-gray-500 bg-[#F6F2F6] border border-gray-50 dark:bg-gray-650 dark:border-gray-550 focus:ring-gray-100 dark:focus:ring-gray-600 transition-all"
/>
<div className="space-x-1 absolute top-[2px] right-1">
{showSuperK && <div className="space-x-1 absolute top-[2px] right-1">
<Shortcut chars="⌘K" />
{/* <Shortcut chars="S" /> */}
</div>
</div>}
</div>
<div className="flex mx-8 space-x-2">
<TopBarButton icon={Key} />