diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte index 916120a0c6..7a5044cbe5 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte @@ -87,14 +87,16 @@ - updateProp("_instanceName", val)} - /> + {#if !componentInstance._component.endsWith("/layout")} + updateProp("_instanceName", val)} + /> + {/if} {#if settings && settings.length > 0} {#each settings as setting (`${componentInstance._id}-${setting.key}`)} {#if canRenderControl(setting)} @@ -114,8 +116,6 @@ /> {/if} {/each} - {:else} -
This component doesn't have any additional settings.
{/if} {#if componentDefinition?.info}
diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte index 74798d7012..639ac90586 100644 --- a/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte @@ -1,5 +1,5 @@ -
+
{#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)} - store.actions.components.updateStyle(prop.key, val)} - props={getControlProps(prop)} - /> +
+ store.actions.components.updateStyle(prop.key, val)} + props={getControlProps(prop)} + /> +
{/each}
diff --git a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js index 76c50302d5..450cd70de0 100644 --- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js +++ b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js @@ -83,7 +83,7 @@ export const layout = [ export const margin = { label: "Margin", - inline: true, + columns: "1fr 1fr", settings: [ { label: "Top", @@ -170,7 +170,7 @@ export const margin = { export const padding = { label: "Padding", - inline: true, + columns: "1fr 1fr", settings: [ { label: "Top", @@ -257,19 +257,19 @@ export const padding = { export const size = { label: "Size", - inline: true, + columns: "1fr 1fr", settings: [ { label: "Width", key: "width", control: Input, - placeholder: "px", + placeholder: "Auto", }, { label: "Height", key: "height", control: Input, - placeholder: "px", + placeholder: "Auto", }, ], } @@ -386,6 +386,8 @@ export const typography = [ export const background = { label: "Background", + inline: true, + columns: "auto 1fr", settings: [ { label: "Color", @@ -474,23 +476,13 @@ export const background = { export const border = { label: "Border", + columns: "auto 1fr", settings: [ { label: "Color", key: "border-color", control: ColorPicker, }, - { - label: "Radius", - key: "border-radius", - control: Select, - options: [ - { label: "Small", value: "0.25rem" }, - { label: "Medium", value: "0.5rem" }, - { label: "Large", value: "1rem" }, - { label: "Round", value: "100%" }, - ], - }, { label: "Width", key: "border-width", @@ -501,10 +493,23 @@ export const border = { { label: "Large", value: "4px" }, ], }, + { + label: "Radius", + key: "border-radius", + control: Select, + column: "1 / 3", + options: [ + { label: "Small", value: "0.25rem" }, + { label: "Medium", value: "0.5rem" }, + { label: "Large", value: "1rem" }, + { label: "Round", value: "100%" }, + ], + }, { label: "Shadow", key: "box-shadow", control: Select, + column: "1 / 3", options: [ { label: "Small", diff --git a/packages/server/src/api/controllers/layout.js b/packages/server/src/api/controllers/layout.js index 2887c6984a..c3cae1b6a7 100644 --- a/packages/server/src/api/controllers/layout.js +++ b/packages/server/src/api/controllers/layout.js @@ -14,6 +14,7 @@ exports.save = async function (ctx) { ...EMPTY_LAYOUT, ...layout, } + layout.props._instanceName = layout.name } layout._id = layout._id || generateLayoutID() diff --git a/packages/server/src/constants/layouts.js b/packages/server/src/constants/layouts.js index ffd04a40d8..89bb3ad787 100644 --- a/packages/server/src/constants/layouts.js +++ b/packages/server/src/constants/layouts.js @@ -57,6 +57,7 @@ const BASE_LAYOUTS = [ name: "Navigation Layout", props: { _id: "4f569166-a4f3-47ea-a09e-6d218c75586f", + _instanceName: "Navigation Layout", _component: "@budibase/standard-components/layout", _children: [ { @@ -102,6 +103,7 @@ const BASE_LAYOUTS = [ name: "Empty Layout", props: { _id: "3723ffa1-f9e0-4c05-8013-98195c788ed6", + _instanceName: "Empty Layout", _component: "@budibase/standard-components/layout", _children: [ { diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index 459617cf43..6f4bca50f2 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -5,7 +5,7 @@ "icon": "Sandbox", "hasChildren": true, "styleable": true, - "illegalChildren": [], + "styles": ["padding", "background"], "settings": [ { "type": "text", @@ -62,6 +62,7 @@ "icon": "Sandbox", "hasChildren": true, "showSettingsBar": true, + "styles": ["padding", "size", "background", "border", "shadow"], "settings": [ { "type": "select", @@ -171,8 +172,7 @@ ], "defaultValue": "shrink" } - ], - "styles": ["padding", "size", "background", "border", "shadow"] + ] }, "section": { "name": "Section", @@ -679,7 +679,6 @@ "name": "Bar Chart", "description": "Bar chart", "icon": "GraphBarVertical", - "styleable": true, "illegalChildren": ["section"], "settings": [ { @@ -780,7 +779,6 @@ "name": "Line Chart", "description": "Line chart", "icon": "GraphTrend", - "styleable": true, "illegalChildren": ["section"], "settings": [ { @@ -882,7 +880,6 @@ "name": "Area Chart", "description": "Line chart", "icon": "GraphAreaStacked", - "styleable": true, "illegalChildren": ["section"], "settings": [ { @@ -996,7 +993,6 @@ "name": "Pie Chart", "description": "Pie chart", "icon": "GraphPie", - "styleable": true, "illegalChildren": ["section"], "settings": [ { @@ -1074,7 +1070,6 @@ "name": "Donut Chart", "description": "Donut chart", "icon": "GraphDonut", - "styleable": true, "illegalChildren": ["section"], "settings": [ { @@ -1152,7 +1147,6 @@ "name": "Candlestick Chart", "description": "Candlestick chart", "icon": "GraphBarVerticalStacked", - "styleable": true, "illegalChildren": ["section"], "settings": [ { @@ -1665,7 +1659,6 @@ "table": { "name": "Table", "icon": "Table", - "styleable": true, "illegalChildren": ["section"], "hasChildren": true, "showEmptyState": false, @@ -1721,11 +1714,6 @@ } ] }, - { - "type": "boolean", - "label": "Quiet", - "key": "quiet" - }, { "type": "multifield", "label": "Columns", @@ -1735,7 +1723,12 @@ }, { "type": "boolean", - "label": "Auto Cols.", + "label": "Quiet", + "key": "quiet" + }, + { + "type": "boolean", + "label": "Auto Columns", "key": "showAutoColumns", "defaultValue": false }