From d36fef5c86ae9337d1ab0e9299d97adf394c2e93 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 14 Aug 2024 10:09:59 +0100 Subject: [PATCH] Fix indicators around modals and side panels when used inside grids --- packages/client/manifest.json | 88 +++++++++++++++---- .../client/src/components/Component.svelte | 3 +- .../app/container/GridContainer.svelte | 2 +- packages/client/src/utils/grid.js | 28 +++++- 4 files changed, 99 insertions(+), 22 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index f232318c53..9851fd1155 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -18,14 +18,37 @@ "numberLike": { "supported": ["number", "boolean"], "partialSupport": [ - { "type": "longform", "message": "stringAsNumber" }, - { "type": "string", "message": "stringAsNumber" }, - { "type": "bigint", "message": "stringAsNumber" }, - { "type": "options", "message": "stringAsNumber" }, - { "type": "formula", "message": "stringAsNumber" }, - { "type": "datetime", "message": "dateAsNumber" } + { + "type": "longform", + "message": "stringAsNumber" + }, + { + "type": "string", + "message": "stringAsNumber" + }, + { + "type": "bigint", + "message": "stringAsNumber" + }, + { + "type": "options", + "message": "stringAsNumber" + }, + { + "type": "formula", + "message": "stringAsNumber" + }, + { + "type": "datetime", + "message": "dateAsNumber" + } ], - "unsupported": [{ "type": "json", "message": "jsonPrimitivesOnly" }] + "unsupported": [ + { + "type": "json", + "message": "jsonPrimitivesOnly" + } + ] }, "stringLike": { "supported": [ @@ -37,19 +60,47 @@ "boolean", "datetime" ], - "unsupported": [{ "type": "json", "message": "jsonPrimitivesOnly" }] + "unsupported": [ + { + "type": "json", + "message": "jsonPrimitivesOnly" + } + ] }, "datetimeLike": { "supported": ["datetime"], "partialSupport": [ - { "type": "longform", "message": "stringAsDate" }, - { "type": "string", "message": "stringAsDate" }, - { "type": "options", "message": "stringAsDate" }, - { "type": "formula", "message": "stringAsDate" }, - { "type": "bigint", "message": "stringAsDate" }, - { "type": "number", "message": "numberAsDate" } + { + "type": "longform", + "message": "stringAsDate" + }, + { + "type": "string", + "message": "stringAsDate" + }, + { + "type": "options", + "message": "stringAsDate" + }, + { + "type": "formula", + "message": "stringAsDate" + }, + { + "type": "bigint", + "message": "stringAsDate" + }, + { + "type": "number", + "message": "numberAsDate" + } ], - "unsupported": [{ "type": "json", "message": "jsonPrimitivesOnly" }] + "unsupported": [ + { + "type": "json", + "message": "jsonPrimitivesOnly" + } + ] } }, "layout": { @@ -4292,7 +4343,10 @@ "label": "High", "value": 3136 }, - { "label": "Custom", "value": "custom" } + { + "label": "Custom", + "value": "custom" + } ] }, { @@ -7148,6 +7202,7 @@ "name": "Side Panel", "icon": "RailRight", "hasChildren": true, + "ignoresLayout": true, "illegalChildren": ["section", "sidepanel", "modal"], "showEmptyState": false, "draggable": false, @@ -7171,6 +7226,7 @@ "icon": "MBox", "hasChildren": true, "illegalChildren": ["section", "modal", "sidepanel"], + "ignoresLayout": true, "showEmptyState": false, "draggable": false, "info": "Modals are hidden by default. They will only be revealed when triggered by the 'Open Modal' action.", diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index 0dcf93a5dc..12dfaaf6d3 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -209,8 +209,9 @@ // Metadata to pass into grid action to apply CSS let gridMetadata = memo() $: gridMetadata.set({ - active: + insideGrid: parent?._component.endsWith("/container") && parent?.layout === "grid", + ignoresLayout: definition.ignoresLayout === true, id, interactive, styles: normalStyles, diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte index 088c41b57b..1f68926658 100644 --- a/packages/client/src/components/app/container/GridContainer.svelte +++ b/packages/client/src/components/app/container/GridContainer.svelte @@ -201,7 +201,7 @@ } /* Ensure all top level children have grid styles applied */ - .grid :global(> .component) { + .grid :global(> .component:not(.ignores-layout)) { display: flex; overflow: auto; pointer-events: all; diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js index afce01bbaa..b9b08a28a6 100644 --- a/packages/client/src/utils/grid.js +++ b/packages/client/src/utils/grid.js @@ -59,9 +59,24 @@ export const gridLayout = (node, metadata) => { // Applies the required listeners, CSS and classes to a component DOM node const applyMetadata = metadata => { - const { id, styles, interactive, errored, definition, draggable, active } = - metadata - if (!active) { + const { + id, + styles, + interactive, + errored, + definition, + draggable, + insideGrid, + ignoresLayout, + } = metadata + if (!insideGrid) { + return + } + + // If this component ignores layout, flag it as such so that we can avoid + // selecting it later + if (ignoresLayout) { + node.classList.add("ignores-layout") return } @@ -143,7 +158,12 @@ export const gridLayout = (node, metadata) => { // Removes the previously set up listeners const removeListeners = () => { - node.removeEventListener("click", selectComponent, false) + // By checking if this is defined we can avoid trying to remove event + // listeners on every component + if (selectComponent) { + node.removeEventListener("click", selectComponent, false) + selectComponent = null + } } applyMetadata(metadata)