From 65d6216d33d9e74d3105848cdf43a488ab2323e8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 10 Jun 2021 18:42:41 +0100
Subject: [PATCH] Refactor client component structure, fix select bar z index,
 add titles to container bar settings

---
 .../client/src/components/ClientApp.svelte    |  6 ++--
 .../{ => preview}/HoverIndicator.svelte       |  2 +-
 .../components/{ => preview}/Indicator.svelte |  0
 .../{ => preview}/IndicatorSet.svelte         |  2 +-
 .../{ => preview}/SelectionIndicator.svelte   |  2 +-
 .../{ => preview}/SettingsBar.svelte          |  6 ++--
 .../{ => preview}/SettingsButton.svelte       |  2 +-
 packages/standard-components/manifest.json    | 36 ++++++++++++-------
 8 files changed, 34 insertions(+), 22 deletions(-)
 rename packages/client/src/components/{ => preview}/HoverIndicator.svelte (94%)
 rename packages/client/src/components/{ => preview}/Indicator.svelte (100%)
 rename packages/client/src/components/{ => preview}/IndicatorSet.svelte (97%)
 rename packages/client/src/components/{ => preview}/SelectionIndicator.svelte (81%)
 rename packages/client/src/components/{ => preview}/SettingsBar.svelte (96%)
 rename packages/client/src/components/{ => preview}/SettingsButton.svelte (95%)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 7bdab63102..a8a5c1515c 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -14,9 +14,9 @@
     builderStore,
   } from "../store"
   import { TableNames, ActionTypes } from "../constants"
-  import SettingsBar from "./SettingsBar.svelte"
-  import SelectionIndicator from "./SelectionIndicator.svelte"
-  import HoverIndicator from "./HoverIndicator.svelte"
+  import SettingsBar from "./preview/SettingsBar.svelte"
+  import SelectionIndicator from "./preview/SelectionIndicator.svelte"
+  import HoverIndicator from "./preview/HoverIndicator.svelte"
 
   // Provide contexts
   setContext("sdk", SDK)
diff --git a/packages/client/src/components/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte
similarity index 94%
rename from packages/client/src/components/HoverIndicator.svelte
rename to packages/client/src/components/preview/HoverIndicator.svelte
index 55e6876190..7dd1c78dae 100644
--- a/packages/client/src/components/HoverIndicator.svelte
+++ b/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
diff --git a/packages/client/src/components/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
similarity index 100%
rename from packages/client/src/components/Indicator.svelte
rename to packages/client/src/components/preview/Indicator.svelte
diff --git a/packages/client/src/components/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
similarity index 97%
rename from packages/client/src/components/IndicatorSet.svelte
rename to packages/client/src/components/preview/IndicatorSet.svelte
index 4ba6efd085..d58799bd78 100644
--- a/packages/client/src/components/IndicatorSet.svelte
+++ b/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
diff --git a/packages/client/src/components/SelectionIndicator.svelte b/packages/client/src/components/preview/SelectionIndicator.svelte
similarity index 81%
rename from packages/client/src/components/SelectionIndicator.svelte
rename to packages/client/src/components/preview/SelectionIndicator.svelte
index e53e774b8e..bb71856211 100644
--- a/packages/client/src/components/SelectionIndicator.svelte
+++ b/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>
 
diff --git a/packages/client/src/components/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
similarity index 96%
rename from packages/client/src/components/SettingsBar.svelte
rename to packages/client/src/components/preview/SettingsBar.svelte
index 1c72e2a951..76cdd8fe8b 100644
--- a/packages/client/src/components/SettingsBar.svelte
+++ b/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 { domDebounce } from "../utils/domDebounce"
+  import { builderStore } from "../../store"
+  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;
diff --git a/packages/client/src/components/SettingsButton.svelte b/packages/client/src/components/preview/SettingsButton.svelte
similarity index 95%
rename from packages/client/src/components/SettingsButton.svelte
rename to packages/client/src/components/preview/SettingsButton.svelte
index aa03a37926..35cc8aa14c 100644
--- a/packages/client/src/components/SettingsButton.svelte
+++ b/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
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 3da3579346..69c7374720 100644
--- a/packages/standard-components/manifest.json
+++ b/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"