From 1497f3f680fc9419a654208a776d4039c026959e Mon Sep 17 00:00:00 2001 From: Maurits Lourens Date: Mon, 26 Jul 2021 23:48:59 +0200 Subject: [PATCH 01/62] delete component using the keyboard --- .../design/AppPreview/CurrentItemPreview.svelte | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte index 607061013d..a6d186817c 100644 --- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte @@ -103,8 +103,7 @@ } else if (type === "update-prop") { store.actions.components.updateProp(data.prop, data.value) } else if (type === "delete-component" && data.id) { - idToDelete = data.id - confirmDeleteDialog.show() + confirmDeleteComponent(data.id) } else if (type === "preview-loaded") { // Wait for this event to show the client library if intelligent // loading is supported @@ -113,8 +112,19 @@ console.warning(`Client sent unknown event type: ${type}`) } }) + + iframe.contentWindow.addEventListener("keydown", event => { + if ((event.key === "Delete" || event.key === "Backspace") && selectedComponentId) { + confirmDeleteComponent(selectedComponentId); + } + }) }) + const confirmDeleteComponent = (componentId) => { + idToDelete = componentId + confirmDeleteDialog.show() + } + const deleteComponent = () => { store.actions.components.delete({ _id: idToDelete }) idToDelete = null From 7173be59c6e7f16d81c353affa672e3e1016ea50 Mon Sep 17 00:00:00 2001 From: Maurits Lourens Date: Mon, 26 Jul 2021 23:53:11 +0200 Subject: [PATCH 02/62] remove event listeners prevents memory leaks --- .../design/AppPreview/CurrentItemPreview.svelte | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte index a6d186817c..7c0be0e067 100644 --- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte @@ -1,5 +1,5 @@
{#if withArrow} -
+
{/if} From 378760074fe2054041f202699af4689b6e1eb88d Mon Sep 17 00:00:00 2001 From: Maurits Lourens Date: Tue, 31 Aug 2021 15:46:30 +0200 Subject: [PATCH 04/62] only show delete confirmation when no input or textarea is focussed --- .../AppPreview/CurrentItemPreview.svelte | 57 ++++++++++--------- 1 file changed, 30 insertions(+), 27 deletions(-) diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte index 7c0be0e067..dc7cebbb5f 100644 --- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte @@ -95,39 +95,42 @@ { once: true } ) - // Add listener for events sent by cliebt library in preview - iframe.contentWindow.addEventListener("bb-event", event => { - const { type, data } = event.detail - if (type === "select-component" && data.id) { - store.actions.components.select({ _id: data.id }) - } else if (type === "update-prop") { - store.actions.components.updateProp(data.prop, data.value) - } else if (type === "delete-component" && data.id) { - confirmDeleteComponent(data.id) - } else if (type === "preview-loaded") { - // Wait for this event to show the client library if intelligent - // loading is supported - loading = false - } else { - console.warning(`Client sent unknown event type: ${type}`) - } - }) - - iframe.contentWindow.addEventListener("keydown", event => { - if ((event.key === "Delete" || event.key === "Backspace") && selectedComponentId) { - confirmDeleteComponent(selectedComponentId); - } - }) + // Add listener for events sent by client library in preview + iframe.contentWindow.addEventListener("bb-event", handleBudibaseEvent) + iframe.contentWindow.addEventListener("keydown", handleKeydownEvent) }) // remove all iframe event listeners on component destroy onDestroy(() => { - iframe.contentWindow.removeEventListener("ready") - iframe.contentWindow.removeEventListener("error") - iframe.contentWindow.removeEventListener("bb-event") - iframe.contentWindow.removeEventListener("keydown") + iframe.contentWindow.removeEventListener("bb-event", handleBudibaseEvent) + iframe.contentWindow.removeEventListener("keydown", handleKeydownEvent) }) + const handleBudibaseEvent = event => { + const { type, data } = event.detail + if (type === "select-component" && data.id) { + store.actions.components.select({ _id: data.id }) + } else if (type === "update-prop") { + store.actions.components.updateProp(data.prop, data.value) + } else if (type === "delete-component" && data.id) { + confirmDeleteComponent(data.id) + } else if (type === "preview-loaded") { + // Wait for this event to show the client library if intelligent + // loading is supported + loading = false + } else { + console.warning(`Client sent unknown event type: ${type}`) + } + }; + + const handleKeydownEvent = event => { + if ((event.key === "Delete" || event.key === "Backspace") && + selectedComponentId && + ['input', 'textarea'].indexOf(iframe.contentWindow.document.activeElement?.tagName.toLowerCase()) === -1) { + confirmDeleteComponent(selectedComponentId); + } + } + const confirmDeleteComponent = (componentId) => { idToDelete = componentId confirmDeleteDialog.show() From 0c0e656b34b955fee8b16f4e6ad66ac9a0f622a6 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 13 Sep 2021 15:38:06 +0100 Subject: [PATCH 05/62] Make core portal layout responsive with mobile drawer menu --- packages/bbui/src/SideNavigation/Item.svelte | 1 + .../components/start/CreateAppModal.svelte | 2 +- .../src/pages/builder/portal/_layout.svelte | 137 ++- .../pages/builder/portal/apps/index.svelte | 2 +- packages/client/yarn.lock | 975 +----------------- packages/server/yarn.lock | 755 +------------- 6 files changed, 160 insertions(+), 1712 deletions(-) diff --git a/packages/bbui/src/SideNavigation/Item.svelte b/packages/bbui/src/SideNavigation/Item.svelte index f50270dfbd..dfebdb46a6 100644 --- a/packages/bbui/src/SideNavigation/Item.svelte +++ b/packages/bbui/src/SideNavigation/Item.svelte @@ -13,6 +13,7 @@ class="spectrum-SideNav-item" class:is-selected={selected} class:is-disabled={disabled} + on:click > {#if heading}