CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-15 08:47:37 +12:00
Code Issues Projects Releases Wiki Activity

Update style section to render properly in new layout

Browse source
This commit is contained in:
Andrew Kingston 2023-03-09 08:51:43 +00:00
parent 1508d4aea3
commit f790c58d97
3 changed files with 15 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte
View file

@ -27,7 +27,6 @@
<StyleSection <StyleSection
{style} {style}
name={style.label} name={style.label}
columns={style.columns}
properties={style.settings} properties={style.settings}
{componentInstance} {componentInstance}
{bindings} {bindings}

31
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte
View file

@ -4,7 +4,6 @@
import { store } from "builderStore" import { store } from "builderStore"
export let name export let name
export let columns
export let properties export let properties
export let componentInstance export let componentInstance
export let bindings = [] export let bindings = []
@ -34,27 +33,27 @@
</script> </script>
<DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}> <DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}>
<div class="group-content" style="grid-template-columns: {columns || '1fr'}"> <div class="styles">
{#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)} {#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
<div style="grid-column: {prop.column || 'auto'}"> <PropertyControl
<PropertyControl label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`} control={prop.control}
control={prop.control} key={prop.key}
key={prop.key} value={style[prop.key]}
value={style[prop.key]} onChange={val => updateStyle(prop.key, val)}
onChange={val => updateStyle(prop.key, val)} props={getControlProps(prop)}
props={getControlProps(prop)} {bindings}
{bindings} />
/>
</div>
{/each} {/each}
</div> </div>
</DetailSummary> </DetailSummary>
<style> <style>
.group-content { .styles {
display: grid; display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: var(--spacing-l); gap: 8px;
} }
</style> </style>

5
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js
View file

@ -3,7 +3,6 @@ import ColorPicker from "components/design/settings/controls/ColorPicker.svelte"
export const margin = { export const margin = {
label: "Margin", label: "Margin",
columns: "1fr 1fr",
settings: [ settings: [
{ {
label: "Top", label: "Top",
@ -90,7 +89,6 @@ export const margin = {
export const padding = { export const padding = {
label: "Padding", label: "Padding",
columns: "1fr 1fr",
settings: [ settings: [
{ {
label: "Top", label: "Top",
@ -177,7 +175,6 @@ export const padding = {
export const size = { export const size = {
label: "Size", label: "Size",
columns: "1fr 1fr",
settings: [ settings: [
{ {
label: "Width", label: "Width",
@ -196,7 +193,6 @@ export const size = {
export const background = { export const background = {
label: "Background", label: "Background",
columns: "auto 1fr",
settings: [ settings: [
{ {
label: "Color", label: "Color",
@ -285,7 +281,6 @@ export const background = {
export const border = { export const border = {
label: "Border", label: "Border",
columns: "1fr 1fr",
settings: [ settings: [
{ {
label: "Color", label: "Color",