Merge branch 'master' of github.com:Budibase/budibase

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) {

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

packages/standard-components/src/DataForm.svelte

@@ -87,7 +87,6 @@
 
   .form-content {
     margin-bottom: 20px;
-
   }
 
   .input {

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

packages/standard-components/src/Image.svelte

@@ -7,6 +7,8 @@
   export let height
   export let width
 
+  export let _bb
+
   $: style = buildStyle({ height, width })
 </script>