More improvements

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

@@ -5,8 +5,8 @@
   import {
     isGridEvent,
     getGridParentID,
-    gridCSSVars,
+    GridParams,
-    GridVars,
+    getGridVar,
   } from "utils/grid"
 
   // Smallest possible 1x1 transparent GIF
@@ -19,11 +19,12 @@
   let id
 
   // Grid CSS variables
+  $: device = $builderStore.previewDevice
   $: vars = {
-    colStart: $gridCSSVars[GridVars.ColStart],
+    colStart: getGridVar(device, GridParams.ColStart),
-    colEnd: $gridCSSVars[GridVars.ColEnd],
+    colEnd: getGridVar(device, GridParams.ColEnd),
-    rowStart: $gridCSSVars[GridVars.RowStart],
+    rowStart: getGridVar(device, GridParams.RowStart),
-    rowEnd: $gridCSSVars[GridVars.RowEnd],
+    rowEnd: getGridVar(device, GridParams.RowEnd),
   }
 
   // Some memoisation of primitive types for performance

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

@@ -1,17 +1,28 @@
 <script>
   import { Icon } from "@budibase/bbui"
   import { builderStore } from "stores"
-  import { getGridVarValue } from "utils/grid"
 
   export let style
   export let value
   export let icon
   export let title
-  export let gridStyles
   export let componentId
 
-  $: currentValue = getGridVarValue(gridStyles, style)
+  // Needs to update in real time
+
+  let currentValue
+
+  $: fetchCurrentValue(componentId, style)
   $: active = currentValue === value
+
+  const fetchCurrentValue = (id, style) => {
+    const node = document.getElementsByClassName(`${id}-dom`)[0]?.parentNode
+    if (!node) {
+      return null
+    }
+    const styles = getComputedStyle(node)
+    currentValue = styles.getPropertyValue(style)
+  }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

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

@@ -7,7 +7,7 @@
   import { builderStore, componentStore, dndIsDragging } from "stores"
   import { Utils } from "@budibase/frontend-core"
   import { findComponentParent } from "utils/components"
-  import { gridCSSVars, GridVars } from "utils/grid"
+  import { getGridVar, GridParams } from "utils/grid"
 
   const verticalOffset = 36
   const horizontalOffset = 2
@@ -44,9 +44,9 @@
     insideGrid &&
     (definition?.grid?.hAlign !== "stretch" ||
       definition?.grid?.vAlign !== "stretch")
