Further refactoring to grid nested layouts

packages/client/src/components/Component.svelte

@@ -200,11 +200,12 @@
 
   // Build up full styles and split them into variables and non-variables
   $: baseStyles = getBaseStyles(definition)
-  $: parsedStyles = parseStyles({
+  $: styles = {
     ...baseStyles,
     ...instance._styles?.normal,
     ...ephemeralStyles,
-  })
+  }
+  $: parsedStyles = parseStyles(styles)
   $: wrapperCSS = buildStyleString(parsedStyles.variables)
 
   // Update component context
@@ -214,6 +215,7 @@
     styles: {
       ...instance._styles,
       normal: parsedStyles.nonVariables,
+      variables: parsedStyles.variables,
       custom: customCSS,
       id,
       empty: emptyState,

packages/client/src/components/app/container/GridContainer.svelte

@@ -95,7 +95,7 @@
   /* Ensure all top level children have grid styles applied */
   .grid :global(> .component) {
     display: flex;
-    overflow: hidden;
+    overflow: auto;
 
     /* On desktop, use desktop metadata and fall back to mobile */
     /* Position vars */

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

@@ -1,14 +1,16 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore, componentStore } from "stores"
+  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($componentStore.selectedComponent, style)
+  $: currentValue = getGridVarValue(gridStyles, style)
   $: active = currentValue === value
 </script>
 
@@ -18,10 +20,7 @@
   {title}
   class:active
   on:click={() => {
-    builderStore.actions.updateStyles(
+    builderStore.actions.updateStyles({ [style]: value }, componentId)
-      { [style]: value },
-      $componentStore.selectedComponent._id
-    )
   }}
 >
   <Icon name={icon} size="S" />

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

@@ -20,11 +20,12 @@
 
   // TODO: respect dependsOn keys
 
-  $: id = $builderStore.selectedComponentId
+  $: componentId = $builderStore.selectedComponentId
-  $: parent = findComponentParent($builderStore.screen.props, id)
+  $: component = $componentStore.selectedComponent
-  $: instance = componentStore.actions.getComponentInstance(id)
-  $: state = $instance?.state
   $: definition = $componentStore.selectedComponentDefinition
+  $: parent = findComponentParent($builderStore.screen.props, componentId)
+  $: instance = componentStore.actions.getComponentInstance(componentId)
+  $: state = $instance?.state
   $: showBar =
     definition?.showSettingsBar !== false &&
     !$dndIsDragging &&
@@ -36,12 +37,13 @@
     }
   }
   $: settings = getBarSettings(definition)
-  $: isRoot = id === $builderStore.screen?.props?._id
+  $: isRoot = componentId === $builderStore.screen?.props?._id
   $: insideGrid =
     parent?._component.endsWith("/container") && parent.layout === "grid"
   $: showGridStyles = insideGrid && definition?.grid?.showControls !== false
   $: gridHAlignVar = $getGridVar("h-align")
   $: gridVAlignVar = $getGridVar("v-align")
+  $: gridStyles = $state?.styles?.variables
 
   const getBarSettings = definition => {
     let allSettings = []
@@ -141,7 +143,7 @@
 {#if showBar}
   <div
     class="bar"
-    style="top: {top}px; left: {left}px;"
+    style="top:{top}px; left:{left}px;"
     bind:this={self}
     class:visible={measured}
   >
@@ -151,24 +153,32 @@
         value="start"
         icon="AlignLeft"
         title="Align left"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridHAlignVar}
         value="center"
         icon="AlignCenter"
         title="Align center"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridHAlignVar}
         value="end"
         icon="AlignRight"
         title="Align right"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridHAlignVar}
         value="stretch"
         icon="MoveLeftRight"
         title="Stretch horizontally"
+        {gridStyles}
+        {componentId}
       />
       <div class="divider" />
       <GridStylesButton
@@ -176,24 +186,32 @@
         value="start"
         icon="AlignTop"
         title="Align top"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridVAlignVar}
         value="center"
         icon="AlignMiddle"
         title="Align middle"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridVAlignVar}
         value="end"
         icon="AlignBottom"
         title="Align bottom"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridVAlignVar}
         value="stretch"
         icon="MoveUpDown"
         title="Stretch vertically"
+        {gridStyles}
+        {componentId}
       />
       <div class="divider" />
     {/if}
@@ -206,6 +224,7 @@
               value={option.value}
               icon={option.barIcon}
               title={option.barTitle || option.label}
+              {component}
             />
           {/each}
         {:else}

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

@@ -1,18 +1,19 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore } from "stores"
   import { createEventDispatcher } from "svelte"
 
   export let prop
   export let value
   export let icon
   export let title
-  export let rotate = false
   export let bool = false
   export let active = false
+  export let component
 
   const dispatch = createEventDispatcher()
-  $: currentValue = $componentStore.selectedComponent?.[prop]
+
+  $: currentValue = component?.[prop]
   $: active = prop && (bool ? !!currentValue : currentValue === value)
 </script>
 
@@ -20,7 +21,6 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   {title}
-  class:rotate
   class:active
   on:click={() => {
     if (prop) {
@@ -50,7 +50,4 @@
     background-color: rgba(13, 102, 208, 0.1);
     color: var(--spectrum-global-color-blue-600);
   }
-  .rotate {
-    transform: rotate(90deg);
-  }
 </style>

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

@@ -1,10 +1,11 @@
 <script>
   import { ColorPicker } from "@budibase/bbui"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore } from "stores"
 
   export let prop
+  export let component
 
-  $: currentValue = $componentStore.selectedComponent?.[prop]
+  $: currentValue = component?.[prop]
 </script>
 
 <div>

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

@@ -1,12 +1,13 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore } from "stores"
 
   export let prop
   export let options
   export let label
+  export let component
 
-  $: currentValue = $componentStore.selectedComponent?.[prop]
+  $: currentValue = component?.[prop]
 </script>
 
 <div>

packages/client/src/utils/grid.js

@@ -1,5 +1,5 @@
-import { builderStore } from "stores"
+import { builderStore, componentStore } from "stores"
-import { derived, get } from "svelte/store"
+import { derived, get, readable } from "svelte/store"
 
 /**
  * We use CSS variables on components to control positioning and layout of
@@ -91,13 +91,13 @@ export const getBaseGridVars = definition => {
 }
 
 // Gets the current value of a certain grid CSS variable for a component
-export const getGridVarValue = (component, variable) => {
+export const getGridVarValue = (styles, variable) => {
   // Try the desired variable
-  let val = component?._styles?.normal?.[variable]
+  let val = styles?.[variable]
 
   // Otherwise try the other device variables
   if (!val) {
-    val = component?._styles?.normal?.[getOtherDeviceGridVar(variable)]
+    val = styles?.[getOtherDeviceGridVar(variable)]
   }
 
   // Otherwise use the default