From 2b59d44e06762b3ed05e264726fb40a65e909407 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 10 Nov 2021 14:57:46 +0000 Subject: [PATCH 1/3] Change bindable properties order --- packages/builder/src/builderStore/dataBinding.js | 6 +++--- .../PropertiesPanel/PropertyControls/PropertyControl.svelte | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 165ed37fbb..0551997b7b 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -31,11 +31,11 @@ export const getBindableProperties = (asset, componentId) => { const deviceBindings = getDeviceBindings() const stateBindings = getStateBindings() return [ - ...stateBindings, - ...deviceBindings, - ...urlBindings, ...contextBindings, + ...urlBindings, + ...stateBindings, ...userBindings, + ...deviceBindings, ] } diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte index a6086bbbc6..72b54f3b96 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte @@ -27,7 +27,7 @@ if (!nested) { return bindings } - return [...(bindings || []), ...(componentBindings || [])] + return [...(componentBindings || []), ...(bindings || [])] } // Handle a value change of any type From 5302c85f49e0ec4efbb67b44c4b60d9d7bf52da6 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 10 Nov 2021 15:52:36 +0000 Subject: [PATCH 2/3] Refactor all block link settings to be URLs rather than onclick handlers. Add settings for linking card titles in card list blocks --- packages/client/manifest.json | 61 ++++++++++++++++--- .../src/components/app/SpectrumCard.svelte | 42 ++++++------- .../app/blocks/CardListWithSearch.svelte | 38 +++++++++++- .../app/blocks/TableWithSearch.svelte | 14 ++++- 4 files changed, 117 insertions(+), 38 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index e75150ca42..2c49d7d524 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -2595,6 +2595,11 @@ "key": "linkURL", "label": "Link URL" }, + { + "type": "boolean", + "key": "linkPeek", + "label": "Open link in modal" + }, { "type": "boolean", "key": "horizontal", @@ -2730,18 +2735,23 @@ { "type": "boolean", "key": "showTitleButton", - "label": "Show button", + "label": "Show link button", "defaultValue": false }, + { + "type": "boolean", + "label": "Open link in modal", + "key": "titleButtonPeek" + }, { "type": "text", "key": "titleButtonText", "label": "Button text" }, { - "type": "event", - "label": "Button action", - "key": "titleButtonOnClick" + "type": "url", + "label": "Button link", + "key": "titleButtonURL" } ] }, @@ -2838,7 +2848,22 @@ "key": "cardImageURL", "label": "Image URL", "nested": true - + }, + { + "type": "boolean", + "key": "linkCardTitle", + "label": "Link card title" + }, + { + "type": "boolean", + "key": "cardPeek", + "label": "Open link in modal" + }, + { + "type": "url", + "label": "Link screen", + "key": "cardURL", + "nested": true }, { "type": "boolean", @@ -2855,7 +2880,6 @@ "key": "cardButtonText", "label": "Button text", "nested": true - }, { "type": "event", @@ -2872,7 +2896,12 @@ { "type": "boolean", "key": "showTitleButton", - "label": "Show button" + "label": "Show link button" + }, + { + "type": "boolean", + "label": "Open link in modal", + "key": "titleButtonPeek" }, { "type": "text", @@ -2880,9 +2909,21 @@ "label": "Button text" }, { - "type": "event", - "label": "Button action", - "key": "titleButtonOnClick" + "type": "url", + "label": "Button link", + "key": "titleButtonURL" + } + ] + }, + { + "section": true, + "name": "Advanced", + "settings": [ + { + "type": "field", + "label": "ID column for linking (appended to URL)", + "key": "linkColumn", + "placeholder": "Default" } ] } diff --git a/packages/client/src/components/app/SpectrumCard.svelte b/packages/client/src/components/app/SpectrumCard.svelte index d8353eea7e..7aa2990ae4 100644 --- a/packages/client/src/components/app/SpectrumCard.svelte +++ b/packages/client/src/components/app/SpectrumCard.svelte @@ -8,15 +8,22 @@ export let description export let imageURL export let linkURL + export let linkPeek export let horizontal export let showButton export let buttonText export let buttonOnClick - const { styleable, linkable } = getContext("sdk") + const { styleable, routeStore } = getContext("sdk") const component = getContext("component") - $: external = linkURL && !linkURL.startsWith("/") + const handleLink = e => { + if (!linkURL) { + return + } + e.preventDefault() + routeStore.actions.navigate(linkURL, linkPeek) + }
- {#if linkURL} - {#if external} - {title || "Card Title"} - {:else} - {title || "Card Title"} - {/if} - {:else} - {title || "Card Title"} - {/if} + {title || "Card Title"}
{#if subtitle} @@ -88,11 +89,12 @@ .spectrum-Card-container { padding: var(--spectrum-global-dimension-size-50) 0; } - .spectrum-Card-title :global(a) { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - width: 100%; + .spectrum-Card-title.link { + transition: color 130ms ease-in-out; + } + .spectrum-Card-title.link:hover { + cursor: pointer; + color: var(--spectrum-link-primary-m-text-color-hover); } .spectrum-Card-subtitle { text-overflow: ellipsis; @@ -103,14 +105,6 @@ word-wrap: anywhere; white-space: pre-wrap; } - a { - transition: color 130ms ease-in-out; - color: var(--spectrum-alias-text-color); - } - a:hover { - color: var(--spectrum-link-primary-m-text-color-hover); - } - .horizontal .spectrum-Card-coverPhoto { flex: 0 0 160px; height: auto; diff --git a/packages/client/src/components/app/blocks/CardListWithSearch.svelte b/packages/client/src/components/app/blocks/CardListWithSearch.svelte index 7c9a067bd6..9eccb2b2d1 100644 --- a/packages/client/src/components/app/blocks/CardListWithSearch.svelte +++ b/packages/client/src/components/app/blocks/CardListWithSearch.svelte @@ -14,15 +14,20 @@ export let limit export let showTitleButton export let titleButtonText - export let titleButtonOnClick + export let titleButtonURL + export let titleButtonPeek export let cardTitle export let cardSubtitle export let cardDescription export let cardImageURL + export let linkCardTitle + export let cardURL + export let cardPeek export let cardHorizontal export let showCardButton export let cardButtonText export let cardButtonOnClick + export let linkColumn const { API, styleable } = getContext("sdk") const context = getContext("context") @@ -37,11 +42,27 @@ let formId let dataProviderId + let repeaterId let schema $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema) $: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId) $: cardWidth = cardHorizontal ? 420 : 300 + $: fullCardURL = buildFullCardUrl( + linkCardTitle, + cardURL, + repeaterId, + linkColumn + ) + $: titleButtonAction = [ + { + "##eventHandlerType": "Navigate To", + parameters: { + peek: titleButtonPeek, + url: titleButtonURL, + }, + }, + ] // Enrich the default filter with the specified search fields const enrichFilter = (filter, columns, formId) => { @@ -75,6 +96,16 @@ return enrichedColumns.slice(0, 3) } + // Builds a full details page URL for the card title + const buildFullCardUrl = (link, url, repeaterId, linkColumn) => { + if (!link || !url || !repeaterId) { + return null + } + const col = linkColumn || "_id" + const split = url.split("/:") + return `${split[0]}/{{ [${repeaterId}].[${col}] }}` + } + // Load the datasource schema on mount so we can determine column types onMount(async () => { if (dataSource) { @@ -114,7 +145,7 @@ { @@ -113,7 +123,7 @@ Date: Wed, 10 Nov 2021 15:56:51 +0000 Subject: [PATCH 3/3] Rename blocks to be shorter --- .../components/design/AppPreview/componentStructure.json | 4 ++-- packages/client/manifest.json | 8 ++++---- .../{CardListWithSearch.svelte => CardsBlock.svelte} | 0 .../blocks/{TableWithSearch.svelte => TableBlock.svelte} | 0 packages/client/src/components/app/blocks/index.js | 4 ++-- 5 files changed, 8 insertions(+), 8 deletions(-) rename packages/client/src/components/app/blocks/{CardListWithSearch.svelte => CardsBlock.svelte} (100%) rename packages/client/src/components/app/blocks/{TableWithSearch.svelte => TableBlock.svelte} (100%) diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json index 9a87bb5761..c4fd33b084 100644 --- a/packages/builder/src/components/design/AppPreview/componentStructure.json +++ b/packages/builder/src/components/design/AppPreview/componentStructure.json @@ -3,8 +3,8 @@ "name": "Blocks", "icon": "Article", "children": [ - "tablewithsearch", - "cardlistwithsearch" + "tableblock", + "cardsblock" ] }, "section", diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 2c49d7d524..4a50a11fce 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -2622,9 +2622,9 @@ } ] }, - "tablewithsearch": { + "tableblock": { "block": true, - "name": "Table with search", + "name": "Table block", "icon": "Table", "styles": ["size"], "info": "Only the first 3 search columns will be used.", @@ -2769,9 +2769,9 @@ } ] }, - "cardlistwithsearch": { + "cardsblock": { "block": true, - "name": "Card list with search", + "name": "Cards block", "icon": "Table", "styles": ["size"], "info": "Only the first 3 search columns will be used.", diff --git a/packages/client/src/components/app/blocks/CardListWithSearch.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte similarity index 100% rename from packages/client/src/components/app/blocks/CardListWithSearch.svelte rename to packages/client/src/components/app/blocks/CardsBlock.svelte diff --git a/packages/client/src/components/app/blocks/TableWithSearch.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte similarity index 100% rename from packages/client/src/components/app/blocks/TableWithSearch.svelte rename to packages/client/src/components/app/blocks/TableBlock.svelte diff --git a/packages/client/src/components/app/blocks/index.js b/packages/client/src/components/app/blocks/index.js index 7d0d15080a..af238b901d 100644 --- a/packages/client/src/components/app/blocks/index.js +++ b/packages/client/src/components/app/blocks/index.js @@ -1,2 +1,2 @@ -export { default as tablewithsearch } from "./TableWithSearch.svelte" -export { default as cardlistwithsearch } from "./CardListWithSearch.svelte" +export { default as tableblock } from "./TableBlock.svelte" +export { default as cardsblock } from "./CardsBlock.svelte"