diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte index 45081356c1..f56ef1187f 100644 --- a/packages/bbui/src/Modal/Modal.svelte +++ b/packages/bbui/src/Modal/Modal.svelte @@ -29,6 +29,14 @@ visible = false } + export function toggle() { + if (visible) { + hide() + } else { + show() + } + } + export function cancel() { if (!visible) { return @@ -61,7 +69,7 @@ } } - setContext(Context.Modal, { show, hide, cancel }) + setContext(Context.Modal, { show, hide, toggle, cancel }) onMount(() => { document.addEventListener("keydown", handleKey) diff --git a/packages/builder/src/components/commandPalette/CommandPalette.svelte b/packages/builder/src/components/commandPalette/CommandPalette.svelte new file mode 100644 index 0000000000..cf976a799e --- /dev/null +++ b/packages/builder/src/components/commandPalette/CommandPalette.svelte @@ -0,0 +1,333 @@ + + + + +
+
+ + +
+
+ {#each categories as [name, results], catIdx} +
+ {name} +
+ {#each results as command, cmdIdx} +
runAction(command)} + class:selected={command.idx === selected} + > + + {command.type}:  +
+ {command.name} +
+
+ {/each} +
+
+ {/each} +
+
+
+ + diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte index fe5edae1a4..ff728312c1 100644 --- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte @@ -10,6 +10,7 @@ Tabs, Tab, Heading, + Modal, notifications, } from "@budibase/bbui" @@ -18,6 +19,7 @@ import { isActive, goto, layout, redirect } from "@roxi/routify" import { capitalise } from "helpers" import { onMount, onDestroy } from "svelte" + import CommandPalette from "components/commandPalette/CommandPalette.svelte" import TourWrap from "components/portal/onboarding/TourWrap.svelte" import TourPopover from "components/portal/onboarding/TourPopover.svelte" import BuilderSidePanel from "./_components/BuilderSidePanel.svelte" @@ -25,12 +27,9 @@ export let application - // Get Package and set store let promise = getPackage() - // let betaAccess = false - - // Sync once when you load the app let hasSynced = false + let commandPaletteModal $: selected = capitalise( $layout.children.find(layout => $isActive(layout.path))?.title ?? "data" @@ -50,7 +49,6 @@ $redirect("../../") } } - // Handles navigation between frontend, backend, automation. // This remembers your last place on each of the sections // e.g. if one of your screens is selected on front end, then @@ -67,6 +65,14 @@ }) } + // Event handler for the command palette + const handleKeyDown = e => { + if (e.key === "k" && (e.ctrlKey || e.metaKey)) { + e.preventDefault() + commandPaletteModal.toggle() + } + } + const initTour = async () => { // Check if onboarding is enabled. if (isEnabled(TENANT_FEATURE_FLAGS.ONBOARDING_TOUR)) { @@ -201,6 +207,11 @@ {/await} + + + + +