tsai
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 3
Code Issues Projects Releases Wiki Activity
Browse Source

Allow block ejection to properly apply all styles from blocks

pull/7427/head
Andrew Kingston 4 years ago
parent
ee484639b5
commit
27e44821e2
5 changed files with 253 additions and 237 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      packages/client/src/components/Block.svelte
  2. 8
      packages/client/src/components/BlockComponent.svelte
  3. 205
      packages/client/src/components/app/blocks/CardsBlock.svelte
  4. 73
      packages/client/src/components/app/blocks/RepeaterBlock.svelte
  5. 184
      packages/client/src/components/app/blocks/TableBlock.svelte

20
packages/client/src/components/Block.svelte
View File

@ -4,6 +4,7 @@
import { blockStore } from "stores/blocks.js"
const component = getContext("component")
const { styleable } = getContext("sdk")
let structureLookupMap = {}
@ -18,8 +19,21 @@
}
const eject = () => {
// Start the new structure with the first top level component
// Start the new structure with the root component
let definition = structureLookupMap[$component.id][0]
// Copy styles from block to root component
definition._styles = {
...definition._styles,
normal: {
...definition._styles?.normal,
...$component.styles?.normal,
},
custom:
definition._styles?.custom || "" + $component.styles?.custom || "",
}
// Create component tree
attachChildren(definition, structureLookupMap)
builderStore.actions.ejectBlock($component.id, definition)
}
@ -73,4 +87,6 @@
})
</script>
<slot />
<div use:styleable={$component.styles}>
<slot />
</div>

8
packages/client/src/components/BlockComponent.svelte
View File

@ -7,7 +7,6 @@
export let type
export let props
export let styles
export let css
export let context
export let order = 0
export let containsSlot = false
@ -27,12 +26,7 @@
_component: `@budibase/standard-components/${type}`,
_id: id,
_instanceName: type[0].toUpperCase() + type.slice(1),
_styles: {
normal: {
...styles,
},
custom: css,
},
_styles: styles,
_containsSlot: containsSlot,
...props,
}

205
packages/client/src/components/app/blocks/CardsBlock.svelte
View File

