Add top level screen layout setting

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte

@@ -14,6 +14,7 @@
   import sanitizeUrl from "helpers/sanitizeUrl"
   import ButtonActionEditor from "components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte"
   import { getBindableProperties } from "dataBinding"
+  import BarButtonList from "components/design/settings/controls/BarButtonList.svelte"
 
   $: bindings = getBindableProperties($selectedScreen, null)
 
@@ -124,6 +125,24 @@
         disabled: !!$selectedScreen.layoutId,
       },
     },
+    {
+      key: "layout",
+      label: "Layout",
+      defaultValue: "flex",
+      control: BarButtonList,
+      props: {
+        options: [
+          {
+            barIcon: "ModernGridView",
+            value: "flex",
+          },
+          {
+            barIcon: "ViewGrid",
+            value: "grid",
+          },
+        ],
+      },
+    },
   ]
 
   const removeCustomLayout = async () => {
@@ -149,6 +168,7 @@
     value={Helpers.deepGet($selectedScreen, setting.key)}
     onChange={val => setScreenSetting(setting, val)}
     props={{ ...setting.props, error: errors[setting.key] }}
+    defaultValue={setting.defaultValue}
     {bindings}
   />
 {/each}

packages/client/src/components/Component.svelte

@@ -619,7 +619,6 @@
     if (isBlock) {
       return
     }
-    console.log("select", id)
     e.stopPropagation()
     builderStore.actions.selectComponent(id)
   }

packages/client/src/components/Screen.svelte

@@ -13,10 +13,29 @@
   const onLoadActions = memo()
 
   // Get the screen definition for the current route
-  $: screenDefinition = $screenStore.activeScreen?.props
+  $: screenDefinition = getScreenDefinition($screenStore.activeScreen)
   $: onLoadActions.set($screenStore.activeScreen?.onLoad)
   $: runOnLoadActions($onLoadActions, params)
 
+  const getScreenDefinition = activeScreen => {
+    if (!activeScreen) {
+      return null
+    }
+
+    // Enrich screen definition with some builder screen props and styles
+    return {
+      ...activeScreen.props,
+      layout: activeScreen.layout,
+      _styles: {
+        ...activeScreen.props._styles,
+        normal: {
+          ...activeScreen.props._styles?.normal,
+          flex: "1 1 auto",
+        },
+      },
+    }
+  }
+
   // Enrich and execute any on load actions.
   // We manually construct the full context here as this component is the
   // one that provides the url context, so it is not available in $context yet

packages/client/src/components/app/Layout.svelte

@@ -36,8 +36,8 @@
   export let logoLinkUrl
   export let openLogoLinkInNewTab
   export let textAlign
-
   export let embedded = false
+  export let pageLayout = "flex"
 
   const NavigationClasses = {
     Top: "top",
@@ -319,7 +319,7 @@
         }
       }}
     >
-      <div class="main size--{pageWidthClass}">
+      <div class="main size--{pageWidthClass} layout--{pageLayout}">
         <slot />
       </div>
     </div>
@@ -481,8 +481,9 @@
     position: relative;
     padding: 32px;
   }
-  .main.size--max {
+  .main.layout--grid {
-    padding: 0;
+    padding-top: 0;
+    padding-bottom: 0;
   }
   .layout--none .main {
     padding: 0;
@@ -501,6 +502,7 @@
   }
   .size--max {
     width: 100%;
+    padding: 0;
   }
 
   /*  Nav components */

packages/client/src/components/preview/GridDNDHandler.svelte

@@ -1,13 +1,13 @@
 <script>
   import { onMount, onDestroy } from "svelte"
+  import { get } from "svelte/store"
   import { builderStore, componentStore } from "stores"
   import { Utils, memo } from "@budibase/frontend-core"
   import {
     isGridEvent,
     getGridParentID,
     getGridVar,
-    getDefaultGridVarValue,
+    getGridVarValue,
-    getOtherDeviceGridVar,
   } from "utils/grid"
 
   // Grid CSS variables
@@ -153,30 +153,25 @@
       return
     }
 
-    const domGrid = getDOMNode(dragInfo.gridId)
+    const { id, gridId } = dragInfo
+    const domGrid = getDOMNode(gridId)
     const gridCols = parseInt(domGrid.dataset.cols)
     const gridRows = parseInt(domGrid.dataset.rows)
