From eabd57d20b1e2812c577c7f35fb725e09d275648 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 21 Apr 2023 10:26:55 +0100
Subject: [PATCH] Add FAB for adding rows and inline row creation

---
 .../grid/controls/FloatingAddRowButton.svelte | 28 +++++++++++++++++++
 .../src/components/grid/layout/Grid.svelte    |  6 ++++
 .../components/grid/layout/NewRowTop.svelte   |  5 ++--
 3 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontend-core/src/components/grid/controls/FloatingAddRowButton.svelte

diff --git a/packages/frontend-core/src/components/grid/controls/FloatingAddRowButton.svelte b/packages/frontend-core/src/components/grid/controls/FloatingAddRowButton.svelte
new file mode 100644
index 0000000000..3353b55b57
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/controls/FloatingAddRowButton.svelte
@@ -0,0 +1,28 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  import { getContext } from "svelte"
+
+  const { dispatch } = getContext("grid")
+</script>
+
+<div class="floating-add-row" on:click={() => dispatch("add-row-inline")}>
+  <Icon name="Add" size="L" color="white" />
+</div>
+
+<style>
+  .floating-add-row {
+    position: absolute;
+    bottom: 32px;
+    left: 32px;
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    background: var(--spectrum-global-color-blue-400);
+    display: grid;
+    place-items: center;
+  }
+  .floating-add-row:hover {
+    background: var(--spectrum-global-color-blue-500);
+    cursor: pointer;
+  }
+</style>
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index e6bc3e05e4..0070ba2997 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -22,6 +22,8 @@
   import HideColumnsButton from "../controls/HideColumnsButton.svelte"
   import AddRowButton from "../controls/AddRowButton.svelte"
   import RowHeightButton from "../controls/RowHeightButton.svelte"
+  import NewRowTop from "./NewRowTop.svelte"
+  import FloatingAddRowButton from "../controls/FloatingAddRowButton.svelte"
   import {
     MaxCellRenderHeight,
     MaxCellRenderWidthOverflow,
@@ -128,9 +130,13 @@
           <GridBody />
         </div>
         <div class="overlays">
+          <NewRowTop />
           <ResizeOverlay />
           <ReorderOverlay />
           <BetaButton />
+          {#if allowAddRows}
+            <FloatingAddRowButton />
+          {/if}
           <ScrollOverlay />
           <MenuOverlay />
         </div>
diff --git a/packages/frontend-core/src/components/grid/layout/NewRowTop.svelte b/packages/frontend-core/src/components/grid/layout/NewRowTop.svelte
index 5b92bc30fc..fcb8aca059 100644
--- a/packages/frontend-core/src/components/grid/layout/NewRowTop.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewRowTop.svelte
@@ -89,7 +89,7 @@
           style="flex: 0 0 {width}px"
           class:scrolled={$scrollLeft > 0}
         >
-          <GridCell width={GutterWidth} {rowHovered} {rowFocused}>
+          <GridCell width={GutterWidth} {rowHovered} rowFocused>
             <div class="gutter">
               <div class="number">1</div>
               {#if $config.allowExpandRows}
@@ -106,11 +106,10 @@
             {@const cellId = `new-${$stickyColumn.name}`}
             <DataCell
               {cellId}
+              rowFocused
               column={$stickyColumn}
               row={newRow}
-              {rowHovered}
               focused={$focusedCellId === cellId}
-              {rowFocused}
               width={$stickyColumn.width}
               {updateValue}
               rowIdx={0}