MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3316 from Budibase/tweaks 

Tweaks for Joe
This commit is contained in:
Andrew Kingston 2021-11-10 16:23:55 +00:00 committed by GitHub
parent 611337c140 862bf14268
commit 57038b83f3
8 changed files with 129 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/builder/src/builderStore/dataBinding.js
View File

@ -31,11 +31,11 @@ export const getBindableProperties = (asset, componentId) => {
const deviceBindings = getDeviceBindings()
const stateBindings = getStateBindings()
return [
...stateBindings,
...deviceBindings,
...urlBindings,
...contextBindings,
...urlBindings,
...stateBindings,
...userBindings,
...deviceBindings,
]
}

4
packages/builder/src/components/design/AppPreview/componentStructure.json
View File

@ -3,8 +3,8 @@
"name": "Blocks",
"icon": "Article",
"children": [
"tablewithsearch",
"cardlistwithsearch"
"tableblock",
"cardsblock"
]
},
"section",

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
View File

@ -27,7 +27,7 @@
if (!nested) {
return bindings
}
return [...(bindings || []), ...(componentBindings || [])]
return [...(componentBindings || []), ...(bindings || [])]
}
// Handle a value change of any type

69
packages/client/manifest.json
View File

@ -2595,6 +2595,11 @@
"key": "linkURL",
"label": "Link URL"
},
{
"type": "boolean",
"key": "linkPeek",
"label": "Open link in modal"
},
{
"type": "boolean",
"key": "horizontal",
@ -2617,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.",
@ -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"
}
]
},
@ -2759,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.",
@ -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"
}
]
}

40
packages/client/src/components/app/SpectrumCard.svelte
View File

@ -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)
}
</script>
<div
@ -37,16 +44,10 @@
<div class="spectrum-Card-header">
<div
class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS"
on:click={handleLink}
class:link={linkURL}
>
{#if linkURL}
{#if external}
<a href={linkURL}>{title || "Card Title"}</a>
{:else}
<a use:linkable href={linkURL}>{title || "Card Title"}</a>
{/if}
{:else}
{title || "Card Title"}
{/if}
</div>
</div>
{#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;

38
packages/client/src/components/app/blocks/CardListWithSearch.svelte → packages/client/src/components/app/blocks/CardsBlock.svelte
View File

@ -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 @@
<BlockComponent
type="button"
props={{
onClick: titleButtonOnClick,
onClick: titleButtonAction,
text: titleButtonText,
type: "cta",
}}
@ -137,6 +168,7 @@
>
<BlockComponent
type="repeater"
bind:id={repeaterId}
context="repeater"
props={{
dataProvider: `{{ literal [${dataProviderId}] }}`,
@ -162,6 +194,8 @@
showButton: showCardButton,
buttonText: cardButtonText,
buttonOnClick: cardButtonOnClick,
linkURL: fullCardURL,
linkPeek: cardPeek,
}}
styles={{
width: "auto",

14
packages/client/src/components/app/blocks/TableWithSearch.svelte → packages/client/src/components/app/blocks/TableBlock.svelte
View File

@ -22,7 +22,8 @@
export let linkPeek
export let showTitleButton
export let titleButtonText
export let titleButtonOnClick
export let titleButtonURL
export let titleButtonPeek
const { API, styleable } = getContext("sdk")
const context = getContext("context")
@ -41,6 +42,15 @@
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
$: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
$: titleButtonAction = [
{
"##eventHandlerType": "Navigate To",
parameters: {
peek: titleButtonPeek,
url: titleButtonURL,
},
},
]
// Enrich the default filter with the specified search fields
const enrichFilter = (filter, columns, formId) => {
@ -113,7 +123,7 @@
<BlockComponent
type="button"
props={{
onClick: titleButtonOnClick,
onClick: titleButtonAction,
text: titleButtonText,
type: "cta",
}}

4
packages/client/src/components/app/blocks/index.js
View File

@ -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"