Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cmdk UI improvements #176

Merged
merged 11 commits into from
Nov 11, 2024
+23 −9
Merged

Cmdk UI improvements #176

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
58a6c27
better command titles
mrudulpatil18 Nov 8, 2024
5622358
navigation using up/down arrow and enter
mrudulpatil18 Nov 8, 2024
b554b5e
added a footer section at the bottom of dialog
mrudulpatil18 Nov 8, 2024
69ba965
added a footer section at the bottom of dialog
mrudulpatil18 Nov 8, 2024
9a242f7
Merge branch 'cmdk-improvements' of github.com:mrudulpatil18/snippets…
mrudulpatil18 Nov 8, 2024
35faf1a
navigation using up/down arrow and enter
mrudulpatil18 Nov 11, 2024
544fe5a
Merge branch 'cmdk-improvements' of github.com:mrudulpatil18/snippets…
mrudulpatil18 Nov 11, 2024
af03aa0
Removed bun.lockb file from pull request
mrudulpatil18 Nov 11, 2024
54f8b82
Revert "added a footer section at the bottom of dialog"
mrudulpatil18 Nov 11, 2024
c3f226f
Merge branch 'main' into cmdk-improvements
mrudulpatil18 Nov 11, 2024
e936291
fixed inconsistencies
mrudulpatil18 Nov 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 23 additions & 9 deletions src/components/CmdKMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,10 @@ const CmdKMenu = () => {
}, [])

const blankTemplates: Template[] = [
{ name: "Blank Circuit Board", type: "board" },
{ name: "Blank Circuit Module", type: "package" },
{ name: "Blank 3D Model", type: "model", disabled: true },
{ name: "Blank Footprint", type: "footprint", disabled: true },
{ name: "New Circuit Board", type: "board" },
{ name: "New Circuit Module", type: "package" },
{ name: "New 3D Model", type: "model", disabled: true },
{ name: "New Footprint", type: "footprint", disabled: true },
]

const templates: Template[] = [{ name: "Blinking LED Board", type: "board" }]
Expand All @@ -94,6 +94,7 @@ const CmdKMenu = () => {
onOpenChange={setOpen}
label="Command Menu"
className="fixed top-32 left-1/2 -translate-x-1/2 max-w-2xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700"
loop
>
<div className="flex items-center border-b border-gray-200 dark:border-gray-700 px-3">
<svg
Expand Down Expand Up @@ -137,7 +138,7 @@ const CmdKMenu = () => {
window.location.href = `/editor?snippet_id=${snippet.snippet_id}`
setOpen(false)
}}
className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default"
className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
>
<div className="flex flex-col">
<span className="text-gray-900 dark:text-gray-100">
Expand Down Expand Up @@ -168,7 +169,7 @@ const CmdKMenu = () => {
window.location.href = `/editor?snippet_id=${snippet.snippet_id}`
setOpen(false)
}}
className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default"
className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
>
<div className="flex flex-col">
<span className="text-gray-900 dark:text-gray-100">
Expand Down Expand Up @@ -200,7 +201,7 @@ const CmdKMenu = () => {
setOpen(false)
}
}}
className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default disabled:opacity-50"
className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default disabled:opacity-50 aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
>
<span className="text-gray-900 dark:text-gray-100">
{template.name}
Expand All @@ -224,7 +225,7 @@ const CmdKMenu = () => {
window.location.href = `/editor?template=${template.name.toLowerCase().replace(/ /g, "-")}`
setOpen(false)
}}
className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default"
className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
>
<span className="text-gray-900 dark:text-gray-100">
{template.name}
Expand Down Expand Up @@ -253,7 +254,7 @@ const CmdKMenu = () => {
toastNotImplemented(`${option.name} Import`)
}
}}
className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default"
className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
>
<span className="text-gray-900 dark:text-gray-100">
Import {option.name}
Expand All @@ -271,6 +272,19 @@ const CmdKMenu = () => {
</>
)}
</Command.List>

<div className="border-t border-gray-200 dark:border-gray-700 px-3 py-2">
<div className="flex justify-between text-xs text-gray-500">
<div className="flex space-x-4">
<span>↑↓ to navigate</span>
<span>↵ to select</span>
<span>esc to close</span>
</div>
<div>
<span>⌘K to toggle</span>
</div>
</div>
</div>
</Command.Dialog>

<JLCPCBImportDialog
Expand Down
Loading