@ -2,7 +2,6 @@
import { getContext } from "svelte"
import Block from "components/Block.svelte"
import BlockComponent from "components/BlockComponent.svelte"
import { Heading } from "@budibase/bbui"
import { makePropSafe as safe } from "@budibase/string-templates"
import { enrichSearchColumns, enrichFilter } from "utils/blocks.js"
@ -31,9 +30,7 @@
export let cardButtonOnClick
export let linkColumn
const { fetchDatasourceSchema, styleable } = getContext("sdk")
const context = getContext("context")
const component = getContext("component")
const { fetchDatasourceSchema } = getContext("sdk")
let formId
let dataProviderId
@ -84,126 +81,132 @@
{#if schemaLoaded}
<Block>
<div use:styleable={$component.styles}>
<BlockComponent
type="form"
bind:id={formId}
props={{ dataSource, disableValidation: true }}
>
{#if title || enrichedSearchColumns?.length || showTitleButton}
<BlockComponent
type="form"
bind:id={formId}
props={{ dataSource, disableValidation: true }}
>
{#if title || enrichedSearchColumns?.length || showTitleButton}
<BlockComponent
type="container"
props={{
direction: "row",
hAlign: "stretch",
vAlign: "middle",
gap: "M",
wrap: true,
}}
styles={{
normal: {
"margin-bottom": "20px",
},
}}
order={0}
>
<BlockComponent
type="heading"
props={{
text: title,
}}
order={0}
/>
<BlockComponent
type="container"
props={{
direction: "row",
hAlign: "stretch",
hAlign: "left",
vAlign: "middle",
gap: "M",
wrap: true,
}}
styles={{
"margin-bottom": "20px",
}}
order={0}
order={1}
>
<BlockComponent
type="heading"
props={{
text: title,
}}
order={0}
/>
<BlockComponent
type="container"
props={{
direction: "row",
hAlign: "left",
vAlign: "middle",
gap: "M",
wrap: true,
}}
order={1}
>
{#if enrichedSearchColumns?.length}
{#each enrichedSearchColumns as column, idx}
<BlockComponent
type={column.componentType}
props={{
field: column.name,
placeholder: column.name,
text: column.name,
autoWidth: true,
}}
order={idx}
styles={{
width: "192px",
}}
/>
{/each}
{/if}
{#if showTitleButton}
{#if enrichedSearchColumns?.length}
{#each enrichedSearchColumns as column, idx}
<BlockComponent
type="button"
type={column.componentType}
props={{
onClick: titleButtonAction,
text: titleButtonText,
type: "cta",
field: column.name,
placeholder: column.name,
text: column.name,
autoWidth: true,
}}
order={idx}
styles={{
normal: {
width: "192px",
},
}}
order={enrichedSearchColumns?.length ?? 0}
/>
{/if}
</BlockComponent>
{/each}
{/if}
{#if showTitleButton}
<BlockComponent
type="button"
props={{
onClick: titleButtonAction,
text: titleButtonText,
type: "cta",
}}
order={enrichedSearchColumns?.length ?? 0}
/>
{/if}
</BlockComponent>
{/if}
</BlockComponent>
{/if}
<BlockComponent
type="dataprovider"
bind:id={dataProviderId}
props={{
dataSource,
filter: enrichedFilter,
sortColumn,
sortOrder,
paginate,
limit,
}}
order={1}
>
<BlockComponent
type="dataprovider"
bind:id={dataProviderId}
type="repeater"
bind:id={repeaterId}
context="repeater"
props={{
dataSource,
filter: enrichedFilter,
sortColumn,
sortOrder,
paginate,
limit,
dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
direction: "row",
hAlign: "stretch",
vAlign: "top",
gap: "M",
noRowsMessage: "No rows found",
}}
order={1}
styles={{
custom: `display: grid;\ngrid-template-columns: repeat(auto-fill, minmax(min(${cardWidth}px, 100%), 1fr));`,
}}
order={0}
>
<BlockComponent
type="repeater"
bind:id={repeaterId}
context="repeater"
type="spectrumcard"
props={{
dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
direction: "row",
hAlign: "stretch",
vAlign: "top",
gap: "M",
noRowsMessage: "No rows found",
title: cardTitle,
subtitle: cardSubtitle,
description: cardDescription,
imageURL: cardImageURL,
horizontal: cardHorizontal,
showButton: showCardButton,
buttonText: cardButtonText,
buttonOnClick: cardButtonOnClick,
linkURL: fullCardURL,
linkPeek: cardPeek,
}}
css={`display: grid;\ngrid-template-columns: repeat(auto-fill, minmax(min(${cardWidth}px, 100%), 1fr));`}
order={0}
>
<BlockComponent
type="spectrumcard"
props={{
title: cardTitle,
subtitle: cardSubtitle,
description: cardDescription,
imageURL: cardImageURL,
horizontal: cardHorizontal,
showButton: showCardButton,
buttonText: cardButtonText,
buttonOnClick: cardButtonOnClick,
linkURL: fullCardURL,
linkPeek: cardPeek,
}}
styles={{
styles={{
normal: {
width: "auto",
}}
order={0}
/>
</BlockComponent>
},
}}
order={0}
/>
</BlockComponent>
</BlockComponent>
</div>
</BlockComponent>
</Block>
{/if}

73
packages/client/src/components/app/blocks/RepeaterBlock.svelte
View File

@ -17,46 +17,43 @@
export let vAlign
export let gap
let providerId
const component = getContext("component")
const { styleable } = getContext("sdk")
let providerId
</script>
<Block>
<div use:styleable={$component.styles}>
<BlockComponent
type="dataprovider"
context="provider"
bind:id={providerId}
props={{
dataSource,
filter,
sortColumn,
sortOrder,
limit,
paginate,
}}
>
{#if $component.empty}
<Placeholder />
{:else}
<BlockComponent
type="repeater"
context="repeater"
containsSlot
props={{
dataProvider: `{{ literal ${safe(providerId)} }}`,
noRowsMessage,
direction,
hAlign,
vAlign,
gap,
}}
>
<slot />
</BlockComponent>
{/if}
</BlockComponent>
</div>
<BlockComponent
type="dataprovider"
context="provider"
bind:id={providerId}
props={{
dataSource,
filter,
sortColumn,
sortOrder,
limit,
paginate,
}}
>
{#if $component.empty}
<Placeholder />
{:else}
<BlockComponent
type="repeater"
context="repeater"
containsSlot
props={{
dataProvider: `{{ literal ${safe(providerId)} }}`,
noRowsMessage,
direction,
hAlign,
vAlign,
gap,
}}
>
<slot />
</BlockComponent>
{/if}
</BlockComponent>
</Block>

184
packages/client/src/components/app/blocks/TableBlock.svelte
View File

@ -28,8 +28,7 @@
export let titleButtonURL
export let titleButtonPeek
const { fetchDatasourceSchema, styleable } = getContext("sdk")
const component = getContext("component")
const { fetchDatasourceSchema } = getContext("sdk")
let formId
let dataProviderId
@ -62,109 +61,116 @@
{#if schemaLoaded}
<Block>
<div class={size} use:styleable={$component.styles}>
<BlockComponent
type="form"
bind:id={formId}
props={{ dataSource, disableValidation: true, editAutoColumns: true }}
>
{#if title || enrichedSearchColumns?.length || showTitleButton}
<BlockComponent
type="form"
bind:id={formId}
props={{
dataSource,
disableValidation: true,
editAutoColumns: true,
size,
}}
>
{#if title || enrichedSearchColumns?.length || showTitleButton}
<BlockComponent
type="container"
props={{
direction: "row",
hAlign: "stretch",
vAlign: "middle",
gap: "M",
wrap: true,
}}
styles={{
normal: {
"margin-bottom": "20px",
},
}}
order={0}
>
<BlockComponent
type="heading"
props={{
text: title,
}}
order={0}
/>
<BlockComponent
type="container"
props={{
direction: "row",
hAlign: "stretch",
vAlign: "middle",
hAlign: "left",
vAlign: "center",
gap: "M",
wrap: true,
}}
styles={{
"margin-bottom": "20px",
}}
order={0}
order={1}
>
<BlockComponent
type="heading"
props={{
text: title,
}}
order={0}
/>
<BlockComponent
type="container"
props={{
direction: "row",
hAlign: "left",
vAlign: "center",
gap: "M",
wrap: true,
}}
order={1}
>
{#if enrichedSearchColumns?.length}
{#each enrichedSearchColumns as column, idx}
<BlockComponent
type={column.componentType}
props={{
field: column.name,
placeholder: column.name,
text: column.name,
autoWidth: true,
}}
styles={{
width: "192px",
}}
order={idx}
/>
{/each}
{/if}
{#if showTitleButton}
{#if enrichedSearchColumns?.length}
{#each enrichedSearchColumns as column, idx}
<BlockComponent
type="button"
type={column.componentType}
props={{
onClick: titleButtonAction,
text: titleButtonText,
type: "cta",
field: column.name,
placeholder: column.name,
text: column.name,
autoWidth: true,
}}
order={enrichedSearchColumns?.length ?? 0}
styles={{
normal: {
width: "192px",
},
}}
order={idx}
/>
{/if}
</BlockComponent>
{/each}
{/if}
{#if showTitleButton}
<BlockComponent
type="button"
props={{
onClick: titleButtonAction,
text: titleButtonText,
type: "cta",
}}
order={enrichedSearchColumns?.length ?? 0}
/>
{/if}
</BlockComponent>
{/if}
</BlockComponent>
{/if}
<BlockComponent
type="dataprovider"
bind:id={dataProviderId}
props={{
dataSource,
filter: enrichedFilter,
sortColumn,
sortOrder,
paginate,
limit: rowCount,
}}
order={1}
>
<BlockComponent
type="dataprovider"
bind:id={dataProviderId}
type="table"
context="table"
props={{
dataSource,
filter: enrichedFilter,
sortColumn,
sortOrder,
paginate,
limit: rowCount,
dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
columns: tableColumns,
showAutoColumns,
rowCount,
quiet,
compact,
allowSelectRows,
size,
linkRows,
linkURL,
linkColumn,
linkPeek,
}}
order={1}
>
<BlockComponent
type="table"
context="table"
props={{
dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
columns: tableColumns,
showAutoColumns,
rowCount,
quiet,
compact,
allowSelectRows,
size,
linkRows,
linkURL,
linkColumn,
linkPeek,
}}
/>
</BlockComponent>
/>
</BlockComponent>
</div>
</BlockComponent>
</Block>
{/if}

Write Preview
Loading…
Cancel
Save