From 844463b3125c67b22a9f8fdf5aaf9289295d4a36 Mon Sep 17 00:00:00 2001 From: Mel O'Hagan Date: Wed, 11 May 2022 14:03:08 +0100 Subject: [PATCH 1/7] Containers support onClick --- packages/client/manifest.json | 5 +++++ packages/client/src/components/app/Container.svelte | 13 ++++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 4190d7f076..bca61af09f 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -219,6 +219,11 @@ "showInBar": true, "barIcon": "ModernGridView", "barTitle": "Wrap" + }, + { + "type": "event", + "label": "On Click", + "key": "onClick" } ] }, diff --git a/packages/client/src/components/app/Container.svelte b/packages/client/src/components/app/Container.svelte index 148179c98f..9b2e170106 100644 --- a/packages/client/src/components/app/Container.svelte +++ b/packages/client/src/components/app/Container.svelte @@ -10,22 +10,30 @@ export let size export let gap export let wrap + export let onClick $: directionClass = direction ? `valid-container direction-${direction}` : "" $: hAlignClass = hAlign ? `hAlign-${hAlign}` : "" $: vAlignClass = vAlign ? `vAlign-${vAlign}` : "" $: sizeClass = size ? `size-${size}` : "" $: gapClass = gap ? `gap-${gap}` : "" + $: clickableClass = onClick ? "clickable" : "" $: classNames = [ directionClass, hAlignClass, vAlignClass, sizeClass, gapClass, + clickableClass, ].join(" ") -
+
@@ -104,4 +112,7 @@ .wrap { flex-wrap: wrap; } + .clickable { + cursor: pointer; + } From 3ba4772210f9f24e4a4140ab1672ae520f019831 Mon Sep 17 00:00:00 2001 From: Mel O'Hagan Date: Mon, 16 May 2022 11:26:52 +0100 Subject: [PATCH 2/7] Simplify clickable class --- packages/client/src/components/app/Container.svelte | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/client/src/components/app/Container.svelte b/packages/client/src/components/app/Container.svelte index 9b2e170106..a5c8ce6d4d 100644 --- a/packages/client/src/components/app/Container.svelte +++ b/packages/client/src/components/app/Container.svelte @@ -17,19 +17,18 @@ $: vAlignClass = vAlign ? `vAlign-${vAlign}` : "" $: sizeClass = size ? `size-${size}` : "" $: gapClass = gap ? `gap-${gap}` : "" - $: clickableClass = onClick ? "clickable" : "" $: classNames = [ directionClass, hAlignClass, vAlignClass, sizeClass, gapClass, - clickableClass, ].join(" ")
Date: Sun, 14 Aug 2022 14:42:25 +0100 Subject: [PATCH 3/7] Block child button onClick if container hasOnClick --- packages/client/src/components/app/Button.svelte | 5 +++++ packages/client/src/components/app/Container.svelte | 7 ++++++- packages/client/src/utils/buttonActions.js | 4 ++++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/client/src/components/app/Button.svelte b/packages/client/src/components/app/Button.svelte index 018f21c583..a10b992561 100644 --- a/packages/client/src/components/app/Button.svelte +++ b/packages/client/src/components/app/Button.svelte @@ -4,6 +4,7 @@ const { styleable, builderStore } = getContext("sdk") const component = getContext("component") + const containerClickableStore = getContext("containerClickable") export let disabled = false export let text = "" @@ -18,6 +19,10 @@ let node + containerClickableStore.subscribe(hasOnClick => { + disabled = hasOnClick + }) + $: $component.editing && node?.focus() $: componentText = getComponentText(text, $builderStore, $component) diff --git a/packages/client/src/components/app/Container.svelte b/packages/client/src/components/app/Container.svelte index a5c8ce6d4d..e8e757bc3e 100644 --- a/packages/client/src/components/app/Container.svelte +++ b/packages/client/src/components/app/Container.svelte @@ -1,9 +1,13 @@
{ + if (actions && actions.length === 0) { + return null + } + // Prevent button actions in the builder preview if (!actions || get(builderStore).inBuilder) { return () => {} From 4bc2c7a28fbf6ded5e8b85abebb19932452dc5cb Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 17 Aug 2022 15:17:29 +0100 Subject: [PATCH 4/7] Revert click context --- packages/client/src/components/app/Button.svelte | 5 ----- packages/client/src/components/app/Container.svelte | 7 +------ packages/client/src/utils/buttonActions.js | 4 ---- 3 files changed, 1 insertion(+), 15 deletions(-) diff --git a/packages/client/src/components/app/Button.svelte b/packages/client/src/components/app/Button.svelte index a10b992561..018f21c583 100644 --- a/packages/client/src/components/app/Button.svelte +++ b/packages/client/src/components/app/Button.svelte @@ -4,7 +4,6 @@ const { styleable, builderStore } = getContext("sdk") const component = getContext("component") - const containerClickableStore = getContext("containerClickable") export let disabled = false export let text = "" @@ -19,10 +18,6 @@ let node - containerClickableStore.subscribe(hasOnClick => { - disabled = hasOnClick - }) - $: $component.editing && node?.focus() $: componentText = getComponentText(text, $builderStore, $component) diff --git a/packages/client/src/components/app/Container.svelte b/packages/client/src/components/app/Container.svelte index e8e757bc3e..a5c8ce6d4d 100644 --- a/packages/client/src/components/app/Container.svelte +++ b/packages/client/src/components/app/Container.svelte @@ -1,13 +1,9 @@
{ - if (actions && actions.length === 0) { - return null - } - // Prevent button actions in the builder preview if (!actions || get(builderStore).inBuilder) { return () => {} From 1a23970a38d4963c7adc8e46b7cf6f7c2d32ac51 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 17 Aug 2022 15:43:25 +0100 Subject: [PATCH 5/7] Return nullish button action function for empty arrays --- packages/client/src/utils/buttonActions.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js index c6f46d1c67..558cab8f21 100644 --- a/packages/client/src/utils/buttonActions.js +++ b/packages/client/src/utils/buttonActions.js @@ -334,8 +334,8 @@ const confirmTextMap = { */ export const enrichButtonActions = (actions, context) => { // Prevent button actions in the builder preview - if (!actions || get(builderStore).inBuilder) { - return () => {} + if (!actions?.length || get(builderStore).inBuilder) { + return null } // If this is a function then it has already been enriched From 6ef6b47c52b23fa681ac82dfef2795976a5404ab Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 17 Aug 2022 15:43:42 +0100 Subject: [PATCH 6/7] Disable pointer events for all components nested inside a clickable container --- packages/client/src/components/app/Container.svelte | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/client/src/components/app/Container.svelte b/packages/client/src/components/app/Container.svelte index a5c8ce6d4d..ee0dd4778a 100644 --- a/packages/client/src/components/app/Container.svelte +++ b/packages/client/src/components/app/Container.svelte @@ -28,7 +28,7 @@
From 7abf549b02287e2487edc48694b35d30832ac81b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 17 Aug 2022 15:47:50 +0100 Subject: [PATCH 7/7] Hide on click setting for root screen component --- .../_components/settings/ComponentSettingsSection.svelte | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte index d8dc9bf066..b4c8e7abad 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte @@ -36,7 +36,12 @@ } } - const canRenderControl = setting => { + const canRenderControl = (setting, isScreen) => { + // Prevent rendering on click setting for screens + if (setting?.type === "event" && isScreen) { + return false + } + const control = getComponentForSetting(setting) if (!control) { return false @@ -87,7 +92,7 @@ /> {/if} {#each section.settings as setting (setting.key)} - {#if canRenderControl(setting)} + {#if canRenderControl(setting, isScreen)}