Merge pull request #354 from Budibase/Props-update-Shadow-fix,-rotate-improved,-border-updated

Props update, including flex, border, shadow, rotate

packages/builder/src/components/common/Inputs/InputGroup.svelte

@@ -19,9 +19,10 @@
     onChange(_value)
   }
 
-  $: displayValues = value && suffix
-    ? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
-    : value || []
+  $: displayValues =
+    value && suffix
+      ? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
+      : value || []
 </script>
 
 <div class="input-container">

packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte

@@ -21,7 +21,7 @@
     return componentName || "element"
   }
 
-  const screenPlaceholder =  {
+  const screenPlaceholder = {
     name: "Screen Placeholder",
     route: "*",
     props: {
@@ -60,9 +60,8 @@
     },
   }
 
-
   $: hasComponent = !!$store.currentPreviewItem
-  
+
   $: {
     styles = ""
     // Apply the CSS from the currently selected page and its screens
@@ -88,9 +87,9 @@
     libraries: $store.libraries,
     page: $store.pages[$store.currentPageName],
     screens: [
-          $store.currentFrontEndType === "page"
-          ? screenPlaceholder
-          : $store.currentPreviewItem,
+      $store.currentFrontEndType === "page"
+        ? screenPlaceholder
+        : $store.currentPreviewItem,
     ],
     appRootPath: "",
   }
@@ -102,20 +101,25 @@
     : ""
 
   const refreshContent = () => {
-    iframe.contentWindow.postMessage(JSON.stringify({
-      styles,
-      stylesheetLinks,
-      selectedComponentType,
-      selectedComponentId,
-      frontendDefinition,
-    }))
+    iframe.contentWindow.postMessage(
+      JSON.stringify({
+        styles,
+        stylesheetLinks,
+        selectedComponentType,
+        selectedComponentId,
+        frontendDefinition,
+      })
+    )
   }
 
-  $: if(iframe) iframe.contentWindow.addEventListener("bb-ready", refreshContent, { once: true })
+  $: if (iframe)
+    iframe.contentWindow.addEventListener("bb-ready", refreshContent, {
+      once: true,
+    })
 
-  $: if(iframe && frontendDefinition) {
-		refreshContent()
-	}
+  $: if (iframe && frontendDefinition) {
+    refreshContent()
+  }
 </script>
 
 <div class="component-container">

packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte

@@ -37,27 +37,32 @@
       //use for getting controls for each component property
       c => c._component === componentInstance._component
     ) || {}
-  
+
   let panelDefinition = {}
 
   $: {
-    if(componentPropDefinition.properties) {
-      if(selectedCategory.value === "design") {
+    if (componentPropDefinition.properties) {
+      if (selectedCategory.value === "design") {
         panelDefinition = componentPropDefinition.properties["design"]
-      }else{
+      } else {
         let panelDef = componentPropDefinition.properties["settings"]
-        if($store.currentFrontEndType === "page" && $store.currentView !== "component") {
-          panelDefinition = [...page,...panelDef]
-        }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
+        if (
+          $store.currentFrontEndType === "page" &&
+          $store.currentView !== "component"
+        ) {
+          panelDefinition = [...page, ...panelDef]
+        } else if (
+          $store.currentFrontEndType === "screen" &&
+          $store.currentView !== "component"
+        ) {
           panelDefinition = [...screen, ...panelDef]
-        }else {
+        } else {
           panelDefinition = panelDef
         }
       }
     }
   }
 
-
   const onStyleChanged = store.setComponentStyle
   const onPropChanged = store.setComponentProp
 

packages/builder/src/components/userInterface/propertyCategories.js

@@ -12,8 +12,9 @@ export const layout = [
     label: "Display",
     key: "display",
     control: OptionSelect,
-    initialValue: "Flex",
+    initialValue: "",
     options: [
+      { label: "", value: "" },
       { label: "Flex", value: "flex" },
       { label: "Inline Flex", value: "inline-flex" },
     ],
@@ -39,6 +40,7 @@ export const layout = [
     control: OptionSelect,
     initialValue: "Flex Start",
     options: [
+      { label: "", value: "" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -317,19 +319,31 @@ export const border = [
   {
     label: "Radius",
     key: "border-radius",
-    control: Input,
-    width: "48px",
-    placeholder: "px",
-    textAlign: "center",
+    control: OptionSelect,
+    defaultValue: "None",
+    options: [
+      { label: "None", value: "0" },
+      { label: "small", value: "0.125rem" },
+      { label: "Medium", value: "0.25rem;" },
+      { label: "Large", value: "0.375rem" },
+      { label: "Extra large", value: "0.5rem" },
+      { label: "Full", value: "5678px" },
+    ],
   },
   {
     label: "Width",
     key: "border-width",
-    control: Input,
-    width: "48px",
-    placeholder: "px",
-    textAlign: "center",
-  }, //custom
+    control: OptionSelect,
+    defaultValue: "None",
+    options: [
+      { label: "None", value: "0" },
+      { label: "Extra small", value: "0.5px" },
+      { label: "Small", value: "1px" },
+      { label: "Medium", value: "2px" },
+      { label: "Large", value: "4px" },
+      { label: "Extra large", value: "8px" },
+    ],
+  },
   {
     label: "Color",
     key: "border-color",
@@ -339,6 +353,7 @@ export const border = [
     label: "Style",
     key: "border-style",
     control: OptionSelect,
+    defaultValue: "None",
     options: [
       "none",
       "hidden",
@@ -365,17 +380,50 @@ export const effects = [
   },
   {
     label: "Rotate",
-    key: "transform",
-    control: Input,
-    width: "48px",
-    textAlign: "center",
-    placeholder: "deg",
+    key: "transform-rotate",
+    control: OptionSelect,
+    defaultValue: "0",
+    options: [
+      "0",
+      "45deg",
+      "90deg",
+      "90deg",
+      "135deg",
+      "180deg",
+      "225deg",
+      "270deg",
+      "315dev",
+    ],
   }, //needs special control
   {
     label: "Shadow",
     key: "box-shadow",
-    control: InputGroup,
-    meta: [{ placeholder: "X" }, { placeholder: "Y" }, { placeholder: "B" }],
+    control: OptionSelect,
+    defaultValue: "None",
+    options: [
+      { label: "None", value: "none" },
+      { label: "Extra small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
+      {
+        label: "Small",
+        value:
+          "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+      },
+      {
+        label: "Medium",
+        value:
+          "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+      },
+      {
+        label: "Large",
+        value:
+          "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+      },
+      {
+        label: "Extra large",
+        value:
+          "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+      },
+    ],
   },
 ]