From 359355b58d634e89fe64cfef847842f9528057c9 Mon Sep 17 00:00:00 2001 From: Michael Drury Date: Mon, 15 Apr 2024 13:46:49 +0100 Subject: [PATCH 1/8] Revert "Revert "adds sidepanel open and close actions, and gives the user the option to disable click-outside closure of sidepanel"" --- packages/bbui/src/Layout/Page.svelte | 10 +++++----- packages/client/manifest.json | 16 +++++++++++++++- packages/client/src/components/app/Layout.svelte | 5 ++++- .../client/src/components/app/SidePanel.svelte | 14 ++++++++++++++ packages/client/src/stores/sidePanel.js | 9 +++++++++ 5 files changed, 47 insertions(+), 7 deletions(-) diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 2169a12459..62dd9cc909 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -7,11 +7,11 @@ export let narrower = false export let noPadding = false - let sidePanelVisble = false + let sidePanelVisible = false setContext("side-panel", { - open: () => (sidePanelVisble = true), - close: () => (sidePanelVisble = false), + open: () => (sidePanelVisible = true), + close: () => (sidePanelVisible = false), }) @@ -24,9 +24,9 @@
{ - sidePanelVisble = false + sidePanelVisible = false }} > diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 40abc7a9a0..c9e28e202b 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -6723,7 +6723,21 @@ "illegalChildren": ["section", "sidepanel"], "showEmptyState": false, "draggable": false, - "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action." + "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action.", + "sendEvents": true, + "settings": [ + { + "type": "boolean", + "key": "clickOutsideToClose", + "label": "Click outside to close", + "defaultValue": true + }, + { + "type": "event", + "key": "onSidePanelClose", + "label": "On side panel close" + } + ] }, "rowexplorer": { "block": true, diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index 8508e943ff..bae2bd0faf 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -73,7 +73,10 @@ $context.device.width, $context.device.height ) - $: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open + $: autoCloseSidePanel = + !$builderStore.inBuilder && + $sidePanelStore.open && + $sidePanelStore.clickOutsideToClose $: screenId = $builderStore.inBuilder ? `${$builderStore.screen?._id}-screen` : "screen" diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte index 825b401bb8..624617ad69 100644 --- a/packages/client/src/components/app/SidePanel.svelte +++ b/packages/client/src/components/app/SidePanel.svelte @@ -5,6 +5,9 @@ const { styleable, sidePanelStore, builderStore, dndIsDragging } = getContext("sdk") + export let sidePanelClose + export let clickOutsideToClose + // Automatically show and hide the side panel when inside the builder. // For some unknown reason, svelte reactivity breaks if we reference the // reactive variable "open" inside the following expression, or if we define @@ -26,6 +29,10 @@ } } + $: { + sidePanelStore.actions.setSidepanelState(clickOutsideToClose) + } + // Derive visibility $: open = $sidePanelStore.contentId === $component.id @@ -40,6 +47,12 @@ } } + const handleSidePanelClose = async () => { + if (sidePanelClose) { + await sidePanelClose() + } + } + const showInSidePanel = (el, visible) => { const update = visible => { const target = document.getElementById("side-panel-container") @@ -51,6 +64,7 @@ } else { if (target.contains(node)) { target.removeChild(node) + handleSidePanelClose() } } } diff --git a/packages/client/src/stores/sidePanel.js b/packages/client/src/stores/sidePanel.js index 3b3b9f5f4d..df66eca01c 100644 --- a/packages/client/src/stores/sidePanel.js +++ b/packages/client/src/stores/sidePanel.js @@ -3,6 +3,7 @@ import { writable, derived } from "svelte/store" export const createSidePanelStore = () => { const initialState = { contentId: null, + clickOutsideToClose: true, } const store = writable(initialState) const derivedStore = derived(store, $store => { @@ -32,11 +33,19 @@ export const createSidePanelStore = () => { }, 50) } + const setSidepanelState = bool => { + clearTimeout(timeout) + store.update(state => { + state.clickOutsideToClose = bool + return state + }) + } return { subscribe: derivedStore.subscribe, actions: { open, close, + setSidepanelState, }, } } From ad10679115b22f07e055a21e96d4ff2ee4aa0a75 Mon Sep 17 00:00:00 2001 From: mikesealey Date: Wed, 17 Apr 2024 16:27:23 +0100 Subject: [PATCH 2/8] saving progress based on review reccomendations --- packages/client/manifest.json | 11 +++++------ packages/client/src/components/app/Layout.svelte | 2 +- packages/client/src/components/app/SidePanel.svelte | 4 ++-- packages/client/src/stores/sidePanel.js | 9 ++++----- 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index c9e28e202b..cb85768adc 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -6724,18 +6724,17 @@ "showEmptyState": false, "draggable": false, "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action.", - "sendEvents": true, "settings": [ { "type": "boolean", - "key": "clickOutsideToClose", - "label": "Click outside to close", - "defaultValue": true + "key": "ignoreClicksOutside", + "label": "Ignore clicks outside", + "defaultValue": false }, { "type": "event", - "key": "onSidePanelClose", - "label": "On side panel close" + "key": "onClose", + "label": "On close" } ] }, diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index bae2bd0faf..617658c754 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -76,7 +76,7 @@ $: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open && - $sidePanelStore.clickOutsideToClose + $sidePanelStore.ignoreClicksOutside $: screenId = $builderStore.inBuilder ? `${$builderStore.screen?._id}-screen` : "screen" diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte index 624617ad69..8b0b395649 100644 --- a/packages/client/src/components/app/SidePanel.svelte +++ b/packages/client/src/components/app/SidePanel.svelte @@ -6,7 +6,7 @@ getContext("sdk") export let sidePanelClose - export let clickOutsideToClose + export let ignoreClicksOutside // Automatically show and hide the side panel when inside the builder. // For some unknown reason, svelte reactivity breaks if we reference the @@ -30,7 +30,7 @@ } $: { - sidePanelStore.actions.setSidepanelState(clickOutsideToClose) + sidePanelStore.actions.setIgnoreClicksOutside(ignoreClicksOutside) } // Derive visibility diff --git a/packages/client/src/stores/sidePanel.js b/packages/client/src/stores/sidePanel.js index df66eca01c..b25914c484 100644 --- a/packages/client/src/stores/sidePanel.js +++ b/packages/client/src/stores/sidePanel.js @@ -3,7 +3,7 @@ import { writable, derived } from "svelte/store" export const createSidePanelStore = () => { const initialState = { contentId: null, - clickOutsideToClose: true, + ignoreClicksOutside: true, } const store = writable(initialState) const derivedStore = derived(store, $store => { @@ -33,10 +33,9 @@ export const createSidePanelStore = () => { }, 50) } - const setSidepanelState = bool => { - clearTimeout(timeout) + const setIgnoreClicksOutside = bool => { store.update(state => { - state.clickOutsideToClose = bool + state.ignoreClicksOutside = bool return state }) } @@ -45,7 +44,7 @@ export const createSidePanelStore = () => { actions: { open, close, - setSidepanelState, + setIgnoreClicksOutside, }, } } From 6c38d32549a79f04ea00f10e21c84f2c540796ff Mon Sep 17 00:00:00 2001 From: mikesealey Date: Thu, 18 Apr 2024 10:08:48 +0100 Subject: [PATCH 3/8] reinstates actions running when sidepanel closes --- packages/client/src/components/app/SidePanel.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte index 8b0b395649..827ed2ab95 100644 --- a/packages/client/src/components/app/SidePanel.svelte +++ b/packages/client/src/components/app/SidePanel.svelte @@ -5,7 +5,7 @@ const { styleable, sidePanelStore, builderStore, dndIsDragging } = getContext("sdk") - export let sidePanelClose + export let onClose export let ignoreClicksOutside // Automatically show and hide the side panel when inside the builder. @@ -48,8 +48,8 @@ } const handleSidePanelClose = async () => { - if (sidePanelClose) { - await sidePanelClose() + if (onClose) { + await onClose() } } From 088c210de85e260c946d2b105687cd155c16d298 Mon Sep 17 00:00:00 2001 From: mikesealey Date: Thu, 18 Apr 2024 12:11:45 +0100 Subject: [PATCH 4/8] sets ignoreClickOutside to each side panel --- packages/client/src/components/app/Layout.svelte | 2 +- packages/client/src/components/app/SidePanel.svelte | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index 617658c754..bfbac8f4f1 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -76,7 +76,7 @@ $: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open && - $sidePanelStore.ignoreClicksOutside + !$sidePanelStore.ignoreClicksOutside $: screenId = $builderStore.inBuilder ? `${$builderStore.screen?._id}-screen` : "screen" diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte index 827ed2ab95..bff5a78837 100644 --- a/packages/client/src/components/app/SidePanel.svelte +++ b/packages/client/src/components/app/SidePanel.svelte @@ -29,9 +29,9 @@ } } - $: { - sidePanelStore.actions.setIgnoreClicksOutside(ignoreClicksOutside) - } + // $: { + + // } // Derive visibility $: open = $sidePanelStore.contentId === $component.id @@ -43,6 +43,7 @@ let renderKey = null $: { if (open) { + sidePanelStore.actions.setIgnoreClicksOutside(ignoreClicksOutside) renderKey = Math.random() } } From 80a6afd54f03a6dfb37a1b3f0cce763fcace349f Mon Sep 17 00:00:00 2001 From: mikesealey Date: Fri, 19 Apr 2024 10:41:39 +0100 Subject: [PATCH 5/8] closes side panel when navigating away regardless of ignoreClicksOutside --- packages/client/src/components/app/Layout.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index bfbac8f4f1..dccb061254 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -284,7 +284,9 @@ url={navItem.url} subLinks={navItem.subLinks} internalLink={navItem.internalLink} - on:clickLink={() => (mobileOpen = false)} + on:clickLink={(() => (mobileOpen = false), + console.log("287"), + sidePanelStore.actions.close)} leftNav={navigation === "Left"} {mobile} {navStateStore} From 237bc707581900f3f9bbcfff597d88d90a344454 Mon Sep 17 00:00:00 2001 From: mikesealey Date: Fri, 19 Apr 2024 10:58:25 +0100 Subject: [PATCH 6/8] removes console.log() --- packages/client/src/components/app/Layout.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index dccb061254..363a464143 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -285,7 +285,6 @@ subLinks={navItem.subLinks} internalLink={navItem.internalLink} on:clickLink={(() => (mobileOpen = false), - console.log("287"), sidePanelStore.actions.close)} leftNav={navigation === "Left"} {mobile} From 11702538cbda4c8716f205ab1be43efae5e04994 Mon Sep 17 00:00:00 2001 From: mikesealey Date: Fri, 19 Apr 2024 12:08:05 +0100 Subject: [PATCH 7/8] pulls inline code into separate handleClickLink function to deal with closing side panel when navigating away --- packages/client/src/components/app/Layout.svelte | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index 363a464143..eb1e0022cc 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -194,6 +194,11 @@ } return url } + + const handleClickLink = () => { + mobileOpen = false + sidePanelStore.actions.close() + } @@ -284,8 +289,7 @@ url={navItem.url} subLinks={navItem.subLinks} internalLink={navItem.internalLink} - on:clickLink={(() => (mobileOpen = false), - sidePanelStore.actions.close)} + on:clickLink={handleClickLink} leftNav={navigation === "Left"} {mobile} {navStateStore} From 4c0d3ed5f38781a5db5e024993b3e7de7e6692ad Mon Sep 17 00:00:00 2001 From: mikesealey Date: Fri, 19 Apr 2024 14:45:57 +0100 Subject: [PATCH 8/8] runs the closeSidePanel function when navigating away using a button-action --- packages/client/src/utils/buttonActions.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js index d883ee1b55..4ab7490ae7 100644 --- a/packages/client/src/utils/buttonActions.js +++ b/packages/client/src/utils/buttonActions.js @@ -240,6 +240,7 @@ const triggerAutomationHandler = async action => { const navigationHandler = action => { const { url, peek, externalNewTab } = action.parameters routeStore.actions.navigate(url, peek, externalNewTab) + closeSidePanelHandler() } const queryExecutionHandler = async action => {