diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 60279aa9a1..bfe5507256 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -37,16 +37,26 @@ //use for getting controls for each component property c => c._component === componentInstance._component ) || {} + + let panelDefinition = {} - $: panelDefinition = componentPropDefinition.properties - ? componentPropDefinition.properties[selectedCategory.value] - : {} + $: { + if(componentPropDefinition.properties) { + if(selectedCategory.value === "design") { + panelDefinition = componentPropDefinition.properties["design"] + }else{ + let panelDef = componentPropDefinition.properties["settings"] + if($store.currentFrontEndType === "page" && $store.currentView !== "component") { + panelDefinition = [...page,...panelDef] + }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") { + panelDefinition = [...screen, ...panelDef] + }else { + panelDefinition = panelDef + } + } + } + } - // SCREEN PROPS ============================================= - $: screen_props = - $store.currentFrontEndType === "page" - ? getProps($store.currentPreviewItem, ["name", "favicon"]) - : getProps($store.currentPreviewItem, ["name", "description", "route"]) const onStyleChanged = store.setComponentStyle const onPropChanged = store.setComponentProp @@ -106,12 +116,10 @@ height: 100%; display: flex; flex-direction: column; - /* Merge Check */ overflow-x: hidden; overflow-y: hidden; padding: 20px; box-sizing: border-box; - /* Merge Check */ } .title > div:nth-child(1) { diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 603e348e18..afd3a06694 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -187,6 +187,17 @@ export default { ], }, }, + { + _component: "@budibase/standard-components/image", + name: "Image", + description: "A basic component for displaying images", + icon: "ri-image-fill", + children: [], + properties: { + design: { ...all }, + settings: [{ label: "URL", key: "url", control: Input }], + }, + }, { _component: "@budibase/standard-components/icon", name: "Icon", diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte index ab515551dd..6a9788458e 100644 --- a/packages/standard-components/src/DataForm.svelte +++ b/packages/standard-components/src/DataForm.svelte @@ -87,7 +87,6 @@ .form-content { margin-bottom: 20px; - } .input { diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte index c0db923d58..90716383da 100644 --- a/packages/standard-components/src/DataTable.svelte +++ b/packages/standard-components/src/DataTable.svelte @@ -65,7 +65,7 @@ } thead { - background: #393C44; + background: #393c44; border: 1px solid #ccc; height: 40px; text-align: left; @@ -87,7 +87,7 @@ tbody tr { border-bottom: 1px solid #ccc; transition: 0.3s background-color; - color: #393C44; + color: #393c44; font-size: 14px; height: 40px; } diff --git a/packages/standard-components/src/Image.svelte b/packages/standard-components/src/Image.svelte index 84f515b287..cd204f5fc2 100644 --- a/packages/standard-components/src/Image.svelte +++ b/packages/standard-components/src/Image.svelte @@ -7,6 +7,8 @@ export let height export let width + export let _bb + $: style = buildStyle({ height, width })