Refactor client component structure, fix select bar z index, add titles to container bar settings

packages/client/src/components/ClientApp.svelte

@@ -14,9 +14,9 @@
     builderStore,
   } from "../store"
   import { TableNames, ActionTypes } from "../constants"
-  import SettingsBar from "./SettingsBar.svelte"
+  import SettingsBar from "./preview/SettingsBar.svelte"
-  import SelectionIndicator from "./SelectionIndicator.svelte"
+  import SelectionIndicator from "./preview/SelectionIndicator.svelte"
-  import HoverIndicator from "./HoverIndicator.svelte"
+  import HoverIndicator from "./preview/HoverIndicator.svelte"
 
   // Provide contexts
   setContext("sdk", SDK)

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

@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import { builderStore } from "../store"
+  import { builderStore } from "../../store"
 
   let componentId
   $: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920

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

@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
-  import { domDebounce } from "../utils/domDebounce"
+  import { domDebounce } from "../../utils/domDebounce"
 
   export let componentId
   export let color

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

@@ -1,5 +1,5 @@
 <script>
-  import { builderStore } from "../store"
+  import { builderStore } from "../../store"
   import IndicatorSet from "./IndicatorSet.svelte"
 </script>
 

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

@@ -1,8 +1,8 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import SettingsButton from "./SettingsButton.svelte"
-  import { builderStore } from "../store"
+  import { builderStore } from "../../store"
-  import { domDebounce } from "../utils/domDebounce"
+  import { domDebounce } from "../../utils/domDebounce"
 
   const verticalOffset = 28
   const horizontalOffset = 2
@@ -107,7 +107,7 @@
   .bar {
     display: flex;
     position: absolute;
-    z-index: 920;
+    z-index: 930;
     padding: 6px 8px;
     opacity: 0;
     flex-direction: row;

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

@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore } from "../store"
+  import { builderStore } from "../../store"
 
   export let prop
   export let value

packages/standard-components/manifest.json

@@ -17,12 +17,14 @@
           {
             "label": "Column",
             "value": "column",
-            "barIcon": "ViewRow"
+            "barIcon": "ViewRow",
+            "barTitle": "Column layout"
           },
           {
             "label": "Row",
             "value": "row",
-            "barIcon": "ViewColumn"
+            "barIcon": "ViewColumn",
+            "barTitle": "Row layout"
           }
         ],
         "defaultValue": "column"
@@ -36,22 +38,26 @@
           {
             "label": "Left",
             "value": "left",
-            "barIcon": "AlignLeft"
+            "barIcon": "AlignLeft",
+            "barTitle": "Align left"
           },
           {
             "label": "Center",
             "value": "center",
-            "barIcon": "AlignCenter"
+            "barIcon": "AlignCenter",
+            "barTitle": "Align center"
           },
           {
             "label": "Right",
             "value": "right",
-            "barIcon": "AlignRight"
+            "barIcon": "AlignRight",
+            "barTitle": "Align right"
           },
           {
             "label": "Stretch",
             "value": "stretch",
-            "barIcon": "MoveLeftRight"
+            "barIcon": "MoveLeftRight",
+            "barTitle": "Align stretched horizontally"
           }
         ],
         "defaultValue": "stretch"
@@ -65,22 +71,26 @@
           {
             "label": "Top",
             "value": "top",
-            "barIcon": "AlignTop"
+            "barIcon": "AlignTop",
+            "barTitle": "Align top"
           },
           {
             "label": "Middle",
             "value": "middle",
-            "barIcon": "AlignMiddle"
+            "barIcon": "AlignMiddle",
+            "barTitle": "Align middle"
           },
           {
             "label": "Bottom",
             "value": "bottom",
-            "barIcon": "AlignBottom"
+            "barIcon": "AlignBottom",
+            "barTitle": "Align bottom"
           },
           {
             "label": "Stretch",
             "value": "stretch",
-            "barIcon": "MoveUpDown"
+            "barIcon": "MoveUpDown",
+            "barTitle": "Align stretched vertically"
           }
         ],
         "defaultValue": "top"
@@ -94,12 +104,14 @@
           {
             "label": "Shrink",
             "value": "shrink",
-            "barIcon": "Minimize"
+            "barIcon": "Minimize",
+            "barTitle": "Shrink container"
           },
           {
             "label": "Grow",
             "value": "grow",
-            "barIcon": "Maximize"
+            "barIcon": "Maximize",
+            "barTitle": "Grow container"
           }
         ],
         "defaultValue": "shrink"