From 058547fd67e71fba5f6972c39bb1a06db407fb86 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 27 Oct 2022 08:08:35 +0100 Subject: [PATCH 01/54] Add initial version of side panel component --- .../new/_components/componentStructure.json | 3 +- packages/client/manifest.json | 8 + .../client/src/components/app/Layout.svelte | 210 +++++++++++------- .../src/components/app/SidePanel.svelte | 57 +++++ packages/client/src/components/app/index.js | 2 +- .../components/preview/IndicatorSet.svelte | 9 +- packages/client/src/sdk.js | 2 + packages/client/src/stores/index.js | 1 + packages/client/src/stores/sidePanel.js | 37 +++ packages/client/src/utils/styleable.js | 2 + 10 files changed, 241 insertions(+), 90 deletions(-) create mode 100644 packages/client/src/components/app/SidePanel.svelte create mode 100644 packages/client/src/stores/sidePanel.js diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json index 381ceeac20..acc1fb2a63 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json @@ -16,7 +16,8 @@ "children": [ "container", "section", - "grid" + "grid", + "sidepanel" ] }, { diff --git a/packages/client/manifest.json b/packages/client/manifest.json index d8a868b6f8..35d334d3fe 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -5225,5 +5225,13 @@ "suffix": "repeater" } ] + }, + "sidepanel": { + "name": "Side Panel", + "icon": "AdDisplay", + "hasChildren": true, + "illegalChildren": ["section"], + "showEmptyState": false, + "static": true } } \ No newline at end of file diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index a317da1f0f..d1e55df5b5 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -16,6 +16,7 @@ builderStore, currentRole, environmentStore, + sidePanelStore, } = sdk const component = getContext("component") const context = getContext("context") @@ -150,113 +151,130 @@ class:desktop={!mobile} class:mobile={!!mobile} > - {#if typeClass !== "none"} -
+
+ {#if typeClass !== "none"}
-
-
+
+
+
+ {#if validLinks?.length} +
+ (mobileOpen = !mobileOpen)} + /> +
+ {/if} + +
+ +
+
+
(mobileOpen = false)} + /> {#if validLinks?.length} -
- (mobileOpen = !mobileOpen)} - /> +
+ {#each validLinks as { text, url }} + {#if isInternal(url)} + + {text} + + {:else} + + {text} + + {/if} + {/each} +
+ (mobileOpen = false)} + /> +
{/if} - -
- -
-
(mobileOpen = false)} - /> - {#if validLinks?.length} -
- {#each validLinks as { text, url }} - {#if isInternal(url)} - - {text} - - {:else} - - {text} - - {/if} - {/each} -
- (mobileOpen = false)} - /> -
-
- {/if}
+ {/if} + + {#if !$builderStore.inBuilder && licensing.logoEnabled() && $environmentStore.cloud} + + {/if} + +
+
+ +
- {/if} - - {#if !$builderStore.inBuilder && licensing.logoEnabled() && $environmentStore.cloud} - - {/if} - -
-
- +
+
+
+
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js index b64e074115..70074790ac 100644 --- a/packages/client/src/components/app/index.js +++ b/packages/client/src/components/app/index.js @@ -35,10 +35,10 @@ export { default as tag } from "./Tag.svelte" export { default as markdownviewer } from "./MarkdownViewer.svelte" export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte" export { default as grid } from "./Grid.svelte" +export { default as sidepanel } from "./SidePanel.svelte" export * from "./charts" export * from "./forms" export * from "./table" - export * from "./blocks" export * from "./dynamic-filter" diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte index 51a60ce981..ff0c7d71d6 100644 --- a/packages/client/src/components/preview/IndicatorSet.svelte +++ b/packages/client/src/components/preview/IndicatorSet.svelte @@ -43,7 +43,8 @@ if (callbackCount >= observers.length) { return } - nextIndicators[idx].visible = entries[0].isIntersecting + nextIndicators[idx].visible = + nextIndicators[idx].isSidePanel || entries[0].isIntersecting if (++callbackCount === observers.length) { indicators = nextIndicators updating = false @@ -91,8 +92,9 @@ // Extract valid children // Sanity limit of 100 active indicators - const children = Array.from(parents) - .map(parent => parent?.children?.[0]) + const children = Array.from( + document.getElementsByClassName(`${componentId}-dom`) + ) .filter(x => x != null) .slice(0, 100) @@ -121,6 +123,7 @@ width: elBounds.width + 4, height: elBounds.height + 4, visible: false, + isSidePanel: child.classList.contains("side-panel"), }) }) } diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js index 1afeea0055..e19627dd0b 100644 --- a/packages/client/src/sdk.js +++ b/packages/client/src/sdk.js @@ -10,6 +10,7 @@ import { componentStore, currentRole, environmentStore, + sidePanelStore, } from "stores" import { styleable } from "utils/styleable" import { linkable } from "utils/linkable" @@ -30,6 +31,7 @@ export default { uploadStore, componentStore, environmentStore, + sidePanelStore, currentRole, styleable, linkable, diff --git a/packages/client/src/stores/index.js b/packages/client/src/stores/index.js index 173f3ad4fe..7548d31817 100644 --- a/packages/client/src/stores/index.js +++ b/packages/client/src/stores/index.js @@ -24,6 +24,7 @@ export { dndIsNewComponent, dndIsDragging, } from "./dnd" +export { sidePanelStore } from "./sidePanel.js" // Context stores are layered and duplicated, so it is not a singleton export { createContextStore } from "./context" diff --git a/packages/client/src/stores/sidePanel.js b/packages/client/src/stores/sidePanel.js new file mode 100644 index 0000000000..327fcfae82 --- /dev/null +++ b/packages/client/src/stores/sidePanel.js @@ -0,0 +1,37 @@ +import { writable, derived } from "svelte/store" + +export const createSidePanelStore = () => { + const initialState = { + contentId: null, + } + const store = writable(initialState) + const derivedStore = derived(store, $store => { + return { + ...$store, + open: $store.contentId != null, + } + }) + + const open = id => { + store.update(state => { + state.contentId = id + return state + }) + } + const close = () => { + store.update(state => { + state.contentId = null + return state + }) + } + + return { + subscribe: derivedStore.subscribe, + actions: { + open, + close, + }, + } +} + +export const sidePanelStore = createSidePanelStore() diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js index 9ad17ceff0..4a6f1c0d7c 100644 --- a/packages/client/src/utils/styleable.js +++ b/packages/client/src/utils/styleable.js @@ -25,6 +25,8 @@ export const styleable = (node, styles = {}) => { // Creates event listeners and applies initial styles const setupStyles = (newStyles = {}) => { + node.classList.add(`${newStyles.id}-dom`) + let baseStyles = {} if (newStyles.empty) { baseStyles.border = "2px dashed var(--spectrum-global-color-gray-400)" From fb9dd20c114e05e237e52b0fe9d9eba25d2b88a5 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 10 Nov 2022 14:34:23 +0000 Subject: [PATCH 02/54] Update side panel styles and ensure side panel properly reveals itself in the builder --- packages/client/src/components/Component.svelte | 1 + packages/client/src/components/app/Layout.svelte | 10 ++++++---- .../client/src/components/app/SidePanel.svelte | 14 +++++++++----- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index b98548fc9c..8a72fb042a 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -188,6 +188,7 @@ }, empty: emptyState, selected, + inSelectedPath, name, editing, type: instance._component, diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index d1e55df5b5..eb6e922a1f 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -336,16 +336,18 @@ } #side-panel-container { - flex: 0 0 360px; - background: var(--background); - box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); + flex: 0 0 400px; + max-width: calc(100vw - 40px); + background: var(--spectrum-global-color-gray-50); transition: margin-right 130ms ease-out; z-index: 3; padding: var(--spacing-xl); - margin-right: -370px; + margin-right: -410px; display: flex; flex-direction: column; gap: var(--spacing-xl); + overflow-y: auto; + border-left: 1px solid var(--spectrum-global-color-gray-300); } #side-panel-container.open { margin-right: 0; diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte index 2e03ca6d3d..655b3d5d3b 100644 --- a/packages/client/src/components/app/SidePanel.svelte +++ b/packages/client/src/components/app/SidePanel.svelte @@ -2,9 +2,11 @@ import { getContext } from "svelte" const component = getContext("component") - const { styleable, sidePanelStore } = getContext("sdk") + const { styleable, sidePanelStore, builderStore } = getContext("sdk") - $: open = $sidePanelStore.contentId === $component.id + $: appOpen = $sidePanelStore.contentId === $component.id + $: builderOpen = $component.inSelectedPath + $: open = $builderStore.inBuilder ? builderOpen : appOpen const showInSidePanel = (el, visible) => { const target = document.getElementById("side-panel-container") @@ -13,9 +15,11 @@ } const update = visible => { if (visible) { + sidePanelStore.actions.open($component.id) target.appendChild(el) el.hidden = false } else { + sidePanelStore.actions.close() destroy() el.hidden = true } @@ -40,9 +44,9 @@
- +
From aa81e0451a3ab98fd725093c47ee657c43bec098 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 14 Nov 2022 15:02:57 +0000 Subject: [PATCH 03/54] Add button action for showing/hiding side panels --- .../src/builderStore/store/frontend.js | 1 + .../actions/UpdateSidePanel.svelte | 63 +++++++++++++++++++ .../ButtonActionEditor/actions/index.js | 1 + .../controls/ButtonActionEditor/index.js | 1 + .../controls/ButtonActionEditor/manifest.json | 6 ++ packages/client/manifest.json | 3 +- .../src/components/app/SidePanel.svelte | 6 -- packages/client/src/utils/buttonActions.js | 11 ++++ 8 files changed, 85 insertions(+), 7 deletions(-) create mode 100644 packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateSidePanel.svelte diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 1291f81294..4e8c480772 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -40,6 +40,7 @@ const INITIAL_FRONTEND_STATE = { messagePassing: false, continueIfAction: false, showNotificationAction: false, + sidePanel: false, }, errors: [], hasAppPackage: false, diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateSidePanel.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateSidePanel.svelte new file mode 100644 index 0000000000..1e8a5d6a9e --- /dev/null +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateSidePanel.svelte @@ -0,0 +1,63 @@ + + +
+ + + {/if} +
+ + diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js index 1ecd8f474a..842df25b0d 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js @@ -16,3 +16,4 @@ export { default as ExportData } from "./ExportData.svelte" export { default as ContinueIf } from "./ContinueIf.svelte" export { default as UpdateFieldValue } from "./UpdateFieldValue.svelte" export { default as ShowNotification } from "./ShowNotification.svelte" +export { default as UpdateSidePanel } from "./UpdateSidePanel.svelte" diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/index.js b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/index.js index 8fc7563526..ea6cc4ed37 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/index.js +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/index.js @@ -1,6 +1,7 @@ import * as ActionComponents from "./actions" import { get } from "svelte/store" import { store } from "builderStore" +// @ts-ignore import ActionDefinitions from "./manifest.json" // Defines which actions are available to configure in the front end. diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json index 5d11a27636..40ef31ff40 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json @@ -116,6 +116,12 @@ "type": "application", "component": "ShowNotification", "dependsOnFeature": "showNotificationAction" + }, + { + "name": "Update Side Panel", + "type": "application", + "component": "UpdateSidePanel", + "dependsOnFeature": "sidePanel" } ] } \ No newline at end of file diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 4e4e84c9f3..edd2b9804d 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -9,7 +9,8 @@ "messagePassing": true, "rowSelection": true, "continueIfAction": true, - "showNotificationAction": true + "showNotificationAction": true, + "sidePanel": true }, "layout": { "name": "Layout", diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte index 655b3d5d3b..b181c70c8d 100644 --- a/packages/client/src/components/app/SidePanel.svelte +++ b/packages/client/src/components/app/SidePanel.svelte @@ -43,12 +43,6 @@ >
-
- - -
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateSidePanel.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenSidePanel.svelte similarity index 60% rename from packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateSidePanel.svelte rename to packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenSidePanel.svelte index 1e8a5d6a9e..eb0c7b4db6 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateSidePanel.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenSidePanel.svelte @@ -1,22 +1,10 @@
- - - {/if} + +