-    const domNode = getDOMNode(dragInfo.id)?.parentNode
+    const instance = get(componentStore.actions.getComponentInstance(id))
-    const styles = window.getComputedStyle(domNode)
+    if (!instance) {
+      return
+    }
+    const styles = get(instance.state).styles
     if (domGrid) {
-      // Util to get the current grid CSS variable for this device. If unset,
-      // fall back to using the other device type.
-      const getCurrent = cssVar => {
-        let style = styles?.getPropertyValue(cssVar)
-        if (!style) {
-          style = styles?.getPropertyValue(getOtherDeviceGridVar(cssVar))
-        }
-        return parseInt(style || getDefaultGridVarValue(cssVar))
-      }
       dragInfo.grid = {
         startX: e.clientX,
         startY: e.clientY,
 
         // Ensure things are within limits
-        rowStart: minMax(getCurrent(vars.rowStart), 1, gridRows),
+        rowStart: minMax(getGridVarValue(styles, vars.rowStart), 1, gridRows),
-        rowEnd: minMax(getCurrent(vars.rowEnd), 2, gridRows + 1),
+        rowEnd: minMax(getGridVarValue(styles, vars.rowEnd), 2, gridRows + 1),
-        colStart: minMax(getCurrent(vars.colStart), 1, gridCols),
+        colStart: minMax(getGridVarValue(styles, vars.colStart), 1, gridCols),
-        colEnd: minMax(getCurrent(vars.colEnd), 2, gridCols + 1),
+        colEnd: minMax(getGridVarValue(styles, vars.colEnd), 2, gridCols + 1),
       }
       handleEvent(e)
     }

packages/client/src/components/preview/SettingsBar.svelte

@@ -43,7 +43,7 @@
   $: showGridStyles = insideGrid && definition?.grid?.showControls !== false
   $: gridHAlignVar = $getGridVar("h-align")
   $: gridVAlignVar = $getGridVar("v-align")
-  $: gridStyles = $state?.styles?.variables
+  $: gridStyles = $state?.styles
 
   const getBarSettings = definition => {
     let allSettings = []

packages/client/src/stores/screens.js

@@ -129,29 +129,31 @@ const createScreenStore = () => {
       // If we don't have a legacy custom layout, build a layout structure
       // from the screen navigation settings
       if (!activeLayout) {
-        let navigationSettings = {
+        let layoutSettings = {
           navigation: "None",
           pageWidth: activeScreen?.width || "Large",
+          pageLayout: activeScreen?.layout || "flex",
+          embedded: $appStore.embedded,
         }
         if (activeScreen?.showNavigation) {
-          navigationSettings = {
+          layoutSettings = {
-            ...navigationSettings,
+            ...layoutSettings,
             ...($builderStore.navigation || $appStore.application?.navigation),
           }
 
           // Default navigation to top
-          if (!navigationSettings.navigation) {
+          if (!layoutSettings.navigation) {
-            navigationSettings.navigation = "Top"
+            layoutSettings.navigation = "Top"
           }
 
           // Default title to app name
-          if (!navigationSettings.title && !navigationSettings.hideTitle) {
+          if (!layoutSettings.title && !layoutSettings.hideTitle) {
-            navigationSettings.title = $appStore.application?.name
+            layoutSettings.title = $appStore.application?.name
           }
 
           // Default to the org logo
-          if (!navigationSettings.logoUrl) {
+          if (!layoutSettings.logoUrl) {
-            navigationSettings.logoUrl = $orgStore?.logoUrl
+            layoutSettings.logoUrl = $orgStore?.logoUrl
           }
         }
         activeLayout = {
@@ -173,8 +175,7 @@ const createScreenStore = () => {
                 },
               },
             ],
-            ...navigationSettings,
+            ...layoutSettings,
-            embedded: $appStore.embedded,
           },
         }
       }

packages/client/src/utils/grid.js

@@ -93,7 +93,7 @@ export const getBaseGridVars = definition => {
 // Gets the current value of a certain grid CSS variable for a component
 export const getGridVarValue = (styles, variable) => {
   // Try the desired variable
-  let val = styles?.[variable]
+  let val = styles?.variables?.[variable]
 
   // Otherwise try the other device variables
   if (!val) {