-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #238 from Shifin-Malik/Shortcut-Table
feat(menubar): add a new button Display All Shortcuts
- Loading branch information
Showing
29 changed files
with
629 additions
and
138 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| <script context="module"> | ||
| import { writable } from 'svelte/store'; | ||
| // Store to control the dialog's open state | ||
| const open = writable(false); | ||
| // Function to open the dialog | ||
| export function openShortcutsDialog() { | ||
| open.set(true); | ||
| } | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| import * as Table from '@/components/ui/table'; | ||
| import * as Dialog from '@/components/ui/dialog'; | ||
| import * as Menubar from '@/components/ui/menubar'; | ||
| const shortcuts = { | ||
| New: 'Ctrl + Alt + N', | ||
| Open: 'Ctrl + O', | ||
| Save: 'Ctrl + S', | ||
| Print: 'Ctrl + P', | ||
| Undo: 'Ctrl + Z', | ||
| Redo: 'Ctrl + Y', | ||
| Cut: 'Ctrl + X', | ||
| Copy: 'Ctrl + C', | ||
| Paste: 'Ctrl + V', | ||
| 'Select All': 'Ctrl + A', | ||
| 'Find/Replace': 'Ctrl + F', | ||
| 'Go To': 'Ctrl + G', | ||
| 'Full Screen': 'F11' | ||
| }; | ||
| </script> | ||
|
|
||
| <Dialog.Root open={$open} onOpenChange={open.set}> | ||
| <Dialog.Trigger /> | ||
|
|
||
| <Dialog.Content> | ||
| <Dialog.Header> | ||
| <Dialog.Title>Shortcuts</Dialog.Title> | ||
| <Dialog.Description> | ||
| Here is a list of keyboard shortcuts that you can use to quickly perform actions in this | ||
| application. | ||
| </Dialog.Description> | ||
| </Dialog.Header> | ||
|
|
||
| <div class="w-full"> | ||
| <div class="sticky top-0 bg-muted"> | ||
| <Table.Root class="table w-full"> | ||
| <Table.Header> | ||
| <Table.Row> | ||
| <Table.Head class="text-center">Function</Table.Head> | ||
| <Table.Head class="text-center">Shortcuts</Table.Head> | ||
| </Table.Row> | ||
| </Table.Header> | ||
| </Table.Root> | ||
| </div> | ||
|
|
||
| <div class="max-h-[60vh] overflow-y-auto"> | ||
| <Table.Root class="table w-full"> | ||
| <Table.Body> | ||
| {#each Object.entries(shortcuts) as [action, shortcut]} | ||
| <Table.Row> | ||
| <Table.Cell class="text-center">{action}</Table.Cell> | ||
| <Table.Cell class="text-center"> | ||
| <Menubar.Shortcut> | ||
| {shortcut} | ||
| </Menubar.Shortcut> | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| {/each} | ||
| </Table.Body> | ||
| </Table.Root> | ||
| </div> | ||
| </div> | ||
| </Dialog.Content> | ||
| </Dialog.Root> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}> | ||
| <path | ||
| fill="currentColor" | ||
| d="M4 19q-.825 0-1.412-.587T2 17V7q0-.825.588-1.412T4 5h16q.825 0 1.413.588T22 7v10q0 .825-.587 1.413T20 19zm4-3h8v-2H8zm-3-3h2v-2H5zm3 0h2v-2H8zm3 0h2v-2h-2zm3 0h2v-2h-2zm3 0h2v-2h-2zM5 10h2V8H5zm3 0h2V8H8zm3 0h2V8h-2zm3 0h2V8h-2zm3 0h2V8h-2z" | ||
| /> | ||
| </svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,29 @@ | ||
| <script lang="ts"> | ||
| import { Dialog as DialogPrimitive } from 'bits-ui'; | ||
| import Cross2 from 'svelte-radix/Cross2.svelte'; | ||
| import * as Dialog from './'; | ||
| import { cn, flyAndScale } from '@/utils'; | ||
| import * as Dialog from './index.js'; | ||
| import { cn, flyAndScale } from '@/utils.js'; | ||
| type $$Props = DialogPrimitive.ContentProps & { | ||
| overlayClass?: DialogPrimitive.OverlayProps['class']; | ||
| }; | ||
| type $$Props = DialogPrimitive.ContentProps; | ||
| let className: $$Props['class'] = undefined; | ||
| export let transition: $$Props['transition'] = flyAndScale; | ||
| export let transitionConfig: $$Props['transitionConfig'] = { | ||
| duration: 200 | ||
| }; | ||
| export { className as class }; | ||
| export let overlayClass: DialogPrimitive.OverlayProps['class'] = undefined; | ||
| </script> | ||
|
|
||
| <Dialog.Portal> | ||
| <Dialog.Overlay class={overlayClass} /> | ||
| <Dialog.Overlay /> | ||
| <DialogPrimitive.Content | ||
| {transition} | ||
| {transitionConfig} | ||
| class={cn( | ||
| 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full', | ||
| 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 pt-0 shadow-lg sm:rounded-lg md:w-full', | ||
| className | ||
| )} | ||
| {...$$restProps} | ||
| > | ||
| <slot /> | ||
| <DialogPrimitive.Close | ||
| class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none" | ||
| > | ||
| <Cross2 class="h-4 w-4" /> | ||
| <span class="sr-only">Close</span> | ||
| </DialogPrimitive.Close> | ||
| </DialogPrimitive.Content> | ||
| </Dialog.Portal> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,16 @@ | ||
| <script lang="ts"> | ||
| import { Dialog as DialogPrimitive } from 'bits-ui'; | ||
| import { cn } from '@/utils'; | ||
| import { Dialog as DialogPrimitive } from "bits-ui"; | ||
| import { cn } from "@/utils.js"; | ||
| type $$Props = DialogPrimitive.DescriptionProps; | ||
| type $$Props = DialogPrimitive.DescriptionProps; | ||
| let className: $$Props['class'] = undefined; | ||
| export { className as class }; | ||
| let className: $$Props["class"] = undefined; | ||
| export { className as class }; | ||
| </script> | ||
|
|
||
| <DialogPrimitive.Description | ||
| class={cn('text-sm text-muted-foreground', className)} | ||
| {...$$restProps} | ||
| class={cn("text-muted-foreground text-sm", className)} | ||
| {...$$restProps} | ||
| > | ||
| <slot /> | ||
| <slot /> | ||
| </DialogPrimitive.Description> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,16 @@ | ||
| <script lang="ts"> | ||
| import type { HTMLAttributes } from 'svelte/elements'; | ||
| import { cn } from '@/utils'; | ||
| import type { HTMLAttributes } from "svelte/elements"; | ||
| import { cn } from "@/utils.js"; | ||
| type $$Props = HTMLAttributes<HTMLDivElement>; | ||
| type $$Props = HTMLAttributes<HTMLDivElement>; | ||
| let className: $$Props['class'] = undefined; | ||
| export { className as class }; | ||
| let className: $$Props["class"] = undefined; | ||
| export { className as class }; | ||
| </script> | ||
|
|
||
| <div | ||
| class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} | ||
| {...$$restProps} | ||
| class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} | ||
| {...$$restProps} | ||
| > | ||
| <slot /> | ||
| <slot /> | ||
| </div> |
Oops, something went wrong.