-  $: gridHAlignVar = $gridCSSVars[GridVars.HAlign]
+  $: device = $builderStore.previewDevice
-  $: gridVAlignVar = $gridCSSVars[GridVars.VAlign]
+  $: gridHAlignVar = getGridVar(device, GridParams.HAlign)
-  $: gridStyles = $state?.styles
+  $: gridVAlignVar = getGridVar(device, GridParams.VAlign)
 
   const getBarSettings = definition => {
     let allSettings = []
@@ -156,7 +156,6 @@
         value="start"
         icon="AlignLeft"
         title="Align left"
-        {gridStyles}
         {componentId}
       />
       <GridStylesButton
@@ -164,7 +163,6 @@
         value="center"
         icon="AlignCenter"
         title="Align center"
-        {gridStyles}
         {componentId}
       />
       <GridStylesButton
@@ -172,7 +170,6 @@
         value="end"
         icon="AlignRight"
         title="Align right"
-        {gridStyles}
         {componentId}
       />
       <GridStylesButton
@@ -180,7 +177,6 @@
         value="stretch"
         icon="MoveLeftRight"
         title="Stretch horizontally"
-        {gridStyles}
         {componentId}
       />
       <div class="divider" />
@@ -189,7 +185,6 @@
         value="start"
         icon="AlignTop"
         title="Align top"
-        {gridStyles}
         {componentId}
       />
       <GridStylesButton
@@ -197,7 +192,6 @@
         value="center"
         icon="AlignMiddle"
         title="Align middle"
-        {gridStyles}
         {componentId}
       />
       <GridStylesButton
@@ -205,7 +199,6 @@
         value="end"
         icon="AlignBottom"
         title="Align bottom"
-        {gridStyles}
         {componentId}
       />
       <GridStylesButton
@@ -213,7 +206,6 @@
         value="stretch"
         icon="MoveUpDown"
         title="Stretch vertically"
-        {gridStyles}
         {componentId}
       />
       <div class="divider" />

packages/client/src/utils/grid.js

@@ -1,5 +1,4 @@
 import { builderStore } from "stores"
-import { derived } from "svelte/store"
 import { buildStyleString } from "utils/styleable.js"
 
 /**
@@ -11,10 +10,13 @@ import { buildStyleString } from "utils/styleable.js"
  *
  * Component definitions define their default layout preference via the
  * `grid.hAlign` and `grid.vAlign` keys in the manifest.
+ *
+ * We also apply grid-[mobile/desktop]-grow CSS classes to component wrapper
+ * DOM nodes to use later in selectors, to control the sizing of children.
  */
 
 // Enum representing the different CSS variables we use for grid metadata
-export const GridVars = {
+export const GridParams = {
   HAlign: "h-align",
   VAlign: "v-align",
   ColStart: "col-start",
@@ -35,38 +37,8 @@ const Devices = {
   Mobile: "mobile",
 }
 
-// A derived map of all CSS variables for the current device
-const previewDevice = derived(builderStore, $store => $store.previewDevice)
-export const gridCSSVars = derived(previewDevice, $device => {
-  const device = $device === Devices.Mobile ? Devices.Mobile : Devices.Desktop
-  let vars = {}
-  for (let type of Object.values(GridVars)) {
-    vars[type] = `--grid-${device}-${type}`
-  }
-  return vars
-})
-
 // Builds a CSS variable name for a certain piece of grid metadata
-export const getGridCSSVar = (device, type) => `--grid-${device}-${type}`
+export const getGridVar = (device, param) => `--grid-${device}-${param}`
-
-// Generates the CSS variable for a certain grid param suffix, for the other
-// device variant than the one included in this variable
-export const getOtherDeviceGridVar = cssVar => {
-  if (cssVar.includes(Devices.Desktop)) {
-    return cssVar.replace(Devices.Desktop, Devices.Mobile)
-  } else {
-    return cssVar.replace(Devices.Mobile, Devices.Desktop)
-  }
-}
-
-// Gets the default value for a certain grid CSS variable
-export const getDefaultGridVarValue = cssVar => {
-  if (cssVar.includes("align")) {
-    return cssVar.includes("-h-") ? "stretch" : "center"
-  } else {
-    return cssVar.endsWith("-start") ? 1 : 2
-  }
-}
 
 // Determines whether a JS event originated from immediately within a grid
 export const isGridEvent = e => {
@@ -92,32 +64,18 @@ export const getGridParentID = node => {
   return node?.parentNode?.closest(".grid")?.parentNode.dataset.id
 }
 
-// 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?.variables?.[variable]
-
-  // Otherwise try the other device variables
-  if (!val) {
-    val = styles?.[getOtherDeviceGridVar(variable)]
-  }
-
-  // Otherwise use the default
-  return val ? val : getDefaultGridVarValue(variable)
-}
-
 // Svelte action to apply required class names and styles to our component
 // wrappers
 export const gridLayout = (node, metadata) => {
   let selectComponent
 
+  // Applies the required listeners, CSS and classes to a component DOM node
   const applyMetadata = metadata => {
     const { id, styles, interactive, errored, definition } = metadata
-    consol.log(styles)
 
     // Callback to select the component when clicking on the wrapper
     selectComponent = e => {
-      e.preventDefault()
+      e.stopPropagation()
       builderStore.actions.selectComponent(id)
     }
 
@@ -145,13 +103,14 @@ export const gridLayout = (node, metadata) => {
     node.style = buildStyleString(vars)
 
     // Toggle classes to specify whether our children should fill
-    const desktopVar = getGridCSSVar(Devices.Desktop, GridVars.VAlign)
-    const mobileVar = getGridCSSVar(Devices.Mobile, GridVars.VAlign)
     node.classList.toggle(
       GridClasses.DesktopFill,
-      vars[desktopVar] === "stretch"
+      vars[getGridVar(Devices.Desktop, GridParams.VAlign)] === "stretch"
+    )
+    node.classList.toggle(
+      GridClasses.MobileFill,
+      vars[getGridVar(Devices.Mobile, GridParams.VAlign)] === "stretch"
     )
-    node.classList.toggle(GridClasses.MobileFill, vars[mobileVar] === "stretch")
 
     // Add a listener to select this node on click
     if (interactive) {
@@ -159,6 +118,7 @@ export const gridLayout = (node, metadata) => {
     }
   }
 
+  // Removes the previously set up listeners
   const removeListeners = () => {
     node.removeEventListener("click", selectComponent)
   }