From 4657ea6f11587dd03a2f343d0d61d2291e47352e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 25 Jul 2022 11:42:18 +0100
Subject: [PATCH] Move add component button from above preview to new floating
 animated button on top of preview

---
 .../[screenId]/_components/AppPreview.svelte  | 44 +++++++++++++++++++
 .../new/_components/NewComponentPanel.svelte  |  2 +-
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index abb956c9d3..c199e6c7d3 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -3,6 +3,7 @@
   import { onMount, onDestroy } from "svelte"
   import {
     store,
+    selectedComponent,
     selectedScreen,
     selectedLayout,
     currentAsset,
@@ -14,6 +15,7 @@
     Layout,
     Heading,
     Body,
+    Icon,
     notifications,
   } from "@budibase/bbui"
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
@@ -96,6 +98,9 @@
   $: json = JSON.stringify(previewData)
   $: refreshContent(json)
 
+  // Determine if the add component menu is active
+  $: isAddingComponent = $isActive(`./components/${$selectedComponent._id}/new`)
+
   // Update the iframe with the builder info to render the correct preview
   const refreshContent = message => {
     if (iframe) {
@@ -219,6 +224,16 @@
     idToDelete = null
   }
 
+  const toggleAddComponent = () => {
+    if (isAddingComponent) {
+      $goto(`../${$selectedScreen._id}/components/${$selectedComponent._id}`)
+    } else {
+      $goto(
+        `../${$selectedScreen._id}/components/${$selectedComponent._id}/new`
+      )
+    }
+  }
+
   onMount(() => {
     window.addEventListener("message", receiveMessage)
     if (!$store.clientFeatures.messagePassing) {
@@ -282,6 +297,13 @@
     class:tablet={$store.previewDevice === "tablet"}
     class:mobile={$store.previewDevice === "mobile"}
   />
+  <div
+    class="add-component"
+    class:active={isAddingComponent}
+    on:click={toggleAddComponent}
+  >
+    <Icon size="XL" name="Add">Component</Icon>
+  </div>
 </div>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
@@ -343,4 +365,26 @@
     width: 100%;
     height: 100%;
   }
+
+  .add-component {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: var(--spectrum-global-color-blue-500);
+    display: grid;
+    place-items: center;
+    color: white;
+    box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    transition: transform ease-out 300ms, background ease-out 130ms;
+  }
+  .add-component:hover {
+    background: var(--spectrum-global-color-blue-600);
+  }
+  .add-component.active {
+    transform: rotate(-45deg);
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
index 7b5f164e06..113100becc 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
@@ -151,7 +151,7 @@
   })
 </script>
 
-<div class="new-component" transition:fly|local={{ x: 260 }}>
+<div class="new-component" transition:fly|local={{ x: 260, duration: 300 }}>
   <Panel
     title="Add component"
     showCloseButton