Add flex design property and fix existing default layout

6 years ago · 650ace2f9e
4 changed files with 44 additions and 47 deletions
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@ -28,7 +28,9 @@
      _id: "screenslot-placeholder",
      _component: "@budibase/standard-components/container",
      _styles: {
-        normal: {},
+        normal: {
+          flex: "1 1 auto",
+        },
        hover: {},
        active: {},
        selected: {},
@ -46,6 +48,7 @@
              display: "flex",
              "flex-direction": "column",
              "align-items": "center",
+              flex: "1 1 auto",
            },
            hover: {},
            active: {},
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@ -11,38 +11,22 @@ export default `<html>
      *, *:before, *:after {
        box-sizing: border-box;
      }
-      .lay-__screenslot__text {
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 20px 0;
-          border: dashed 2px #ccc;
-          font-family: sans-serif;
-          font-size: 1.2rem;
-          color: #999;
-          text-transform: uppercase;
-          font-weight: bold;
-        }
-
-        .container-screenslot-placeholder {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 20px;
-          text-align: center;
-          border-style: dashed !important;
-          border-width: 1px;
-          color: #000000;
-          background: #fafafa;
-          height: 94%;
-        }
-
-        .container-screenslot-placeholder span {
-          display: block;
-          margin-bottom: 10px;
-        }
+      .container-screenslot-placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+        text-align: center;
+        border-style: dashed !important;
+        border-width: 1px;
+        color: #000000;
+        background: #fafafa;
+        flex: 1 1 auto;
+      }
+      .container-screenslot-placeholder span {
+        display: block;
+        margin-bottom: 10px;
+      }
    </style>
    <script src='/assets/budibase-client.js'></script>
    <script>
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@ -261,6 +261,16 @@ export const padding = [
 ]

 export const size = [
+  {
+    label: "Flex",
+    key: "flex",
+    control: OptionSelect,
+    defaultValue: "0 1 auto",
+    options: [
+      { label: "Shrink", value: "0 1 auto" },
+      { label: "Grow", value: "1 1 auto" },
+    ],
+  },
  {
    label: "Width",
    key: "width",
--- a/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
+++ b/packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json
@ -1,9 +1,9 @@
 {
-	"title": "{{ name }}",
-	"favicon": "./_shared/favicon.png",
-	"stylesheets": [],
-	"componentLibraries": ["@budibase/standard-components"],
-	"props": {
+  "title": "{{ name }}",
+  "favicon": "./_shared/favicon.png",
+  "stylesheets": [],
+  "componentLibraries": ["@budibase/standard-components"],
+  "props": {
    "_id": "private-master-root",
    "_component": "@budibase/standard-components/container",
    "_children": [
@ -62,10 +62,11 @@
        "_component": "##builtin/screenslot",
        "_styles": {
          "normal": {
-            "padding": "0px",
-            "align-items": "flex-start",
-            "height": "100vh",
-            "background-image": "None"
+            "flex": "1 1 auto",
+            "display": "flex",
+            "flex-direction": "column",
+            "justify-content": "flex-start",
+            "align-items": "stretch"
          },
          "hover": {},
          "active": {},
@ -84,10 +85,9 @@
        "flex-direction": "column",
        "align-items": "stretch",
        "justify-content": "flex-start",
-        "height": "",
-        "max-width": "",
        "margin-right": "auto",
-        "margin-left": "auto"
+        "margin-left": "auto",
+        "min-height": "100%"
      },
      "selected": {}
    },
@ -95,6 +95,6 @@
    "className": "",
    "onLoad": []
  },
-	"_css": "",
-	"uiFunctions": ""
+  "_css": "",
+  "uiFunctions": ""
 }