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

Fix instance name on layouts

This commit is contained in:
Andrew Kingston 2021-06-23 12:26:46 +01:00
parent 997efa62b3
commit d7cc6836a9
7 changed files with 61 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
View File

@ -87,14 +87,16 @@
</script>
<DetailSummary name="General" collapsible={false}>
<PropertyControl
bindable={false}
control={Input}
label="Name"
key="_instanceName"
value={componentInstance._instanceName}
onChange={val => updateProp("_instanceName", val)}
/>
{#if !componentInstance._component.endsWith("/layout")}
<PropertyControl
bindable={false}
control={Input}
label="Name"
key="_instanceName"
value={componentInstance._instanceName}
onChange={val => 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}
<div class="text">This component doesn't have any additional settings.</div>
{/if}
{#if componentDefinition?.info}
<div class="text">

6
packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
View File

@ -1,5 +1,5 @@
<script>
import PropertyGroup from "./PropertyControls/PropertyGroup.svelte"
import StyleSection from "./StyleSection.svelte"
import * as ComponentStyles from "./componentStyles"
export let componentDefinition
@ -23,10 +23,10 @@
{#if styles?.length > 0}
{#each styles as style}
<PropertyGroup
<StyleSection
{style}
name={style.label}
inline={style.inline}
columns={style.columns}
properties={style.settings}
{componentInstance}
/>

34
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte → packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte
View File

@ -1,10 +1,10 @@
<script>
import PropertyControl from "./PropertyControl.svelte"
import PropertyControl from "./PropertyControls/PropertyControl.svelte"
import { DetailSummary } from "@budibase/bbui"
import { store } from "builderStore"
export let name
export let inline = false
export let columns
export let properties
export let componentInstance
@ -25,31 +25,27 @@
</script>
<DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}>
<div class="group-content" class:inline>
<div class="group-content" style="grid-template-columns: {columns || '1fr'}">
{#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
<PropertyControl
bindable={false}
label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
control={prop.control}
key={prop.key}
value={style[prop.key]}
onChange={val => store.actions.components.updateStyle(prop.key, val)}
props={getControlProps(prop)}
/>
<div style="grid-column: {prop.column || 'auto'}">
<PropertyControl
bindable={false}
label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
control={prop.control}
key={prop.key}
value={style[prop.key]}
onChange={val => store.actions.components.updateStyle(prop.key, val)}
props={getControlProps(prop)}
/>
</div>
{/each}
</div>
</DetailSummary>
<style>
.group-content {
display: flex;
flex-direction: column;
justify-content: flex-start;
display: grid;
align-items: stretch;
gap: var(--spacing-l);
}
.inline {
display: grid;
grid-template-columns: 1fr 1fr;
}
</style>

37
packages/builder/src/components/design/PropertiesPanel/componentStyles.js
View File

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

1
packages/server/src/api/controllers/layout.js
View File

@ -14,6 +14,7 @@ exports.save = async function (ctx) {
...EMPTY_LAYOUT,
...layout,
}
layout.props._instanceName = layout.name
}
layout._id = layout._id || generateLayoutID()

2
packages/server/src/constants/layouts.js
View File

@ -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: [
{

25
packages/standard-components/manifest.json
View File

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